DEV Community

Arya Narayan Tiwari
Arya Narayan Tiwari

Posted on

15 1

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more