From a7391b7bfb07754c1ad44bae49e9896547f91109 Mon Sep 17 00:00:00 2001 From: AftabMankapure Date: Sat, 10 Feb 2024 00:08:44 +0530 Subject: [PATCH 1/3] qr code --- Calculators/QR-Code-Calculator/index.html | 200 ++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 Calculators/QR-Code-Calculator/index.html diff --git a/Calculators/QR-Code-Calculator/index.html b/Calculators/QR-Code-Calculator/index.html new file mode 100644 index 000000000..0c15c06d7 --- /dev/null +++ b/Calculators/QR-Code-Calculator/index.html @@ -0,0 +1,200 @@ + + + + + + + QR CODE GENERATOR + + + + + + Back + +
+
+

QR CODE GENERATOR

+ + + +
+
+ + + From 94e7b8e6dc8677bada97f11f26227b825f26df7d Mon Sep 17 00:00:00 2001 From: AftabMankapure Date: Sat, 10 Feb 2024 17:31:51 +0530 Subject: [PATCH 2/3] qr code --- Calculators/QR-Code-Calculator/README.md | 15 ++ Calculators/QR-Code-Calculator/index.html | 181 +--------------------- Calculators/QR-Code-Calculator/script.js | 17 ++ Calculators/QR-Code-Calculator/style.css | 156 +++++++++++++++++++ index.html | 14 ++ 5 files changed, 204 insertions(+), 179 deletions(-) create mode 100644 Calculators/QR-Code-Calculator/README.md create mode 100644 Calculators/QR-Code-Calculator/script.js create mode 100644 Calculators/QR-Code-Calculator/style.css diff --git a/Calculators/QR-Code-Calculator/README.md b/Calculators/QR-Code-Calculator/README.md new file mode 100644 index 000000000..100b0cacb --- /dev/null +++ b/Calculators/QR-Code-Calculator/README.md @@ -0,0 +1,15 @@ +#

QR Code Calculator

+ +## Description :- + +It can take a input form user and generate QR code for that perticular data. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![QR](https://github.com/Rakesh9100/CalcDiverse/assets/125949765/97a8e46a-7b89-44b0-9abe-d2693abc91e5) diff --git a/Calculators/QR-Code-Calculator/index.html b/Calculators/QR-Code-Calculator/index.html index 0c15c06d7..ec6f07ae3 100644 --- a/Calculators/QR-Code-Calculator/index.html +++ b/Calculators/QR-Code-Calculator/index.html @@ -5,188 +5,10 @@ QR CODE GENERATOR - - + - Back -

QR CODE GENERATOR

@@ -195,6 +17,7 @@

QR CODE GENERATOR

+ diff --git a/Calculators/QR-Code-Calculator/script.js b/Calculators/QR-Code-Calculator/script.js new file mode 100644 index 000000000..cdbd412d9 --- /dev/null +++ b/Calculators/QR-Code-Calculator/script.js @@ -0,0 +1,17 @@ +function generateQRCode() { + let input = document.getElementById('input'); + let img = document.getElementById('qrCodeImage'); + + img.classList.add('hidden'); + if (input.value == "") { + alert('Please Provide Valid Details!'); + img.classList.add('hidden'); + } else { + document.querySelector('.submit').innerHTML = "Generating Qr Code..."; + setTimeout(() => { + document.querySelector('.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-Calculator/style.css b/Calculators/QR-Code-Calculator/style.css new file mode 100644 index 000000000..91d9fc834 --- /dev/null +++ b/Calculators/QR-Code-Calculator/style.css @@ -0,0 +1,156 @@ +* { + 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; +} + +.button { + position: absolute; + padding: 10px 22px; + border-radius: 6px; + border: none; + color: #fff; + cursor: pointer; + background-color: #7d2ae8; + transition: all 0.2s ease; + top: 10px; + left: 10px; +} + +.button:active { + transform: scale(0.96); +} + +.button:before, +.button:after { + position: absolute; + content: ""; + width: 150%; + left: 50%; + height: 100%; + transform: translateX(-50%); + z-index: -1000; + background-repeat: no-repeat; +} + +.button.animate::before { + top: -70%; + background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%); + background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, + 10% 10%, 18% 18%; + animation: greentopBubbles ease-in-out 0.6s forwards infinite; +} + +@keyframes greentopBubbles { + 0% { + background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, + 40% 90%, 55% 90%, 70% 90%; + } + 50% { + background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, + 50% 50%, 65% 20%, 90% 30%; + } + 100% { + background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, + 50% 40%, 65% 10%, 90% 20%; + background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; + } +} + +.button.animate::after { + bottom: -70%; + background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%), + radial-gradient(circle, #7d2ae8 20%, transparent 20%); + background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%; + animation: greenbottomBubbles ease-in-out 0.6s forwards infinite; +} + +@keyframes greenbottomBubbles { + 0% { + background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, + 70% -10%, 70% 0%; + } + 50% { + background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, + 105% 0%; + } + 100% { + background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, + 110% 10%; + background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; + } +} \ No newline at end of file diff --git a/index.html b/index.html index cbc4907d1..8ad3c41ec 100644 --- a/index.html +++ b/index.html @@ -1765,6 +1765,20 @@

Calculates the Probability of different events.

+
+
+

QR Code Calculater

+

Generate QR code for any text.

+
+ + + + + Source Code + +
+
+
From 4c71bf8b0b44737c219ecb7ae39e9dc0baaea70a Mon Sep 17 00:00:00 2001 From: AftabMankapure Date: Sat, 10 Feb 2024 17:57:57 +0530 Subject: [PATCH 3/3] readme update --- Calculators/QR-Code-Calculator/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Calculators/QR-Code-Calculator/README.md b/Calculators/QR-Code-Calculator/README.md index 100b0cacb..fbbdfe8b0 100644 --- a/Calculators/QR-Code-Calculator/README.md +++ b/Calculators/QR-Code-Calculator/README.md @@ -12,4 +12,4 @@ It can take a input form user and generate QR code for that perticular data. ## Screenshots :- -![QR](https://github.com/Rakesh9100/CalcDiverse/assets/125949765/97a8e46a-7b89-44b0-9abe-d2693abc91e5) +![QR-CD](https://github.com/Rakesh9100/CalcDiverse/assets/125949765/9d307d2a-d258-41ea-a91a-d39d912e1962)