2

Halloween🎃 with JS!

 2 years ago
source link: https://dev.to/aryanarayantiwari/halloween-with-js-4af0
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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 modeExit 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 modeExit 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 modeExit 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 modeExit 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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK