JavaScript Mastery Bootcamp — 27 Projects in 4 Weeks
27 Projects in 4 Weeks
A structured 4-week learning journey designed to build hands-on mastery of DOM manipulation, core JavaScript logic, asynchronous programming, and UI interactivity. Each day includes a focused mini-project that builds upon the previous one — resulting in 27 practical, real-world JavaScript projects.
📅 Learning Roadmap 🗓️ Week 1: DOM & Input Mastery (User Interaction)
Goal: Learn to manipulate the DOM, handle user input, and respond to user actions dynamically. Focus: Input fields, events, class toggling, and form validation.
Day Project Core Concept Outcome 1 🧮 Tip Calculator Input & Number Conversion Calculates tip dynamically with formatted output
2 ✅ To-Do List Dynamic Creation & Removal Add/remove tasks with instant UI updates
3 🖼️ Image Gallery Attribute Manipulation Switch images by clicking thumbnails
4 📖 Accordion/FAQ Class Toggling Expand and collapse sections smoothly
5 🧾 Form Validator Preventing Default & Validation Validates inputs and blocks invalid submissions
6 🎨 Keyboard Color Changer Window/Document Events Changes colors via keyboard input
7 🔐 Password Toggle Attribute Switching Toggle password visibility with a button
🧩 Week 2: Core Data Logic (The “Brain” of JS)
Goal: Develop strong logical thinking and mastery over arrays, objects, and storage. Focus: Data transformation, aggregation, and persistence.
Day Project Core Concept Outcome 8 🔄 Array Data Transformer Array Methods (map, filter) Dynamic data transformation and filtering
9 ➕ Array Data Aggregator Array reduce() Aggregate values and calculate totals
10 ✂️ Destructuring Practice Object/Array Destructuring Extract and log values efficiently
11 🔍 List Filter/Search Iterating & Hiding Elements Real-time list filtering
12 💾 Local Storage Saver Client-Side Storage Persistent To-Do list on reload
13 🧱 Simple Object Merger Spread Operator (...) Merge and clone objects dynamically
14 ⚙️ Scoping & let/const Review Hoisting & TDZ Demonstrate var/let/const differences
⚡ Week 3: Asynchronous JS (The MERN Stack Core)
Goal: Build fluency in async JavaScript for modern web applications. Focus: Timers, promises, async/await, and API requests.
Day Project Core Concept Outcome 15 ⏱️ Simple Timer/Stopwatch setInterval / clearInterval Functional stopwatch with start/stop
16 🔗 Promise Chain Simulator Promises Sequentially resolving/rejecting promises
17 🌐 fetch & JSON Display API Calls Display API data dynamically
18 🧭 Async/Await Refactor Modern Async Syntax Cleaner async code without callbacks
19 ⏳ Loading State Simulator Asynchronous UI Feedback Handle loading and error states gracefully
20 📤 Simple POST Request Sending Data Submit and display POST responses
21 🧱 Error Handling Demo try...catch Graceful error management
🎨 Week 4: Advanced DOM & Review
Goal: Integrate all learned skills in more complex, interactive UI components. Focus: Dynamic styling, event bubbling, and multi-skill integration.
Day Project Core Concept Outcome 22 🖼️ Simple Carousel Dynamic Styling & Indexing Auto-looping image carousel
23 📊 Progress Bar Filler DOM Styling Progress bar updates on button click
24 🪄 Dropdown Menu Event Bubbling Menu toggles correctly under clicks
25 ⭐ Data Attribute Rating dataset API Custom ratings system using data-* attributes
26 🌡️ Temperature Converter Bi-directional Logic Real-time Celsius/Fahrenheit conversion
27 🧠 Final To-Do (Full Stack) Integration Project To-Do app with filters, local storage, and API
🚀 Tech Stack
HTML5 — Structure
CSS3 — Styling and animations
JavaScript (ES6+) — Core logic, async, DOM manipulation
LocalStorage / Fetch API — Data persistence & HTTP interaction
🧑💻 How to Use
Clone the repo
git clone https://github.com/jayalloyd/JavaScript-Projects
Open any project folder in weekX-.../dayY-.../
Launch the index.html file in your browser
Explore the code, interact with the UI, and learn hands-on!
🌟 Highlights
27 JavaScript mini-projects completed in 4 weeks
Covers everything from DOM basics → async JS → advanced UI logic
Perfect for beginners to intermediate developers
Builds a strong foundation for React / MERN stack development Author
Jaya Rani.Y.S. 📍 Full Stack Developer 🌐 [LinkedIn URL] 💻 Github: jayalloyd