<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Sàn Nhảy Sôi Động</h1>
<p>Di chuột vào các ô vuông để bật đèn</p>
<div class="container">
<div id="red" class="den">
<h2>Đỏ</h2>
</div>
<div id="green" class="den">
<h2>Xanh</h2>
</div>
<div id="yellow" class="den">
<h2>Vàng</h2>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
text-align:center;
background-color:black;
}
h1 {
color:white;
}
.den {
color:white;
font-size:21px;
border:solid white;
border-radius:53px;
height:100px;
width:100px;
background-color:#928b94;
align-items:center;
justify-content:center;
display:flex;
transition: 0.4s;
}
.container {
display:flex;
gap:50px;
justify-content: center;
}
let denDo = document.getElementById("red");
let denXanh = document.getElementById("green");
let denVang = document.getElementById("yellow");
let redSound = new Audio("https://www.soundjay.com/buttons_c2026/button-8.mp3");
let greenSound = new Audio("https://www.soundjay.com/ambient_c2026/kids-playing-1.mp3");
let yellowSound = new Audio("https://www.soundjay.com/ambient_c2026/boarding-accouncement-1.mp3");
//Khi di chuyen chuot vao (mouseover)
denDo.addEventListener("mouseover",function() {
denDo.style.backgroundColor = "red";
denDo.innerHTML = "Bật!";
denDo.style.boxShadow = "0 0 50px red";
// reset TG về 0 de co the bam lien tuc
redSound.currentTime = 0;
redSound.play();
});
//Khi di chuyen chuot ra (mouseout)
denDo.addEventListener("mouseout",function() {
denDo.style.backgroundColor = "#928b94";
denDo.innerHTML = "Đỏ";
denDo.style.boxShadow = "none";
});
denXanh.addEventListener("mouseover",function() {
denXanh.style.backgroundColor = "green";
denXanh.innerHTML = "Bật!";
denXanh.style.boxShadow = "0 0 50px green";
greenSound.currentTime = 0;
greenSound.play();
});
denXanh.addEventListener("mouseout",function() {
denXanh.style.backgroundColor = "#928b94";
denXanh.innerHTML = "Xanh";
denXanh.style.boxShadow = "none";
});
denVang.addEventListener("mouseover",function() {
denVang.style.backgroundColor = "yellow";
denVang.innerHTML = "Bật!";
denVang.style.boxShadow = "0 0 50px yellow";
yellowSound.currentTime = 0;
yellowSound.play();
});
denVang.addEventListener("mouseout",function() {
denVang.style.backgroundColor = "#928b94";
denVang.innerHTML = "Vàng";
denVang.style.boxShadow = "none";
});