JavaScript Tutorial
JavaScript Projects
Ten small apps you can run in the browser: a counter, a quiz, a to-do list, and a live clock.
What a project is on StudyGrid
JavaScript lessons teach one idea at a time. These projects assemble a whole page: HTML for structure, a little CSS so you can see the controls, and a script that responds to clicks. Each walkthrough ends with a complete document you can open in the JavaScript editor.
Use Try it in JavaScript under an example. That opens /javascript/try: a live page and a console.
10 build-along projects. Each page walks through the design, then a working program you can open inTry JavaScript at /javascript/try. Change a value, run it again, then try the practice tasks at the bottom.
The 10 projects
Greeting
Read a name from an input and write a welcome line onto the page.
input · textContent · clickBeginnerCounter
Plus, minus, and reset buttons that update a number on the page.
click · state · textContentBeginnerTip Calculator
Split a bill: bill amount, tip percent, and people. Show the tip and the total per person.
Number · toFixed · inputBeginnerGuess the Number
Guess a secret integer. The page says high, low, or correct and counts the attempts.
random · if · inputBeginnerDigital Clock
A live clock using Date and setInterval so the time updates every second.
Date · setInterval · padStartIntermediateQuiz
A scored multiple-choice quiz stored as an array of questions. Show the score at the end.
array · click · scoreIntermediateTo-Do List
Add, complete, and delete tasks. Keep the list in an array and redraw the page.
array · filter · eventsIntermediateAccordion
FAQ panels that open one at a time. Click a question to show its answer and hide the others.
classList · querySelectorAll · clickIntermediateTheme Switch
Toggle light and dark on the page and remember the choice in localStorage.
classList · localStorage · clickIntermediateExpense Tracker
Add amounts with a label, list them, compute the total, and keep the list in localStorage.
array · reduce · localStorageHow to work a project
- Read the page goal and the methods you will use.
- Copy the first fragment and run it.
- Replace it with the complete document at the end of the chapter.
- Change the copy, the starting values, or the number of items. The script should still hold.
- Do the practice tasks, then move to the next project.