diff --git a/index.html b/index.html new file mode 100644 index 0000000..d2d4c2d --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + QRCode Generator + + + + +

QR Code Generator

+
+
+ +
+
+ + +
+
+ +
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..c3cc0a9 --- /dev/null +++ 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"; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..13f264e --- /dev/null +++ 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; +} \ No newline at end of file