Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 30, 2021 06:22 pm GMT

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


Original Link: https://dev.to/aryanarayantiwari/halloween-with-js-4af0

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To