JavaScript for Beginners: Your First 5 Projects

JavaScript is one of the most popular programming languages for web development. The best way to learn it is by building small, fun projects. Here are 5 beginner-friendly projects to get you started.

1. Digital Clock

• Learn Date() object and setInterval()
• Displays the current time that updates every second.

function showTime() {
  let time = new Date().toLocaleTimeString();
  document.getElementById("clock").innerText = time;
}
setInterval(showTime, 1000);

📌 Skills: DOM manipulation, time functions.

2. To-Do List

• Add and remove tasks dynamically.
• Store tasks in localStorage to persist data.

function addTask() {
  let task = document.getElementById("task").value;
  let li = document.createElement("li");
  li.textContent = task;
  document.getElementById("list").appendChild(li);
}

📌 Skills: DOM, events, arrays.

3. Calculator

• Create a simple calculator using buttons.
• Use functions for add, subtract, multiply, divide.

function calculate(op) {
  let a = Number(document.getElementById("a").value);
  let b = Number(document.getElementById("b").value);
  if(op === "+") alert(a + b);
}

📌 Skills: Functions, input handling.

4. Random Quote Generator

• Store quotes in an array.
• Display a new random quote each time a button is clicked.

let quotes = ["Keep going!", "Stay positive!", "Learn daily!"];
function newQuote() {
  let i = Math.floor(Math.random() * quotes.length);
  document.getElementById("quote").innerText = quotes[i];
}

📌 Skills: Arrays, random numbers, DOM.

5. Weather App (Using API)

• Fetch weather data using a free API like OpenWeatherMap.
• Show temperature, description, and city name.

async function getWeather() {
  let city = "London";
  let res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`);
  let data = await res.json();
  console.log(data.weather[0].description);
}

📌 Skills: Fetch API, async/await, JSON.

✅ Tips for Beginners:

• Start with small projects.
• Use console.log() for debugging.
• Gradually add styling and interactivity.
• Share your projects on GitHub!