DEV Community

Surapat Mekvanich
Surapat Mekvanich

Posted on

How to get your background to become disco light

Hi all,

I was working on a javaScript project and wanted a party mode color. My initial imagination was that I wanted a button to alternate the background color of my web page.

I started by adding a button in my html file.

<button id="partyToggle" value="Yes">Party Mode</button>

You might be wondering why there is a value = "Yes" attached to it. Worry not, it does nothing.

I was trying to do some magic trick with the javaScript by having its value change between two values ("Yes"/"No") when clicking on another button in order to simulate an on/off switch for a function... or that's how it worked in my head. Anyways, it didn't really work so I thought I would leave it there for a great storyteller.

Aaaaaaanyways, back to the topic. After creating a button we want to be able to target it. Hence, I create a global accessible variable in the javaScript file.

let togglePartyModeBtn = document.querySelector("#partyToggle")

This allows togglePartyModeBtn to target the button we made in the html file initially.

Next, I added an event listener to the button to initiate a function that I am going to be making. We are going to called it "partyMode".

togglePartyModeBtn.addEventListener('click', partyMode)

This means that when a click event occurs at the 'Party Mode' button the function partyMode will be passed right away.

So let's write the code for partyMode function.

function partyMode() {
document.body.classList.toggle("party-mode");

This function will call on another feature in CSS labeled '.party-mode'.

In my CSS file, I added.

.party-mode {
background-color: whitesmoke;
animation-name: partyMode;
animation: partyMode 3s;
animation-iteration-count: infinite;
}

This sets our initial background to whitesmoke when partyMode is invoked. My page just happens to be in whitesmoke in the default color hence why it is whitesmoke. I also gave it an animation name because I will add @keyframes after. I also wanted it to alternate between colors so I coded animation and feed it the animation name to it. The 3s means that it will cycle between all the colors in 3 seconds interval. You can make this longer if the disco color hurts your eyes (but is it really disco if it doesn't hurt your eyes)? I am also lazy so I didn't want to click the 'Party Mode' button every 3 seconds so I set the animation iteration count to infinite so it'll just keep running.

@keyframes partyMode {
0% {background-color: red;}
20% {background-color: pink;}
40% {background-color: yellow;}
60% {background-color: blue;}
80% {background-color: purple;}
100% {background-color: green;}
}

So below that code (in the CSS) I coded this to cycle between all the colors I wanted. To ensure smooth transition between the colors I would choose colors that are closely related in the r,g,b,a values. You can also change the % of the background color as you wished. It will just change how much time the color is being display in the background.

Please let me know if there are improvements I can make to my codes since I am still learning!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
jccaropino7786 profile image
jccaropino7786

great little fun read. This is adds flair for sure.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay