Introduction
Step 1: Set up an HTML and CSS
Creating the main HTML file
Styling the overall HTML file with CSS
Step 2: Generate more Random Colors
Using the various Math.random() function to generate random values
Creating the new color with string in the RGB format
Step 3: Change the overall Background Colors
Selecting the main HTML elements with code inJavaScript
Adding an event with listener to the button to change the background with color
Conclusion
Building the random color flipper is a fun and useful project that very can be easily accomplished using Vanilla with JavaScript. In this article, we'll go through overall the steps of the creating a random color flipper from the scratch.
Step 1: Set up the HTML and CSS
The very first step in creating our random color flipper is to secure set up the HTML and CSS. We'll start with a simple HTML file that contains with a button and a div that we will use to display the very randomly generated colors.
<!DOCTYPE html>
<html>
<head>
<title>Random Color Flipper</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Random Color Flipper</h1>
<div id="color"></div>
<button id="btn">Generate Color</button>
</div>
<script src="app.js"></script>
</body>
</html>
In our CSS file, we'll set the background color of the body to black and style the container, heading, and button.
body {
background-color: black;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
color: white;
}
h1 {
font-size: 3rem;
margin-bottom: 2rem;
}
#color {
width: 200px;
height: 200px;
margin-bottom: 2rem;
}
#btn {
padding: 1rem 2rem;
font-size: 1.5rem;
background-color: white;
color: black;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#btn:hover {
background-color: black;
color: white;
}
With our HTML and CSS in the place, we're ready to move forward on to the JavaScript.
Step 2: Generate the Random Colors
To generate the very random color, we'll use the built-in Math.random() function in JavaScript to heavily generate random values for the red, green, and blue components of the color. We'll then use these values which create a new color string in the RGB format.
function getRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
}
This function will return with a string in the format rgb(r, g, b) where r, g, and b are random integer more values between 0 and 255.
Step 3: Change Background Color
Now that you have a function to generate random colors, we can use it to change the potential background color of our div when the user clicks the button. We'll start by selecting the main button and the div using the search querySelector() method.
const btn = document.querySelector('#btn');
const colorDiv = document.querySelector('#color');
We'll then add an event listener to the button that calls our getRandomColor() function and sets the background color of the div to the returned value.
btn.addEventListener('click', () => {
const color = getRandomColor();
colorDiv.style.backgroundColor = color;
});
This code will listen for a click event on the button, generate a random color using the getRandomColor() function, and set the background color of
Conclusion
We have seen how to build a random color with flipper using Vanilla JavaScript. By setting up a very simple HTML and CSS structure, and using the JavaScript to generate random sizing colors and change the background color of an HTML element, we were able to generate create an interactive and fun web application. This project can be a great for starting point for anyone looking to learn more about the web development and programming with JavaScript. By building serious on this basic structure, you can add more features and functionality which to create more complex and interesting with projects. Happy coding!
