initial commit

Dragonfly-30 · Sep 18, 2024 · dab0e53 · dab0e53
commit dab0e53
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>QR Code Generator</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class = "main">
+      <h1>
+        QR Code Generator
+      </h1>
+      <form class = "container">
+        <input name = "qr-input" class="qr-input" placeholder="enter a URL or a type anything" autofocus required>
+        <button class="qr-button" type="submit">Generate a QR</button>
+      </form>
+      <img class="qr-img" src="" alt="">
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,16 @@
+const form = document.getElementsByClassName("container")[0]; 
+const button = form.querySelector(".qr-button");
+const qrImage = document.querySelector(".qr-img")
+const qrInput = form.querySelector(".qr-input");
+
+console.log(form, button, qrImage)
+
+form.addEventListener("submit", function(event){
+  event.preventDefault();
+  const input = qrInput.value;
+
+
+  const image = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${input}`;
+  qrImage.src = image;
+
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,63 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body{
+  background-color: antiquewhite;
+  /* border: 1px solid black; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.main{
+  display: flex;
+  /* width: 50vh; */
+  flex-direction: column;
+  border: 1px solid black;
+  height : 70vh;
+  width: 80vh; 
+  border-radius: 20px;
+}
+
+.main h1{
+  /* display: block; */
+  padding: 20px;
+  margin-bottom: 5px;
+  text-align: center;
+  background-color: black;
+  color: white;
+  border-radius: 0px;
+
+}
+
+.qr-input{
+  width: 90%;
+  margin: 20px;
+  padding: 15px;
+  border-radius: 10px;
+  border: none;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
+}
+
+.qr-button{
+  width: 90%;
+  margin: 20px;
+  margin-top: 1px;
+  padding: 15px;
+  border-radius: 10px;
+  border: none;
+  background-color: green;
+  color: white;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
+}
+
+.qr-img{
+  width: 150px;
+  height: 150px;
+  margin: 20px auto; /* This centers the image */
+  border: 1px solid black;
+}