How to get your background to become disco light
Tags: webdev, javascript, beginners, programming
Published: 2022-12-09 08:08:01

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!