javascript-lab

🚀 JavaScript Lab – 30 Day Consistency Journey

A structured 30-day JavaScript practice repository focused on fundamentals, logic building, DOM mastery, and real-world mini projects.

🔗 Live Demo:

• https://thecodingadi.github.io/javascript-lab/
• http://127.0.0.1:5500/Browser_Projects/

---

🛠 Tech Stack

• JavaScript (ES6+)
• HTML5
• CSS3
• DOM API
• LocalStorage
• Fetch API
• Git & GitHub
• GitHub Pages

---

📘 Week 1 – Core JavaScript Basics

• Demo.js → JavaScript experiments & fundamentals
• EvenOdd.js → Even/Odd check without % operator
• factorial.js → Factorial logic implementation
• loops.js → for, while, do-while examples
• fibonacci.js → Fibonacci sequence (multiple approaches)
• Array.js → Array methods implementation
• RemoveDuplicates,Frequency.js → Brute force, Object & Map-based solutions

---

📗 Week 2 – Logic Building & DSA Foundations

• Sorting.js → Bubble, Selection, Insertion Sort
• Searching.js → Linear & Binary Search
• Two_Sum.js → Brute → Optimized (Map-based)
• Anagram_check.js → Sorting & Map approaches
• Stack.js → Stack implementation using class
• Patterns.js → Pattern problems using functions
• CheckSortedArray.js → Revision & logic strengthening

---

📙 Week 3 – DOM & Browser Projects

🔹 Day 15 – JS Link & Button Alert

• DOM connection
• Event handling
• Alert interaction

🔹 Day 16 – Counter App

• Increment / Decrement / Reset
• DOM manipulation
• Event listeners

🔹 Day 17 – Digital Clock

• Real-time 24-hour clock
• Date() + setInterval()
• Dark/Light theme toggle

🔹 Day 18 – Random Color Generator

• HEX & RGB logic
• Dynamic background update
• DOM mastery

🔹 Day 19 – Number Guessing Game

• Random number logic
• Smart hint system
• Limited attempts
• State management

🔹 Day 20 – Calculator

• Responsive glassmorphic UI
• eval() with error handling
• Full keyboard support
• Toggleable history panel

🔹 Day 21 – To-Do List

• Category-based tasks
• localStorage persistence
• Checkbox completion
• Sliding task panel

---

📙 Week 4 – Portfolio Projects

⏱ Day 22–23 – Stopwatch

Features:

• Start / Stop / Reset
• HH:MM:SS format
• Lap functionality
• Dynamic lap list
• Button state control
• Polished dark UI

---

⌨ Day 24–25 – Typing Test

Features:

• Paragraph display
• Real-time character highlighting
• 60s timer
• Live WPM & Accuracy
• Auto-start timer
• Restart functionality
• Input disable after timeout

---

🌦 Day 26 – Weather App

• Integrated OpenWeather API
• City search
• Dynamic weather display
• Error handling
• Modern UI

---

📝 Day 27 – Notes App

• Add/Delete notes
• localStorage persistence
• Dynamic rendering
• Responsive grid
• Glassmorphism UI
• Smooth hover animations

---

🌗 Day 28 – Dark / Light Mode Website

• Theme toggle (🌙 / ☀️)
• Theme persistence using localStorage
• System theme detection
• CSS variable-based transitions
• Modern UI design

---

🧹 Day 29 – Repo Cleanup

• Clean folder structure
• Removed unused code
• Improved file naming
• Optimized CSS & JS
• Added screenshots
• Final README update
• Clean commit history

---

🚀 Day 30 – Mini Dashboard

• Live Digital Clock
• Todo List (localStorage)
• Weather App (Fetch API)
• Async/Await usage
• Dynamic DOM updates
• Error handling
• Clean glass UI

---

📸 Project Screenshots

🔹 Day 15 – JS Link & Button Alert

🔹 Day 16 – Counter App

🔹 Day 17 – Digital Clock

🔹 Day 18 – Random Color Generator