Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds QR Code Generator API 🧩 #442

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Adds QR Code Generator API 🧩 #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
12fb413
Adds QR Code Generator API
SanskarSinghiit Aug 9, 2024
95b3440
Update README.md
SanskarSinghiit Aug 9, 2024
7601bcc
Update README.md
SanskarSinghiit Aug 9, 2024
b3d86db
Update README.md
SanskarSinghiit Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions New_APIs/QR_Code_Generator_API/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)

25 changes: 25 additions & 0 deletions New_APIs/QR_Code_Generator_API/generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>QR Code Generator</h1>
<p>Paste a url or enter text to create QR code</p>
</header>
<div class="form">
<input type="text" id="text-input" placeholder="Enter text or url">
<button>Generate QR Code</button>
</div>
<div class="qr-code">
<img src="" alt="qr-code">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Binary file added New_APIs/QR_Code_Generator_API/generator/qr-code.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions New_APIs/QR_Code_Generator_API/generator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = "";
}
});
112 changes: 112 additions & 0 deletions New_APIs/QR_Code_Generator_API/generator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
37 changes: 37 additions & 0 deletions New_APIs/QR_Code_Generator_API/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator & Scanner</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="wrapper">
<header>
<h2>QR Code Generator & Scanner</h2>
</header>
<div class="content">
<div class="column">
<div class="grid">
<a href="/generator/"><i class="uil uil-qrcode-scan"></i>
<h3>Generator</h3>
</a>
</div>
<div class="grid">
<a href="/scanner/">
<i class="uil uil-capture"></i>
<h3>Scanner</h3>
</a>
</div>

</div>
</div>
</div>
</body>

</html>
34 changes: 34 additions & 0 deletions New_APIs/QR_Code_Generator_API/scanner/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Scanner</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header>
<h2>QR Code Scanner</h2>
</header>
<form action="#">
<input type="file" hidden>
<img src="" alt="qr-code">
<div class="content">
<i class="fas fa-cloud-upload"></i>
<!-- <i class="fa-solid fa-qrcode"></i> -->
<p>Upload QR Code to Scan</p>
</div>
</form>
<div class="details">
<textarea disabled id="text-area" name="text-area"></textarea>
<div class="buttons">
<button class="close">Close</button>
<button class="copy">Copy Text</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Loading
Loading