200 JavaScript Projects: Build, Learn &

Master Real-World Apps

By Dhanian

Table of Contents
Preface
• About the Author
• Who This Book Is For
• How to Use This Book
• Tools and Environment Setup
• JavaScript Essentials Recap
• Understanding Project Difficulty Levels

Part I: Foundational Projects

Chapter 1: Core JavaScript and Console-Based Projects
1. Hello World Logger
2. Variable Swap Logic
3. Simple Interest Calculator
4. Leap Year Checker
5. Prime Number Checker
6. Even or Odd Number
7. Fahrenheit to Celsius Converter
8. Celsius to Fahrenheit Converter
9. Factorial Calculator
[Link] Checker

Chapter 2: DOM Manipulation Essentials

[Link] Current Date and Time
 [Link] Counter
[Link] Counter
[Link] Clock
[Link] Changer
[Link] Color Switcher
[Link] Size Changer
[Link]/Hide Password
[Link] Image Display
[Link] List from Input

Chapter 3: Beginner Forms and Inputs

[Link] Form Validation
[Link] Format Checker
[Link] Strength Indicator
[Link] Form UI
[Link]-up Form with Alerts
[Link]-time Input Validator
[Link] Validation
[Link] Selection Display
[Link] Limit Notifier
[Link] Form Alert

Chapter 4: Basic UI Interactions

[Link] Popup
[Link]
[Link] Interface
[Link] Slider
[Link] to Top Button
[Link] Navigation Menu
[Link] Display
[Link] Timer
[Link] Stars UI
[Link] Snackbar
Part II: Interactive Utilities and Tools
Chapter 5: Calculation and Conversion Tools
[Link] Calculator
[Link] Calculator
[Link] Converter
[Link] Calculator
[Link] Calculator
[Link] Calculator
[Link] Converter
[Link] of Shapes Calculator
[Link] Converter
[Link] Calculator

Chapter 6: Creative and Fun Tools

[Link] Quote Generator
[Link] Generator (API)
[Link]-to-Speech Converter
[Link]-to-Text Demo
[Link] Speed Tester
[Link] Scramble Game
[Link] Color Generator
[Link] Initials Creator
[Link] Bar
[Link] Slider Output

Part III: Interactive Games

Chapter 7: Classic and Simple Games
[Link] Paper Scissors
[Link] Roller
[Link] Guessing Game
[Link] Toss Simulator
 [Link] Counter
[Link] the Hidden Object
[Link] the Cards
[Link] Card Game
[Link] Quiz Game
[Link] Game

Chapter 8: Puzzle and Logic-Based Games

[Link] Tac Toe
[Link] Grid Setup
[Link] Lite
[Link] Clone
[Link] Puzzle Game
[Link]-a-Mole
[Link] Matching Game
[Link] Quiz
[Link] Popper
[Link] Tracker

Part IV: CRUD Applications and Local Storage

Chapter 9: Note Taking and Storage
[Link] Note App
[Link] with Local Storage
[Link]-do List
[Link] Manager
[Link] Planner
[Link] List
[Link] List
[Link] Tracker
[Link] List Tracker
[Link] Journal
Chapter 10: Bookmarks and Favorites
[Link] Manager
[Link] Quotes Saver
[Link] Recipes Organizer
[Link] Reader List
[Link] Book Titles Tracker

Chapter 11: Authentication Interfaces

[Link] UI with Validation
[Link]-up UI with Validation
[Link] Password UI
[Link] Visibility Toggle
[Link] Validation with Alerts

Chapter 13: Advanced API Applications

[Link] Finder (MealDB API)
[Link] Video Search
[Link] Price Tracker
[Link] Lookup
[Link] Quote Generator (OpenAI API)
[Link] Summarizer (API based)
[Link] Quality Checker
[Link] Weather Forecast Dashboard
[Link] Search App (Google Books API)
[Link] Repo Search Tool

Part VI: Dashboards and Productivity Tools

Chapter 14: User Dashboards
[Link] Tracker
 [Link] Planner
[Link] Timer
[Link] Goals Dashboard
[Link] App UI
[Link] Creator
[Link] Builder
[Link] Generator
[Link] Tracker
[Link] Tracker

Chapter 15: Admin and Business Dashboards

[Link] Panel UI
[Link] Summary Viewer
133.E-commerce Product Tracker
[Link] Table Manager
[Link] Dashboard
[Link] Visualizer
[Link]-tab Dashboard
[Link] Activity Log Viewer
[Link] Upload UI
[Link] Info Manager

Part VII: Advanced Applications and UI Systems

Chapter 16: Advanced Form Systems
[Link]-step Form
[Link] Form Generator
[Link] Submission Form
[Link] Job Application Form
[Link] Registration UI

Chapter 17: Project-Level Applications

[Link] Template with CRUD UI
 [Link] Website with Filters
[Link] Review System
[Link] UI Design
[Link] Reader Interface

Chapter 18: Feature-Rich UI Tools

[Link] Code Generator
[Link] Previewer
[Link] Pad with Canvas
[Link] Video Player
[Link] Audio Player
[Link] Generator
[Link] Designer
[Link] Event Scheduler
[Link] Filter and Sort Tool
[Link] Gallery with Modal View

Part VIII: Capstone Projects and Final Challenges

Chapter 19: Real-World Capstone Projects
[Link] App (Frontend UI)
[Link] Listing Platform
163.E-Commerce Product Page
[Link] System UI
[Link] CRUD Admin Interface
[Link] Aggregator Web App
[Link] Portfolio Editor
[Link] Progress Tracker
[Link] Invoice App
[Link] Pricing Page

Chapter 20: Final 30 Polished Projects

[Link] Dashboard
[Link] Report Generator
[Link] App
[Link] Collaboration UI
[Link]-Time Clock System
[Link] Feedback Board
[Link] App with Speech Input
[Link] Crop and Preview Tool
[Link] Productivity Tracker
[Link] Management Board
[Link] Timer with Sound Alert
[Link] Deck Viewer
[Link] Proposal Generator
[Link] Events Viewer
[Link] Onboarding App
[Link] Card Creator
[Link] Feedback Collector
[Link] Countdown Board
[Link]-Triggered Effects
[Link] Rate Limiter UI
[Link] Finance Manager
[Link] Post Template Generator
[Link] Enrollment UI
[Link] Download Link Generator
[Link] Completion Heatmap
[Link] Request Board
[Link] Chat UI (Mock Frontend)
[Link] Visualizer
[Link] Signature Generator
[Link] Form Template Pack
Appendices
• Appendix A: JavaScript Syntax Cheat Sheet
• Appendix B: Useful JavaScript Methods Reference
• Appendix C: Hosting Your Projects (GitHub Pages, Netlify, Vercel)
• Appendix D: Git and GitHub Basics
• Appendix E: Online Tools and Resources

Preface
About the Author
My name is Dhanian. I am a software developer, educator, and passionate advocate for accessible
programming education. Over the years, I have worked with countless students and developers
across various platforms, guiding them from the basics of coding to advanced software development
concepts. My mission has always been clear: to simplify complex ideas and help learners build real-
world skills that translate into real-world success.
This book is a direct result of years of teaching, coding, and answering one recurring question from
learners worldwide: “How can I master JavaScript by building projects?” The answer lies within
these pages.

Who This Book Is For

This book is written for:
• Absolute Beginners: Those who are just starting with JavaScript and want to learn by
doing.
• Self-Taught Developers: Individuals who understand the basics but need practical
experience building real applications.
• Intermediate Programmers: Developers who want to sharpen their skills through hands-on
practice.
• Tutors and Instructors: Educators looking for structured projects to use in class or
mentorship sessions.
• Professionals and Hobbyists: Anyone passionate about JavaScript and looking to level up
through building.
Whether you are learning to code for the first time or transitioning into web development, this book
is designed to support you through practice, repetition, and project-based learning.
How to Use This Book
This book contains 200 JavaScript projects carefully organized from foundational to advanced
levels. You can follow it sequentially or skip to any chapter that aligns with your current skill level.
Each project includes:
• A clear project objective
• Step-by-step code implementation
• Explanations of key JavaScript concepts involved
• Tips and best practices
• Suggestions for enhancements or customizations
I encourage you to type every line of code, experiment with the output, and challenge yourself to
improve upon each project. That is how true learning happens.

Tools and Environment Setup

To build these projects, you only need a few essential tools:
1. Text Editor or IDE: I recommend Visual Studio Code for its performance and rich
ecosystem.
2. Modern Browser: Use browsers like Chrome, Firefox, or Edge to test and debug your code.
3. Live Server Extension (Optional): Use this to auto-refresh your browser on file changes.
4. Basic File Structure: Each project should be in its own folder with a .html, .css
(optional), and .js file.

No frameworks are required. All projects are written in vanilla JavaScript for maximum learning
value.

JavaScript Essentials Recap

Before diving into the projects, you should be familiar with the following JavaScript fundamentals:
• Variables (let, const)

• Data types (strings, numbers, arrays, objects)

• Functions and arrow functions
• Conditional statements (if, else, switch)

• Loops (for, while)

• Event listeners and DOM manipulation

• Arrays and object methods
• Basic understanding of localStorage and APIs
If these terms are new to you, I recommend spending a few hours revisiting JavaScript
fundamentals before starting this book.

Understanding Project Difficulty Levels

Projects in this book are categorized into three difficulty levels:
• Beginner: Short projects focusing on syntax, logic, and basic DOM manipulation.
• Intermediate: Projects that introduce user input, local storage, and light API use.
• Advanced: Feature-rich applications with complex logic, multiple files, API integrations,
and UI systems.
Each chapter increases in complexity to provide a natural progression for your growth. By the end
of this book, you will have built a strong portfolio of practical JavaScript projects and gained the
confidence to build your own from scratch.
Let’s begin.

Part I: Foundational Projects

Chapter 1: Core JavaScript and Console-Based Projects

This chapter introduces foundational JavaScript programming by focusing on logic-based and
console-driven projects. These ten beginner-level tasks are designed to strengthen your
understanding of core syntax, mathematical operations, and problem-solving using JavaScript. Each
project operates within the browser console or terminal, allowing you to focus on the logic before
incorporating user interfaces.
These projects serve as warm-ups to prepare you for more advanced topics, such as DOM
manipulation, event handling, and application architecture in later chapters.

1. Hello World Logger

Objective: Print "Hello, World!" to the console.
This is the simplest and most traditional way to start learning any programming language. It
introduces [Link]() and sets the stage for understanding JavaScript's output mechanisms.
[Link]("Hello, World!");
2. Variable Swap Logic
Objective: Swap the values of two variables using a temporary variable.
This project reinforces the concepts of variables and assignment operators.
let a = 10;
let b = 5;

let temp = a;
a = b;
b = temp;

[Link]("a:", a); // 5
[Link]("b:", b); // 10

3. Simple Interest Calculator

Objective: Calculate the simple interest given principal, rate, and time.
This project strengthens your grasp of arithmetic operations and formula application in JavaScript.
let principal = 1000;
let rate = 5;
let time = 2;

let simpleInterest = (principal * rate * time) / 100;

[Link]("Simple Interest:", simpleInterest);

4. Leap Year Checker

Objective: Determine if a given year is a leap year.
This task introduces conditional logic and the modulus operator.
let year = 2024;

if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
[Link](year + " is a leap year.");
} else {
[Link](year + " is not a leap year.");
}

5. Prime Number Checker

Objective: Check whether a number is a prime.
This project helps you practice loops and conditional logic.
let number = 17;
let isPrime = true;

if (number <= 1) {
isPrime = false;
} else {
for (let i = 2; i < number; i++) {
 if (number % i === 0) {
isPrime = false;
break;
}
}
}

[Link](isPrime ? number + " is prime." : number + " is not prime.");

6. Even or Odd Number

Objective: Identify whether a number is even or odd.
This reinforces the use of the modulus operator and simple conditions.
let num = 8;

if (num % 2 === 0) {
[Link](num + " is even.");
} else {
[Link](num + " is odd.");
}

7. Fahrenheit to Celsius Converter

Objective: Convert a temperature value from Fahrenheit to Celsius.
This project uses mathematical formulas within JavaScript.
let fahrenheit = 100;
let celsius = (fahrenheit - 32) * (5 / 9);

[Link]("Celsius:", [Link](2));

8. Celsius to Fahrenheit Converter

Objective: Convert a temperature value from Celsius to Fahrenheit.
This is the reverse of the previous project.
let celsius = 37;
let fahrenheit = (celsius * 9 / 5) + 32;

[Link]("Fahrenheit:", [Link](2));

9. Factorial Calculator
Objective: Calculate the factorial of a number.
This helps reinforce loop structures and mathematical logic.
let n = 5;
let factorial = 1;
for (let i = 1; i <= n; i++) {
factorial *= i;
}

[Link]("Factorial of", n, "is", factorial);

10. Palindrome Checker

Objective: Check if a string is a palindrome.
This project introduces string manipulation and logic for comparing characters.
let str = "level";
let reversed = [Link]("").reverse().join("");

if (str === reversed) {

[Link](str + " is a palindrome.");
} else {
[Link](str + " is not a palindrome.");
}

These foundational projects form the building blocks of your JavaScript journey. Mastering these
will give you the confidence to move into more interactive, browser-based projects in the next
chapters.

Chapter 2: DOM Manipulation Essentials

In this chapter, we transition from console-based programs to interacting directly with the browser’s
DOM (Document Object Model). Each project here demonstrates how to manipulate HTML
elements, handle user input, and respond to browser events using pure JavaScript.
These tasks will help you build the foundation required to create interactive and responsive web
interfaces.

11. Display Current Date and Time

Objective: Show the current date and time in a <div>.
<div id="datetime"></div>

<script>
const now = new Date();
[Link]("datetime").innerText = [Link]();
</script>

12. Character Counter

Objective: Display the number of characters typed in a textarea.
<textarea id="text" oninput="countChars()"></textarea>
<p>Characters: <span id="charCount">0</span></p>

<script>
function countChars() {
const val = [Link]("text").value;
[Link]("charCount").innerText = [Link];
}
</script>

13. Word Counter

Objective: Count words in real-time as the user types.
<textarea id="wordInput" oninput="countWords()"></textarea>
<p>Words: <span id="wordCount">0</span></p>

<script>
function countWords() {
const val = [Link]("wordInput").[Link]();
const words = [Link](/\s+/).filter(word => [Link] > 0);
[Link]("wordCount").innerText = [Link];
}
</script>

14. Live Clock

Objective: Show current time and update every second.
<h2 id="clock"></h2>

<script>
function updateClock() {
const now = new Date();
[Link]("clock").innerText = [Link]();
}
setInterval(updateClock, 1000);
updateClock();
</script>

15. Color Changer

Objective: Change text color based on user choice.
<p id="colorText">Change my color</p>
<input type="color" onchange="changeColor([Link])">

<script>
function changeColor(color) {
[Link]("colorText").[Link] = color;
}
</script>
16. Background Color Switcher
Objective: Toggle background colors with buttons.
<button onclick="[Link] =
'lightblue'">Blue</button>
<button onclick="[Link] =
'lightgreen'">Green</button>

17. Font Size Changer

Objective: Adjust font size dynamically using a range input.
<p id="resizableText">Resize this text</p>
<input type="range" min="10" max="50" oninput="changeFontSize([Link])">

<script>
function changeFontSize(size) {
[Link]("resizableText").[Link] = size + "px";
}
</script>

18. Show/Hide Password

Objective: Toggle password visibility.
<input type="password" id="password">
<button onclick="togglePassword()">Show/Hide</button>

<script>
function togglePassword() {
const input = [Link]("password");
[Link] = [Link] === "password" ? "text" : "password";
}
</script>

19. Toggle Image Display

Objective: Show or hide an image with a button click.
<img id="toggleImg" src="[Link]" width="200">
<button onclick="toggleImage()">Toggle Image</button>

<script>
function toggleImage() {
const img = [Link]("toggleImg");
[Link] = [Link] === "none" ? "block" : "none";
}
</script>

20. Create List from Input

Objective: Add input values to a list.
<input type="text" id="listInput">
<button onclick="addToList()">Add</button>
<ul id="itemList"></ul>

<script>
function addToList() {
const input = [Link]("listInput").value;
const li = [Link]("li");
[Link] = input;
[Link]("itemList").appendChild(li);
[Link]("listInput").value = "";
}
</script>

These ten projects offer essential practice in DOM manipulation and user interaction. As you build
each one, take time to experiment and personalize them—change the styles, add transitions, or
introduce more inputs. Mastery of these concepts prepares you for more complex web apps ahead.

Chapter 3: Beginner Forms and Inputs

Forms are a fundamental part of user interaction on the web. This chapter focuses on practical form-
based projects that cover user input validation, formatting, dynamic responses, and UI feedback
mechanisms. By completing these projects, you'll become comfortable handling forms and user data
with JavaScript.

21. Basic Form Validation

Objective: Ensure that all form fields are filled before submission.
<form onsubmit="return validateForm()">
<input type="text" id="name" placeholder="Enter name" />
<input type="email" id="email" placeholder="Enter email" />
<button type="submit">Submit</button>
</form>

<script>
function validateForm() {
const name = [Link]("name").[Link]();
const email = [Link]("email").[Link]();
if (!name || !email) {
alert("All fields are required.");
return false;
}
return true;
}
</script>
22. Email Format Checker
Objective: Validate the format of an email using regex.
<input type="text" id="emailCheck" placeholder="Enter email" />
<button onclick="checkEmail()">Check</button>
<p id="emailResult"></p>

<script>
function checkEmail() {
const email = [Link]("emailCheck").value;
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
[Link]("emailResult").innerText =
[Link](email) ? "Valid email" : "Invalid email format";
}
</script>

23. Password Strength Indicator

Objective: Indicate password strength while typing.
<input type="password" id="passwordInput" oninput="checkStrength()" />
<p id="strengthMsg"></p>

<script>
function checkStrength() {
const pwd = [Link]("passwordInput").value;
let msg = "Weak";
if ([Link] > 8 && /[A-Z]/.test(pwd) && /\d/.test(pwd)) {
msg = "Strong";
} else if ([Link] > 5) {
msg = "Moderate";
}
[Link]("strengthMsg").innerText = "Strength: " + msg;
}
</script>

24. Login Form UI

Objective: Create a simple login form with username and password fields.
<form>
<input type="text" placeholder="Username" /><br />
<input type="password" placeholder="Password" /><br />
<button type="submit">Login</button>
</form>

Note: Logic for authentication can be added later in advanced chapters.

25. Sign-up Form with Alerts

Objective: Show confirmation alert on successful sign-up.
<form onsubmit="signUpAlert(); return false;">
<input type="text" placeholder="Name" required /><br />
<input type="email" placeholder="Email" required /><br />
 <button type="submit">Sign Up</button>
</form>

<script>
function signUpAlert() {
alert("Successfully signed up!");
}
</script>

26. Real-time Input Validator

Objective: Validate input length while typing.
<input type="text" id="username" oninput="validateInput()" />
<p id="inputMsg"></p>

<script>
function validateInput() {
const val = [Link]("username").value;
const msg = [Link] < 5 ? "Username too short" : "Looks good";
[Link]("inputMsg").innerText = msg;
}
</script>

27. Checkbox Validation

Objective: Ensure a checkbox is checked before form submission.
<form onsubmit="return validateCheckbox()">
<input type="checkbox" id="terms" /> I accept the terms<br />
<button type="submit">Submit</button>
</form>

<script>
function validateCheckbox() {
const checked = [Link]("terms").checked;
if (!checked) {
alert("Please accept the terms to continue.");
return false;
}
return true;
}
</script>

28. Dropdown Selection Display

Objective: Display the selected value from a dropdown.
<select id="dropdown" onchange="showSelection()">
<option value="">Choose one</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
<p id="selectedValue"></p>
<script>
function showSelection() {
const value = [Link]("dropdown").value;
[Link]("selectedValue").innerText = "Selected: " + value;
}
</script>

29. Character Limit Notifier

Objective: Notify the user when a character limit is reached.
<textarea id="limitedText" oninput="checkLimit()" maxlength="100"></textarea>
<p id="charLeft">Characters left: 100</p>

<script>
function checkLimit() {
const val = [Link]("limitedText").value;
const remaining = 100 - [Link];
[Link]("charLeft").innerText = "Characters left: " +
remaining;
}
</script>

30. Contact Form Alert

Objective: Build a contact form that shows an alert on submit.
<form onsubmit="sendMessage(); return false;">
<input type="text" placeholder="Your Name" required /><br />
<input type="email" placeholder="Your Email" required /><br />
<textarea placeholder="Your Message" required></textarea><br />
<button type="submit">Send</button>
</form>

<script>
function sendMessage() {
alert("Message sent! Thank you for contacting us.");
}
</script>

These beginner-friendly form projects are essential for understanding how users interact with your
web applications. They prepare you for more advanced topics such as backend validation, form
submission APIs, and authentication systems.

Chapter 4: Basic UI Interactions

User interfaces need to be dynamic, interactive, and responsive to keep users engaged. In this
chapter, you will build components such as modals, sliders, accordions, and tooltips that are widely
used in modern web development. These projects demonstrate practical techniques for manipulating
the DOM, applying styles dynamically, and enhancing UX through smooth interactions.

31. Modal Popup

Objective: Display a modal popup when a button is clicked.
<button onclick="openModal()">Open Modal</button>

<div id="myModal" style="display:none; position:fixed; top:0; left:0;

width:100%; height:100%; background:rgba(0,0,0,0.5);">
<div style="background:white; padding:20px; margin:15% auto; width:300px;">
<p>This is a modal popup</p>
<button onclick="closeModal()">Close</button>
</div>
</div>

<script>
function openModal() {
[Link]("myModal").[Link] = "block";
}
function closeModal() {
[Link]("myModal").[Link] = "none";
}
</script>

32. Accordion
Objective: Create expandable and collapsible content sections.
<button onclick="toggleAccordion()">Toggle Info</button>
<div id="accordion" style="display:none;">This is the hidden content.</div>

<script>
function toggleAccordion() {
const acc = [Link]("accordion");
[Link] = [Link] === "none" ? "block" : "none";
}
</script>

33. Tabs Interface

Objective: Create a tabbed interface with different content sections.
<div>
<button onclick="openTab('tab1')">Tab 1</button>
<button onclick="openTab('tab2')">Tab 2</button>
</div>

<div id="tab1" class="tab">Content for Tab 1</div>

<div id="tab2" class="tab" style="display:none;">Content for Tab 2</div>

<script>
function openTab(id) {
[Link]('.tab').forEach(el => [Link] = "none");
 [Link](id).[Link] = "block";
}
</script>

34. Image Slider

Objective: Display a simple image carousel.
<img id="slider" src="[Link]" width="300" />

<script>
const images = ["[Link]", "[Link]", "[Link]"];
let index = 0;
setInterval(() => {
index = (index + 1) % [Link];
[Link]("slider").src = images[index];
}, 2000);
</script>

35. Scroll to Top Button

Objective: Show a button to scroll the page to the top.
<button onclick="scrollTop()"
style="position:fixed;bottom:20px;right:20px;">Top</button>

<script>
function scrollTop() {
[Link]({ top: 0, behavior: 'smooth' });
}
</script>

36. Toggle Navigation Menu

Objective: Show or hide the navigation menu on smaller screens.
<button onclick="toggleNav()">Toggle Menu</button>
<nav id="navMenu" style="display:none;">
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>

<script>
function toggleNav() {
const menu = [Link]("navMenu");
[Link] = [Link] === "none" ? "block" : "none";
}
</script>

37. Tooltip Display

Objective: Show a tooltip on hover.
<button onmouseover="showTip()" onmouseout="hideTip()">Hover me</button>
<span id="tooltip" style="visibility:hidden; position:absolute;">Tooltip
text</span>

<script>
function showTip() {
[Link]("tooltip").[Link] = "visible";
}
function hideTip() {
[Link]("tooltip").[Link] = "hidden";
}
</script>

38. Countdown Timer

Objective: Create a countdown from a given number of seconds.
<p id="countdown">10</p>

<script>
let seconds = 10;
const timer = setInterval(() => {
seconds--;
[Link]("countdown").innerText = seconds;
if (seconds === 0) clearInterval(timer);
}, 1000);
</script>

39. Rating Stars UI

Objective: Create a star rating system.
<div id="stars">
★★★★★
</div>

<script>
const stars = [Link]("stars");
[Link]("click", (e) => {
const rating = [Link] / ([Link] / 5);
alert("You rated: " + [Link](rating));
});
</script>

40. Notification Snackbar

Objective: Display a temporary notification.
<button onclick="showSnackbar()">Show Notification</button>
<div id="snackbar" style="visibility:hidden; background:#333; color:#fff;
padding:10px; position:fixed; bottom:10px; left:50%;
transform:translateX(-50%);">
This is a snackbar!
</div>

<script>
 function showSnackbar() {
const snack = [Link]("snackbar");
[Link] = "visible";
setTimeout(() => {
[Link] = "hidden";
}, 3000);
}
</script>

These UI interaction projects will help you craft responsive, intuitive, and visually interactive web
applications. With just HTML, CSS, and JavaScript, you've learned how to replicate the behavior
found in many professional UIs.

Part II: Interactive Utilities and Tools

Chapter 5: Calculation and Conversion Tools
In this chapter, we build practical tools commonly used in daily life. From calculating body metrics
to financial computations and unit conversions, you will gain hands-on experience with form
handling, conditional logic, and user-centric design. Each project includes a functional interface and
live calculation based on user input.

41. BMI Calculator

Objective: Calculate Body Mass Index from weight and height.
<input id="weight" placeholder="Weight (kg)">
<input id="height" placeholder="Height (m)">
<button onclick="calculateBMI()">Calculate BMI</button>
<p id="bmiResult"></p>

<script>
function calculateBMI() {
const weight = parseFloat([Link]("weight").value);
const height = parseFloat([Link]("height").value);
const bmi = weight / (height * height);
[Link]("bmiResult").innerText = `BMI: ${[Link](2)}`;
}
</script>

42. Tip Calculator

Objective: Compute tip amount based on bill and percentage.
<input id="bill" placeholder="Bill Amount">
<input id="tip" placeholder="Tip %">
<button onclick="calculateTip()">Calculate Tip</button>
<p id="tipResult"></p>
<script>
function calculateTip() {
const bill = parseFloat([Link]("bill").value);
const tipPercent = parseFloat([Link]("tip").value);
const tip = (bill * tipPercent) / 100;
[Link]("tipResult").innerText = `Tip: $${[Link](2)}`;
}
</script>

43. Currency Converter

Objective: Convert between currencies using a fixed exchange rate.
<input id="usd" placeholder="USD Amount">
<button onclick="convertToKsh()">Convert to KES</button>
<p id="currencyResult"></p>

<script>
const exchangeRate = 130; // 1 USD = 130 KES
function convertToKsh() {
const usd = parseFloat([Link]("usd").value);
const kes = usd * exchangeRate;
[Link]("currencyResult").innerText = `KES: $
{[Link](2)}`;
}
</script>

44. Age Calculator

Objective: Calculate age from a birth year.
<input id="birthYear" placeholder="Enter Birth Year">
<button onclick="calculateAge()">Calculate Age</button>
<p id="ageResult"></p>

<script>
function calculateAge() {
const year = parseInt([Link]("birthYear").value);
const currentYear = new Date().getFullYear();
const age = currentYear - year;
[Link]("ageResult").innerText = `Your age is ${age}`;
}
</script>

45. Loan Calculator

Objective: Calculate monthly loan payment.
<input id="principal" placeholder="Loan Amount">
<input id="rate" placeholder="Annual Interest %">
<input id="years" placeholder="Loan Term (years)">
<button onclick="calculateLoan()">Calculate</button>
<p id="loanResult"></p>

<script>
function calculateLoan() {
 const principal = parseFloat([Link]("principal").value);
const annualRate = parseFloat([Link]("rate").value) / 100;
const months = parseInt([Link]("years").value) * 12;
const monthlyRate = annualRate / 12;

const payment = (principal * monthlyRate) / (1 - [Link](1 + monthlyRate,

-months));
[Link]("loanResult").innerText = `Monthly Payment: $$
{[Link](2)}`;
}
</script>

46. EMI Calculator

Objective: Compute Equated Monthly Installment.
<input id="emiPrincipal" placeholder="Principal">
<input id="emiRate" placeholder="Annual Rate (%)">
<input id="emiMonths" placeholder="Duration (months)">
<button onclick="calculateEMI()">Calculate EMI</button>
<p id="emiResult"></p>

<script>
function calculateEMI() {
const P = parseFloat([Link]("emiPrincipal").value);
const r = parseFloat([Link]("emiRate").value) / (12 * 100);
const n = parseInt([Link]("emiMonths").value);

const emi = (P * r * [Link](1 + r, n)) / ([Link](1 + r, n) - 1);

[Link]("emiResult").innerText = `Monthly EMI: $$
{[Link](2)}`;
}
</script>

47. Speed Converter

Objective: Convert speed from km/h to m/s.
<input id="speedKmh" placeholder="Speed in km/h">
<button onclick="convertSpeed()">Convert</button>
<p id="speedResult"></p>

<script>
function convertSpeed() {
const kmh = parseFloat([Link]("speedKmh").value);
const ms = kmh / 3.6;
[Link]("speedResult").innerText = `Speed in m/s: $
{[Link](2)}`;
}
</script>

48. Area of Shapes Calculator

Objective: Calculate area of a circle based on radius.
<input id="radius" placeholder="Radius">
<button onclick="calculateArea()">Calculate Area</button>
<p id="areaResult"></p>

<script>
function calculateArea() {
const r = parseFloat([Link]("radius").value);
const area = [Link] * r * r;
[Link]("areaResult").innerText = `Area: ${[Link](2)}
sq units`;
}
</script>

49. Unit Converter

Objective: Convert meters to feet.
<input id="meters" placeholder="Meters">
<button onclick="convertMeters()">Convert to Feet</button>
<p id="unitResult"></p>

<script>
function convertMeters() {
const m = parseFloat([Link]("meters").value);
const ft = m * 3.28084;
[Link]("unitResult").innerText = `Feet: ${[Link](2)}`;
}
</script>

50. Tax Calculator

Objective: Calculate tax on an amount with a fixed percentage.
<input id="amount" placeholder="Amount">
<input id="taxRate" placeholder="Tax Rate (%)">
<button onclick="calculateTax()">Calculate Tax</button>
<p id="taxResult"></p>

<script>
function calculateTax() {
const amount = parseFloat([Link]("amount").value);
const rate = parseFloat([Link]("taxRate").value);
const tax = (amount * rate) / 100;
[Link]("taxResult").innerText = `Tax: $${[Link](2)}`;
}
</script>

These 10 interactive tools cover real-life use cases and improve your skill in building reliable input-
based interfaces with JavaScript. Each tool reinforces core logic, type conversion, and conditionals,
all vital for frontend developers.
Chapter 6: Creative and Fun Tools
In this chapter, we explore engaging projects that blend functionality with entertainment. These
tools demonstrate interaction with APIs, use of browser capabilities such as speech synthesis and
recognition, and real-time input feedback. By building these projects, you'll learn how to make your
applications dynamic and enjoyable for users.

51. Random Quote Generator

Objective: Display a random quote from a predefined list.
<button onclick="generateQuote()">Show Quote</button>
<p id="quoteDisplay"></p>

<script>
const quotes = [
"The best way to get started is to quit talking and begin doing.",
"Code is like humor. When you have to explain it, it’s bad.",
"Simplicity is the soul of efficiency."
];

function generateQuote() {
const index = [Link]([Link]() * [Link]);
[Link]("quoteDisplay").innerText = quotes[index];
}
</script>

52. Joke Generator (API)

Objective: Fetch and display a random joke from a public API.
<button onclick="getJoke()">Get Joke</button>
<p id="jokeDisplay"></p>

<script>
async function getJoke() {
const res = await fetch("[Link]
const data = await [Link]();
[Link]("jokeDisplay").innerText = [Link];
}
</script>

53. Text-to-Speech Converter

Objective: Convert text input into spoken audio.
<input id="textInput" placeholder="Type something">
<button onclick="speakText()">Speak</button>

<script>
function speakText() {
const msg = new
SpeechSynthesisUtterance([Link]("textInput").value);
[Link](msg);
 }
</script>

54. Speech-to-Text Demo

Objective: Capture voice input and convert it to text.
<button onclick="startListening()">Start Speech Recognition</button>
<p id="speechResult"></p>

<script>
const recognition = new ([Link] ||
[Link])();

[Link] = function(event) {
[Link]("speechResult").innerText = [Link][0]
[0].transcript;
};

function startListening() {
[Link]();
}
</script>

55. Typing Speed Tester

Objective: Test typing speed based on input time.
<textarea id="typingBox" placeholder="Start typing..." onfocus="startTimer()"
onblur="endTimer()"></textarea>
<p id="typingResult"></p>

<script>
let startTime, endTime;

function startTimer() {
startTime = new Date();
}

function endTimer() {
endTime = new Date();
const typed = [Link]("typingBox").[Link];
const timeTaken = (endTime - startTime) / 1000;
const speed = (typed / 5) / (timeTaken / 60); // WPM
[Link]("typingResult").innerText = `Speed: $
{[Link](2)} WPM`;
}
</script>

56. Word Scramble Game

Objective: Unscramble a shuffled word.
<p id="scrambledWord"></p>
<input id="guessInput" placeholder="Your guess">
<button onclick="checkGuess()">Check</button>
<p id="guessResult"></p>

<script>
const word = "developer";
const scrambled = [Link]('').sort(() => 0.5 - [Link]()).join('');
[Link]("scrambledWord").innerText = scrambled;

function checkGuess() {
const guess = [Link]("guessInput").value;
[Link]("guessResult").innerText =
[Link]() === word ? "Correct!" : "Try again!";
}
</script>

57. Random Color Generator

Objective: Generate and display a random background color.
<button onclick="generateColor()">Generate Color</button>
<div id="colorBox" style="width:200px; height:100px;"></div>

<script>
function generateColor() {
const color = "#" + [Link]([Link]()*16777215).toString(16);
[Link]("colorBox").[Link] = color;
}
</script>

58. Name Initials Creator

Objective: Display initials from a full name.
<input id="fullName" placeholder="Enter full name">
<button onclick="showInitials()">Show Initials</button>
<p id="initialsResult"></p>

<script>
function showInitials() {
const name = [Link]("fullName").[Link]().split(" ");
const initials = [Link](word => word[0].toUpperCase()).join("");
[Link]("initialsResult").innerText = `Initials: ${initials}
`;
}
</script>

59. Progress Bar

Objective: Animate a progress bar.
<progress id="progressBar" value="0" max="100"></progress>
<button onclick="fillProgress()">Start</button>

<script>
function fillProgress() {
let progress = 0;
const bar = [Link]("progressBar");
 const interval = setInterval(() => {
if (progress >= 100) clearInterval(interval);
else [Link] = ++progress;
}, 50);
}
</script>

60. Range Slider Output

Objective: Display the value of a range input in real time.
<input type="range" id="rangeSlider" min="0" max="100"
oninput="updateOutput([Link])">
<p id="sliderValue">Value: 50</p>

<script>
function updateOutput(val) {
[Link]("sliderValue").innerText = `Value: ${val}`;
}
</script>

These projects are not only fun to build but also introduce advanced JavaScript APIs and browser
capabilities, helping you learn how to make your applications more interactive and engaging.

Part III: Interactive Games

Chapter 7: Classic and Simple Games
Games are an excellent way to practice and internalize programming concepts. In this chapter,
you'll build a variety of simple games that sharpen your skills in conditional logic, loops, DOM
manipulation, and user interaction.

61. Rock Paper Scissors

<button onclick="play('rock')">Rock</button>
<button onclick="play('paper')">Paper</button>
<button onclick="play('scissors')">Scissors</button>
<p id="rpsResult"></p>

<script>
function play(userChoice) {
const choices = ['rock', 'paper', 'scissors'];
const computer = choices[[Link]([Link]() * 3)];
let result = '';

if (userChoice === computer) result = "It's a draw!";

else if (
(userChoice === 'rock' && computer === 'scissors') ||
 (userChoice === 'paper' && computer === 'rock') ||
(userChoice === 'scissors' && computer === 'paper')
) result = "You win!";
else result = "Computer wins!";

[Link]("rpsResult").innerText = `Computer chose $

{computer}. ${result}`;
}
</script>

62. Dice Roller

<button onclick="rollDice()">Roll Dice</button>
<p id="diceResult"></p>

<script>
function rollDice() {
const roll = [Link]([Link]() * 6) + 1;
[Link]("diceResult").innerText = `You rolled a ${roll}`;
}
</script>

63. Number Guessing Game

<input type="number" id="guessInput" placeholder="Guess 1-10">
<button onclick="checkGuess()">Guess</button>
<p id="guessMessage"></p>

<script>
const secret = [Link]([Link]() * 10) + 1;

function checkGuess() {
const guess = parseInt([Link]("guessInput").value);
const message = guess === secret ? "Correct!" : "Try again!";
[Link]("guessMessage").innerText = message;
}
</script>

64. Coin Toss Simulator

<button onclick="tossCoin()">Toss Coin</button>
<p id="coinResult"></p>

<script>
function tossCoin() {
const result = [Link]() < 0.5 ? "Heads" : "Tails";
[Link]("coinResult").innerText = result;
}
</script>

65. Click Counter

<button onclick="increment()">Click Me</button>
<p id="clicks">Clicks: 0</p>

<script>
let count = 0;
function increment() {
count++;
[Link]("clicks").innerText = `Clicks: ${count}`;
}
</script>

66. Find the Hidden Object

<div onclick="find(event)"
style="width:300px;height:300px;background:#eee;position:relative">
<div id="hidden"
style="width:20px;height:20px;background:red;position:absolute;top:150px;left:20
0px;"></div>
</div>
<p id="findResult"></p>

<script>
function find(e) {
const rect = [Link]();
const x = [Link] - [Link];
const y = [Link] - [Link];
const hidden = [Link]('hidden');
const hiddenX = parseInt([Link]);
const hiddenY = parseInt([Link]);

if ([Link](x - hiddenX) < 20 && [Link](y - hiddenY) < 20) {

[Link]("findResult").innerText = "You found it!";
} else {
[Link]("findResult").innerText = "Try again!";
}
}
</script>

67. Match the Cards

(Simplified 2-card match version)
<button onclick="flip(1)">Card 1</button>
<button onclick="flip(2)">Card 2</button>
<p id="matchResult"></p>

<script>
const cards = [1, 2];
let flipped = [];

function flip(card) {
[Link](card);
if ([Link] === 2) {
if (flipped[0] === flipped[1]) {
[Link]("matchResult").innerText = "Matched!";
} else {
[Link]("matchResult").innerText = "Not a match!";
}
flipped = [];
 }
}
</script>

68. Memory Card Game

(Basic memory game logic)
<button onclick="memoryClick(1)">Card 1</button>
<button onclick="memoryClick(2)">Card 2</button>
<p id="memoryOutput"></p>

<script>
const memoryCards = [1, 2];
let memoryClicks = [];

function memoryClick(card) {
[Link](card);
if ([Link] === 2) {
const match = memoryCards[0] === memoryCards[1];
[Link]("memoryOutput").innerText = match ? "Memory
Match!" : "Try Again!";
memoryClicks = [];
}
}
</script>

69. Simple Quiz Game

<p>What is the capital of Kenya?</p>
<button onclick="quiz('Nairobi')">Nairobi</button>
<button onclick="quiz('Kampala')">Kampala</button>
<p id="quizResult"></p>

<script>
function quiz(answer) {
[Link]("quizResult").innerText =
answer === 'Nairobi' ? "Correct!" : "Wrong Answer.";
}
</script>

70. Hangman Game (Simplified Logic)

<input id="hangmanGuess" placeholder="Guess a letter">
<button onclick="guessLetter()">Guess</button>
<p id="hangmanOutput"></p>

<script>
const word = "apple";
let guessed = "";

function guessLetter() {
const letter = [Link]("hangmanGuess").[Link]();
guessed += letter;
let display = "";
 for (let char of word) {
display += [Link](char) ? char : "_";
}

[Link]("hangmanOutput").innerText = display;

if (![Link]("_")) {
[Link]("hangmanOutput").innerText += " - You won!";
}
}
</script>

These games introduce a playful and educational approach to learning JavaScript. In the next
chapter, we’ll level up by exploring advanced logic-based games and dynamic real-time
interactivity.

Chapter 8: Puzzle and Logic-Based Games

In this chapter, we explore puzzle-based and logic-intensive games. These projects help sharpen
skills in complex condition checks, array/grid manipulation, and game logic design. Each game
includes a clear explanation and a foundational implementation to build upon.

71. Tic Tac Toe

Description: A two-player game where players take turns marking a 3×3 grid.
Key Concepts: Arrays, game state tracking, win conditions, event listeners.
<div id="board"></div>
<p id="status"></p>

<script>
const board = ['', '', '', '', '', '', '', '', ''];
let current = 'X';

function render() {
[Link]("board").innerHTML = [Link]((val, i) =>
`<button onclick="mark(${i})">${val}</button>`
).join('');
}

function mark(i) {
if (board[i]) return;
board[i] = current;
if (checkWin()) {
[Link]("status").innerText = `${current} wins!`;
} else {
current = current === 'X' ? 'O' : 'X';
render();
}
}
 function checkWin() {
const winCombos = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],
[2,4,6]];
return [Link](combo => [Link](i => board[i] === current));
}

render();
</script>

72. Sudoku Grid Setup

Description: Generates a blank 9×9 Sudoku grid.
Key Concepts: Grid layouts, loops, input creation.
<div id="sudoku"></div>

<script>
const container = [Link]("sudoku");
for (let i = 0; i < 9; i++) {
const row = [Link]("div");
[Link] = 'flex';
for (let j = 0; j < 9; j++) {
const cell = [Link]("input");
[Link] = "number";
[Link] = 1;
[Link] = 9;
[Link] = "30px";
[Link](cell);
}
[Link](row);
}
</script>

73. Minesweeper Lite

Description: A simplified grid with randomly placed bombs.
Key Concepts: Grid logic, randomization, condition checking.
<div id="minefield"></div>

<script>
const size = 5;
const bombs = [3, 7, 11];
const field = [Link]("minefield");

for (let i = 0; i < size * size; i++) {

const cell = [Link]("button");
[Link] = "?";
[Link] = () => {

};
[Link] = [Link](i) ? " " : " 💣 ✅
";

[Link](cell);
}
</script>
74. Wordle Clone
Description: A mini clone of Wordle with a single guess feature.
Key Concepts: String comparison, input evaluation.
<input id="wordGuess" maxlength="5">
<button onclick="checkWord()">Guess</button>
<p id="wordResult"></p>

<script>
const secret = "hello";

function checkWord() {
const guess = [Link]("wordGuess").[Link]();
let feedback = "";

for (let i = 0; i < 5; i++) {

feedback += guess[i] === secret[i] ? guess[i].toUpperCase() : "_";
}

[Link]("wordResult").innerText = feedback;
}
</script>

75. Sliding Puzzle Game

Description: A 3x3 grid where tiles slide into the empty space.
Key Concepts: Array manipulation, dynamic DOM updates.
<div id="slidePuzzle"></div>

<script>
let tiles = [1, 2, 3, 4, 5, 6, 7, 8, null];

function drawPuzzle() {
const grid = [Link]("slidePuzzle");
[Link] = "";
[Link]((tile, i) => {
const btn = [Link]("button");
[Link] = tile ?? "";
[Link] = () => slide(i);
[Link](btn);
});
}

function slide(index) {
const empty = [Link](null);
const validMoves = [index - 1, index + 1, index - 3, index + 3];
if ([Link](empty)) {
[tiles[empty], tiles[index]] = [tiles[index], tiles[empty]];
drawPuzzle();
}
}

drawPuzzle();
</script>
76. Whack-a-Mole
Description: Random mole appears, and the user clicks to score.
Key Concepts: Timers, random index generation.
<div id="moleBoard"></div>
<p id="moleScore">Score: 0</p>

<script>
let score = 0;
const board = [Link]("moleBoard");

for (let i = 0; i < 9; i++) {

const hole = [Link]("button");
[Link] = " ";
[Link] = () => {
if ([Link] === " ") {
score++;
🐹
[Link]("moleScore").innerText = `Score: ${score}`;
}
};
[Link](hole);
}

setInterval(() => {
const holes = [Link]("button");
[Link](h => [Link] = " ");
holes[[Link]([Link]() * 9)].innerText = "
}, 800);
🐹
";

</script>

77. Color Matching Game

Description: Match the displayed color name to the correct color.
Key Concepts: Comparison, styles, color recognition.
<p id="colorName"></p>
<button onclick="guessColor('red')">Red</button>
<button onclick="guessColor('blue')">Blue</button>
<p id="colorResult"></p>

<script>
const colors = ['red', 'blue'];
const answer = colors[[Link]([Link]() * [Link])];
[Link]("colorName").innerText = answer;

function guessColor(choice) {
[Link]("colorResult").innerText =
choice === answer ? "Correct!" : "Wrong!";
}
</script>

78. Arithmetic Quiz

Description: Random arithmetic question for practice.
Key Concepts: Random number generation, arithmetic ops.
<p id="question"></p>
<input id="answerBox">
<button onclick="checkAnswer()">Check</button>
<p id="result"></p>

<script>
const num1 = [Link]([Link]() * 10);
const num2 = [Link]([Link]() * 10);
const sum = num1 + num2;

[Link]("question").innerText = `What is ${num1} + ${num2}?`;

function checkAnswer() {
const userAns = parseInt([Link]("answerBox").value);
[Link]("result").innerText = userAns === sum ? "Correct!" :
"Try Again!";
}
</script>

79. Bubble Popper

Description: Click bubbles to pop and score.
Key Concepts: Event binding, element creation and removal.
<div id="bubbleArea"></div>
<p id="bubbleScore">Score: 0</p>

<script>
let score = 0;

function spawnBubble() {
const bubble = [Link]("button");
[Link] = "O";
[Link] = "5px";
[Link] = () => {
score++;
[Link]("bubbleScore").innerText = `Score: ${score}`;
[Link]();
};
[Link]("bubbleArea").appendChild(bubble);
}

setInterval(spawnBubble, 1000);
</script>

80. Score Tracker

Description: Keep track of score with add/subtract/reset.
Key Concepts: Basic arithmetic, state management.
<p id="liveScore">Score: 0</p>
<button onclick="updateScore(1)">+1</button>
<button onclick="updateScore(-1)">-1</button>
<button onclick="updateScore(0)">Reset</button>
<script>
let score = 0;

function updateScore(change) {
score = change === 0 ? 0 : score + change;
[Link]("liveScore").innerText = `Score: ${score}`;
}
</script>

Part IV: CRUD Applications and Local Storage

Chapter 9: Note Taking and Storage
This chapter focuses on creating useful note-taking and productivity tools using JavaScript. The
emphasis here is on CRUD functionality—Create, Read, Update, Delete—combined with
localStorage to preserve user input across sessions.

81. Simple Note App

Description:
A basic application that allows users to write and display a note.
Code:
<textarea id="note" placeholder="Write your note here..."></textarea>
<button onclick="saveNote()">Save Note</button>
<p id="displayNote"></p>

<script>
function saveNote() {
const note = [Link]("note").value;
[Link]("displayNote").innerText = note;
}
</script>

82. Notes with Local Storage

Description:
Extends the previous app to persist the note even after a page reload using localStorage.

Code:
<textarea id="note" placeholder="Write your note here..."></textarea>
<button onclick="saveNote()">Save Note</button>
<p id="displayNote"></p>
<script>
const savedNote = [Link]("note");
if (savedNote) {
[Link]("note").value = savedNote;
[Link]("displayNote").innerText = savedNote;
}

function saveNote() {
const note = [Link]("note").value;
[Link]("note", note);
[Link]("displayNote").innerText = note;
}
</script>

83. To-do List

Description:
Users can add tasks and delete them. Data is stored in localStorage.
Code:
<input type="text" id="taskInput" placeholder="Enter task">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>

<script>
let tasks = [Link]([Link]("tasks")) || [];

function renderTasks() {
const taskList = [Link]("taskList");
[Link] = "";
[Link]((task, index) => {
[Link] += `
<li>${task} <button
onclick="deleteTask(${index})">Delete</button></li>`;
});
[Link]("tasks", [Link](tasks));
}

function addTask() {
const task = [Link]("taskInput").value;
if (task) {
[Link](task);
[Link]("taskInput").value = "";
renderTasks();
}
}

function deleteTask(index) {
[Link](index, 1);
renderTasks();
}

renderTasks();
</script>
84. Task Manager
Description:
A to-do list with task status (pending/completed).
Code:
<input type="text" id="taskInput" placeholder="New task">
<button onclick="addTask()">Add</button>
<ul id="taskList"></ul>

<script>
let tasks = [Link]([Link]("taskManager")) || [];

function renderTasks() {
const list = [Link]("taskList");
[Link] = "";
[Link]((task, i) => {
[Link] += `
<li>
<span style="text-decoration:${[Link] ? 'line-through' :
'none'}">${[Link]}</span>
<button onclick="toggleStatus(${i})">Toggle</button>
<button onclick="remove(${i})">Delete</button>
</li>`;
});
[Link]("taskManager", [Link](tasks));
}

function addTask() {
const text = [Link]("taskInput").value;
if (text) {
[Link]({ text, completed: false });
[Link]("taskInput").value = "";
renderTasks();
}
}

function toggleStatus(i) {
tasks[i].completed = !tasks[i].completed;
renderTasks();
}

function remove(i) {
[Link](i, 1);
renderTasks();
}

renderTasks();
</script>

85. Daily Planner

Description:
Plan your tasks for specific times of the day.
Code (hour blocks with textareas):
<div id="planner"></div>
<script>
const planner = [Link]("planner");

for (let hour = 9; hour <= 17; hour++) {

const saved = [Link](`hour-${hour}`) || "";
[Link] += `
<div>
<strong>${hour}:00</strong>
<input type="text" id="h${hour}" value="${saved}">
<button onclick="save(${hour})">Save</button>
</div>`;
}

function save(hour) {
const value = [Link](`h${hour}`).value;
[Link](`hour-${hour}`, value);
}
</script>

86. Shopping List

Description:
Add, edit, and delete shopping items.
Code:
<input type="text" id="itemInput" placeholder="Add item">
<button onclick="addItem()">Add</button>
<ul id="itemList"></ul>

<script>
let items = [Link]([Link]("shoppingList")) || [];

function render() {
const list = [Link]("itemList");
[Link] = "";
[Link]((item, i) => {
[Link] += `
<li contenteditable="true" onblur="updateItem(${i}, [Link])">
${item}
<button onclick="removeItem(${i})">X</button>
</li>`;
});
[Link]("shoppingList", [Link](items));
}

function addItem() {
const input = [Link]("itemInput");
if ([Link]()) {
[Link]([Link]());
[Link] = "";
render();
}
}

function removeItem(i) {
[Link](i, 1);
render();
}

function updateItem(i, value) {

 items[i] = value;
[Link]("shoppingList", [Link](items));
}

render();
</script>

87. Reminder List

Description:
Set reminders with due dates.
Code:
<input type="text" id="reminderText" placeholder="Reminder">
<input type="date" id="reminderDate">
<button onclick="addReminder()">Add</button>
<ul id="reminderList"></ul>

<script>
let reminders = [Link]([Link]("reminders")) || [];

function addReminder() {
const text = [Link]("reminderText").value;
const date = [Link]("reminderDate").value;
if (text && date) {
[Link]({ text, date });
render();
}
}

function render() {
const list = [Link]("reminderList");
[Link] = "";
[Link]((r, i) => {
[Link] += `<li>${[Link]} - ${[Link]} <button onclick="remove($
{i})">Delete</button></li>`;
});
[Link]("reminders", [Link](reminders));
}

function remove(i) {
[Link](i, 1);
render();
}

render();
</script>

88. Goal Tracker

Description:
Track your goals with a progress bar.
Code:
<input type="text" id="goalName" placeholder="Goal name">
<input type="number" id="goalProgress" max="100" min="0" placeholder="Progress
%">
<button onclick="addGoal()">Add Goal</button>
<ul id="goalList"></ul>

<script>
let goals = [Link]([Link]("goals")) || [];

function addGoal() {
const name = [Link]("goalName").value;
const progress = [Link]("goalProgress").value;
if (name && progress !== "") {
[Link]({ name, progress: parseInt(progress) });
render();
}
}

function render() {
const list = [Link]("goalList");
[Link] = "";
[Link]((g, i) => {
[Link] += `
<li>${[Link]}
<progress value="${[Link]}" max="100"></progress>
<button onclick="deleteGoal(${i})">X</button>
</li>`;
});
[Link]("goals", [Link](goals));
}

function deleteGoal(i) {
[Link](i, 1);
render();
}

render();
</script>

89. Reading List Tracker

Description:
Track books and mark them as read/unread.
Code:
<input type="text" id="bookTitle" placeholder="Book title">
<button onclick="addBook()">Add Book</button>
<ul id="bookList"></ul>

<script>
let books = [Link]([Link]("readingList")) || [];

function addBook() {
const title = [Link]("bookTitle").value;
[Link]({ title, read: false });
render();
}

function toggleRead(index) {
books[index].read = !books[index].read;
render();
 }

function render() {
const list = [Link]("bookList");
[Link] = "";
[Link]((book, i) => {
[Link] += `
<li>
${[Link]} - ${[Link] ? "Read" : "Unread"}
<button onclick="toggleRead(${i})">Toggle</button>
</li>`;
});
[Link]("readingList", [Link](books));
}

render();
</script>

90. Daily Journal

Description:
Write daily entries saved by date.
Code:
<textarea id="journalEntry" placeholder="Write your journal..."></textarea>
<button onclick="saveEntry()">Save</button>
<p id="status"></p>

<script>
const today = new Date().toISOString().split("T")[0];
const key = `journal-${today}`;
const saved = [Link](key);
[Link]("journalEntry").value = saved || "";

function saveEntry() {
const entry = [Link]("journalEntry").value;
[Link](key, entry);
[Link]("status").innerText = "Entry saved for " + today;
}
</script>

Chapter 10: Bookmarks and Favorites

This chapter focuses on building JavaScript projects that help users manage their bookmarks and
favorite content. These tools are particularly useful for organizing reading material, recipes, quotes,
and books. Each project uses JavaScript's DOM manipulation, local storage, and event handling
features to offer persistent user experiences.
Project 91: Bookmark Manager
Description:
A web app that lets users save website URLs and titles, view them as a list, and delete them when
no longer needed.
Features:
• Add website title and URL
• Store bookmarks in local storage
• Delete individual bookmarks
Code:
<!-- [Link] -->
<input type="text" id="title" placeholder="Website Title">
<input type="url" id="url" placeholder="[Link]
<button id="add">Add Bookmark</button>
<ul id="bookmarkList"></ul>

// [Link]
const titleInput = [Link]('title');
const urlInput = [Link]('url');
const addBtn = [Link]('add');
const list = [Link]('bookmarkList');

let bookmarks = [Link]([Link]('bookmarks')) || [];

function displayBookmarks() {
[Link] = '';
[Link]((bm, index) => {
const li = [Link]('li');
[Link] = `<a href="${[Link]}" target="_blank">${[Link]}</a>
<button onclick="removeBookmark(${index})">Delete</button>`;
[Link](li);
});
}

function addBookmark() {
const title = [Link]();
const url = [Link]();
if (title && url) {
[Link]({ title, url });
[Link]('bookmarks', [Link](bookmarks));
displayBookmarks();
[Link] = '';
[Link] = '';
}
}

function removeBookmark(index) {
[Link](index, 1);
[Link]('bookmarks', [Link](bookmarks));
displayBookmarks();
}

[Link]('click', addBookmark);
displayBookmarks();
Project 92: Favorite Quotes Saver
Description:
This app lets users store and revisit their favorite motivational quotes.
Features:
• Add custom quotes
• Persist quotes in local storage
• Display and remove quotes
Code:
<!-- [Link] -->
<textarea id="quoteInput" placeholder="Enter your favorite quote"></textarea>
<button id="saveQuote">Save Quote</button>
<ul id="quoteList"></ul>

// [Link]
const quoteInput = [Link]('quoteInput');
const saveBtn = [Link]('saveQuote');
const quoteList = [Link]('quoteList');

let quotes = [Link]([Link]('quotes')) || [];

function showQuotes() {
[Link] = '';
[Link]((quote, i) => {
const li = [Link]('li');
[Link] = `"${quote}" <button
onclick="deleteQuote(${i})">Remove</button>`;
[Link](li);
});
}

function saveQuote() {
const quote = [Link]();
if (quote) {
[Link](quote);
[Link]('quotes', [Link](quotes));
[Link] = '';
showQuotes();
}
}

function deleteQuote(index) {
[Link](index, 1);
[Link]('quotes', [Link](quotes));
showQuotes();
}

[Link]('click', saveQuote);
showQuotes();
Project 93: Favorite Recipes Organizer
Description:
An organizer that allows users to add the name and ingredients of their favorite recipes for quick
reference.
Features:
• Add recipe name and ingredients
• Display all saved recipes
• Delete recipes
Code:
<!-- [Link] -->
<input type="text" id="recipeName" placeholder="Recipe Name">
<textarea id="ingredients" placeholder="Ingredients..."></textarea>
<button id="addRecipe">Add Recipe</button>
<div id="recipeContainer"></div>

// [Link]
const recipeName = [Link]('recipeName');
const ingredients = [Link]('ingredients');
const addRecipeBtn = [Link]('addRecipe');
const container = [Link]('recipeContainer');

let recipes = [Link]([Link]('recipes')) || [];

function displayRecipes() {
[Link] = '';
[Link]((rec, i) => {
const div = [Link]('div');
[Link] = `<strong>${[Link]}</strong><p>${[Link]}</p>
<button onclick="deleteRecipe(${i})">Delete</button>`;
[Link](div);
});
}

function addRecipe() {
const name = [Link]();
const ing = [Link]();
if (name && ing) {
[Link]({ name, ingredients: ing });
[Link]('recipes', [Link](recipes));
[Link] = '';
[Link] = '';
displayRecipes();
}
}

function deleteRecipe(index) {
[Link](index, 1);
[Link]('recipes', [Link](recipes));
displayRecipes();
}

[Link]('click', addRecipe);
displayRecipes();
Project 94: Article Reader List
Description:
This app stores links to articles users plan to read later.
Features:
• Save article title and link
• Open links in a new tab
• Remove articles after reading
Code:
<!-- [Link] -->
<input type="text" id="articleTitle" placeholder="Article Title">
<input type="url" id="articleLink" placeholder="[Link]
<button id="addArticle">Add Article</button>
<ul id="articleList"></ul>

// [Link]
const titleInput = [Link]('articleTitle');
const linkInput = [Link]('articleLink');
const addBtn = [Link]('addArticle');
const list = [Link]('articleList');

let articles = [Link]([Link]('articles')) || [];

function showArticles() {
[Link] = '';
[Link]((a, i) => {
const li = [Link]('li');
[Link] = `<a href="${[Link]}" target="_blank">${[Link]}</a>
<button onclick="removeArticle(${i})">Remove</button>`;
[Link](li);
});
}

function addArticle() {
const title = [Link]();
const link = [Link]();
if (title && link) {
[Link]({ title, link });
[Link]('articles', [Link](articles));
[Link] = '';
[Link] = '';
showArticles();
}
}

function removeArticle(index) {
[Link](index, 1);
[Link]('articles', [Link](articles));
showArticles();
}

[Link]('click', addArticle);
showArticles();
Project 95: Saved Book Titles Tracker
Description:
A simple list where users can input and track books they’ve read or plan to read.
Features:
• Input and store book titles
• View list of saved books
• Delete any book from the list
Code:
<!-- [Link] -->
<input type="text" id="bookInput" placeholder="Book Title">
<button id="saveBook">Save Book</button>
<ul id="bookList"></ul>

// [Link]
const bookInput = [Link]('bookInput');
const saveBtn = [Link]('saveBook');
const bookList = [Link]('bookList');

let books = [Link]([Link]('books')) || [];

function renderBooks() {
[Link] = '';
[Link]((book, index) => {
const li = [Link]('li');
[Link] = `${book} <button
onclick="removeBook(${index})">Delete</button>`;
[Link](li);
});
}

function saveBook() {
const title = [Link]();
if (title) {
[Link](title);
[Link]('books', [Link](books));
[Link] = '';
renderBooks();
}
}

function removeBook(index) {
[Link](index, 1);
[Link]('books', [Link](books));
renderBooks();
}

[Link]('click', saveBook);
renderBooks();

Each project in this chapter provides a practical example of using JavaScript to manage and persist
user-generated content. These small tools are not only useful in real-world applications but also
reinforce essential frontend skills like local storage manipulation, input validation, and dynamic
DOM rendering.

Chapter 11: Authentication Interfaces

This chapter introduces essential authentication interface components for any modern web
application. Each project focuses on different aspects of the authentication process, including login,
registration, password reset, and validation. While these examples are frontend-only (not connected
to a backend), they form the foundation for real-world user authentication flows.

Project 96: Login UI with Validation

Description:
A simple login interface that validates if both email and password fields are filled before allowing
submission.
Features:
• Email and password input fields
• Basic required field validation
• Prevents submission with empty fields
Code:
<!-- [Link] -->
<form id="loginForm">
<input type="email" id="loginEmail" placeholder="Email" required>
<input type="password" id="loginPassword" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<p id="loginMessage"></p>

// [Link]
const loginForm = [Link]('loginForm');
const message = [Link]('loginMessage');

[Link]('submit', function (e) {

[Link]();
const email = [Link]('loginEmail').[Link]();
const password = [Link]('loginPassword').[Link]();

if (!email || !password) {
[Link] = 'Please fill in both fields.';
} else {
[Link] = 'Login successful (simulated).';
}
});
Project 97: Sign-up UI with Validation
Description:
A user registration form that includes validation for required fields and password confirmation.
Features:
• Fields for name, email, password, and confirm password
• Validation to ensure passwords match
• Alerts for missing or incorrect inputs
Code:
<!-- [Link] -->
<form id="signupForm">
<input type="text" id="name" placeholder="Full Name" required>
<input type="email" id="signupEmail" placeholder="Email" required>
<input type="password" id="signupPassword" placeholder="Password" required>
<input type="password" id="confirmPassword" placeholder="Confirm Password"
required>
<button type="submit">Sign Up</button>
</form>
<p id="signupMessage"></p>

// [Link]
const signupForm = [Link]('signupForm');
const signupMessage = [Link]('signupMessage');

[Link]('submit', function (e) {

[Link]();
const name = [Link]('name').[Link]();
const email = [Link]('signupEmail').[Link]();
const password = [Link]('signupPassword').value;
const confirm = [Link]('confirmPassword').value;

if (!name || !email || !password || !confirm) {

[Link] = 'All fields are required.';
} else if (password !== confirm) {
[Link] = 'Passwords do not match.';
} else {
[Link] = 'Registration successful (simulated).';
}
});

Project 98: Forgot Password UI

Description:
A user interface for initiating a password reset process using the user’s email.
Features:
• Email input field
• Basic email validation
 • Simulated reset message
Code:
<!-- [Link] -->
<form id="forgotForm">
<input type="email" id="forgotEmail" placeholder="Enter your email" required>
<button type="submit">Reset Password</button>
</form>
<p id="resetMessage"></p>

// [Link]
const forgotForm = [Link]('forgotForm');
const resetMessage = [Link]('resetMessage');

[Link]('submit', function (e) {

[Link]();
const email = [Link]('forgotEmail').[Link]();

if (!email) {
[Link] = 'Please enter your email.';
} else {
[Link] = `A reset link has been sent to ${email}
(simulated).`;
}
});

Project 99: Password Visibility Toggle

Description:
Adds a checkbox that allows users to toggle the visibility of a password field.
Features:
• Show/hide password functionality
• Simple UI with one input field and checkbox
Code:
<!-- [Link] -->
<input type="password" id="userPassword" placeholder="Enter password">
<label>
<input type="checkbox" id="togglePassword"> Show Password
</label>

// [Link]
const passwordInput = [Link]('userPassword');
const toggle = [Link]('togglePassword');

[Link]('change', function () {
if ([Link]) {
[Link] = 'text';
} else {
[Link] = 'password';
}
});
Project 100: Form Validation with Alerts
Description:
A form that demonstrates how to provide immediate alert messages when a user submits invalid
input.
Features:
• Validates email format and password length
• Uses alert() to notify the user of input issues

Code:
<!-- [Link] -->
<form id="alertForm">
<input type="email" id="alertEmail" placeholder="Email" required>
<input type="password" id="alertPassword" placeholder="Password (min 6 chars)"
required>
<button type="submit">Submit</button>
</form>

// [Link]
const alertForm = [Link]('alertForm');

[Link]('submit', function (e) {

[Link]();
const email = [Link]('alertEmail').[Link]();
const password = [Link]('alertPassword').value;

if () {
alert('Please enter a valid email.');
} else if ([Link] < 6) {
alert('Password must be at least 6 characters.');
} else {
alert('Form submitted successfully (simulated).');
}
});

This chapter equips you with reusable authentication UI components that form the basis for real
login, registration, and security flows. In production environments, these interfaces would be linked
to backend logic for user validation, password hashing, and session management.

Part V: API-Driven Projects

Chapter 12: API Integration Basics
This chapter explores how to consume public APIs using JavaScript and dynamically display data
on the web. Each project demonstrates real-world usage of fetch() and asynchronous
programming concepts. The goal is to provide foundational skills for working with APIs in frontend
applications.

Project 101: Random User Generator

Description:
Fetches random user data from the Random User API and displays name, email, and profile image.
API Used:
[Link]
Code:
<!-- [Link] -->
<button id="getUser">Get Random User</button>
<div id="userInfo"></div>

// [Link]
[Link]('getUser').addEventListener('click', async () => {
const res = await fetch('[Link]
const data = await [Link]();
const user = [Link][0];
[Link]('userInfo').innerHTML = `
<img src="${[Link]}" alt="User Image">
<p>${[Link]} ${[Link]}</p>
<p>${[Link]}</p>
`;
});

Project 102: Weather App (OpenWeather API)

Description:
Shows current weather based on city input using OpenWeather API.
API Used:
[Link]
Note: Requires API key.
Code:
<!-- [Link] -->
<input id="city" placeholder="Enter city">
<button id="getWeather">Get Weather</button>
<div id="weatherResult"></div>

// [Link]
const apiKey = 'YOUR_API_KEY_HERE';

[Link]('getWeather').addEventListener('click', async () => {

const city = [Link]('city').value;
const res = await fetch(`[Link]
{city}&appid=${apiKey}&units=metric`);
const data = await [Link]();
[Link]('weatherResult').innerHTML = `
<p>Temperature: ${[Link]}°C</p>
<p>${[Link][0].description}</p>
 `;
});

Project 103: Movie Search App (OMDb API)

Description:
Searches for movies using the OMDb API and displays results.
API Used:
[Link]
Note: Requires API key.
Code:
<!-- [Link] -->
<input id="movieTitle" placeholder="Search movie">
<button id="searchMovie">Search</button>
<div id="movieResult"></div>

const apiKey = 'YOUR_OMDB_API_KEY';

[Link]('searchMovie').addEventListener('click', async () => {

const title = [Link]('movieTitle').value;
const res = await fetch(`[Link]
`);
const data = await [Link]();
if ([Link] === 'True') {
[Link]('movieResult').innerHTML = `
<h3>${[Link]} (${[Link]})</h3>
<img src="${[Link]}" alt="Poster">
<p>${[Link]}</p>
`;
} else {
[Link]('movieResult').innerText = 'Movie not found.';
}
});

Project 104: GitHub Profile Viewer

Description:
Displays GitHub user profile data based on the username.
API Used:
[Link]
Code:
<input id="githubUser" placeholder="GitHub username">
<button id="fetchUser">View Profile</button>
<div id="githubProfile"></div>

[Link]('fetchUser').addEventListener('click', async () => {

const username = [Link]('githubUser').value;
const res = await fetch(`[Link]
const data = await [Link]();
[Link]('githubProfile').innerHTML = `
 <img src="${data.avatar_url}" width="100">
<p>Name: ${[Link]}</p>
<p>Public Repos: ${data.public_repos}</p>
<p>Followers: ${[Link]}</p>
`;
});

Project 105: News Headlines Feed

Description:
Displays latest news headlines from NewsAPI.
API Used:
[Link]
Note: Requires API key.
Code:
<button id="getNews">Load News</button>
<ul id="newsFeed"></ul>

const newsKey = 'YOUR_NEWS_API_KEY';

[Link]('getNews').addEventListener('click', async () => {

const res = await fetch(`[Link]
country=us&apiKey=${newsKey}`);
const data = await [Link]();
const list = [Link](article =>
`<li>${[Link]}</li>`).join('');
[Link]('newsFeed').innerHTML = list;
});

Project 106: Country Info Viewer

Description:
Shows details of a country such as population, capital, and flag using the REST Countries API.
API Used:
[Link]
Code:
<input id="countryName" placeholder="Enter country">
<button id="getCountry">Get Info</button>
<div id="countryInfo"></div>

[Link]('getCountry').addEventListener('click', async () => {

const name = [Link]('countryName').value;
const res = await fetch(`[Link]
const data = await [Link]();
const country = data[0];
[Link]('countryInfo').innerHTML = `
<img src="${[Link]}" width="100">
<p>Name: ${[Link]}</p>
<p>Capital: ${[Link][0]}</p>
<p>Population: ${[Link]}</p>
 `;
});

Project 107: Chuck Norris Joke Fetcher

Description:
Fetches a random Chuck Norris joke using the Chuck Norris API.
API Used:
[Link]
Code:
<button id="jokeBtn">Get Joke</button>
<p id="jokeText"></p>

[Link]('jokeBtn').addEventListener('click', async () => {

const res = await fetch('[Link]
const data = await [Link]();
[Link]('jokeText').textContent = [Link];
});

Project 108: SpaceX Launches Viewer

Description:
Displays a list of recent SpaceX launches using the SpaceX API.
API Used:
[Link]
Code:
<button id="getLaunch">Get Last Launch</button>
<div id="launchInfo"></div>

[Link]('getLaunch').addEventListener('click', async () => {

const res = await fetch('[Link]
const data = await [Link]();
[Link]('launchInfo').innerHTML = `
<h3>${[Link]}</h3>
<p>Date: ${new Date(data.date_utc).toLocaleString()}</p>
<p>${[Link] || 'No details available.'}</p>
`;
});

Project 109: Currency Exchange App

Description:
Converts one currency to another using ExchangeRate API.
API Used:
[Link]
Code:
<input id="amount" placeholder="Amount">
<select id="fromCurrency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
<select id="toCurrency">
<option value="KES">KES</option>
<option value="INR">INR</option>
</select>
<button id="convert">Convert</button>
<p id="result"></p>

[Link]('convert').addEventListener('click', async () => {

const amount = parseFloat([Link]('amount').value);
const from = [Link]('fromCurrency').value;
const to = [Link]('toCurrency').value;
const res = await fetch(`[Link]
const data = await [Link]();
const rate = [Link][to];
const converted = amount * rate;
[Link]('result').textContent = `${amount} ${from} = $
{[Link](2)} ${to}`;
});

Project 110: Dog Image Generator

Description:
Fetches a random dog image using Dog CEO API.
API Used:
[Link]
Code:
<button id="getDog">Show Dog</button>
<div id="dogImage"></div>

[Link]('getDog').addEventListener('click', async () => {

const res = await fetch('[Link]
const data = await [Link]();
[Link]('dogImage').innerHTML = `<img src="${[Link]}"
width="300">`;
});

Chapter 13: Advanced API Applications

This chapter covers advanced API-based projects using third-party services to build more functional
and user-oriented interfaces. These applications demonstrate integration with platforms like
YouTube, OpenAI, Google Books, and cryptocurrency data providers.
Project 111: Recipe Finder (MealDB API)
Description:
Search for recipes by name and display instructions, ingredients, and image.
API Used:
[Link]
Code:
<input id="recipeInput" placeholder="Enter recipe name">
<button id="searchRecipe">Search</button>
<div id="recipeResult"></div>

[Link]('searchRecipe').addEventListener('click', async () => {

const recipe = [Link]('recipeInput').value;
const res = await fetch(`[Link]
s=${recipe}`);
const data = await [Link]();
const meal = [Link]?.[0];
if (meal) {
[Link]('recipeResult').innerHTML = `
<h3>${[Link]}</h3>
<img src="${[Link]}" width="300">
<p><strong>Instructions:</strong> ${[Link]}</p>
`;
} else {
[Link]('recipeResult').innerText = 'Recipe not found.';
}
});

Project 112: YouTube Video Search

Description:
Searches YouTube for videos using a keyword and displays video thumbnails and titles.
API Used:
[Link]
Note: Requires API key.
Code:
<input id="youtubeSearch" placeholder="Search YouTube">
<button id="searchYT">Search</button>
<div id="youtubeResults"></div>

const youtubeKey = 'YOUR_YOUTUBE_API_KEY';

[Link]('searchYT').addEventListener('click', async () => {

const query = [Link]('youtubeSearch').value;
const res = await fetch(`[Link]
part=snippet&q=${query}&type=video&key=${youtubeKey}`);
const data = await [Link]();
const results = [Link](video => `
<div>
<img src="${[Link]}">
 <p>${[Link]}</p>
</div>
`).join('');
[Link]('youtubeResults').innerHTML = results;
});

Project 113: Crypto Price Tracker

Description:
Fetches real-time cryptocurrency prices using CoinGecko API.
API Used:
[Link]
Code:
<select id="cryptoSelect">
<option value="bitcoin">Bitcoin</option>
<option value="ethereum">Ethereum</option>
</select>
<button id="trackCrypto">Track Price</button>
<div id="cryptoPrice"></div>

[Link]('trackCrypto').addEventListener('click', async () => {

const coin = [Link]('cryptoSelect').value;
const res = await fetch(`[Link]
{coin}&vs_currencies=usd`);
const data = await [Link]();
[Link]('cryptoPrice').innerText = `Current Price: $$
{data[coin].usd}`;
});

Project 114: Dictionary Lookup

Description:
Returns word definitions using Dictionary API.
API Used:
[Link]
Code:
<input id="wordInput" placeholder="Enter word">
<button id="lookupWord">Define</button>
<div id="definition"></div>

[Link]('lookupWord').addEventListener('click', async () => {

const word = [Link]('wordInput').value;
const res = await fetch(`[Link]
{word}`);
const data = await [Link]();
if (data[0]) {
const meaning = data[0].meanings[0].definitions[0].definition;
[Link]('definition').innerText = `Definition: ${meaning}`;
} else {
[Link]('definition').innerText = 'Definition not found.';
 }
});

Project 115: AI Quote Generator (OpenAI API)

Description:
Generates inspirational quotes using OpenAI API.
API Used:
[Link]
Note: Requires API key.
Code:
<button id="generateQuote">Generate Quote</button>
<p id="aiQuote"></p>

const openaiKey = 'YOUR_OPENAI_API_KEY';

[Link]('generateQuote').addEventListener('click', async () => {

const res = await fetch('[Link] {
method: 'POST',
headers: {
'Authorization': `Bearer ${openaiKey}`,
'Content-Type': 'application/json'
},
body: [Link]({
model: 'text-davinci-003',
prompt: 'Generate a short inspirational quote.',
max_tokens: 30
})
});
const data = await [Link]();
[Link]('aiQuote').innerText = [Link][0].[Link]();
});

Project 116: Text Summarizer (API based)

Description:
Summarizes long paragraphs using an external summarization API.
API Used:
[Link] or any summarization endpoint.
Note: Requires API key.
Code:
<textarea id="textInput" rows="6" placeholder="Paste long text..."></textarea>
<button id="summarizeText">Summarize</button>
<p id="summaryOutput"></p>

// Example assumes a hypothetical summarization endpoint

[Link]('summarizeText').addEventListener('click', async () => {
const text = [Link]('textInput').value;
const res = await fetch('[Link] {
 method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': 'YOUR_API_KEY'
},
body: [Link]({ text })
});
const data = await [Link]();
[Link]('summaryOutput').innerText = [Link];
});

Project 117: Air Quality Checker

Description:
Displays air quality index (AQI) for a given city.
API Used:
[Link]
Code:
<input id="aqCity" placeholder="Enter city">
<button id="checkAQI">Check AQI</button>
<p id="aqResult"></p>

[Link]('checkAQI').addEventListener('click', async () => {

const city = [Link]('aqCity').value;
const res = await fetch(`[Link]
const data = await [Link]();
const pm25 = [Link][0]?.measurements[0]?.value;
[Link]('aqResult').innerText = pm25 ? `PM2.5: ${pm25}` :
'Data not found.';
});

Project 118: City Weather Forecast Dashboard

Description:
Displays a 5-day weather forecast for a given city.
API Used:
[Link]
Note: Requires API key.
Code:
<input id="forecastCity" placeholder="Enter city">
<button id="getForecast">Get Forecast</button>
<div id="forecastResults"></div>

const forecastKey = 'YOUR_OPENWEATHER_API_KEY';

[Link]('getForecast').addEventListener('click', async () => {

const city = [Link]('forecastCity').value;
const res = await fetch(`[Link]
{city}&appid=${forecastKey}&units=metric`);
const data = await [Link]();
 const items = [Link](0, 5).map(item => `
<p>${item.dt_txt}: ${[Link]}°C - ${[Link][0].description}</p>
`).join('');
[Link]('forecastResults').innerHTML = items;
});

Project 119: Book Search App (Google Books API)

Description:
Searches for books using Google Books API and shows title, authors, and cover.
API Used:
[Link]
Code:
<input id="bookInput" placeholder="Search books">
<button id="searchBooks">Search</button>
<div id="bookResults"></div>

[Link]('searchBooks').addEventListener('click', async () => {

const book = [Link]('bookInput').value;
const res = await fetch(`[Link]
`);
const data = await [Link]();
const books = [Link](item => `
<div>
<h4>${[Link]}</h4>
<p>Author: ${[Link]?.join(', ')}</p>
<img src="${[Link]?.thumbnail}" alt="Book Cover">
</div>
`).join('');
[Link]('bookResults').innerHTML = books;
});

Project 120: GitHub Repo Search Tool

Description:
Searches public GitHub repositories by keyword.
API Used:
[Link]
Code:
<input id="repoQuery" placeholder="Search GitHub Repos">
<button id="searchRepos">Search</button>
<ul id="repoResults"></ul>

[Link]('searchRepos').addEventListener('click', async () => {

const query = [Link]('repoQuery').value;
const res = await fetch(`[Link]
`);
const data = await [Link]();
const results = [Link](repo => `
<li>
 -
</li>
⭐
<a href="${repo.html_url}" target="_blank">${repo.full_name}</a>
${repo.stargazers_count}

`).join('');
[Link]('repoResults').innerHTML = results;
});

Part VI: Dashboards and Productivity Tools

Chapter 14: User Dashboards
121. Expense Tracker
Create a web app that allows users to add, view, and remove their expenses. It shows the total spent
amount dynamically.
<input type="text" id="expense-name" placeholder="Expense Name">
<input type="number" id="expense-amount" placeholder="Amount">
<button onclick="addExpense()">Add</button>
<ul id="expense-list"></ul>
<p>Total: $<span id="total">0</span></p>

<script>
let total = 0;

function addExpense() {
const name = [Link]('expense-name').value;
const amount = parseFloat([Link]('expense-amount').value);
if (!name || isNaN(amount)) return;
const li = [Link]('li');
[Link] = `${name}: $${amount}`;
[Link]('expense-list').appendChild(li);
total += amount;
[Link]('total').textContent = [Link](2);
}
</script>

122. Budget Planner

This tool helps users set a budget and track their remaining balance based on expenses.
<input type="number" id="budget" placeholder="Enter Budget">
<button onclick="setBudget()">Set</button>
<p>Budget: $<span id="set-budget">0</span></p>
<p>Remaining: $<span id="remaining">0</span></p>

<script>
let budget = 0;
function setBudget() {
budget = parseFloat([Link]('budget').value);
[Link]('set-budget').textContent = [Link](2);
[Link]('remaining').textContent = [Link](2);
}
</script>

123. Productivity Timer

A countdown Pomodoro-style timer to help users focus during tasks.
<button onclick="startTimer()">Start 25-min Timer</button>
<p id="timer">25:00</p>

<script>
let countdown;
function startTimer() {
let time = 25 * 60;
clearInterval(countdown);
countdown = setInterval(() => {
const mins = [Link](time / 60);
const secs = time % 60;
[Link]('timer').textContent = `${mins}:$
{[Link]().padStart(2, '0')}`;
if (time > 0) time--;
else clearInterval(countdown);
}, 1000);
}
</script>

124. Daily Goals Dashboard

Users can input and track their daily goals using this checklist dashboard.
<input id="goal" placeholder="New Goal">
<button onclick="addGoal()">Add</button>
<ul id="goal-list"></ul>

<script>
function addGoal() {
const input = [Link]('goal');
const li = [Link]('li');
[Link] = [Link];
[Link] = () => [Link] = "line-through";
[Link]('goal-list').appendChild(li);
[Link] = '';
}
</script>

125. Calendar App UI

A simple static calendar UI with current month dates.
<div id="calendar"></div>

<script>
const calendar = [Link]('calendar');
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
[Link](day => {
const div = [Link]('div');
[Link] = day;
[Link](div);
});
</script>
<style>
#calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
#calendar div { padding: 10px; border: 1px solid #ccc; text-align: center; }
</style>

126. Invoice Creator

Generates a basic invoice with item names and prices.
<input id="item" placeholder="Item Name">
<input id="price" type="number" placeholder="Price">
<button onclick="addItem()">Add Item</button>
<ul id="invoice"></ul>
<p>Total: $<span id="invoice-total">0</span></p>

<script>
let total = 0;
function addItem() {
const item = [Link]('item').value;
const price = parseFloat([Link]('price').value);
const li = [Link]('li');
[Link] = `${item}: $${price}`;
[Link]('invoice').appendChild(li);
total += price;
[Link]('invoice-total').textContent = [Link](2);
}
</script>

127. Resume Builder

Allows users to fill in basic resume data and shows it in preview mode.
<input id="name" placeholder="Name">
<input id="email" placeholder="Email">
<textarea id="bio" placeholder="Short Bio"></textarea>
<button onclick="generateResume()">Generate</button>
<div id="resume"></div>

<script>
function generateResume() {
const name = [Link]('name').value;
const email = [Link]('email').value;
const bio = [Link]('bio').value;
[Link]('resume').innerHTML = `
<h2>${name}</h2>
<p>${email}</p>
<p>${bio}</p>
`;
}
</script>
128. Portfolio Generator
Takes in portfolio details and creates a clean personal site layout.
<input id="project" placeholder="Project Name">
<input id="desc" placeholder="Description">
<button onclick="addProject()">Add</button>
<div id="portfolio"></div>

<script>
function addProject() {
const project = [Link]('project').value;
const desc = [Link]('desc').value;
const div = [Link]('div');
[Link] = `<h3>${project}</h3><p>${desc}</p>`;
[Link]('portfolio').appendChild(div);
}
</script>

129. Habit Tracker

Tracks if daily habits are completed with a toggle UI.
<input id="habit" placeholder="New Habit">
<button onclick="addHabit()">Track</button>
<ul id="habit-list"></ul>

<script>
function addHabit() {
const name = [Link]('habit').value;
const li = [Link]('li');
const checkbox = [Link]('input');
[Link] = "checkbox";
[Link] = name + " ";
[Link](checkbox);
[Link]('habit-list').appendChild(li);
}
</script>

130. Time Tracker

Helps track how long tasks take. Start/stop timing each task.
<input id="task" placeholder="Task Name">
<button onclick="startTracking()">Start</button>
<p id="task-time">Time: 0s</p>

<script>
let seconds = 0, timer;
function startTracking() {
seconds = 0;
[Link]('task-time').textContent = 'Time: 0s';
clearInterval(timer);
timer = setInterval(() => {
seconds++;
[Link]('task-time').textContent = `Time: ${seconds}s`;
 }, 1000);
}
</script>

Chapter 15: Admin and Business Dashboards

131. Admin Panel UI

Create a basic admin panel layout with navigation links and main content section.
<div class="sidebar">
<ul>
<li>Dashboard</li>
<li>Users</li>
<li>Settings</li>
</ul>
</div>
<div class="main-content">
<h2>Welcome to Admin Panel</h2>
</div>

<style>
.sidebar { width: 200px; float: left; background: #eee; height: 100vh; }
.main-content { margin-left: 210px; padding: 20px; }
</style>

132. Sales Summary Viewer

Displays sales statistics and total in a readable format.
<div id="sales-summary"></div>

<script>
const sales = [1200, 850, 1600, 2000];
const total = [Link]((sum, val) => sum + val, 0);

[Link]('sales-summary').innerHTML = `
<h3>Weekly Sales</h3>
<ul>${[Link]((s, i) => `<li>Day ${i+1}: $${s}</li>`).join('')}</ul>
<p><strong>Total: $${total}</strong></p>
`;
</script>

133. E-commerce Product Tracker

Track inventory and display available products.
const products = [
{ name: "Laptop", quantity: 5 },
{ name: "Headphones", quantity: 10 },
{ name: "Mouse", quantity: 0 }
];

[Link] += `
<h3>Inventory</h3>
<ul>
${[Link](p => `<li>${[Link]}: ${[Link] > 0 ? [Link] : 'Out of
Stock'}</li>`).join('')}
</ul>
`;

134. User Table Manager

Display and manage a list of users in a table.
<table border="1">
<thead>
<tr><th>Name</th><th>Email</th></tr>
</thead>
<tbody id="user-table"></tbody>
</table>

<script>
const users = [
{ name: "Jane Doe", email: "jane@[Link]" },
{ name: "John Smith", email: "john@[Link]" }
];

[Link]('user-table').innerHTML = [Link](
user => `<tr><td>${[Link]}</td><td>${[Link]}</td></tr>`
).join('');
</script>

135. Analytics Dashboard

Display dynamic stats like active users, bounce rate, and engagement.
const analytics = {
activeUsers: 120,
bounceRate: "40%",
engagement: "7m 20s"
};

[Link] += `
<h3>Analytics Summary</h3>
<p>Active Users: ${[Link]}</p>
<p>Bounce Rate: ${[Link]}</p>
<p>Avg Engagement: ${[Link]}</p>
`;
136. Chart Visualizer
Use [Link] to display a line chart for data.
<canvas id="salesChart" width="400" height="200"></canvas>
<script src="[Link]
<script>
const ctx = [Link]('salesChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
datasets: [{
label: "Sales",
data: [500, 1000, 750, 1250, 950],
borderColor: "blue",
fill: false
}]
}
});
</script>

137. Multi-tab Dashboard

Switch content dynamically using tab buttons.
<button onclick="showTab('users')">Users</button>
<button onclick="showTab('settings')">Settings</button>

<div id="users" class="tab">User Panel Content</div>

<div id="settings" class="tab" style="display:none;">Settings Content</div>

<script>
function showTab(tabId) {
[Link]('.tab').forEach(div => [Link] = 'none');
[Link](tabId).[Link] = 'block';
}
</script>

138. User Activity Log Viewer

Show a list of logged activities by users.
const logs = [
"User A logged in",
"User B updated profile",
"User C logged out"
];

[Link] += `
<h3>Activity Logs</h3>
<ul>${[Link](log => `<li>${log}</li>`).join('')}</ul>
`;
139. File Upload UI
Simple UI for uploading files with file name preview.
<input type="file" id="upload" onchange="showFileName()">
<p id="file-name"></p>

<script>
function showFileName() {
const file = [Link]('upload').files[0];
[Link]('file-name').textContent = file ? [Link] : '';
}
</script>

140. Client Info Manager

Input form to add client data and render it in a client list.
<input id="client-name" placeholder="Client Name">
<input id="client-email" placeholder="Email">
<button onclick="addClient()">Add</button>
<ul id="client-list"></ul>

<script>
function addClient() {
const name = [Link]('client-name').value;
const email = [Link]('client-email').value;
const li = [Link]('li');
[Link] = `${name} (${email})`;
[Link]('client-list').appendChild(li);
}
</script>

Part VII: Advanced Applications and UI

Systems
Chapter 16: Advanced Form Systems
This chapter focuses on building powerful and interactive form systems. These types of forms are
commonly used in real-world applications such as job boards, registration platforms, and surveys.
Each project emphasizes usability, responsiveness, and form management logic.

141. Multi-step Form

Breaks a form into multiple steps with navigation controls.
<div id="step1" class="step">
<h3>Step 1: Personal Info</h3>
<input placeholder="Name">
<button onclick="nextStep()">Next</button>
</div>
<div id="step2" class="step" style="display:none;">
<h3>Step 2: Contact Info</h3>
<input placeholder="Email">
<button onclick="prevStep()">Back</button>
<button>Submit</button>
</div>

<script>
function nextStep() {
[Link]('step1').[Link] = 'none';
[Link]('step2').[Link] = 'block';
}
function prevStep() {
[Link]('step2').[Link] = 'none';
[Link]('step1').[Link] = 'block';
}
</script>

Explanation:
Multi-step forms improve user experience by segmenting long forms into manageable steps. Each
step can be toggled with JavaScript to simulate a wizard interface.

142. Survey Form Generator

Dynamically creates survey fields based on predefined questions.
const questions = ["What's your age?", "Do you like coding?", "Favorite
language?"];
const form = [Link]('form');

[Link](q => {
const label = [Link]('label');
[Link] = q;
const input = [Link]('input');
[Link] = q;
[Link](label);
[Link](input);
[Link]([Link]('br'));
});

[Link](form);

Explanation:
This project dynamically generates a form using a list of questions. It is useful for building
customizable surveys where form fields are not hardcoded.

143. Resume Submission Form

A form that collects resume details and allows file upload.
<form onsubmit="submitResume(event)">
<input type="text" placeholder="Full Name" required>
 <input type="email" placeholder="Email" required>
<input type="file" required>
<button type="submit">Submit</button>
</form>

<script>
function submitResume(e) {
[Link]();
alert("Resume submitted successfully.");
}
</script>

Explanation:
The form captures user information along with a file input for uploading resumes. Validation is
handled via HTML attributes, and submission is captured using JavaScript.

144. Dynamic Job Application Form

Shows or hides form fields based on selected job role.
<select onchange="toggleExtra([Link])">
<option value="">Select Role</option>
<option value="developer">Developer</option>
<option value="designer">Designer</option>
</select>

<div id="developer-fields" style="display:none;">

<input placeholder="GitHub Profile">
</div>
<div id="designer-fields" style="display:none;">
<input placeholder="Portfolio URL">
</div>

<script>
function toggleExtra(role) {
[Link]('developer-fields').[Link] = (role ===
'developer') ? 'block' : 'none';
[Link]('designer-fields').[Link] = (role ===
'designer') ? 'block' : 'none';
}
</script>

Explanation:
This dynamic form changes based on the user’s selected role. It’s commonly used in HR and
recruitment platforms where different positions require different information.

145. Event Registration UI

An event signup interface with dropdowns and date inputs.
<form onsubmit="registerEvent(event)">
<input type="text" placeholder="Full Name" required>
<input type="email" placeholder="Email" required>
<label>Event Date</label>
<input type="date" required>
<label>Session</label>
<select required>
 <option>Morning</option>
<option>Afternoon</option>
<option>Evening</option>
</select>
<button type="submit">Register</button>
</form>

<script>
function registerEvent(e) {
[Link]();
alert("You have registered for the event!");
}
</script>

Explanation:
This project creates a typical event registration form. It includes a date selector and dropdown menu
for session times, along with validation and feedback upon submission.

Part VII: Advanced Applications and UI

Systems
Chapter 17: Project-Level Applications
This chapter presents larger-scale front-end projects that mimic real-world applications. These
projects focus on structure, interactivity, and visual consistency across components, making them
ideal for portfolio showcases or client-facing prototypes.

146. Blog Template with CRUD UI

A full-featured blog interface that supports Create, Read, Update, and Delete (CRUD) operations.
<input id="postTitle" placeholder="Title">
<textarea id="postContent" placeholder="Write your blog..."></textarea>
<button onclick="createPost()">Publish</button>

<div id="blogContainer"></div>

<script>
let posts = [];

function createPost() {
const title = [Link]('postTitle').value;
const content = [Link]('postContent').value;
[Link]({ title, content });
renderPosts();
}
function renderPosts() {
const container = [Link]('blogContainer');
[Link] = '';
[Link]((post, i) => {
[Link] += `
<div>
<h3>${[Link]}</h3>
<p>${[Link]}</p>
<button onclick="deletePost(${i})">Delete</button>
</div>
`;
});
}

function deletePost(index) {
[Link](index, 1);
renderPosts();
}
</script>

Explanation:
This project creates a basic blog post system that allows users to write and manage entries. It uses
an in-memory array to simulate a full CRUD interface, ideal for prototyping blog platforms.

147. Portfolio Website with Filters

Displays projects and filters them by category.
<input type="text" id="search" placeholder="Search projects..."
oninput="filterProjects()">

<div id="portfolio">
<div data-category="web">Landing Page</div>
<div data-category="app">Mobile App</div>
<div data-category="web">Admin Dashboard</div>
</div>

<script>
function filterProjects() {
const term = [Link]('search').[Link]();
[Link]('#portfolio > div').forEach(div => {
[Link] = [Link]().includes(term) ? 'block' :
'none';
});
}
</script>

Explanation:
The portfolio site allows filtering of items using input keywords. This structure is common in
designer and developer portfolios to organize and present projects neatly.

148. Product Review System

Collects and displays user reviews for a product.
<input id="user" placeholder="Name">
<textarea id="review" placeholder="Write a review..."></textarea>
<button onclick="submitReview()">Post Review</button>

<div id="reviews"></div>

<script>
let reviewList = [];

function submitReview() {
const user = [Link]('user').value;
const comment = [Link]('review').value;
[Link]({ user, comment });
displayReviews();
}

function displayReviews() {
const reviews = [Link]('reviews');
[Link] = '';
[Link](r => {
[Link] += `<p><strong>${[Link]}:</strong> ${[Link]}</p>`;
});
}
</script>

Explanation:
This interface allows users to submit reviews for a product. Reviews are stored and displayed
dynamically. It can serve as a base for e-commerce or SaaS product feedback systems.

149. Chat UI Design

A front-end-only mockup of a messaging interface.
<div id="chatBox" style="height:200px; overflow-y:auto; border:1px solid
#ccc;"></div>
<input id="msgInput" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>

<script>
function sendMessage() {
const input = [Link]('msgInput');
const message = [Link];
if (!message) return;
const chat = [Link]('chatBox');
const bubble = [Link]('div');
[Link] = message;
[Link] = "#d1e7dd";
[Link] = "5px";
[Link] = "8px";
[Link] = "10px";
[Link](bubble);
[Link] = '';
}
</script>

Explanation:
The chat UI offers an intuitive messaging experience. Though it doesn’t support real-time
communication yet, it's perfect for front-end mockups or demo projects.
150. Blog Reader Interface
Loads and displays multiple blog posts with navigation.
const posts = [
{ title: "Post One", content: "This is the first blog post." },
{ title: "Post Two", content: "Another insightful post here." }
];

const blogList = [Link]('blogList');

const blogContent = [Link]('blogContent');

[Link]((post, index) => {

const btn = [Link]('button');
[Link] = [Link];
[Link] = () => {
[Link] = `<h3>${[Link]}</h3><p>${[Link]}</p>`;
};
[Link](btn);
});

<div id="blogList"></div>
<div id="blogContent"></div>

Explanation:
This interface allows users to select from multiple blog entries and view content dynamically. It
mimics reading applications like Medium or Notion.

Part VII: Advanced Applications and UI

Systems
Chapter 18: Feature-Rich UI Tools
In this chapter, we explore powerful utility tools that enhance the user experience through
interactivity, media handling, content generation, and file manipulation. These UI tools provide
practical, often standalone features found in modern web apps.

151. QR Code Generator

Generate a QR code from user input using a third-party API.
<input id="qrInput" placeholder="Enter text or URL">
<button onclick="generateQR()">Generate QR</button>
<br>
<img id="qrImage" width="200">

<script>
function generateQR() {
const data = [Link]('qrInput').value;
 const qr = `[Link]
{encodeURIComponent(data)}`;
[Link]('qrImage').src = qr;
}
</script>

Explanation:
This tool uses the QRServer API to dynamically generate QR codes based on user input. It’s useful
for contactless sharing, URLs, or small bits of data.

152. Markdown Previewer

Convert markdown input into HTML output.
<textarea id="markdownInput" rows="6" cols="50">**Bold Text**</textarea>
<div id="preview"></div>

<script src="[Link]
<script>
[Link]('markdownInput').addEventListener('input', e => {
const html = [Link]([Link]);
[Link]('preview').innerHTML = html;
});
</script>

Explanation:
This project uses the marked library to render real-time Markdown previews. It’s ideal for note-
taking apps or blog content editing.

153. Drawing Pad with Canvas

A basic sketch pad using the <canvas> element.
<canvas id="pad" width="400" height="300" style="border:1px solid
#ccc;"></canvas>

<script>
const canvas = [Link]('pad');
const ctx = [Link]('2d');
let drawing = false;

[Link] = () => drawing = true;

[Link] = () => drawing = false;
[Link] = e => {
if (!drawing) return;
[Link]([Link], [Link]);
[Link]();
};
</script>

Explanation:
This simple sketch board enables mouse-based drawing on the canvas. It’s useful for whiteboard
tools, signature pads, or annotation apps.
154. Custom Video Player
Basic custom video controls for an embedded video.
<video id="myVideo" width="320" controls>
<source src="sample.mp4" type="video/mp4">
</video>
<br>
<button onclick="playPause()">Play/Pause</button>
<button onclick="restart()">Restart</button>

<script>
const video = [Link]('myVideo');

function playPause() {
[Link] ? [Link]() : [Link]();
}

function restart() {
[Link] = 0;
[Link]();
}
</script>

Explanation:
A customizable video interface that replaces native controls with custom buttons. This project is
helpful when branding or interaction design calls for a tailored media player.

155. Custom Audio Player

A minimal interface to play audio files.
<audio id="myAudio">
<source src="sample.mp3" type="audio/mpeg">
</audio>
<br>
<button onclick="toggleAudio()">Play/Pause</button>

<script>
const audio = [Link]('myAudio');

function toggleAudio() {
[Link] ? [Link]() : [Link]();
}
</script>

Explanation:
This project gives you a simple custom audio player UI to control media playback, suitable for
podcasts, music portfolios, or e-learning platforms.

156. PDF Generator

Generate a downloadable PDF using user content.
<textarea id="pdfContent" placeholder="Write content here..."></textarea>
<button onclick="generatePDF()">Download PDF</button>
<script
src="[Link]
script>
<script>
function generatePDF() {
const { jsPDF } = [Link];
const doc = new jsPDF();
[Link]([Link]('pdfContent').value, 10, 10);
[Link]('[Link]');
}
</script>

Explanation:
This tool converts text input into a downloadable PDF using the jsPDF library. It's ideal for
document export, invoices, or printable forms.

157. Invoice Designer

Generate an invoice layout from user-entered data.
<input id="clientName" placeholder="Client Name">
<input id="amount" placeholder="Amount">
<button onclick="createInvoice()">Generate Invoice</button>
<div id="invoiceDisplay"></div>

<script>
function createInvoice() {
const name = [Link]('clientName').value;
const amount = [Link]('amount').value;
[Link]('invoiceDisplay').innerHTML = `
<h3>Invoice</h3>
<p>Client: ${name}</p>
<p>Amount Due: $${amount}</p>
`;
}
</script>

Explanation:
This UI mockup allows you to build printable or display-ready invoices, common in freelancer and
e-commerce apps.

158. Calendar Event Scheduler

Create and view calendar events.
<input type="date" id="eventDate">
<input type="text" id="eventTitle" placeholder="Event title">
<button onclick="addEvent()">Add Event</button>
<ul id="eventList"></ul>

<script>
let events = [];

function addEvent() {
const date = [Link]('eventDate').value;
const title = [Link]('eventTitle').value;
[Link]({ date, title });
 renderEvents();
}

function renderEvents() {
const list = [Link]('eventList');
[Link] = '';
[Link](e => {
[Link] += `<li>${[Link]}: ${[Link]}</li>`;
});
}
</script>

Explanation:
This project simulates a simple event calendar with date-based input and a list view. It can be
extended into full scheduling tools.

159. Table Filter and Sort Tool

Search and sort through table data dynamically.
<input oninput="filterTable()" id="tableSearch" placeholder="Search names...">

<table id="dataTable">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Anna</td><td>28</td></tr>
<tr><td>Mike</td><td>22</td></tr>
</table>

<script>
function filterTable() {
const input = [Link]('tableSearch').[Link]();
const rows = [Link]('#dataTable tr:not(:first-child)');
[Link](row => {
[Link] = [Link]().includes(input) ? '' :
'none';
});
}
</script>

Explanation:
This tool provides real-time filtering for HTML tables. Sorting can be added for more advanced
data manipulation in dashboards or admin tools.

160. Image Gallery with Modal View

A responsive gallery that opens images in a modal window.
<div>
<img src="[Link]" width="100" onclick="showModal([Link])">
<img src="[Link]" width="100" onclick="showModal([Link])">
</div>

<div id="modal" style="display:none; position:fixed; top:0; left:0; width:100%;

height:100%; background:#000000cc;" onclick="hideModal()">
<img id="modalImg" style="margin:auto; display:block; max-width:80%;">
</div>
<script>
function showModal(src) {
[Link]('modalImg').src = src;
[Link]('modal').[Link] = 'block';
}

function hideModal() {
[Link]('modal').[Link] = 'none';
}
</script>

Explanation:
This image gallery allows users to view larger images in a modal window, mimicking lightbox
functionality seen in photography and art sites.

Part VIII: Capstone Projects and Final

Challenges
Chapter 19: Real-World Capstone Projects
This chapter presents a collection of capstone-level projects that bring together multiple concepts—
forms, storage, API handling, interactivity, and layout. These projects are designed to simulate real-
world web applications and help developers polish their portfolios.

161. Chat App (Frontend UI)

Design a clean chat UI for real-time messaging.
<div class="chat-box">
<div id="messages"></div>
<input id="msgInput" placeholder="Type message..." />
<button onclick="sendMessage()">Send</button>
</div>

<script>
function sendMessage() {
const input = [Link]('msgInput');
const messages = [Link]('messages');
const msg = [Link]('div');
[Link] = [Link];
[Link] = 'msg';
[Link](msg);
[Link] = '';
}
</script>

<style>
.chat-box { max-width: 300px; border: 1px solid #ccc; padding: 10px; }
#messages { height: 150px; overflow-y: auto; margin-bottom: 5px; }
.msg { background: #f0f0f0; margin: 2px 0; padding: 4px; border-radius: 4px; }
</style>
Explanation:
This is a basic chat UI with message rendering. You can later connect it to a real-time backend using
WebSockets or Firebase.

162. Job Listing Platform

Display job posts with filters.
<input placeholder="Filter by title..." id="filterInput" oninput="filterJobs()">
<div id="jobList"></div>

<script>
const jobs = [
{ title: "Frontend Developer", company: "Techie" },
{ title: "Backend Engineer", company: "DevCo" }
];

function filterJobs() {
const term = [Link]('filterInput').[Link]();
const list = [Link]('jobList');
[Link] = '';
[Link](j => [Link]().includes(term)).forEach(j => {
[Link] += `<div><strong>${[Link]}</strong> at ${[Link]}</div>`;
});
}

filterJobs();
</script>

Explanation:
A starter interface for browsing job posts. This project helps you practice list rendering, filtering,
and simple state.

163. E-Commerce Product Page

Product display with image, title, price, and cart button.
<div id="productCard">
<img src="[Link]" width="150">
<h2>Running Shoes</h2>
<p>$49.99</p>
<button onclick="addToCart()">Add to Cart</button>
</div>

<script>
function addToCart() {
alert('Product added to cart!');
}
</script>

Explanation:
A minimal product UI that lays the foundation for any e-commerce front. Expandable with cart
logic and API integration.
164. Checkout System UI
Simulate a payment interface with form fields.
<form onsubmit="[Link](); alert('Order Placed!')">
<input placeholder="Card Number"><br>
<input placeholder="Expiry"><br>
<input placeholder="CVV"><br>
<button>Checkout</button>
</form>

Explanation:
This checkout form mimics a payment process. Ideal for e-commerce learning projects when
integrating with Stripe or PayPal.

165. Full CRUD Admin Interface

Add, edit, delete user data from a dynamic table.
<input id="nameInput" placeholder="User Name">
<button onclick="addUser()">Add</button>
<table id="userTable"></table>

<script>
let users = [];

function addUser() {
const name = [Link]('nameInput').value;
[Link](name);
renderUsers();
}

function renderUsers() {
const table = [Link]('userTable');
[Link] = '';
[Link]((u, i) => {
[Link] += `<tr><td>${u}</td><td><button onclick="deleteUser($
{i})">Delete</button></td></tr>`;
});
}

function deleteUser(index) {
[Link](index, 1);
renderUsers();
}
</script>

Explanation:
This UI mimics a simple admin dashboard where you manage a list of entries—good for learning
CRUD operations.

166. News Aggregator Web App

Fetch and display articles from a news API.
<button onclick="loadNews()">Load News</button>
<ul id="newsList"></ul>
<script>
async function loadNews() {
const res = await fetch('[Link]
const data = await [Link]();
const list = [Link]('newsList');
[Link] = [Link](0, 5).map(item =>
`<li>${[Link]}</li>`).join('');
}
</script>

Explanation:
This project displays external API data in a readable format, ideal for building dashboards or RSS-
like news apps.

167. Online Portfolio Editor

Live-edit a simple portfolio bio.
<textarea id="bio" placeholder="Write your bio..."></textarea>
<button onclick="saveBio()">Save</button>
<p id="bioOutput"></p>

<script>
function saveBio() {
const text = [Link]('bio').value;
[Link]('bioOutput').innerText = text;
}
</script>

Explanation:
This basic inline editor allows users to update their profile description in real-time. It’s great for
CMS-like systems.

168. Course Progress Tracker

Track completed modules with checkboxes.
<ul id="courseList">
<li><input type="checkbox"> HTML Basics</li>
<li><input type="checkbox"> CSS Essentials</li>
<li><input type="checkbox"> JavaScript Core</li>
</ul>

Explanation:
A static layout to track learning progress. Can be extended with local storage to persist user
progress.

169. Freelancer Invoice App

Create and download invoices with client data.
<input id="client" placeholder="Client Name">
<input id="service" placeholder="Service">
<input id="price" placeholder="Price">
<button onclick="generateInvoice()">Generate</button>
<div id="invoiceArea"></div>

<script>
function generateInvoice() {
const c = [Link]('client').value;
const s = [Link]('service').value;
const p = [Link]('price').value;
[Link]('invoiceArea').innerHTML = `
<h3>Invoice</h3>
<p>Client: ${c}</p>
<p>Service: ${s}</p>
<p>Amount: $${p}</p>
`;
}
</script>

Explanation:
A fast and flexible tool for freelancers to generate custom invoices. Add download or print
functionality for a full tool.

170. SaaS Pricing Page

Design a clean, responsive pricing table.
<div class="pricing">
<div class="plan">
<h3>Basic</h3><p>$9/mo</p><button>Choose</button>
</div>
<div class="plan">
<h3>Pro</h3><p>$29/mo</p><button>Choose</button>
</div>
</div>

<style>
.pricing { display: flex; gap: 1rem; }
.plan { border: 1px solid #ccc; padding: 10px; width: 120px; text-align: center;
}
</style>

Explanation:
A clean and functional pricing section commonly found on SaaS websites. Add hover effects and
responsive design to enhance.

Chapter 20: Final 30 Polished Projects

This chapter focuses on building highly polished, real-world JavaScript projects that are not only
visually impressive but also scalable and extensible. Each project has been carefully designed to
reflect common use cases in modern applications, making them ideal for portfolios, client work, or
full products.

171. Survey Dashboard

Overview: A complete survey results viewer where users can see the responses to surveys in a clean
dashboard format. Useful for educational institutions, product teams, or internal company feedback
systems.
Features:
• Bar/Donut charts for answer summaries
• Export to CSV
• Filter by date, respondent, or question
HTML:
<div class="survey-dashboard">
<h2>Survey Results Dashboard</h2>
<canvas id="resultsChart"></canvas>
</div>

JavaScript (using [Link]):

const ctx = [Link]('resultsChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3'],
datasets: [{
label: 'Responses',
data: [23, 17, 35],
backgroundColor: ['#4CAF50', '#2196F3', '#FFC107']
}]
},
});

Expandable Ideas:
• Add user authentication for survey creators
• Export detailed answers to PDF
• Integrate with a database (e.g., Firebase or MongoDB)

172. Student Report Generator

Overview: Automatically generates performance reports for students with marks, subjects, and
remarks. This is perfect for schools and online course platforms.
Features:
• Auto-grade calculation
 • Dynamic table creation
• Downloadable report card
HTML:
<div id="report-card">
<h2>Student Report</h2>
<table id="report-table"></table>
</div>
<button onclick="generateReport()">Generate</button>

JavaScript:
const student = {
name: "Jane Doe",
subjects: {
Math: 85,
English: 90,
Science: 78
}
};

function generateReport() {
const table = [Link]("report-table");
[Link] = "<tr><th>Subject</th><th>Marks</th></tr>";
for (let [subject, mark] of [Link]([Link])) {
const row = `<tr><td>${subject}</td><td>${mark}</td></tr>`;
[Link] += row;
}
}

Expandable Ideas:
• Add print and download options (as PDF)
• Connect to a backend system with student records
• Email reports to parents or students

173. Flashcard App

Overview: A simple learning app to help users memorize content via flashcards. Great for language
learners, interview prep, or general study.
Features:
• Flip animation
• Category filter
• Save progress in local storage
HTML:
<div class="flashcard">
<div class="front">What is HTML?</div>
<div class="back">HyperText Markup Language</div>
</div>
JavaScript:
const card = [Link]('.flashcard');
[Link]('click', () => {
[Link]('flipped');
});

CSS:
.flashcard {
width: 200px;
height: 120px;
perspective: 1000px;
cursor: pointer;
}
.flashcard .front,
.flashcard .back {
transition: transform 0.6s;
position: absolute;
backface-visibility: hidden;
}
.[Link] .front {
transform: rotateY(180deg);
}
.[Link] .back {
transform: rotateY(0);
}

Expandable Ideas:
• Add categories and search
• Use IndexedDB for offline saving
• Support audio/visual flashcards

174. Team Collaboration UI

Overview: A frontend prototype of a team collaboration interface like Slack, Discord, or Microsoft
Teams. It focuses on chat layout, side navigation, and team members list.
Features:
• Sidebar with channels
• Chatbox UI
• Typing indicators
HTML:
<div class="sidebar">
<h3>Team Channels</h3>
<ul>
<li>#general</li>
<li>#project-a</li>
</ul>
</div>
<div class="chat-box">
<div class="messages"></div>
 <input type="text" placeholder="Type a message..." />
</div>

Expandable Ideas:
• Add WebSocket or Firebase for real-time chat
• Markdown support in messages
• Notification and @mention system

175. Real-Time Clock System

Overview: Displays the current time, date, and optionally includes multiple time zones. Useful for
dashboards, productivity apps, and scheduling platforms.
Features:
• Live updating
• Dark mode toggle
• Timezone selection
HTML:
<div id="clock"></div>

JavaScript:
function updateClock() {
const now = new Date();
[Link]('clock').textContent = [Link]();
}
setInterval(updateClock, 1000);
updateClock();

Expandable Ideas:
• Add multiple clocks for different countries
• World clock UI for global teams
• Add alarms and timers

176. Product Feedback Board

Overview:
An interactive board where users can submit product feedback, feature requests, or report bugs.
Ideal for SaaS platforms and community-driven products.
Features:
• Categorized feedback (Bug, Feature, Idea)
• Upvote system
• Comment thread
HTML:
<div class="feedback-form">
<input type="text" placeholder="Title" />
<textarea placeholder="Describe your feedback..."></textarea>
<select>
<option>Bug</option>
<option>Feature</option>
<option>Idea</option>
</select>
<button>Submit</button>
</div>
<div class="feedback-list"></div>

JavaScript (Basic Structure):

const feedbackList = [];

function submitFeedback(title, desc, type) {

[Link]({ title, desc, type, upvotes: 0 });
renderFeedback();
}

function renderFeedback() {
const list = [Link]('.feedback-list');
[Link] = '';
[Link]((item, index) => {
const card = `<div class="card">
<h4>${[Link]}</h4>
<p>${[Link]}</p>
<span>${[Link]}</span>
<button onclick="upvote(${index})">▲ ${[Link]}</button>
</div>`;
[Link] += card;
});
}

function upvote(index) {
feedbackList[index].upvotes++;
renderFeedback();
}

Expandable Ideas:
• Add local storage or backend (Firebase/MongoDB)
• Add filters and sorting
• User authentication for submitting feedback
177. Notes App with Speech Input
Overview:
Create notes using speech recognition—perfect for multitasking users or accessibility-friendly
productivity tools.
Features:
• Voice-to-text note-taking
• Save and delete notes
• Keyword search
HTML:
<button onclick="startRecording()">
<div id="note-display"></div>
🎤 Speak Note</button>

JavaScript (Web Speech API):

const recognition = new ([Link] ||
[Link])();
[Link] = function(event) {
const text = [Link][0][0].transcript;
[Link]("note-display").innerText += `\n• ${text}`;
};

function startRecording() {
[Link]();
}

Expandable Ideas:
• Convert notes to downloadable text files
• Add categories and timestamps
• Sync notes with a cloud service

178. Image Crop and Preview Tool

Overview:
Upload an image, crop a selected area, and preview the final result. Ideal for profile photo uploads,
document scanning, or graphic editors.
Features:
• Upload and preview image
• Select area to crop
• Export cropped version
HTML:
<input type="file" id="upload" />
<canvas id="preview-canvas"></canvas>
JavaScript (Conceptual):
const canvas = [Link]("preview-canvas");
const ctx = [Link]("2d");

[Link]("upload").addEventListener("change", function(e) {
const img = new Image();
[Link] = function() {
[Link](img, 50, 50, 200, 200, 0, 0, 200, 200); // Crop and draw
};
[Link] = [Link]([Link][0]);
});

Expandable Ideas:
• Add draggable crop area
• Use libraries like [Link]
• Add zoom and rotate tools

179. Pomodoro Productivity Tracker

Overview:
Implements the Pomodoro technique to help users work in focused time intervals with short breaks
—perfect for students and remote workers.
Features:
• 25-minute timer + 5-minute break
• Start, pause, reset
• Track number of sessions
HTML:
<div id="pomodoro-timer">25:00</div>
<button onclick="startTimer()">Start</button>

JavaScript:
let time = 25 * 60;
let interval;

function startTimer() {
interval = setInterval(() => {
time--;
const minutes = [Link](time / 60);
const seconds = time % 60;
[Link]('pomodoro-timer').textContent = `${minutes}:$
{seconds < 10 ? '0' : ''}${seconds}`;
if (time <= 0) clearInterval(interval);
}, 1000);
}

Expandable Ideas:
• Add sound alert when time ends
 • Save session history
• Switch between focus/break modes

180. Project Management Board

Overview:
A Trello-style Kanban board for managing tasks and organizing workflows—great for teams and
freelancers.
Features:
• Columns: To Do, In Progress, Done
• Drag-and-drop tasks
• Add/edit/delete cards
HTML (Skeleton):
<div class="kanban">
<div class="column" id="todo">To Do</div>
<div class="column" id="in-progress">In Progress</div>
<div class="column" id="done">Done</div>
</div>

Expandable Ideas:
• Use dragstart, dragover, drop events for drag-and-drop

• Persist data to local storage or backend

• Add due dates, labels, and priority levels

181. Task Timer with Sound Alert

Overview:
A simple timer for tracking individual task durations with a pleasant audio alert when time runs out.
Great for time-blocking or study sessions.
Features:
• Set timer for a task
• Audio alert when time ends
• Reset and pause options
HTML:
<input type="number" id="task-minutes" placeholder="Minutes" />
<button onclick="startTaskTimer()">Start</button>
<div id="task-timer">00:00</div>
<audio id="alarm-sound" src="alarm.mp3" preload="auto"></audio>

JavaScript:
let countdown;
function startTaskTimer() {
let minutes = parseInt([Link]("task-minutes").value);
let time = minutes * 60;
clearInterval(countdown);
countdown = setInterval(() => {
if (time <= 0) {
clearInterval(countdown);
[Link]("alarm-sound").play();
}
const min = [Link](time / 60);
const sec = time % 60;
[Link]("task-timer").textContent = `${min}:${sec < 10 ? '0'
: ''}${sec}`;
time--;
}, 1000);
}

Expandable Ideas:
• Add task titles and save completed timers
• Export task logs as CSV
• Integrate with Pomodoro Tracker

182. Slide Deck Viewer

Overview:
A custom UI that lets users view a presentation or tutorial in slide format. Can be used to build
learning platforms or internal company documentation tools.
Features:
• Next/Previous navigation
• Keyboard controls
• Slide pagination and transitions
HTML:
<div class="slide-container">
<div class="slide active">Slide 1 Content</div>
<div class="slide">Slide 2 Content</div>
<div class="slide">Slide 3 Content</div>
</div>
<button onclick="nextSlide()">Next</button>
<button onclick="prevSlide()">Prev</button>

JavaScript (Concept):
let current = 0;
const slides = [Link]('.slide');

function showSlide(index) {
[Link]((s, i) => [Link]('active', i === index));
}

function nextSlide() {
 current = (current + 1) % [Link];
showSlide(current);
}

function prevSlide() {
current = (current - 1 + [Link]) % [Link];
showSlide(current);
}

Expandable Ideas:
• Markdown-to-slide converter
• Add speaker notes mode
• Export slides as PDF

183. Freelance Proposal Generator

Overview:
A form-based UI that helps freelancers generate client-ready proposals quickly. Outputs a
downloadable or copy-paste-ready proposal format.
Features:
• Input client name, scope, deadline, rate
• Generate styled proposal text
• Export as PDF or copy to clipboard
HTML:
<input type="text" id="client" placeholder="Client Name" />
<input type="text" id="project" placeholder="Project Description" />
<input type="number" id="rate" placeholder="Hourly Rate" />
<button onclick="generateProposal()">Generate</button>
<div id="output-proposal"></div>

JavaScript:
function generateProposal() {
const client = [Link]('client').value;
const project = [Link]('project').value;
const rate = [Link]('rate').value;
const text = `
Dear ${client},<br/><br/>
I am excited to offer my services for ${project}. My hourly rate is $$
{rate}/hr.
Let's discuss this further!<br/><br/>
Regards,<br/>Your Name
`;
[Link]('output-proposal').innerHTML = text;
}

Expandable Ideas:
• Add proposal templates (Web, Design, Copywriting, etc.)
 • Export to .docx or .pdf
• Client database and proposal history

184. Calendar Events Viewer

Overview:
A calendar interface that displays user-created events with clickable details. Useful for organizing
appointments, meetings, or study plans.
Features:
• Monthly calendar layout
• Add/view events on specific dates
• Highlight current day
HTML:
<div id="calendar"></div>
<div id="event-list"></div>

JavaScript (Conceptual Layout):

const calendar = [Link]('calendar');
for (let i = 1; i <= 30; i++) {
const day = [Link]('div');
[Link] = i;
[Link]('calendar-day');
[Link] = () => showEvents(i);
[Link](day);
}
function showEvents(day) {
[Link]('event-list').innerHTML = `Events for day ${day}`;
}

Expandable Ideas:
• Full-year calendar with navigation
• Sync with Google Calendar API
• Add recurring events and color codes

185. Client Onboarding App

Overview:
A progressive form interface that guides new clients through setting up an account or service.
Excellent for agencies and SaaS platforms.
Features:
• Step-by-step onboarding (Name → Business Info → Plan)
• Save progress to localStorage
 • Progress bar
HTML:
<div class="step active">Step 1: Your Info</div>
<div class="step">Step 2: Business Details</div>
<div class="step">Step 3: Choose Plan</div>
<button onclick="nextStep()">Next</button>

JavaScript (Step Control):

let currentStep = 0;
const steps = [Link]('.step');

function nextStep() {
if (currentStep < [Link] - 1) {
steps[currentStep].[Link]('active');
currentStep++;
steps[currentStep].[Link]('active');
}
}

Expandable Ideas:
• Add final review screen before submission
• Validate data at each step
• Save to backend with progress tracker

186. Business Card Creator

Overview:
A drag-and-drop or form-based UI that lets users create a digital business card. Perfect for
freelancers, entrepreneurs, and portfolio sites.
Features:
• Input fields: Name, Title, Contact, Socials
• Preview live card
• Download as image or shareable link
HTML:
<input type="text" id="fullName" placeholder="Your Name" />
<input type="text" id="title" placeholder="Title" />
<input type="text" id="email" placeholder="Email" />
<button onclick="generateCard()">Create Card</button>
<div id="card-preview" class="card"></div>

JavaScript:
function generateCard() {
const name = [Link]('fullName').value;
const title = [Link]('title').value;
const email = [Link]('email').value;

[Link]('card-preview').innerHTML = `
 <h2>${name}</h2>
<p>${title}</p>
<p><a href="[Link]
`;
}

Expandable Ideas:
• Export as PNG using html2canvas

• Add theme/color options

• Print-ready download feature

187. User Feedback Collector

Overview:
A form-based UI to collect user feedback from your site or product. Feedback can be categorized
and optionally stored locally or via API.
Features:
• Name, Rating, Message fields
• Categorized feedback types
• Store and display previous feedback
HTML:
<input type="text" id="user-name" placeholder="Your Name" />
<select id="feedback-type">
<option value="bug">Bug</option>
<option value="feature">Feature Request</option>
</select>
<textarea id="message" placeholder="Your message..."></textarea>
<button onclick="submitFeedback()">Submit</button>
<div id="feedback-list"></div>

JavaScript:
function submitFeedback() {
const name = [Link]('user-name').value;
const type = [Link]('feedback-type').value;
const msg = [Link]('message').value;
const entry = `<div><strong>${name}</strong> (${type}): ${msg}</div>`;
[Link]('feedback-list').innerHTML += entry;
}

Expandable Ideas:
• Store feedback in localStorage or Firebase
• Display analytics for feedback trends
• Add upvote/downvote system
188. Event Countdown Board
Overview:
Create countdowns for upcoming events like birthdays, launches, or holidays. A useful tool for
landing pages or personal dashboards.
Features:
• Set event name and date
• Live countdown display
• Add multiple countdowns
HTML:
<input type="text" id="event-name" placeholder="Event Name" />
<input type="date" id="event-date" />
<button onclick="addCountdown()">Add Countdown</button>
<div id="countdowns"></div>

JavaScript:
function addCountdown() {
const name = [Link]("event-name").value;
const date = new Date([Link]("event-date").value);
const now = new Date();
const diff = date - now;
const days = [Link](diff / (1000 * 60 * 60 * 24));
const countdownDiv = `<p>${name}: ${days} days left</p>`;
[Link]("countdowns").innerHTML += countdownDiv;
}

Expandable Ideas:
• Add recurring events
• Notifications when events are near
• Color-coded urgency levels

189. Scroll-Triggered Effects

Overview:
Enhance user experience by animating elements or loading data when the user scrolls to specific
sections of the page.
Features:
• Animate sections on scroll
• Lazy-load images or data
• Sticky or reveal elements
HTML:
<section class="fade-in">Content A</section>
<section class="fade-in">Content B</section>
CSS:
.fade-in { opacity: 0; transition: opacity 1s ease; }
.[Link] { opacity: 1; }

JavaScript:
const elements = [Link](".fade-in");
[Link]("scroll", () => {
[Link](el => {
const rect = [Link]();
if ([Link] < [Link]) {
[Link]("show");
}
});
});

Expandable Ideas:
• Add parallax effects
• Scroll-based progress bar
• Animate charts and counters

190. API Rate Limiter UI

Overview:
A frontend UI that simulates an API request quota system—perfect for understanding rate limits or
designing interfaces for public APIs.
Features:
• Limit X requests per Y seconds
• Reset on cooldown
• Visual indicator for remaining requests
HTML:
<button onclick="makeRequest()">Make API Request</button>
<p id="remaining">Remaining: 5</p>

JavaScript:
let remaining = 5;
const resetTime = 10000;

function makeRequest() {
if (remaining > 0) {
remaining--;
[Link]("remaining").textContent = `Remaining: ${remaining}
`;
} else {
alert("Rate limit reached. Wait 10 seconds.");
}

if (remaining === 0) {
setTimeout(() => {
 remaining = 5;
[Link]("remaining").textContent = `Remaining: $
{remaining}`;
}, resetTime);
}
}

Expandable Ideas:
• Add IP or user tracking mock
• Visual countdown to reset
• Show total vs used limits over time

191. Personal Finance Manager

Overview:
A tool that helps users track their income and expenses, providing a summary of their financial
situation over time.
Features:
• Add income and expense entries
• Display total balance
• Filter by categories or date ranges
• Visualize spending via a pie chart
HTML:
<input type="number" id="amount" placeholder="Amount" />
<select id="type">
<option value="income">Income</option>
<option value="expense">Expense</option>
</select>
<input type="text" id="category" placeholder="Category" />
<button onclick="addTransaction()">Add Transaction</button>
<p>Total Balance: <span id="balance">0</span></p>

JavaScript:
let balance = 0;

function addTransaction() {
const amount = parseFloat([Link]("amount").value);
const type = [Link]("type").value;
const category = [Link]("category").value;

if (type === "income") {

balance += amount;
} else {
balance -= amount;
}

[Link]("balance").textContent = balance;
}
Expandable Ideas:
• Categorize income and expenses (e.g., food, entertainment, rent)
• Implement monthly summary views
• Add chart visualization (e.g., Pie or Bar Chart)
• Use LocalStorage or a backend for persistent data

192. Blog Post Template Generator

Overview:
A UI that helps users quickly generate and format a blog post template, including title, content, and
metadata.
Features:
• Predefined layout templates
• Metadata like category and tags
• Preview mode
HTML:
<input type="text" id="title" placeholder="Title" />
<textarea id="content" placeholder="Content"></textarea>
<input type="text" id="category" placeholder="Category" />
<input type="text" id="tags" placeholder="Tags" />
<button onclick="generatePost()">Generate Post</button>
<div id="preview"></div>

JavaScript:
function generatePost() {
const title = [Link]("title").value;
const content = [Link]("content").value;
const category = [Link]("category").value;
const tags = [Link]("tags").value;

const post = `
<h1>${title}</h1>
<p><strong>Category:</strong> ${category}</p>
<p><strong>Tags:</strong> ${tags}</p>
<div>${content}</div>
`;
[Link]("preview").innerHTML = post;
}

Expandable Ideas:
• Implement a WYSIWYG editor for content
• Enable Markdown support
• Add image upload for featured images
• Save and export post as a .txt or .html file
193. Course Enrollment UI
Overview:
A user interface to allow students to enroll in courses, track progress, and view course details.
Features:
• Course list with enroll button
• Show course details and progress
• Store and retrieve enrollment status
HTML:
<div class="course">
<h3>Course Title</h3>
<p>Description of the course.</p>
<button onclick="enroll()">Enroll</button>
</div>
<p id="status"></p>

JavaScript:
function enroll() {
[Link]("status").textContent = "You have successfully
enrolled in this course!";
}

Expandable Ideas:
• Implement a course progress tracker (completed, in-progress)
• Add a video player or quizzes inside courses
• Store enrollment and progress with localStorage or backend

194. Resume Download Link Generator

Overview:
A tool that allows users to create a downloadable link for their resume, either as a .pdf or .docx file.
Features:
• Upload resume file
• Generate shareable download link
• Option to create a printable version
HTML:
<input type="file" id="resume-upload" />
<button onclick="generateLink()">Generate Link</button>
<p id="download-link"></p>

JavaScript:
function generateLink() {
const file = [Link]("resume-upload").files[0];
if (file) {
const url = [Link](file);
[Link]("download-link").innerHTML = `<a href="${url}"
download>Download your Resume</a>`;
} else {
alert("Please upload a file first.");
}
}

Expandable Ideas:
• Add a preview option for the uploaded file
• Allow file format conversion (e.g., Word to PDF)
• Add a password protection feature for downloaded files

195. Task Completion Heatmap

Overview:
A visual heatmap tool that shows user task completion over time. The heatmap changes color based
on the frequency of task completion.
Features:
• Daily or weekly task completion tracking
• Heatmap visualization
• Option to add and mark tasks as complete
HTML:
<div id="heatmap"></div>
<input type="checkbox" id="task1" onclick="updateHeatmap()" /> Task 1

JavaScript:
let completedTasks = 0;
let totalTasks = 7; // Assume there are 7 days of the week

function updateHeatmap() {
completedTasks = 0;
for (let i = 1; i <= totalTasks; i++) {
if ([Link](`task${i}`).checked) {
completedTasks++;
}
}
updateHeatmapColor();
}

function updateHeatmapColor() {
const percentage = (completedTasks / totalTasks) * 100;
const heatmap = [Link]("heatmap");
[Link] = `hsl(${percentage * 1.2}, 100%, 50%)`; //
Changes color based on progress
}
Expandable Ideas:
• Show progress percentage next to the heatmap
• Add more visual styles, such as different icons for different task types
• Store task completion data in localStorage to persist it across sessions

196. Feature Request Board

Overview:
A feature request board that allows users to submit, upvote, and comment on new feature ideas for a
product.
Features:
• Users can submit a feature idea
• Option to upvote or downvote feature requests
• Comment section for each feature request
• Sorting by most voted or recent
HTML:
<input type="text" id="feature-input" placeholder="Suggest a feature" />
<button onclick="submitFeature()">Submit Feature</button>
<div id="feature-board"></div>

JavaScript:
const featureBoard = [Link]("feature-board");

function submitFeature() {
const featureInput = [Link]("feature-input").value;
const featureDiv = [Link]("div");
[Link] = `
<h4>${featureInput}</h4>
<button onclick="upvote(this)">Upvote</button>
<button onclick="downvote(this)">Downvote</button>
<p>Votes: <span class="votes">0</span></p>
`;
[Link](featureDiv);
}

function upvote(button) {
const votes = [Link](".votes");
[Link] = parseInt([Link]) + 1;
}

function downvote(button) {
const votes = [Link](".votes");
[Link] = parseInt([Link]) - 1;
}

Expandable Ideas:
• Implement user authentication (e.g., sign in to upvote/downvote)
 • Add categories for feature requests
• Allow users to mark features as "Implemented"
• Add real-time updates with a backend

197. AI Chat UI (Mock Frontend)

Overview:
A mock frontend UI for an AI-powered chat system, where users can simulate a conversation with
an AI chatbot.
Features:
• Text input field for the user’s messages
• Display AI responses
• Conversation history
• Smooth, scrollable chat interface
HTML:
<div id="chatbox"></div>
<input type="text" id="user-message" placeholder="Type your message" />
<button onclick="sendMessage()">Send</button>

JavaScript:
function sendMessage() {
const userMessage = [Link]("user-message").value;
const chatbox = [Link]("chatbox");

[Link] += `<div class="user-message">${userMessage}</div>`;

setTimeout(() => {
[Link] += `<div class="ai-message">AI Response to: ${userMessage}
</div>`;
[Link]("user-message").value = "";
}, 1000);
}

Expandable Ideas:
• Integrate with an actual AI API (e.g., OpenAI, Dialogflow)
• Add animations for new messages
• Implement speech-to-text functionality
• Allow users to save conversation history
198. Goal Visualizer
Overview:
A tool for visualizing goals and progress using a visual timeline or progress bar. Perfect for tracking
long-term goals.
Features:
• Set start and end dates for goals
• Visualize goal progress over time with a progress bar
• Milestones along the timeline
HTML:
<input type="date" id="goal-start" />
<input type="date" id="goal-end" />
<button onclick="setGoal()">Set Goal</button>
<div id="goal-timeline"></div>

JavaScript:
function setGoal() {
const startDate = new Date([Link]("goal-start").value);
const endDate = new Date([Link]("goal-end").value);
const goalTimeline = [Link]("goal-timeline");

const totalDays = (endDate - startDate) / (1000 * 3600 * 24);

[Link] = `<div style="width: ${totalDays}%;">Goal
Progress</div>`;
}

Expandable Ideas:
• Allow multiple goals to be set
• Display progress as a percentage of days completed
• Add animations when milestones are reached
• Allow users to set sub-goals and sub-milestones

199. Email Signature Generator

Overview:
A tool to help users create custom email signatures with their name, job title, and social media links.
Features:
• Input fields for user details (name, job, contact info)
• Real-time preview of email signature
• Generate HTML code to copy
HTML:
<input type="text" id="name" placeholder="Your Name" />
<input type="text" id="job-title" placeholder="Job Title" />
<input type="text" id="email" placeholder="Email" />
<input type="text" id="phone" placeholder="Phone" />
<button onclick="generateSignature()">Generate Signature</button>
<p id="signature-preview"></p>

JavaScript:
function generateSignature() {
const name = [Link]("name").value;
const jobTitle = [Link]("job-title").value;
const email = [Link]("email").value;
const phone = [Link]("phone").value;

const signature = `
<p>${name} - ${jobTitle}</p>
<p>Email: ${email}</p>
<p>Phone: ${phone}</p>
`;
[Link]("signature-preview").innerHTML = signature;
}

Expandable Ideas:
• Allow users to add social media icons with links
• Add styling options (fonts, colors, etc.)
• Allow users to export signature as HTML or image
• Make signature mobile-responsive

200. Interactive Form Template Pack

Overview:
A set of interactive and customizable form templates for use in various applications, such as login,
registration, and feedback forms.
Features:
• Multiple form types (login, registration, contact, feedback)
• Input validation
• Customizable design and structure
• Error messages and tooltips
HTML:
<form id="feedback-form">
<input type="text" id="username" placeholder="Username" required />
<textarea id="feedback" placeholder="Your feedback" required></textarea>
<button type="submit">Submit</button>
</form>
<p id="error-message"></p>

JavaScript:
[Link]("feedback-form").addEventListener("submit",
function(event) {
[Link]();
const username = [Link]("username").value;
const feedback = [Link]("feedback").value;

if (!username || !feedback) {
[Link]("error-message").textContent = "Both fields are
required!";
} else {
[Link]("error-message").textContent = "";
alert("Feedback submitted!");
}
});

Expandable Ideas:
• Include various types of form fields (radio buttons, checkboxes, dropdowns)
• Add more advanced validation (email, phone number)
• Provide an exportable form builder interface
• Include accessibility features (e.g., screen reader support)

Final Thoughts
These Final 30 Polished Projects are meant to help you build a solid foundation of real-world
applications with advanced features. Each project can be extended with additional functionalities
and improvements, based on user feedback or future needs. Building and refining such projects will
not only make you proficient in JavaScript but also enhance your problem-solving and project
development skills.

Appendices
In this section, I’ve included valuable reference material, practical resources, and essential guides to
support your development journey beyond the 200 JavaScript projects. These appendices will serve
as quick-access tools as you build, share, and grow your JavaScript skills.

Appendix A: JavaScript Syntax Cheat Sheet

This cheat sheet provides a concise overview of essential JavaScript syntax. From variable
declarations and function syntax to conditional statements and loops, this reference helps you
quickly recall the basics:
• let, const, and var usage

• Arrow functions (() => {})

• Template literals and string interpolation

• Array and object destructuring
 • Conditional operators (if, switch, ternary)

• Loop types (for, while, forEach)

• Event handling syntax

• Import/export module patterns
Keep this close whenever you need to refresh your syntax knowledge during project work.

Appendix B: Useful JavaScript Methods Reference

This appendix includes a curated list of commonly used JavaScript methods for arrays, strings,
objects, DOM manipulation, and more. Some examples:

Array Methods:
• .map(), .filter(), .reduce()

• .find(), .includes(), .slice(), .splice()

String Methods:
• .toUpperCase(), .toLowerCase(), .trim()

• .split(), .replace(), .includes()

Object Methods:
• [Link](), [Link](), [Link]()

• [Link](), [Link]()

DOM Methods:
• [Link](), .getElementById()

• .addEventListener(), .[Link](), .appendChild()

These methods are foundational for solving most real-world tasks and building efficient
applications.

Appendix C: Hosting Your Projects (GitHub Pages, Netlify, Vercel)

Deploying your projects online helps you share your work, build a portfolio, and gather feedback.
This section walks you through:
• GitHub Pages:
Simple static site hosting directly from a GitHub repository. Great for frontend projects.
• Netlify:
Offers drag-and-drop deployment, custom domains, form handling, and automatic builds
from GitHub.
 • Vercel:
Ideal for [Link] and other modern frameworks. Includes powerful CI/CD pipelines and
preview deployments.
Each platform includes setup instructions, deployment workflows, and recommended use cases.

Appendix D: Git and GitHub Basics

Version control is a key part of modern development. This appendix introduces you to Git and
GitHub for managing code changes and collaborating effectively.
Covered topics:
• Initializing a Git repo (git init)

• Staging and committing (git add, git commit)

• Creating and switching branches

• Pushing to GitHub
• Creating pull requests and merging code
• Resolving conflicts and using .gitignore

Understanding Git workflows will make you a more confident and team-ready developer.

Appendix E: Online Tools and Resources

Here’s a collection of trusted tools and platforms to enhance your JavaScript development process:

Code Playgrounds:
• CodePen
• JSFiddle
• Replit

Documentation:
• MDN Web Docs (JavaScript)
• [Link]
• W3Schools JavaScript

Learning Platforms:
• freeCodeCamp
• Frontend Mentor
• JavaScript30
Tools for Developers:
• Can I use
• ESLint
• Prettier
• Figma – for UI prototyping
Use these platforms to practice, learn, and stay up to date with the latest in web development.

Thank you for reading and building with me. If you found this ebook helpful, feel free to explore
more of my work or support further development of learning resources.
Visit my store: [Link]
Connect with me on X (formerly Twitter): @e_opore
Keep learning, keep building.