JavaScript Notes
HubYour First JavaScript Program — Hello World & Beyond Complete Guide 2026History of JavaScript — Complete Timeline from 1995 to 2026How JavaScript Runs — Complete Guide to Execution, Call Stack & Event LoopJavaScript Engine Explained — V8, JIT Compilation & How Code Gets FastJavaScript Use Cases — 15 Things You Can Build with JavaScript (2026)JavaScript vs Other Languages — Complete Comparison Guide 2026What is JavaScript? Complete BeginnerWhy Learn JavaScript in 2026? Career, Salary, Scope & Benefits GuideJavaScript Break Statement Tutorial – Complete Guide with ExamplesJavaScript Break and Continue Statements – Complete Guide with ExamplesJavaScript Continue Statement Tutorial – Skip Iterations with ExamplesJavaScript Do While Loop Tutorial – Execute at Least Once with ExamplesJavaScript Do-While Loop Tutorial – Complete Guide with ExamplesJavaScript For Loop Tutorial – Complete Guide with ExamplesJavaScript If Statement Tutorial – Conditional Logic with ExamplesJavaScript If Else Statement Tutorial – Complete Guide with ExamplesJavaScript If Statement Tutorial – Complete Guide with ExamplesJavaScript Nested If Statement Tutorial – Multi-Level Conditions with ExamplesNested Loops in JavaScriptJavaScript Control Flow Practice Programs – 20+ Exercises with SolutionsJavaScript Switch Statement Tutorial – Case Matching with ExamplesSwitch Statement in JavaScriptJavaScript While Loop Tutorial – Complete Guide with ExamplesJavaScript Arrow Functions Tutorial – Syntax, Use Cases & this BindingJavaScript Callback Functions Explained – Synchronous & AsynchronousJavaScript Closures Explained – Lexical Scope, Private State & MemoryJavaScript Function Declaration Tutorial – Hoisting, Syntax & ScopeJavaScript Function Expression Tutorial – Anonymous, Named & AssignedJavaScript Higher Order Functions Tutorial – map, filter, reduce & Custom HOFsJavaScript IIFE Explained – Immediately Invoked Function ExpressionJavaScript Functions Practice Programs – 20+ Exercises with SolutionsJavaScript Recursion Tutorial – Call Stack, Base Case & Recursive PatternsJavaScript Array Basics - Complete BeginnerJavaScript Array Methods - Complete Reference Guide with ExamplesJavaScript Array Programs - 20+ Practice Problems with SolutionsJavaScript Arrays Basics - Complete Guide with Examples & DiagramsJavaScript Array filter() Method - Complete Tutorial with ExamplesJavaScript filter() Method — Complete Guide with Examples 2026JavaScript Array find() Method - Complete Tutorial with ExamplesJavaScript find() & findIndex() — Complete Guide 2026JavaScript Array map() Method - Complete Tutorial with ExamplesJavaScript map() Method — Transform Arrays Complete Guide 2026JavaScript map() vs forEach() - Key Differences with ExamplesJavaScript Array push() and pop() - Complete Tutorial with ExamplesJavaScript Array reduce() Method - Complete Tutorial with ExamplesJavaScript reduce() Method — Complete Deep Dive with Examples 2026JavaScript Array shift() and unshift() - Complete Tutorial with ExamplesJavaScript Array sort() Method - Complete Tutorial with ExamplesJavaScript splice() vs slice() - Complete Tutorial with ExamplesJavaScript Object Destructuring - Complete Guide with ExamplesJavaScript Objects - Complete Guide to Object Basics with ExamplesJavaScript Object Methods - Built-in Methods & Custom Methods Complete GuideJavaScript Object Programs - Practice Problems with SolutionsJavaScript Object Properties - Keys, Values, Descriptors & Dynamic PropertiesJavaScript Rest Operator (...) - Parameters, Destructuring & Complete GuideJavaScript Spread Operator (...) - Complete Guide with ExamplesJavaScript this Keyword - Complete Guide with Binding Rules & ExamplesJavaScript String Basics - Complete Guide to Strings with ExamplesJavaScript String Methods - Complete Reference with Examples & OutputJavaScript String Programs - Practice Problems with SolutionsJavaScript String Replacing - replace(), replaceAll() & Regex Patterns GuideJavaScript String Searching Methods - includes, indexOf, startsWith, match GuideJavaScript Template Literals (ES6) - Complete Guide with Tagged TemplatesJavaScript DOM Changing Content - textContent, innerHTML, setAttribute Complete GuideJavaScript DOM Changing Styles - CSS Manipulation, classList & getComputedStyleJavaScript DOM Creating Elements - createElement, appendChild, DocumentFragment GuideJavaScript DOM Introduction - Complete Guide to Document Object ModelJavaScript DOM Traversal - Navigate Parent, Child & Sibling NodesJavaScript DOM Forms - Form Handling, Validation & FormData Complete GuideJavaScript localStorage - Complete Guide to Web Storage APIlocalStorage vs sessionStorage - JavaScript Web Storage Comparison GuideJavaScript DOM Removing Elements - remove(), removeChild() Complete GuideJavaScript DOM Selecting Elements - querySelector, getElementById Complete GuideJavaScript sessionStorage - Complete Guide to Session-Based Web StorageJavaScript Click Event - addEventListener, Event Handler Complete GuideEvent Bubbling in JavaScript – Complete Guide with Examples (2026)Event Capturing in JavaScript – Complete Guide to Capture Phase (2026)Event Delegation in JavaScript – Complete Guide with Examples (2026)JavaScript Event Object – Complete Guide with Examples (2026)JavaScript Form Events – Complete Guide with Examples (2026)JavaScript Keyboard Events – Complete Guide to keydown, keyup & Key Properties (2026)JavaScript Mouse Events – Complete Guide with Examples (2026)JavaScript Async Await - Complete Guide with Examples & Error HandlingJavaScript Call Stack - Complete Guide with Visual Diagrams & ExamplesJavaScript Callback Queue (Task Queue) - Complete Guide with DiagramsJavaScript Callbacks - Complete Guide with Callback Hell & PatternsJavaScript Event Loop - Complete Guide with Visual Diagrams & ExamplesJavaScript Fetch API - Complete Guide with Examples, Error Handling & Async/AwaitJSON in JavaScript - Complete Guide: Parse, Stringify, Fetch & Error HandlingJavaScript Promise.all, Promise.race, Promise.any, Promise.allSettled — Complete Guide 2026JavaScript Promises - Complete Guide with Chaining, Error Handling & Event LoopSynchronous vs Asynchronous JavaScript — Complete Explanation 2026JavaScript Web APIs - Complete Guide: setTimeout, fetch, DOM Events & MoreClosures in JavaScript — Complete Guide with Examples 2026Hoisting in JavaScript — Complete Guide with Examples 2026Prototype in JavaScript — Complete Guide with Examples 2026Scope in JavaScript — Complete Guide with Examples 2026Browser Object Model (BOM) in JavaScript — Complete GuideCanvas API in JavaScript — Complete Drawing & Animation GuideDrag and Drop API in JavaScript — Complete TutorialGeolocation API in JavaScript — Get User Location TutorialHistory API in JavaScript — SPA Routing & pushState GuideNotification API in JavaScript — Push Notifications TutorialService Workers in JavaScript — Offline, Caching & PWA GuideWeb Storage API in JavaScript — localStorage & sessionStorage GuideWeb Workers in JavaScript — Multithreading & Background Tasks GuideJavaScript Interview — Behavioral Questions and Soft Skills Guide 2026Common JavaScript Interview Mistakes — What to Avoid 2026JavaScript Interview Tips — Strategy and Preparation Guide 2026JavaScript Mock Interview — Practice Questions with Solutions 2026JavaScript System Design — Frontend Architecture Interview Guide 2026JavaScript apply() Method - Complete Guide with ExamplesJavaScript bind() Method - Complete Guide with ExamplesJavaScript call() Method - Complete Guide with ExamplesJavaScript call() vs apply() vs bind() - Complete Comparison GuideJavaScript Currying - Complete Guide with ExamplesJavaScript Debounce - Complete Guide with Timeline DiagramsJavaScript Execution Context - Complete Guide with Stack DiagramsJavaScript Garbage Collection - Memory Lifecycle & Mark-and-Sweep GuideJavaScript Generators - Complete Guide with yield and IterationJavaScript Hoisting - Complete Guide with var, let, const & FunctionsJavaScript Iterators - Complete Guide with Iterator ProtocolJavaScript Lexical Scope - Complete Guide with Scope Chain DiagramsJavaScript Memory Management - Complete Guide with Lifecycle DiagramsJavaScript Modules - Complete Guide with import export ExamplesJavaScript Scope - Complete Guide with var, let, const & Scope ChainJavaScript Symbols - Complete Guide with Well-Known SymbolsJavaScript Throttle - Complete Guide with Timeline DiagramsJavaScript Comments Complete Guide – Single Line, Multi-line & JSDoc with ExamplesJavaScript Data Types Complete Guide – Primitives, Objects & typeof with ExamplesJavaScript Input and Output Complete Guide – console.log, prompt, alert & DOM with ExamplesJavaScript Keywords Complete Guide – Reserved Words List with Examples for BeginnersJavaScript null vs undefined – Complete Guide with Differences, Examples & Interview Q&AJavaScript Operators Complete Guide – Arithmetic, Comparison, Logical & More with ExamplesJavaScript Strict Mode Complete Guide – JavaScript Type Conversion Complete Guide – Explicit & Implicit Coercion with ExamplesJavaScript var vs let vs const – Complete Guide with Scope, Hoisting & Best PracticesJavaScript Variables Complete Guide – Declaration, Naming Rules & Memory Model for BeginnersDeque (Double-Ended Queue) in JavaScript — Complete GuideLinked List in JavaScript — Nodes, Pointers & Operations GuideJavaScript Map — Key-Value Data Structure Complete GuideJavaScript Numbers — IEEE 754, Precision, and Number Methods GuidePriority Queue in JavaScript — Min Heap Implementation GuideQueue Data Structure in JavaScript — FIFO, Enqueue & Dequeue ExplainedJavaScript Set — Unique Values Data Structure GuideSorting Algorithms in JavaScript — Bubble, Merge, Quick Sort GuideStack Data Structure in JavaScript — LIFO, Push, Pop ExplainedJavaScript Typed Arrays — ArrayBuffer, Int32Array, Float64Array GuideJavaScript WeakMap — Weak References, Memory Management GuideJavaScript WeakSet — Complete Guide with Examples 2026Applications of JavaScript — Where JS is Used in 2026 Complete GuideJavaScript Backend Frameworks — Node.js, Express, NestJS Complete Guide 2026JavaScript Frontend Libraries — React, Vue, Angular, Svelte Complete Overview 2026JavaScript Full-Stack Frameworks — Next.js, Remix, Astro Complete Guide 2026JavaScript Career Paths & Jobs — Salary, Roles & Roadmap 2026JavaScript Libraries vs Frameworks — Difference & Examples Complete Guide 2026JavaScript Custom Errors – Extend Error Class, Custom Error Types & instanceofJavaScript Debugging – console Methods, DevTools, Breakpoints & Error Stack TracesJavaScript throw Statement – Throw Errors, Custom Messages & Error TypesJavaScript Try Catch Finally – Error Handling Complete GuideTop 30 JavaScript Closure Interview Questions & Answers 2026Top 30 JavaScript Coding Interview Questions 2026 (With Solutions)Top 25 JavaScript Event Loop Interview Questions & Answers 2026Top 50 JavaScript Interview Questions & Answers 2026Top 30 JavaScript Promise Interview Questions & Answers 202650 Tricky JavaScript Output Questions 2026 (With Answers)Build a JavaScript Calculator - Step by Step Project TutorialBuild a JavaScript Image Carousel - Step by Step Project TutorialBuild a JavaScript Counter Application - Step by Step Project TutorialBuild a JavaScript Digital Clock - Step by Step Project TutorialBuild a Dynamic Resume Builder in JavaScript - Step by Step TutorialBuild a JavaScript Email Validator - Step by Step Project TutorialBuild a JavaScript Employee Database Management App - Step by Step TutorialBuild a JavaScript Expense Tracker - Step by Step Project TutorialBuild a GitHub Profile Search App in JavaScript - Step by Step TutorialBuild a JavaScript Image Slider - Step by Step Project TutorialBuild a JavaScript Multi-Step Progress Bar - Step by Step TutorialBuild JavaScript Nested Chat Comments - Step by Step Project TutorialBuild a JavaScript Notes App - Step by Step Project TutorialBuild a JavaScript OTP Input Field - Step by Step Project TutorialBuild a JavaScript Palindrome Checker - Step by Step Project TutorialBuild a JavaScript Price Range Slider - Step by Step Project TutorialBuild a JavaScript Prime Number Checker - Step by Step Project TutorialBuild a JavaScript QR Code Generator - Step by Step Project TutorialBuild a JavaScript QR Code Scanner - Step by Step Project TutorialBuild a JavaScript Quiz App - Step by Step Project TutorialBuild a JavaScript Random Number Generator - Step by Step TutorialBuild a JavaScript Random Password Generator - Step by Step TutorialJavaScript Image Resize & Compress — Canvas API Project 2026JavaScript Responsive Admin Dashboard — DOM & CSS Project 2026JavaScript Show/Hide Password Toggle — Beginner DOM Project 2026JavaScript Sortable Filterable Table — DOM & Array Methods Project 2026JavaScript Stopwatch Project — setInterval & DOM Tutorial 2026JavaScript Student Grade Calculator — Arrays & Logic Project 2026JavaScript Task Scheduler Project — CRUD & localStorage Tutorial 2026JavaScript Tic-Tac-Toe Game — DOM Manipulation Project Tutorial 2026JavaScript Toast Notification Project — Custom Alerts Tutorial 2026Build a Todo App in JavaScript - Step by Step Project TutorialJavaScript Unicode Character Value Finder — charCodeAt & fromCharCode Project 2026JavaScript Weather App Project — Fetch API & DOM Complete Tutorial 2026JavaScript Cheat Sheet 2026 — Complete Quick ReferenceImportant JavaScript Concepts Every Developer Must Know in 2026JavaScript One Shot Notes 2026 — Complete JS in One PageJavaScript Quick Revision Notes — Interview Prep in 30 Minutes 2026Abstraction in JavaScript OOP – Hide Complexity, Expose SimplicityJavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & MoreJavaScript Constructor Functions – new Keyword, Prototype & OOP PatternsEncapsulation in JavaScript – Private Fields, Getters, Setters & Data ProtectionJavaScript Inheritance – extends, super, and Prototype-Based InheritanceObject-Oriented Programming in JavaScript – OOP Concepts Complete GuideJavaScript OOP Projects – Build Real-World Apps with Classes & OOPPolymorphism in JavaScript – Method Overriding, Duck Typing & Many FormsJavaScript Prototype Chain – How Property Lookup Works in JavaScriptJavaScript Prototypes – Prototype-Based Inheritance, Object.create & prototype PropertyJavaScript Advanced Practice Problems — 15+ Interview-Level Challenges 2026JavaScript Assignments — 10 Project-Based Learning Tasks 2026JavaScript Beginner Practice Problems — 20+ Coding Exercises 2026JavaScript Coding Challenges — 25 Interview-Style Problems 2026JavaScript Intermediate Practice Problems — 20+ Coding Challenges 2026JavaScript MCQs — 50 Multiple Choice Questions with Answers 2026JavaScript Regex Character Classes – [abc], [^abc], Ranges & ShortcutsJavaScript Regex Email Validation – Pattern, Edge Cases & Best PracticesJavaScript Regex Flags – g, i, m, s, u, y Flags Explained with ExamplesJavaScript Regex Groups – Capturing, Non-Capturing & Named GroupsJavaScript Number Validation with Regex — Complete Patterns & Examples 2026JavaScript Password Validation with Regex — Strength Checker & Patterns 2026JavaScript Regex Quantifiers – *, +, ?, {n,m}, Greedy vs Lazy MatchingJavaScript Regex Basics – Regular Expressions Tutorial for BeginnersJavaScript Regex Projects — 10 Practical Mini-Projects with Code 2026JavaScript URL Validation with Regex — Complete Patterns & Examples 2026JavaScript Username Validation with Regex — Patterns & Form Examples 2026JavaScript TutorialJavaScript Lazy Loading — Images, Modules & Components Complete Guide 2026JavaScript Performance Optimization — Speed Up Your Code Complete Guide 2026JavaScript Unit Testing with Jest — Complete Guide for Beginners 2026
Learn to build a QR code generator in JavaScript using the QRCode.js library, with custom colors, size, logo overlay, and download as PNG functionality.
What You'll Learn
- How to use the QRCode.js library to generate QR codes
- How to customize colors, size, and error correction level
- How to add a logo overlay on top of the QR code using Canvas API
- How to download the QR code as a PNG image
- How to generate QR codes for URLs, WiFi, vCards, and plain text
Project Overview
A QR code generator takes a text input (URL, WiFi credentials, contact info) and converts it into a scannable QR code image. Behind the scenes, the QRCode.js library handles the complex encoding; your job is to wire up the UI.
Component Structure
How It Works — Flow Diagram
Step-by-Step Build
Step 1 — Load QRCode.js
Example
<!-- CDN: include in your HTML <head> -->
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
Step 2 — HTML Structure
Example
<div class="qr-generator">
<h1>QR Code Generator</h1>
<div class="type-tabs">
<button class="tab-btn active" data-type="url">URL</button>
<button class="tab-btn" data-type="text">Text</button>
<button class="tab-btn" data-type="wifi">WiFi</button>
<button class="tab-btn" data-type="vcard">vCard</button>
</div>
<div id="inputSection" class="input-section">
<!-- Dynamic inputs per tab -->
</div>
<div class="options-row">
<label>Size:
<select id="qrSize">
<option value="128">Small (128px)</option>
<option value="256" selected>Medium (256px)</option>
<option value="512">Large (512px)</option>
</select>
</label>
<label>Dark: <input type="color" id="colorDark" value="#000000"></label>
<label>Light:<input type="color" id="colorLight" value="#ffffff"></label>
<label>ECC:
<select id="eccLevel">
<option value="L">L (7%)</option>
<option value="M" selected>M (15%)</option>
<option value="Q">Q (25%)</option>
<option value="H">H (30%)</option>
</select>
</label>
</div>
<div id="qrDisplay" class="qr-display"></div>
<div class="qr-actions">
<button id="copyBtn" class="btn-copy" disabled>📋 Copy Image</button>
<a id="downloadBtn" class="btn-download" download="qr-code.png">⬇ Download PNG</a>
</div>
</div>
Step 3 — Tab-Based Input Templates
Example
const INPUT_TEMPLATES = {
url: () => `<input type="url" id="urlInput" placeholder="https://example.com" class="qr-input">`,
text: () => `<textarea id="textInput" rows="3" placeholder="Enter any text..." class="qr-input"></textarea>`,
wifi: () => `
<input type="text" id="ssidInput" placeholder="Network Name (SSID)" class="qr-input">
<input type="password" id="wifiPass" placeholder="Password" class="qr-input">
<select id="wifiEnc">
<option value="WPA">WPA/WPA2</option>
<option value="WEP">WEP</option>
<option value="">None</option>
</select>
`,
vcard: () => `
<input type="text" id="vcName" placeholder="Full Name" class="qr-input">
<input type="tel" id="vcPhone" placeholder="Phone Number" class="qr-input">
<input type="email" id="vcEmail" placeholder="Email" class="qr-input">
<input type="url" id="vcUrl" placeholder="Website" class="qr-input">
`
};
Step 4 — Build QR Content String
Example
let currentType = "url";
function buildContent() {
switch (currentType) {
case "url":
return document.getElementById("urlInput")?.value || "";
case "text":
return document.getElementById("textInput")?.value || "";
case "wifi": {
const ssid = document.getElementById("ssidInput")?.value || "";
const pass = document.getElementById("wifiPass")?.value || "";
const enc = document.getElementById("wifiEnc")?.value || "";
return `WIFI:T:${enc};S:${ssid};P:${pass};;`;
}
case "vcard": {
const name = document.getElementById("vcName")?.value || "";
const phone = document.getElementById("vcPhone")?.value || "";
const email = document.getElementById("vcEmail")?.value || "";
const url = document.getElementById("vcUrl")?.value || "";
return `BEGIN:VCARD\nVERSION:3.0\nFN:${name}\nTEL:${phone}\nEMAIL:${email}\nURL:${url}\nEND:VCARD`;
}
default: return "";
}
}
Step 5 — Generate QR Code
Example
let qrInstance = null;
function generate() {
const content = buildContent().trim();
if (!content) return;
const display = document.getElementById("qrDisplay");
const size = parseInt(document.getElementById("qrSize").value);
const darkC = document.getElementById("colorDark").value;
const lightC = document.getElementById("colorLight").value;
const ecc = document.getElementById("eccLevel").value;
display.innerHTML = "";
qrInstance = new QRCode(display, {
text: content,
width: size,
height: size,
colorDark: darkC,
colorLight: lightC,
correctLevel: QRCode.CorrectLevel[ecc]
});
// Enable download after a brief delay for the canvas to render
setTimeout(() => {
const canvas = display.querySelector("canvas");
if (!canvas) return;
const url = canvas.toDataURL("image/png");
document.getElementById("downloadBtn").href = url;
document.getElementById("copyBtn").disabled = false;
document.getElementById("copyBtn").dataset.url = url;
}, 100);
}
Step 6 — Copy to Clipboard
Example
document.getElementById("copyBtn").addEventListener("click", async () => {
const canvas = document.querySelector("#qrDisplay canvas");
if (!canvas) return;
canvas.toBlob(async (blob) => {
await navigator.clipboard.write([
new ClipboardItem({ "image/png": blob })
]);
document.getElementById("copyBtn").textContent = "✅ Copied!";
setTimeout(() => { document.getElementById("copyBtn").textContent = "📋 Copy Image"; }, 2000);
});
});
Step 7 — Auto-Regenerate on Input / Option Change
Example
function setupAutoGenerate() {
document.getElementById("inputSection").addEventListener("input", () => generate());
["qrSize","colorDark","colorLight","eccLevel"].forEach(id => {
document.getElementById(id).addEventListener("change", () => generate());
});
}
document.querySelector(".type-tabs").addEventListener("click", (e) => {
if (!e.target.classList.contains("tab-btn")) return;
currentType = e.target.dataset.type;
document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
e.target.classList.add("active");
document.getElementById("inputSection").innerHTML = INPUT_TEMPLATES[currentType]();
generate();
});
// Initialize
document.getElementById("inputSection").innerHTML = INPUT_TEMPLATES.url();
setupAutoGenerate();
Console Output
Output
// User types "https://wohtech.com" in URL tab
buildContent() → "https://wohtech.com"
new QRCode(display, { text: "https://wohtech.com", width: 256, ... })
→ Canvas rendered in #qrDisplay
downloadBtn.href = "data:image/png;base64,..."
// WiFi tab: SSID="HomeNet", Pass="secret123"
buildContent() → "WIFI:T:WPA;S:HomeNet;P:secret123;;"
→ QR code encodes WiFi credentials (phone can scan to connect)
// User changes ECC to H (highest error correction)
generate() → QR code regenerated with correctLevel: QRCode.CorrectLevel.H
(more modules visible — more error resilience)Edge Cases to Handle
| Situation | Expected Behavior |
|---|---|
| Empty input | Don't generate / show placeholder |
| Very long URL | QR becomes denser but still scannable at L/M ECC |
| Same dark/light color | QR invisible — warn the user |
| Canvas not supported | Fallback to <img> (QRCode.js does this automatically) |
| Copy fails (non-HTTPS) | Graceful fallback message |
Challenge Yourself
- Logo overlay — draw a centered company logo on the canvas after QR generation
- SVG export — use a library that generates SVG instead of canvas
- Batch generator — paste a list of URLs and download QR codes as a ZIP
- QR code history — show thumbnails of the last 5 generated codes
- Scan your own QR — integrate a QR scanner on the same page
Best Practices
- Use
ECC = Hwhen adding a logo overlay (30% of pixels can be obscured) - Always
display.innerHTML = ""before regenerating to remove the previous QR - Use
canvas.toDataURL("image/png")for the download link - Debounce the text input to avoid generating a QR on every keystroke
- Test the generated QR with multiple scanner apps to ensure readability
Continue the lesson path
Study next in this module
01Mini ProjectsBuild a JavaScript Prime Number Checker - Step by Step Project TutorialLearn to build a prime number checker in JavaScript with trial division, Sieve of Eratosthenes, prime factorization, and range prime finder visualization.02Mini ProjectsBuild a JavaScript QR Code Scanner - Step by Step Project TutorialLearn to build a QR code scanner in JavaScript using the device camera with jsQR library, file upload fallback, decoded result display, and link detection.03Mini ProjectsBuild a JavaScript Price Range Slider - Step by Step Project TutorialLearn to build a dual-handle price range slider in JavaScript with min/max thumb dragging, range highlighting, live price display, and product filtering.04Mini ProjectsBuild a JavaScript Quiz App - Step by Step Project TutorialLearn to build an interactive quiz app in JavaScript with multiple-choice questions, timer, score tracking, progress bar, result screen, and localStorage high score.