JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Светофор</title>
<style>
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

h1 {
width: 100%;
text-align: center;
margin: 0;
}

.block {
height: 600px;
width: 200px;
border: 3px solid black;
border-radius: 30px;
padding: 20px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #8C1B1B, #490E0E)
}

.light {
width: 170px;
height: 170px;
border: 3px solid #fff;
border-radius: 50%;
background: #B8B8B8;
}

.light:hover {
cursor: pointer;
}

.stick {
position: absolute;
bottom: -56px;
left: 0;
right: 0;
margin: 0 auto;
width: 30px;
height: 50px;
border: 3px solid black;
border-top: 3px solid #490E0E;
border-bottom: 3px solid #490E0E;
background: #490E0E;
}
</style>
</head>
<body>

<h1>Программа "Светофор". Покликайте на круги!</h1>
<div class="block">
	
	<div class="light" id="red"></div>
	<div class="light" id="yellow"></div>
	<div class="light" id="green"></div>
	
	<div class="stick"></div>
</div>

</body>
</html>

JavaScript

let lights = document.getElementsByClassName('light');
 
    lights[0].addEventListener('click',()=> {foo('red');},false);
    lights[1].addEventListener('click',()=> {foo('yellow');},false);
    lights[2].addEventListener('click',()=> {foo('green');},false);
 
    function foo(color){
        for(i=0; i<lights.length; i++){ lights[i].style.background = '#B8B8B8'; }
        color == 'red' ? lights[0].style.background = 'red' : '';
        color == 'yellow' ? lights[1].style.background = 'yellow' : '';
        color == 'green' ? lights[2].style.background = 'green' : '';
    }