Make your first project in JavaScript with DOM manipulation and surprise your friends on halloween.
About the Project
So, I was watching Dev Ed latest YouTube video where he recreated the classic scary maze game with JS, and that's where I got idea for my project. I wanted to create something similar to his project but not wanted it to be a maze game. So I thought I would apply his logic to the classic switch bulb project in JS where a user clicks on a button to turn the light 'on' or 'off'. Here when a user click on the button to turn the lights off we have a horror sound playing and Pennywise from IT movie series showing up with a laugh.
Setting up HTML
There isn't much required in html file just the starting state of
the contents of file.
<h1 class="head">Don't turn off the lights 💡</h1>
<button class="btn">💡LIGHTS ON</button>
<img src="./img/pennywise.png" class="penny" alt="pennywise">
<audio src="./audio/scream.mp3" class="spooky-audio"></audio>
<audio src="./audio/laugh.mp3" class="laugh"></audio>
<script src="./js/main.js"></script>
Setting up CSS
CSS adds a little bit of styling to the project also with some spooky font styles.
@import url('https://fonts.googleapis.com/css2?family=Fruktur&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-family: 'Fruktur',sans-serif;
color: #fff;
background-color: #485461;
background-image: linear-gradient(0deg,#485461 0%, #28313b 100%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
padding: 25px auto;
margin: 80px auto;
font-weight: 600;
letter-spacing: 5px;
overflow: hidden;
}
button{
margin: 25px auto;
padding: 10px 20px;
color: #fff;
background-color: #28313b;
outline: none;
border: 2px solid #28313b;
border-radius: 5px;
font-weight: 800;
cursor: pointer;
}
button:hover{
border: 2px solid orange;
}
img{
display:none;
}
Setting up JS
First we get all the DOM items whose behavior we want to change.
const btn = document.querySelector(".btn")
const head = document.querySelector(".head")
const penny = document.querySelector(".penny")
const audio = document.querySelector(".spooky-audio")
const laugh = document.querySelector(".laugh")
Then we get to the event listener part to listen for click events on button.
The event listener just contains a bunch of if and else statements that check the current value of the heading and button text with the innerHTML method and takes actions based on these values.
btn.addEventListener("click",(e) => {
if(btn.innerHTML == "💡LIGHTS ON"){
btn.innerHTML = "🎈LIGHTS OFF"
}
else{
btn.innerHTML = "💡LIGHTS ON"
}
if(penny.style.display == "block"){
penny.style.display = "none"
}
else{
penny.style.display="block"
}
if(head.innerHTML == "Don't turn off the lights 💡"){
head.innerHTML="You shouldn't have done that!🎃"
}
else{
head.innerHTML="Don't turn off the lights 💡"
}
laugh.volume = 1
audio.volume = 1
if(btn.innerHTML=="🎈LIGHTS OFF"){
laugh.play()
audio.play()
}
else{
laugh.pause()
audio.pause()
}
})
Top comments (0)