When I press start button the background color of browser window should change . First it should turn to red for 30 seconds then to yellow for 5 seconds and then to green for 30 seconds.It should happen atleast once. //Below is HTML file :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Traffic Light</h1>
<div>
<button id="btn1">Start</button>
</div>
</body>
<script src="TrafficLightJS.js"></script>
</body>
</html>
//Below is Javascript file:
const colors=["red","yellow","green"];
const btn=document.getElementById("btn");
//const color=document.querySelector(".color");
btn.addEventListener("click",function()){
setInterval(function()) {
document.body.style.background=colors[0];
},30000);
setInterval(function()) {
document.body.style.background=colors[1];
},5000);
setInterval((function()) {
document.body.style.background=colors[2];
},30000);
}
//CSS File is below:
.red
{
background-color:red;
}
.yellow
{
background-color:yellow;
}
.green
{
background-color:green;
}