הדלקת מנורה

הוראות

				
					<div class="wire"></div>
<div class="bulb"></div>

<div class="switch">
<div class="my-btn"></div>
</div>
<audio id="audio">
  
</audio>
				
			
				
					.my-container{
    background: #222222;
}
.my-container.on 
{
	background: radial-gradient(#555,#111);
}


.bulb 
{
	position: relative;
	width: 80px;
	height: 80px;
	background: #444;
	border-radius: 50%;
}

.my-container.on .bulb
{
	background: #fff;
}
 .switch 
{
	width: 80px;
	height: 80px;
	border: 3px solid #000;
	background: linear-gradient(#eee,#ccc,#eee);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.switch .my-btn 
{
	position: relative;
	width: 25px;
	height: 40px;
	background: linear-gradient(#777,#fff,#777);
	border-radius: 6px;
	border: 2px solid #000;
	cursor: pointer;
}

.my-container.on .switch .my-btn
{
	background: linear-gradient(#fff,#777,#fff);
}
				
			
				
					
		var btn = document.querySelector('.my-btn');
		var container = document.querySelector('.my-container');
		var sound = document.querySelector("#audio");
		btn.onclick = function(){
			container.classList.toggle('on');
			sound.play();
		}