Skip to content
📜

JavaScript Basics

5 projects

Build interactive projects with JavaScript — counters, generators, calculators, and todo lists.

  1. 1

    Counter

    Build a button-driven counter that increments, decrements, and resets. Practice DOM selection, event listeners, and updating text content.

    Beginner~10 min
  2. 2

    Random Quote Generator

    Build a button that shows a random quote from an array. Practice arrays, random indexing, and updating the DOM on demand.

    Easy~15 min
  3. 3

    Color Changer

    Build a button that changes the background color of a box to a random color. Practice inline style updates and hex color generation.

    Beginner~10 min
  4. 4

    Tip Calculator

    Build a tip calculator that takes a bill amount and tip percentage, then shows the tip and total. Practice number parsing, functions, and DOM updates.

    Easy~20 min
  5. 5

    Simple Todo List

    Build a working todo list — add tasks, mark them done, and delete them. Practice arrays, rendering from state, and event delegation.

    Medium~30 min