Hi there! 👋
Have you ever seen those cool square barcodes that you scan with your phone? Those are called QR Codes. Today, we are going to build a machine that makes them!
Don't worry if you've never written code before. Think of this like building a sandwich:
- HTML is the bread (the structure).
- CSS is the presentation (making it look good).
- JavaScript is the flavor (making it actually do something).
By the end of this guide, you will have your very own tool that takes any text and turns it into a magical scannable image.
- ✓Learn what HTML tags are
- ✓Understand how computers 'draw' images
- ✓Make buttons that actually work
- ✓Customize colors like an artist
- ✓Download your creation
Step 1: The Box (HTML) 📦
First, we need a box to put our tool inside. In coding, we call this a "container" or a div. It keeps everything neat and tidy so it doesn't float away on the page.
We give it a name ID: ai-qr-card. This is like writing your name on your lunchbox so you can find it later.
<div id="ai-qr-card">
<h2>🎨 My QR Studio</h2>
<p>Type below to make magic happen!</p>
<!-- We will put everything else inside here -->
</div>
Step 2: The Typer (Input) ⌨️
We need a place to type the secret message or website link. We use an <input> tag for this.
We also want to pick colors! So we add two special inputs that look like color pickers. One for the Dots (foreground) and one for the Background.
<div class="input-section">
<!-- The Text Box -->
<label>Type your link here:</label>
<input type="text" id="qr-text" placeholder="e.g. fasttools.store" value="https://google.com">
<!-- The Paint Pots -->
<div class="color-row">
<div>
<label>Dots Color:</label>
<input type="color" id="color-dark" value="#000000">
</div>
<div>
<label>Background:</label>
<input type="color" id="color-light" value="#ffffff">
</div>
</div>
</div>
Step 3: The Magic Button 🚀
We need a button to tell the computer "Go!". We create a <button> tag.
Notice the part that says onclick="generateQR()". This is a special instruction. It tells the button: "When someone clicks you, run the spell called generateQR!"
<button onclick="generateQR()">✨ Make QR Code</button>
Step 4: The Drawing Board (Canvas) 🖼️
This part is cool. We need a special area where the computer can draw the black-and-white pixels. We call this a <canvas>.
Think of it like a blank piece of paper. Right now it's empty, but our code will draw on it soon.
<div id="qr-result-area">
<canvas id="qr-canvas"></canvas>
</div>
Step 5: Getting Help (The Library) 📚
Drawing a QR code pixel-by-pixel is really hard math. We don't want to do hard math!
So, we are going to borrow a "Library". In coding, a library is a collection of code that someone else wrote to help us. We are using a library called qrcode.js that knows exactly how to draw QR codes.
Copy this line and put it at the very top of your file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode/1.5.1/qrcode.min.js"></script>
Step 6: The Brain (JavaScript) 🧠
Now we write the logic. We need to create that generateQR spell we talked about in Step 3.
Here is what the brain does, line by line:
- Find the text the user typed.
- Find the colors the user picked.
- Find the canvas (the paper).
- Tell the Library to draw the code on the canvas using those colors.
<script>
function generateQR() {
// 1. Get the text
var text = document.getElementById('qr-text').value;
// 2. Get the colors
var darkColor = document.getElementById('color-dark').value;
var lightColor = document.getElementById('color-light').value;
// 3. Get the paper (canvas)
var paper = document.getElementById('qr-canvas');
// 4. Draw it!
QRCode.toCanvas(paper, text, {
width: 300,
color: {
dark: darkColor,
light: lightColor
}
}, function (error) {
if (error) console.error(error);
console.log('Success! QR Code drawn.');
});
}
</script>
Step 7: Saving Your Art (Download) 📥
What if you want to save it and print it out? We can write a tiny helper function called downloadQR.
It takes the picture from the canvas and turns it into a generic image file (PNG) that your computer understands.
function downloadQR() {
var paper = document.getElementById('qr-canvas');
// Turn drawing into a link
var imageLink = document.createElement('a');
imageLink.download = "my-qr-code.png";
imageLink.href = paper.toDataURL("image/png");
// Click the link automatically
imageLink.click();
}
Add a download button to your HTML so you can use this:
<button onclick="downloadQR()" class="secondary-btn">💾 Save Image</button>
Step 8: Automatic Updates ⚡
It's annoying to click the "Make" button every time you change a letter. Let's make it instant!
We simply tell the computer: "Hey, whenever the input changes, run the generateQR spell again."
// Add this at the bottom of your script
document.getElementById('qr-text').addEventListener('input', generateQR);
document.getElementById('color-dark').addEventListener('input', generateQR);
document.getElementById('color-light').addEventListener('input', generateQR);
// Run it once when we start so the box isn't empty
window.onload = generateQR;
Step 9: Make it Pretty (CSS) 🎨
Finally, let's add some "makeup" (CSS) so it doesn't look boring. We'll add rounded corners, a shadow to make it pop, and some nice colors for the buttons.
<style>
body {
background-color: #f0fdf4; /* Light green background */
font-family: sans-serif;
}
#ai-qr-card {
background: white;
padding: 30px;
border-radius: 20px; /* Rounded corners */
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
max-width: 400px;
margin: 50px auto; /* Centers it */
text-align: center;
}
/* Style the text box */
input[type="text"] {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
}
/* Style the main button */
button {
background: #4f46e5; /* Nice purple-blue */
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
width: 100%;
margin-top: 10px;
}
button:hover {
background: #4338ca; /* Darker when hovering */
}
/* Style the save button differently */
.secondary-btn {
background: #f3f4f6;
color: #333;
border: 1px solid #ddd;
}
canvas {
margin-top: 20px;
border-radius: 10px;
}
</style>
Step 10: Put it All Together! 🧩
You did it! You have all the pieces.
Here is the full, complete code. You can copy this whole block, save it as a file named my-qr-tool.html on your desktop, and double-click it. It will open in your browser and work instantly!
<!DOCTYPE html>
<html>
<head>
<title>My QR Studio</title>
<!-- 1. The Library Helper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode/1.5.1/qrcode.min.js"></script>
<style>
/* 2. The Styles (Make it pretty) */
body { background: #eef2ff; font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; padding: 20px; }
.card {
background: white;
padding: 2rem;
border-radius: 20px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
max-width: 380px;
margin: 0 auto;
border: 4px solid #c7d2fe;
}
h2 { color: #4338ca; margin-top: 0; text-align: center; }
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 2px solid #e0e7ff;
border-radius: 10px;
box-sizing: border-box;
}
.color-area {
display: flex;
gap: 10px;
margin-bottom: 15px;
background: #f5f3ff;
padding: 10px;
border-radius: 10px;
}
.color-box { flex: 1; text-align: center; font-size: 12px; }
input[type="color"] { height: 40px; border: none; cursor: pointer; background: none; }
button {
width: 100%;
padding: 12px;
border: none;
border-radius: 12px;
font-weight: bold;
font-size: 16px;
cursor: pointer;
transition: 0.2s;
}
.btn-make { background: #4f46e5; color: white; margin-bottom: 10px; }
.btn-make:hover { background: #4338ca; transform: scale(1.02); }
.btn-save { background: white; border: 2px solid #e5e7eb; color: #374151; }
.btn-save:hover { background: #f9fafb; }
#canvas-box {
display: flex;
justify-content: center;
margin-top: 20px;
padding: 10px;
background: white;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="card">
<h2>🎨 QR Art Studio</h2>
<p style="text-align:center; color:#666;">Create your own scannable codes!</p>
<!-- 3. The Inputs -->
<label>What should it say?</label>
<input type="text" id="qr-input" value="https://fasttools.store" placeholder="Type a link...">
<div class="color-area">
<div class="color-box">
<label>Dots Color</label><br>
<input type="color" id="qr-fg" value="#000000">
</div>
<div class="color-box">
<label>Background</label><br>
<input type="color" id="qr-bg" value="#ffffff">
</div>
</div>
<!-- 4. The Canvas -->
<div id="canvas-box">
<canvas id="qr-canvas"></canvas>
</div>
<button class="btn-make" onclick="generate()">🔄 Refresh Code</button>
<button class="btn-save" onclick="download()">💾 Save as Image</button>
</div>
<!-- 5. The Logic -->
<script>
// These specific variables point to our HTML elements
var canvas = document.getElementById('qr-canvas');
var input = document.getElementById('qr-input');
var fg = document.getElementById('qr-fg'); // Foreground (Dots)
var bg = document.getElementById('qr-bg'); // Background
// The Main Function
function generate() {
// If there is no text, don't do anything
if(!input.value) return;
// Call the library to draw
QRCode.toCanvas(canvas, input.value, {
width: 200,
margin: 2,
color: {
dark: fg.value,
light: bg.value
}
}, function (error) {
if (error) console.error("Oh no, an error! " + error);
});
}
// The Download Function
function download() {
var link = document.createElement('a');
link.download = 'my-cool-qr.png';
link.href = canvas.toDataURL();
link.click();
}
// Listen for changes (so it updates automatically)
input.addEventListener('keyup', generate);
fg.addEventListener('input', generate);
bg.addEventListener('input', generate);
// Run it once right away!
generate();
</script>
</body>
</html>
Conclusion
You did it! 🌟
You just built a real, working web tool using code. You learned about containers, inputs, libraries, and functions.
You can now use this tool to make QR codes for your friends, your family, or your own projects. Want to share your Wi-Fi password easily? Make a QR code for it! Want to link to your favorite YouTube video? Make a QR code for it!
Try the Super Advanced Version »