Related: Local StorageBest match
Note Taking App
Create editable notes and keep them saved in the browser.
Build a note taking appMultiplication App
Build a multiplication app with HTML, CSS, and JavaScript while practicing local storage and DOM selection.
Intermediate30–45 minutesHTML5CSS3JavaScript
You'll practice
Local StorageDOM SelectionDOM Content Updates
01 — What you'll build
Multiplication App
In this project, we’re going to build a multiplication app using HTML, CSS, and JavaScript. You’ll see how to connect the interface to practical JavaScript behavior. Along the way, you’ll practice local storage, DOM selection, and DOM content updates, so you can understand how the interface and JavaScript logic work together.
02 — Included
- Data saved in the browser
- Multiplication App interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You'll practice
- Save and restore data with localStorage
- Select HTML elements from the DOM
- Update content on the page
- Read and update form values
- Generate random values
- Control behavior with conditions
Recommended knowledge: Basic HTML and CSS, JavaScript objects and arrays, JSON basics, Functions and Math.random.
Complete project files
Build It from the Source Code
This project saves its data between browser sessions.
- 1Create three files
- 2Copy the code
- 3Run
index.html
Before you run it
- Saved data stays in this browser through local storage.
Project structure
multiplication-app/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiplication App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form class="form" id="form">
<h4 class="score" id="score">score: 0</h4>
<h1 id="question">What is 1 multiply by 1?</h1>
<input
type="text"
class="input"
id="input"
placeholder="Enter your answer"
autofocus
autocomplete="off"
/>
<button type="submit" class="btn">Submit</button>
</form>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice local Storage, random values, and javaScript calculations with these related projects.
