Best matchRelated: setTimeoutIntermediate
Dice Roll Simulator
Control delayed interface updates with browser timers.
Build a dice roll simulator →Random Password Generator
Build a random password generator with HTML, CSS, and JavaScript while practicing setTimeout and click events.
Intermediate30–45 minutesHTML5CSS3JavaScript
You’ll practice
setTimeoutClick EventsDOM Selection
01 — What you’ll build
Random Password Generator
Build a random password generator using HTML, CSS, and JavaScript, then connect the interface to the logic that makes it work. You’ll learn how to generate a fresh result and update the interface instantly while getting hands-on practice with setTimeout, click events, and DOM selection.
02 — Included
- Randomized results
- Random Password Generator interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You’ll practice
- Delay actions with setTimeout
- Handle user clicks
- Select HTML elements from the DOM
- Change styles by updating CSS classes
- Update content on the page
- Read and update form values
Recommended knowledge: Basic HTML and CSS, JavaScript functions and callbacks, Browser timers, Functions and Math.random.
Complete project files
Build It from the Source Code
This project uses timed JavaScript updates.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Leave the tab open to see the timed behavior update.
- Keep an internet connection available for external assets.
Project structure
random-password-generator/
<!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>Random Password Generator</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="password-container">
<h2>Random Password Generator</h2>
<div class="input-container">
<input
type="text"
id="input"
class="input"
placeholder="Create Password"
readonly
/>
<i class="far fa-copy fa-2x"></i>
</div>
<button class="btn">Generate</button>
</div>
<div class="alert-container active">Password Copied</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice setTimeout, random values, and input values with these related projects.
Best match
Related: random valuesIntermediate
Multiplication App
Generate changing values and display a new result each time.
Build a multiplication app →
Related: input valuesIntermediate
Weight Converter
Read form values and use them in the project logic.
Build a weight converter →Related: setTimeoutBest match
Dice Roll Simulator
Control delayed interface updates with browser timers.
Build a dice roll simulatorRelated: random values
Multiplication App
Generate changing values and display a new result each time.
Build a multiplication appRelated: input values
Weight Converter
Read form values and use them in the project logic.
Build a weight converter