JavaScript Mini-Projects

You've learned how to store data, write functions, and fetch information from the web. Now, it's time to build! These projects combine everything you've learned in the Full-Stack track so far.

Project 1: The Interactive To-Do List

This is the "Hello World" of JavaScript applications. It tests your ability to handle Events, DOM Manipulation, and Arrays.

Requirements:

• Add Tasks: Users can type a task into an input and click "Add."
• Delete Tasks: Each task should have a "Delete" button that removes it from the list.
• Toggle Complete: Clicking on a task text should strike it through (use element.classList.toggle).

Project 2: The Dynamic Weather App

This project moves you into the "Full-Stack" mindset by connecting your frontend to a real server using the Fetch API.

Requirements:

• Search: A search bar where users can type a city name (e.g., "Indore" or "Bhopal").
• Async Data: Use fetch to get data from a free API (like OpenWeatherMap).
• Display: Show the temperature, weather description (e.g., "Cloudy"), and an icon.
• Error Handling: Show a "City not found" message if the API call fails.

Project 3: The "Rock, Paper, Scissors" Game

Logic is the heart of programming. This project focuses purely on Functions, Conditionals, and Randomness.

Requirements:

• Computer Choice: Use Math.random() to let the computer "pick" a move.
• Win Logic: Compare the user's choice vs. the computer's choice to find a winner.
• Score Tracker: Use a let variable to keep track of the score across multiple rounds.

Project 4: The Digital Clock & Timer

Mastering Time and Intervals is crucial for apps like CodeHarborHub where we might track learning progress.

Requirements:

• Live Clock: Use setInterval to update the time every second.
• Format: Ensure the time displays in a clean HH:MM:SS format.
• Theme Sync: Use your CSS skills to make the clock glow or change color based on the time of day.

How to Build These Projects

At CodeHarborHub, we recommend the 3-Step Process:

1. The Skeleton (HTML): Build the structure first. Don't worry about the style.
2. The Brain (JavaScript): Make it work. Use console.log at every step to make sure your data is flowing.
3. The Skin (CSS): Once it works perfectly, make it look professional using Flexbox and Grid.

Stuck? Use the Console!

If your button isn't working, the first thing to do is add console.log("Button clicked!") inside your event listener. If you don't see that message in your browser console, your JS isn't "finding" your HTML.

Summary

Building projects is where the real learning happens. Don't be afraid of errors—every Red Error in your console is just a lesson teaching you how to be a better developer.