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 nested threaded comment system in JavaScript with recursive rendering, reply, like, collapse/expand, and depth-limited nesting.
What You'll Learn
- How to model comments as a tree data structure (nodes with children)
- How to use recursion to render arbitrarily deep comment threads
- How to implement Reply, Like, and Delete on any comment
- How to collapse/expand branches of the comment tree
- How to limit nesting depth to prevent infinite indentation
Project Overview
Nested comments work like Reddit or YouTube: each comment can have replies, and each reply can have its own replies. The data is a tree, and rendering it requires a recursive function that handles any depth.
Component Structure
How It Works — Flow Diagram
Example
comments[] = [
{ id: 1, text: "Great!", author: "Alice", replies: [
{ id: 2, text: "Agreed", author: "Bob", replies: [
{ id: 3, text: "Me too", author: "Carol", replies: [] }
]}
]},
{ id: 4, text: "Nice work!", author: "Dave", replies: [] }
]
renderComments(comments, depth=0)
→ for each comment:
buildCommentEl(comment, depth)
→ renderComments(comment.replies, depth+1) ← RECURSION
→ append children to this comment's reply container
Step-by-Step Build
Step 1 — Data Model
Example
let comments = [
{
id: 1, author: "Alice", text: "Great article on recursion!",
likes: 5, timestamp: Date.now() - 3600000,
replies: [
{
id: 2, author: "Bob", text: "Totally agree, very clear explanation.",
likes: 2, timestamp: Date.now() - 1800000,
replies: [
{ id: 3, author: "Carol", text: "Me too!", likes: 0, timestamp: Date.now() - 900000, replies: [] }
]
}
]
},
{ id: 4, author: "Dave", text: "Nice work overall.", likes: 1, timestamp: Date.now() - 7200000, replies: [] }
];
let nextId = 10;
const MAX_DEPTH = 4;
Step 2 — HTML Structure
html example
<div class="comments-app">
<h1>Discussion</h1>
<form id="rootForm" class="comment-form">
<textarea id="rootInput" placeholder="Write a comment..." rows="3"></textarea>
<div class="form-row">
<input id="rootAuthor" type="text" placeholder="Your name" required>
<button type="submit">Post Comment</button>
</div>
</form>
<div id="commentList" class="comment-list"></div>
</div>Step 3 — Time Formatting Helper
js example
function timeAgo(timestamp) {
const diff = Math.floor((Date.now() - timestamp) / 1000);
if (diff < 60) return `${diff}s ago`;
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
if (diff < 86400)return `${Math.floor(diff / 3600)}h ago`;
return `${Math.floor(diff / 86400)}d ago`;
}Step 4 — Build a Single Comment Element
js example
function buildCommentEl(comment, depth) {
const el = document.createElement("div");
el.className = `comment depth-${Math.min(depth, MAX_DEPTH)}`;
el.dataset.id = comment.id;
el.innerHTML = `
<div class="comment-header">
<strong class="comment-author">${comment.author}</strong>
<span class="comment-time">${timeAgo(comment.timestamp)}</span>
</div>
<p class="comment-text">${comment.text}</p>
<div class="comment-actions">
<button class="btn-like">♥ <span class="like-count">${comment.likes}</span></button>
${depth < MAX_DEPTH ? `<button class="btn-reply">Reply</button>` : ""}
<button class="btn-delete">Delete</button>
${comment.replies.length > 0
? `<button class="btn-toggle">▾ Hide replies (${comment.replies.length})</button>`
: ""}
</div>
${depth < MAX_DEPTH ? `<div class="reply-form-container hidden"></div>` : ""}
<div class="replies-container"></div>
`;
return el;
}Step 5 — Recursive Render Function
Example
function renderComments(list, container, depth = 0) {
container.innerHTML = "";
list.forEach(comment => {
const el = buildCommentEl(comment, depth);
// Recursively render children
const repliesContainer = el.querySelector(".replies-container");
if (comment.replies.length > 0) {
renderComments(comment.replies, repliesContainer, depth + 1);
}
// Wire up action buttons
wireCommentActions(el, comment, depth);
container.appendChild(el);
});
}
Step 6 — Wire Actions (Like, Reply, Delete, Toggle)
Example
function wireCommentActions(el, comment, depth) {
// Like
el.querySelector(".btn-like").addEventListener("click", () => {
comment.likes++;
el.querySelector(".like-count").textContent = comment.likes;
});
// Toggle replies
const toggleBtn = el.querySelector(".btn-toggle");
if (toggleBtn) {
const repliesContainer = el.querySelector(".replies-container");
toggleBtn.addEventListener("click", () => {
const hidden = repliesContainer.style.display === "none";
repliesContainer.style.display = hidden ? "" : "none";
toggleBtn.textContent = hidden
? `▾ Hide replies (${comment.replies.length})`
: `▸ Show replies (${comment.replies.length})`;
});
}
// Reply form
const replyBtn = el.querySelector(".btn-reply");
if (replyBtn) {
const formContainer = el.querySelector(".reply-form-container");
replyBtn.addEventListener("click", () => {
if (!formContainer.querySelector("form")) {
formContainer.innerHTML = buildReplyFormHTML();
wireReplyForm(formContainer, comment, el, depth);
}
formContainer.classList.toggle("hidden");
});
}
// Delete
el.querySelector(".btn-delete").addEventListener("click", () => {
deleteComment(comment.id, comments);
renderComments(comments, document.getElementById("commentList"));
});
}
Step 7 — Add New Comment / Reply
Example
function addComment(parentList, text, author) {
parentList.push({
id: nextId++,
author,
text,
likes: 0,
timestamp: Date.now(),
replies: []
});
}
// Root-level form
document.getElementById("rootForm").addEventListener("submit", (e) => {
e.preventDefault();
const text = document.getElementById("rootInput").value.trim();
const author = document.getElementById("rootAuthor").value.trim();
if (!text || !author) return;
addComment(comments, text, author);
renderComments(comments, document.getElementById("commentList"));
e.target.reset();
});
Step 8 — Delete by ID (Recursive Helper)
Example
function deleteComment(id, list) {
const idx = list.findIndex(c => c.id === id);
if (idx !== -1) { list.splice(idx, 1); return true; }
return list.some(c => deleteComment(id, c.replies));
}
Step 9 — Initialize
js example
renderComments(comments, document.getElementById("commentList"));Console Output
Output
renderComments(comments, #commentList, depth=0)
→ buildCommentEl(Alice, depth=0) → append to #commentList
→ renderComments(Alice.replies, repliesContainer, depth=1)
→ buildCommentEl(Bob, depth=1) → append to repliesContainer
→ renderComments(Bob.replies, repliesContainer, depth=2)
→ buildCommentEl(Carol, depth=2) → append
// User likes Bob's comment (id: 2)
comment.likes++ → 3
like-count.textContent = "3"
// User deletes Carol (id: 3)
deleteComment(3, comments)
→ checks comments[0].replies → finds in Bob.replies → splices out
renderComments() → re-renders without CarolEdge Cases to Handle
| Situation | Expected Behavior |
|---|---|
| MAX_DEPTH reached | Reply button hidden |
| Delete comment with children | Entire subtree removed |
| Toggle with 0 replies | Toggle button not shown |
| Empty text reply | Blocked by trim() check |
| Very long username | CSS overflow: hidden / text-overflow |
Challenge Yourself
- Upvote/downvote — replace ♥ with ▲/▼ and allow negative like counts
- Sort by top/new — add sort buttons at the top level
- Markdown in comments — support
boldand_italic_formatting - Persist to localStorage — save the entire comment tree on every change
- Load more — show only 5 top-level comments and a "Load more" button
Best Practices
- Model comments as a tree — each node has an
id,text, andreplies[] - The recursive
renderComments()function is the heart of the project — keep it clean - Wire event listeners inside
buildCommentEl()orwireCommentActions(), not globally - Use
deleteComment(id, list)recursively — avoids needing to pass parent references - Limit max depth to prevent CSS indentation overflow
Continue the lesson path
Study next in this module
01Mini ProjectsBuild a JavaScript Multi-Step Progress Bar - Step by Step TutorialLearn to build a multi-step form wizard with animated progress bar in JavaScript. Covers step validation, forward/back navigation, and completion handling.02Mini ProjectsBuild a JavaScript Notes App - Step by Step Project TutorialLearn to build a notes app in JavaScript with create, edit, delete, search, pin, and localStorage persistence. Covers markdown preview and color coding.03Mini ProjectsBuild a JavaScript Image Slider - Step by Step Project TutorialLearn to build an accessible image slider in JavaScript with keyboard navigation, auto-advance, fade transitions, caption overlay, and fullscreen mode.04Mini ProjectsBuild a JavaScript OTP Input Field - Step by Step Project TutorialLearn to build an accessible OTP/PIN input field in JavaScript with auto-focus, backspace navigation, paste support, and timer-based resend functionality.