Halloween🎃 with JS!

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 -

Source Code
Project Demo