1.
Number Guessing Game
Description: The computer generates a random number between 1-100.
User guesses the number and gets feedback ("Too High", "Too Low", or
"Correct").
Concepts: DOM manipulation, event listeners, Math.random().
2. Digital Clock
Description: Real-time digital clock displaying current hours, minutes,
and seconds.
Concepts: setInterval(), Date object, DOM updates.
3. To-Do List
Description: Add, mark as completed and delete tasks.
Concepts: CRUD operations, array handling, localStorage.
4. Simple Calculator
Description: Performs basic arithmetic operations like add, subtract,
multiply, divide.
Concepts: Button click events, expression evaluation.
5. Color Picker App
Description: Pick a color from the color input and apply it to a preview
box.
Concepts: CSS manipulation via JS, input[type="color"].
6. Form Validation
Description: Validate fields like email, password strength, etc., before
submission.
Concepts: Regular expressions, event handling, form submission control.
7. Random Quote Generator
Description: Shows a random quote from a predefined list on button
click.
Concepts: Arrays, random selection, innerHTML update.
8. Countdown Timer
Description: Counts down to a specific date/time (e.g., New Year).
Concepts: Date math, setInterval(), string formatting.
9. Dice Roller
Description: On button click, show a random dice number (1–6) and
corresponding image.
Concepts: Random number generation, image swapping.
10. Rock-Paper-Scissors Game
Description: User selects one option, computer randomly picks, winner is
shown.
Concepts: Logic comparison, user input, game states.
ADVANCED CONCEPTS
1. Portfolio Website with Theme Switcher (Light/Dark Mode)
Features:
o Responsive sections: About, Projects, Skills, Contact.
o Dark/light mode toggle using localStorage.
o Smooth scrolling and scroll-triggered animations.
Advanced Concepts:
o DOM manipulation
o CSS transitions/variables
o Scroll event handling
2. Task Planner with Calendar Integration
Features:
o Add tasks to specific days on a calendar.
o Drag-and-drop task reordering.
o Persist data using localStorage or IndexedDB.
Advanced Concepts:
o Drag and drop API
o Date management (with libraries like date-fns or moment.js)
o Modular JS structure
3. News App with Search and API Integration
Features:
o Fetch news from a public API like NewsAPI.
o Search/filter by category or keyword.
o Display content cards dynamically.
Advanced Concepts:
o Fetch API, async/await
o API error handling
o Responsive card layout using CSS Grid/Flexbox
4. Quiz App with Timer and Result Evaluation
Features:
o Multiple-choice quiz with a countdown timer.
o Auto-submit on timeout, show correct/incorrect answers.
o Store high scores using localStorage.
Advanced Concepts:
o Timers (setInterval, clearInterval)
o Dynamic DOM rendering
o Scoring logic and validation
5. Shopping Cart App
Features:
o Product list with “Add to Cart” buttons.
o Cart page with quantity, total price, and remove items.
o Store cart state in localStorage.
Advanced Concepts:
o Event delegation
o Data binding with arrays/objects
o Cart logic implementation
6. Resume Builder (Download as PDF)
Features:
o Form to enter personal info, education, skills, and experience.
o Preview formatted resume.
o Download as PDF using html2pdf.js.
Advanced Concepts:
o Form inputs and validation
o Dynamic content rendering
o PDF generation from HTML
7. CSS Art Generator
Features:
o Use sliders and color pickers to customize a shape or pattern.
o Generate and copy CSS code for the created design.
Advanced Concepts:
o CSS-in-JS
o Code generation logic
o Copy to clipboard feature
8. Movie Search App Using OMDB API
Features:
o Search movies by title, view ratings, genre, etc.
o Show movie posters and descriptions.
o Option to save favorites.
Advanced Concepts:
o Real-time search with debouncing
o External API integration
o Modal component for details
9. Chat App (Frontend only)
Features:
o Simulate multiple user messages.
o Chat UI with timestamps and emojis.
o Auto-scroll and chat bubbles.
Advanced Concepts:
o Dynamic UI rendering
o Emoji picker
o Message formatting
10. Expense Tracker Dashboard
Features:
o Add income/expense transactions.
o Visual charts (use Chart.js) for insights.
o Store data persistently.
Advanced Concepts:
o Chart.js integration
o Array calculations and filtering
o CSS animations for value changes
