Creating a Custom Speedometer with HTML, CSS, and JavaScript
In this tutorial, we'll create a custom speedometer using HTML, CSS, and JavaScript. This speedometer will dynamically update to simulate changes in speed.
Step 1: Set Up the HTML Structure
We'll start by creating the basic HTML structure for our speedometer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Speedometer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="speedometer-container">
<div class="speedometer">
<div class="needle" id="needle"></div>
<div class="speed-label" id="speedLabel">0 Km/h</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Style the Speedometer with CSS
Next, we'll add the CSS to style our speedometer.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
font-family: Arial, sans-serif;
}
.speedometer-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 300px;
height: 300px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.speedometer {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
.needle {
position: absolute;
bottom: 50%;
left: 50%;
width: 2px;
height: 50%;
background-color: red;
transform-origin: bottom center;
transform: rotate(0deg);
}
.speed-label {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
font-weight: bold;
}
Step 3: Add the JavaScript for Dynamic Updates
Finally, we'll add the JavaScript to update the speedometer dynamically.
document.addEventListener('DOMContentLoaded', function() {
const needle = document.getElementById('needle');
const speedLabel = document.getElementById('speedLabel');
let speed = 0;
function updateSpeedometer() {
speed += 5;
if (speed > 100) {
speed = 0;
}
const rotation = (speed / 100) * 180;
needle.style.transform = `rotate(${rotation}deg)`;
speedLabel.textContent = `${speed} Km/h`;
}
setInterval(updateSpeedometer, 1000);
});
Summary
Congratulations! You've created a custom speedometer using HTML, CSS, and JavaScript. This tutorial covered the basics of setting up the HTML structure, styling the speedometer, and adding JavaScript to update it dynamically.
Complete Code
You can find the complete code below. Feel free to copy and use it in your projects.
Full Code for index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Speedometer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="speedometer-container">
<div class="speedometer">
<div class="needle" id="needle"></div>
<div class="speed-label" id="speedLabel">0 Km/h</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Full Code for styles.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
font-family: Arial, sans-serif;
}
.speedometer-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 300px;
height: 300px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.speedometer {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
.needle {
position: absolute;
bottom: 50%;
left: 50%;
width: 2px;
height: 50%;
background-color: red;
transform-origin: bottom center;
transform: rotate(0deg);
}
.speed-label {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
font-weight: bold;
}
Full Code for script.js
document.addEventListener('DOMContentLoaded', function() {
const needle = document.getElementById('needle');
const speedLabel = document.getElementById('speedLabel');
let speed = 0;
function updateSpeedometer() {
speed += 5;
if (speed > 100) {
speed = 0;
}
const rotation = (speed / 100) * 180;
needle.style.transform = `rotate(${rotation}deg)`;
speedLabel.textContent = `${speed} Km/h`;
}
setInterval(updateSpeedometer, 1000);
});
Conclusion
By following these steps, you can create a custom speedometer using HTML, CSS, and JavaScript. This example provides a basic implementation that you can further customize to meet your specific needs. Happy coding!
Post a Comment