diff --git a/Calculators/QR-Code-Generator-Calculator/README.md b/Calculators/QR-Code-Generator-Calculator/README.md new file mode 100644 index 000000000..896545df1 --- /dev/null +++ b/Calculators/QR-Code-Generator-Calculator/README.md @@ -0,0 +1,15 @@ +#

QR Code Generator Calculator

+ +## Description :- + +Generates the QR Code according to the given input. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/31af8b35-48c1-41ec-ade2-705aade649c5) diff --git a/Calculators/QR-Code-Generator-Calculator/index.html b/Calculators/QR-Code-Generator-Calculator/index.html new file mode 100644 index 000000000..72d0024ee --- /dev/null +++ b/Calculators/QR-Code-Generator-Calculator/index.html @@ -0,0 +1,20 @@ + + + + + + QR CODE GENERATOR + + + +
+
+

QR CODE GENERATOR

+ + + +
+ +
+ + \ No newline at end of file diff --git a/Calculators/QR-Code-Generator-Calculator/script.js b/Calculators/QR-Code-Generator-Calculator/script.js new file mode 100644 index 000000000..e1906b0b8 --- /dev/null +++ b/Calculators/QR-Code-Generator-Calculator/script.js @@ -0,0 +1,18 @@ +let input = document.querySelector('.input-box'); +let submit = document.querySelector('.submit'); +let img = document.querySelector('.box img'); + +submit.addEventListener('click' , ()=> { + img.classList.add('hidden'); + if(input.value == "") { + alert('Please Provide Valid Details !'); + img.classList.add('hidden'); + } else { + submit.innerHTML = "Generating Qr Code..."; + setTimeout(()=> { + submit.innerHTML = "Generate Qr Code"; + img.classList.remove('hidden'); + img.setAttribute('src' , `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${input.value}`); + } , 500); + } +}) \ No newline at end of file diff --git a/Calculators/QR-Code-Generator-Calculator/style.css b/Calculators/QR-Code-Generator-Calculator/style.css new file mode 100644 index 000000000..9ca70452b --- /dev/null +++ b/Calculators/QR-Code-Generator-Calculator/style.css @@ -0,0 +1,68 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + width: 100%; + min-height: 100vh; + background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); + display: flex; + justify-content: center; + align-items: center; + letter-spacing: 1.2px; +} + +.box { + width: 100%; + max-width: 350px; + min-width: 240px; + box-shadow: 0px 0px 10px #0093E9 , 0px 0px 20px #0093E9 , 0px 0px 40px #ffffff; + display: flex; + flex-direction: column; + text-align: center; + gap: 20px; + padding: 20px 10px 40px; +} + +.heading { + font-size: 30px; + padding: 0 5px; + color: #ffffff; +} + +.input-box { + font-size: 28px; + outline: none; + border: none; + border-radius: 5px; + padding: 5px 10px 5px; + letter-spacing: 1px; +} + +.submit { + font-size: 24px; + border: none; + outline: none; + box-sizing: border-box; + background-color: #252B4880; + color: white; + padding: 4px 10px; + border-radius: 5px; + transition: all 0.1s ease-in-out; +} + +.submit:hover { + background-color: #252B4895; + transform: scale(1.02); + transition: all 0.1s ease-in-out; +} + +img { + margin: 0 auto; +} + +.hidden { + display: none; +} \ No newline at end of file diff --git a/index.html b/index.html index f1a73f922..07ff5b3cd 100644 --- a/index.html +++ b/index.html @@ -1807,6 +1807,20 @@

Calculates the aspect ratio of the specified height and width.

+
+
+

QR Code Generator Calculator

+

Generates the QR Code according to the given input.

+
+ + + + + Source Code + +
+
+