This content originally appeared on DEV Community and was authored by Arya Narayan Tiwari
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()
}
})
That's it, you have just created a fun JS DOM manipulation project within an hour and you can show it your friends and surprise them on Halloween 👍.
Important links -
This content originally appeared on DEV Community and was authored by Arya Narayan Tiwari
Arya Narayan Tiwari | Sciencx (2021-10-30T18:22:35+00:00) Halloween🎃 with JS!. Retrieved from https://www.scien.cx/2021/10/30/halloween%f0%9f%8e%83-with-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.