How to Create a Stop Watch using HTML, CSS and JavaScript
Inserting HTML
Step 1: Create a gradient background in HTML using <div>. Inside the background div, create an element for stopwatch which would contain the timer.
Step 2: The stopwatch element would contain 3 span elements for minutes, seconds and milliseconds, separated by a colon span element (:)
Step 3: Create 3 Action Buttons, Start, Stop and Reset using a tag, inside a div with class of ‘buttons’
Inserting CSS: Add the following CSS
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.background {
background: linear-gradient(to right bottom, rgba(1, 11, 71, 1), rgba(60, 4, 4, 1));
height: 100vh;
color: #fff;
display: grid;
place-content: center;
font-size: 60px;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
margin: 0 auto;
}
.buttons {
text-align: center;
margin: 0 auto;
}
.btn:link {
text-decoration: none;
font-size: 20px;
padding: .75rem 3rem;
border-radius: 5px;
}
.start {
background-color: green;
color: white;
}
.stop {
background-color: red;
color: black;
}
.reset {
background: #fff;
color: black;
}
Recent Comments