first commit

everything works
nothearty · Aug 2, 2023 · 851e76f · 851e76f
1 parent 6b234d5
commit 851e76f
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QRCode Generator</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+    <h1 >QR Code Generator</h1>
+    <div class="container">
+        <div class="text-input">
+            <input type="text" id="url-input" placeholder="Enter a URL">
+        </div>
+        <div class="buttons">
+            <input type="button" value="Generate" class="generate-btn">
+            <i class="fa-solid fa-download fa-xl"></i>
+        </div>
+        <div id="qrcode">
+            <img id="qr-img">
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,55 @@
+const url_input = document.getElementById('url-input');
+const generate_btn = document.querySelector('.generate-btn');
+const download_btn = document.querySelector('.fa-solid');
+const qr_img = document.getElementById('qr-img');
+const container = document.querySelector('.container');
+
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+console.log(generate_btn)
+generate_btn.addEventListener('click', () => {
+    console.log("ciao")
+    const url = url_input.value;
+    if (url === '') {
+        return alert('Please enter a URL');
+    }
+
+    url_input.value = '';
+    container.style.height = "400px";
+    sleep(200).then(() => {
+        set_style_to_image(`https://api.qrserver.com/v1/create-qr-code/?size=720x720&data=${url}`);
+
+    });
+
+});
+
+
+function downloadImage(imageSrc) {
+    const imageUrl = imageSrc;
+
+    const downloadLink = document.createElement('a');
+    downloadLink.href = imageUrl;
+    downloadLink.download = 'QRCODE.PNG';
+    downloadLink.target = '_blank';
+    downloadLink.click();
+}
+
+
+
+download_btn.addEventListener('click', () => {
+    if (qr_img.src === '') {
+        return alert('Please generate a QR code first');
+    }
+    downloadImage(qr_img.src)
+});
+
+
+function set_style_to_image(src) {
+    qr_img.src = src;
+    qr_img.style.transition = "0.2s";
+    qr_img.style.width = "200px";
+    qr_img.style.height = "200px";
+    qr_img.style.border = "5px solid white";
+    qr_img.style.borderRadius = "10px";
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,83 @@
+@import url('https://fonts.googleapis.com/css2?family=Livvic&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Livvic', sans-serif;
+}
+
+html {
+    background-color: #333;
+}
+
+h1 {
+    text-align: center;
+    margin: 15px
+}
+
+.container {
+    border-radius: 10px;
+    transition: 0.3s;
+    width: 500px;
+    height: 100px;
+    border: 1px solid white;
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.generate-btn {
+    width: 100px;
+    height: 30px;
+    border: none;
+    cursor: pointer;
+    margin: 0 auto;
+}
+
+
+.generate-btn:hover {
+    background-color: gray;
+    color: white;
+    transition: 0.2s;
+}
+
+#url-input {
+    width: 300px;
+    height: 30px;
+    margin: 5px auto;
+    border: none;
+    border-bottom: 1px solid white;
+    background-color: transparent;
+    color: white;
+    text-align: center;
+    outline: none;
+}
+
+#url-input::placeholder {
+    color: white;
+}
+
+
+
+.icon {
+    width: 24px;
+}
+
+.fa-solid {
+    font-size: 24px;
+    margin-left: 15px;
+    cursor: pointer;
+    color: white;
+}
+
+.fa-solid:hover {
+    color: gray;
+    transition: 0.2s;
+}
+
+#qr-img {
+    margin-top: 45px;
+}