Projects

Project 1: Todo List

A simple todo list with add, toggle, and delete functionality using DOM manipulation.

let todos = [];
let idCounter = 0;

function addTodo(text) {
  todos.push({ id: ++idCounter, text, done: false });
  renderTodos();
}

function toggleTodo(id) {
  const todo = todos.find(t => t.id === id);
  if (todo) todo.done = !todo.done;
  renderTodos();
}

function deleteTodo(id) {
  todos = todos.filter(t => t.id !== id);
  renderTodos();
}

function renderTodos() {
  const list = document.querySelector("#todoList");
  list.innerHTML = "";
  for (const todo of todos) {
    const li = document.createElement("li");
    li.textContent = (todo.done ? "✓ " : "") + todo.text;
    li.style.textDecoration = todo.done ? "line-through" : "none";
    li.addEventListener("click", () => toggleTodo(todo.id));
    const delBtn = document.createElement("button");
    delBtn.textContent = "✕";
    delBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      deleteTodo(todo.id);
    });
    li.appendChild(delBtn);
    list.appendChild(li);
  }
}

addTodo("Learn JavaScript");
addTodo("Build a project");

Try it Yourself →

Project 2: Calculator UI

Build an interactive calculator with a display and number/operation buttons.

let display = "";
const output = document.querySelector("#calcDisplay");

function press(value) {
  display += value;
  updateDisplay();
}

function operate(op) {
  display += " " + op + " ";
  updateDisplay();
}

function calculate() {
  try {
    const result = Function('"use strict"; return (' + display + ")")();
    display = String(result);
  } catch {
    display = "Error";
  }
  updateDisplay();
}

function clearDisplay() {
  display = "";
  updateDisplay();
}

function updateDisplay() {
  if (output) output.textContent = display || "0";
}

press("5");
operate("+");
press("3");
calculate();

Try it Yourself →

Project 3: Weather Widget

Fetch weather data from an API and display temperature and conditions.

async function getWeather(city) {
  const apiKey = "YOUR_API_KEY";
  const url = "https://api.openweathermap.org/data/2.5/weather?q=" +
    city + "&appid=" + apiKey + "&units=metric";

  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error("City not found");
    const data = await res.json();
    return {
      city: data.name,
      temp: data.main.temp,
      description: data.weather[0].description
    };
  } catch (err) {
    return { error: err.message };
  }
}

async function showWeather(city) {
  const weather = await getWeather(city);
  if (weather.error) {
    console.log("Error:", weather.error);
    return;
  }
  console.log("Weather in " + weather.city + ":");
  console.log(weather.temp + "°C, " + weather.description);
}

showWeather("London");

Try it Yourself →

← Previous Exercises

Next → Common Patterns