diff --git a/New_APIs/QR_Code_Generator_API/README.md b/New_APIs/QR_Code_Generator_API/README.md new file mode 100644 index 0000000..6dd5110 --- /dev/null +++ b/New_APIs/QR_Code_Generator_API/README.md @@ -0,0 +1,14 @@ +# QR Code Generator API + +A lightweight API for generating QR codes using HTML, CSS, and JavaScript. + +## Features + +- Generates QR codes from text +- Simple interface +- Easy to use and integrate + +## Screenshots + +![image](https://github.com/user-attachments/assets/32b4aefa-9015-4796-91b3-bc00d90a1d04) + diff --git a/New_APIs/QR_Code_Generator_API/generator/index.html b/New_APIs/QR_Code_Generator_API/generator/index.html new file mode 100644 index 0000000..e60db97 --- /dev/null +++ b/New_APIs/QR_Code_Generator_API/generator/index.html @@ -0,0 +1,25 @@ + + + + + + QR Code Generator + + + +
+
+

QR Code Generator

+

Paste a url or enter text to create QR code

+
+
+ + +
+
+ qr-code +
+
+ + + \ No newline at end of file diff --git a/New_APIs/QR_Code_Generator_API/generator/qr-code.png b/New_APIs/QR_Code_Generator_API/generator/qr-code.png new file mode 100644 index 0000000..207702a Binary files /dev/null and b/New_APIs/QR_Code_Generator_API/generator/qr-code.png differ diff --git a/New_APIs/QR_Code_Generator_API/generator/script.js b/New_APIs/QR_Code_Generator_API/generator/script.js new file mode 100644 index 0000000..35eafa7 --- /dev/null +++ b/New_APIs/QR_Code_Generator_API/generator/script.js @@ -0,0 +1,24 @@ +const wrapper = document.querySelector(".wrapper"), + qrInput = wrapper.querySelector(".form input"), + generateBtn = wrapper.querySelector(".form button"), + qrImg = wrapper.querySelector(".qr-code img"); +let preValue; + +generateBtn.addEventListener("click", () => { + let qrValue = qrInput.value.trim(); + if (!qrValue || preValue === qrValue) return; + preValue = qrValue; + generateBtn.innerText = "Generating QR Code..."; + qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`; + qrImg.addEventListener("load", () => { + wrapper.classList.add("active"); + generateBtn.innerText = "Generate QR Code"; + }); +}); + +qrInput.addEventListener("keyup", () => { + if (!qrInput.value.trim()) { + wrapper.classList.remove("active"); + preValue = ""; + } +}); \ No newline at end of file diff --git a/New_APIs/QR_Code_Generator_API/generator/style.css b/New_APIs/QR_Code_Generator_API/generator/style.css new file mode 100644 index 0000000..abd88ca --- /dev/null +++ b/New_APIs/QR_Code_Generator_API/generator/style.css @@ -0,0 +1,112 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #927dfc; +} + +.wrapper { + height: 207px; + max-width: 370px; + background: #fff; + border-radius: 5px; + padding: 16px 20px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + transition: height 0.2s ease; +} + +.wrapper.active { + height: 475px; +} + +header h1 { + font-size: 22px; + font-weight: 600; +} + +header p { + font-size: 15px; + color: #474747; + /* color: #9b88f9; */ + margin-top: 4px; +} + +.wrapper .form { + margin: 20px 0 25px; +} + +.form :where(input, button) { + width: 100%; + height: 45px; + border: none; + outline: none; + border-radius: 4px; +} + +.form input { + font-size: 17px; + border: 1px solid #999; + padding: 0 10px; +} + +.form input:focus { + border-color: #927dfc; +} + +.form button { + background-color: #927dfc; + color: #fff; + font-size: 17px; + margin-top: 15px; + cursor: pointer; +} + +.wrapper .qr-code { + display: flex; + align-items: center; + justify-content: center; + padding: 30px 0; + border: 1px solid #ccc; + border-radius: 4px; + opacity: 0; + pointer-events: none; +} + +.wrapper.active .qr-code { + opacity: 1; + pointer-events: auto; + transition: opacity 0.5s 0.05s ease; +} + +.qr-code img { + max-height: 180px; +} + +@media (max-width: 430px) { + .wrapper { + height: 220px; + padding: 16px 20px; + } + .wrapper.active { + height: 486px; + } + header p { + color: #696969; + } + .form :where(input, button) { + height: 50px; + } + .qr-code img { + width: 180px; + } +} diff --git a/New_APIs/QR_Code_Generator_API/index.html b/New_APIs/QR_Code_Generator_API/index.html new file mode 100644 index 0000000..cea8b3d --- /dev/null +++ b/New_APIs/QR_Code_Generator_API/index.html @@ -0,0 +1,37 @@ + + + + + + + QR Code Generator & Scanner + + + + + + +
+
+

QR Code Generator & Scanner

+
+
+
+
+ +

Generator

+ +
+
+ + +

Scanner

+ +
+ +
+
+
+ + + \ No newline at end of file diff --git a/New_APIs/QR_Code_Generator_API/scanner/index.html b/New_APIs/QR_Code_Generator_API/scanner/index.html new file mode 100644 index 0000000..16b9aff --- /dev/null +++ b/New_APIs/QR_Code_Generator_API/scanner/index.html @@ -0,0 +1,34 @@ + + + + + + QR Code Scanner + + + + +
+
+

QR Code Scanner

+
+
+ + qr-code +
+ + +

Upload QR Code to Scan

+
+
+
+ +
+ + +
+
+
+ + + \ No newline at end of file diff --git a/New_APIs/QR_Code_Generator_API/scanner/qr-code.svg b/New_APIs/QR_Code_Generator_API/scanner/qr-code.svg new file mode 100644 index 0000000..f410b69 --- /dev/null +++ b/New_APIs/QR_Code_Generator_API/scanner/qr-code.svg @@ -0,0 +1,480 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/New_APIs/QR_Code_Generator_API/scanner/script.js b/New_APIs/QR_Code_Generator_API/scanner/script.js new file mode 100644 index 0000000..e7a6397 --- /dev/null +++ b/New_APIs/QR_Code_Generator_API/scanner/script.js @@ -0,0 +1,39 @@ +const wrapper = document.querySelector('.wrapper'), + form = wrapper.querySelector('form'), + fileInp = form.querySelector('input'), + infoText = form.querySelector('p'), + closeBtn = wrapper.querySelector(".close"), + copyBtn = wrapper.querySelector(".copy"); + +function fetchRequest(formData, file) { + infoText.innerText = "Scanning QR Code..."; + fetch("https://api.qrserver.com/v1/read-qr-code/", { + method: "POST", body: formData + }).then(res => res.json()).then(result => { + result = result[0].symbol[0].data; + infoText.innerText = result ? "Upload QR Code to Scan" : "Couldn't Scan QR Code"; + if (!result) return; + wrapper.querySelector("textarea").innerText = result; + form.querySelector("img").src = URL.createObjectURL(file); + wrapper.classList.add("active"); + }).catch(() => { + infoText.innerText = "Couldn't Scan QR Code"; + }); +} + +fileInp.addEventListener('change', e => { + let file = e.target.files[0]; + if (!file) return; + let formData = new FormData(); + formData.append("file", file); + fetchRequest(formData, file); +}); + +copyBtn.addEventListener("click", () => { + let text = wrapper.querySelector("textarea").textContent; + navigator.clipboard.writeText(text); + +}); + +form.addEventListener('click', () => fileInp.click()); +closeBtn.addEventListener('click', () => wrapper.classList.remove("active")); \ No newline at end of file diff --git a/New_APIs/QR_Code_Generator_API/scanner/style.css b/New_APIs/QR_Code_Generator_API/scanner/style.css new file mode 100644 index 0000000..2d9ea03 --- /dev/null +++ b/New_APIs/QR_Code_Generator_API/scanner/style.css @@ -0,0 +1,137 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #927dfc; +} + +.wrapper { + height: 295px; + width: 420px; + border-radius: 4px; + background: #fff; + padding: 30px 30px 35px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + transition: height 0.3s ease; +} + +.wrapper.active { + height: 100%; +} + +.wrapper form { + margin-top: 10px; + height: 200px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + border: 1px dashed #999; + border-radius: 4px; + cursor: pointer; +} + +.wrapper.active form { + height: 215px; + pointer-events: none; +} + +form img { + display: none; + max-width: 150px; +} + +.wrapper.active form img { + display: block; +} + +.wrapper.active form .content { + display: none; +} + +form .content i { + color: #927dfc; + font-size: 45px; +} + +form .content p { + color: #927dfc; + font-size: 16px; + margin-top: 10px; +} + +.wrapper .details { + opacity: 0; + pointer-events: none; + margin-top: 20px; +} + +.wrapper.active .details { + opacity: 1; + pointer-events: auto; + transition: opacity 0.5s 0.05s ease; +} + +.details textarea { + width: 100%; + height: 100px; + background: none; + color: #000; + border: 1px solid #999; + border-radius: 5px; + outline: none; + padding: 10px 15px; + font-size: 15px; + resize: none; +} + +textarea::-webkit-scrollbar { + width: 0px; +} +textarea:hover::-webkit-scrollbar-track { + background: none; +} +textarea:hover::-webkit-scrollbar-thumb { + background: #fff; + border-radius: 8px; +} + +.details .buttons { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 15px; +} + +.buttons button { + height: 40px; + width: calc(100% / 2 - 20px); + border-radius: 5px; + border: none; + outline: none; + color: #fff; + background: #927dfc; + cursor: pointer; + font-size: 15px; + font-weight: 500; +} + +@media (max-width: 450px) { + .wrapper { + padding: 15px; + height: 270px; + } + .wrapper.active { + height: 100%; + } +} diff --git a/New_APIs/QR_Code_Generator_API/style.css b/New_APIs/QR_Code_Generator_API/style.css new file mode 100644 index 0000000..8a1db29 --- /dev/null +++ b/New_APIs/QR_Code_Generator_API/style.css @@ -0,0 +1,77 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +.wrapper { + height: 100%; + width: 420px; + border-radius: 4px; + background: #927dfc; + padding: 30px 30px 35px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); +} + +header h2 { + font-size: 22px; + font-weight: 600; + color: #000; + margin-bottom: 10px; +} + +.column { + display: flex; + flex-direction: column; + text-align: center; + gap: 30px; +} + +.grid { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + width: 100%; + background: #fff; + height: 150px; + cursor: pointer; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); +} + +.grid i { + font-size: 35px; + color: #927dfc; +} + +.grid h3 { + margin: 20px; + color: #000; +} + +.footer { + text-align: center; + margin-top: 50px; +} + +.grid a { + text-decoration: none; + font-size: 17px; + margin-top: 20px; +} + +.footer a { + color: #000; + text-decoration: none; +} diff --git a/New_APIs/README.md b/New_APIs/README.md index 015aa72..454e9c3 100644 --- a/New_APIs/README.md +++ b/New_APIs/README.md @@ -22,6 +22,7 @@ |[Temperature_API](./Temperature_API/)| Real-time global temperature data via HTTP requests from reliable weather sources |[Cryptocurrency_API](./Cryptocurrency_API/)|This demonstrates how a convert Cryptocurrency and spefic currency to dollars only| |[Weather_Forecast_API](./Weather_Forecast_API/)|This demonstrates we can know weather report via api and spefic locactions only| +|[QR_Code_Generator_API](./QR_Code_Generator_API/)|A lightweight API for generating QR codes using HTML, CSS, and JavaScript.|