Creating speedometer using HTML CSS JS

byHTML galaxy -October 14, 2021 0

YOUTUBE LINK click here

Source code:

<!DOCTYPE html>
<html>

<head>
<title>
speedometer
</title>
<style>
.container {
background-color: #1a2639f5;
display: flex;
justify-content: space-around;
align-items: center;
}

.speedometer {
width: 500px;
height: 250px;
background-color: black;
color: white;
position: relative;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}

.display {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 100px;
background-color: #24527a;
color: white;
}

.levels {
width: 50px;
font-size: 10px;
position: absolute;
background-color: #eb2632;
}

.levels:nth-child(1) {
top: 180px;
left: 5px;
}

.levels:nth-child(2) {
top: 120px;
left: 30px;
transform: rotate(15deg);
}

.levels:nth-child(3) {
top: 70px;
left: 80px;
transform: rotate(55deg);
}

.levels:nth-child(4) {
top: 40px;
left: 140px;
transform: rotate(70deg);
}

.levels:nth-child(5) {
top: 30px;
left: 210px;
transform: rotate(88deg);
}

.levels:nth-child(6) {
top: 35px;
left: 280px;
transform: rotate(-75deg);
}

b .levels:nth-child(7) {
top: 65px;
left: 350px;
transform: rotate(-55deg);
}

.levels:nth-child(8) {
top: 110px;
left: 410px;
transform: rotate(-30deg);
}

.levels:nth-child(9) {
top: 180px;
left: 440px;
}

p {
background-color: burlywood;
width: 100px;
height: 10px;
position: relative;
left: 160px;
top: 165px;
transform-origin: 100% 100%;
}

button {
border-radius: 5px;
padding: 5px;
font-size: 20px;
font-family: cursive;
margin: 10px;
}

#accelerate:hover {
background-color: lightgreen;
color: white;
}

#deaccelerate:hover {
background-color: red;
color: white;
}
</style>
</head>

<body>
<div class="container">
<div class="speedometer">
<div class="points">
<div class="levels">0</div>
<div class="levels">1</div>
<div class="levels">2</div>
<div class="levels">3</div>
<div class="levels">4</div>
<div class="levels">5</div>
<div class="levels">6</div>
<div class="levels">7</div>
<div class="levels">8</div>
</div>
<div class="pointer">
<p id="move"></p>
</div>
</div>
<div class="display">0KMPH</div>
</div>
<button onclick="accelerate()" id="accelerate">accelerate</button>
<button onclick="deaccelerate()" id="deaccelerate">deaccelerate</button>
<script>
var degree = 0;

function accelerate() {
if (degree < 180) {
degree++;
document.getElementById("move").style.transform = `rotate(${degree}deg)`;
document.getElementsByClassName("display")[0].innerHTML = Math.ceil((degree / 180) * 80) + "KMPH";
}
}

function deaccelerate() {
if (degree >= 0) {
degree--;
document.getElementById("move").style.transform = `rotate(${degree}deg)`;
document.getElementsByClassName("display")[0].innerHTML = Math.ceil((degree / 180) * 80) + "KMPH";
}
}
</script>
</body>

</html>

Post a Comment

Post a Comment (0)