DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Arya Narayan Tiwari
Arya Narayan Tiwari

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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()
    }
})
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post