When dialing a number, it is desirable to highlight the pressed button.
When clicking on any button in the index.html file, the pressed class must be added to it for 500ms.
This class should change the background-color property to #D5CFE1.
After 500ms, the class must be removed for the color to return to its original position.
Use internal styles and script.
This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task
index.html
<!DOCTYPE>
<html>
<head>
<title>Dial</title>
<style>
body {
display: grid;
height: 100vh;
place-items: center;;
}
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(4, 100px);
gap: 8px;
}
.button {
background-color: #EDDFEF;
color: #464655;
font-size: 36px;
line-height: 100px;
text-align: center;
font-family: monospace;
cursor: pointer;
}
.button:last-child {
grid-column: 2 / span 1;
}
</style>
</head>
<body>
<div class="container">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button">0</div>
</div>
</body>
</html>