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!

Comments

[jccaropino7786]

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