Best matchRelated: array methodsIntermediate
Weather App
Request current weather data and display the response clearly.
Build a weather app →Number Counter
Build a number counter with HTML, CSS, and JavaScript while practicing click events and DOM selection.
Intermediate30–45 minutesHTML5CSS3JavaScript
You’ll practice
Click EventsDOM SelectionDOM Content Updates
01 — What you’ll build
Number Counter
In this project, we’re going to build a number counter using HTML, CSS, and JavaScript. You’ll see how to connect user interactions to visible changes on the page. Along the way, you’ll practice click events, DOM selection, and DOM content updates, so you can understand how the interface and JavaScript logic work together.
02 — Included
- Click-based interactions
- Number Counter interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You’ll practice
- Handle user clicks
- Select HTML elements from the DOM
- Update content on the page
- Read and update form values
- Process data with array methods
- Control behavior with conditions
Recommended knowledge: Basic HTML and CSS, JavaScript arrays and array methods, JavaScript variables and number operations, DOM selection and form events.
Complete project files
Build It from the Source Code
This project runs directly in the browser with HTML, CSS, and JavaScript.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep an internet connection available for external assets.
Project structure
counter/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<div>
<h1>Counter</h1>
<span class="value">0</span>
<div>
<button class="btn btn-danger decrease"><i class="fa fa-minus" aria-hidden="true"></i></button>
<button class="btn btn-secondary reset">Reset</button>
<button class="btn btn-success increase"><i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</div>
</main>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice array methods, javaScript calculations, and conditional logic with these related projects.
Best match
Related: JavaScript calculations
Feedback UI
Turn JavaScript calculations into clear visual results.
Build a feedback ui →
Related: conditional logic
Rock Paper Scissors Game
Use conditions to control how the interface behaves.
Build the game →Related: array methodsBest match
Weather App
Request current weather data and display the response clearly.
Build a weather appRelated: JavaScript calculations
Feedback UI
Turn JavaScript calculations into clear visual results.
Build a feedback uiRelated: conditional logic
Rock Paper Scissors Game
Use conditions to control how the interface behaves.
Build the game