HTML Setup
- Used a simple HTML structure with a
<button>inside a centered<div>container. - Title is set as ColorFlipper.
CSS Styling
- Full height body with no margin.
- Flexbox (display: flex; justify-content: center; align-items: center;) to center the button.
- Styled button with padding, font-size, border-radius, background, and hover pointer.
DOM Selection
Selected the button using document.querySelector('button').
Event Listener
-Attached a click event listener:
btn.addEventListener('click', colorChanging);
-So every time the button is clicked, background color changes.
Color Array
Created an array of hexadecimal digits:
let color=[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];
This is the building block for generating hex color codes.
Random Generator Function
- Wrote a helper function random() that:
- Uses Math.random() to generate a random number.
- Multiplies it by array length.
- Uses Math.floor() to round it down to an integer.
- Returns one random item from the array.
Hex Code Creation
In colorChanging() function:
- Started with let hexa = "#".
- Used a for loop to run 6 times (since a hex code has 6 characters).
- Appended 6 random values from the color array to form something like #3A5F9C.
Apply New Color
Set the body background to the new hex code:
document.querySelector('body').style.backgroundColor = hexa;
!!......That’s it! We just built a simple yet cool JavaScript Color Flipper using DOM, events, and randomness.....!!
Thanks for reading, and I’ll be back with another fun JavaScript project.
See you soon!
SOCIAL SHARE CARD GENERATOR