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!
Top comments (1)
great little fun read. This is adds flair for sure.