Random Color Flipper


DEMO



Step by Step Algorithm:

1. Create an HTML file and include the provided code.

2. In the CSS file, define styles for the h1 and button elements. You may also want to define styles for the container element or any other elements you wish to style.

3. Create a JavaScript file and link it to the HTML file using the script element at the bottom of the body element.

4. In the JavaScript file, define a function that will be called when the button is clicked. This function should change the text of the h1 element to a random color in the hexadecimal format (e.g. "#ff00ff").

5. To generate a random color, you can use the JavaScript Math.random() function to generate a random number between 0 and 1, then convert it to a hexadecimal value using the toString(16) method. You may also want to add a # symbol at the beginning of the color value.

6. In the JavaScript file, add an event listener to the button element that listens for a "click" event and calls the function you defined in step 5 when the event is triggered.

Note: This is just one way to create a color flipper using the provided code. There may be other approaches you could take as well.

HTML: 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>webdevmonk - Color Flipper</title>
</head>
<body>
<div class="container">
<h1 id="color">#ffffff</h1>
<button id="flip">Flip</button>
</div>  
<script src="app.js"></script>
</body>
</html>

CSS: 


*{
box-sizing: border-box;
margin: 0%;
padding: 0%;
}
.container{
width: 50%;
height: auto;
padding: 30px;
display: flex;
flex-direction: column;
border: 3px solid rgb(122, 206, 74);
border-radius: 25px;
margin: auto;
margin-top:10%;
justify-content: center;
align-items: center;
gap:15px;
}
.container button{
width: 50%;
border-radius: 18px;
padding:9px ;
border:1px solid white;
cursor: pointer;
}
#color{
background-color: white;
padding: 9px;
border-radius: 18px;
}

Step by Step Algorithm:

1. Select the flip button and the color element from the HTML document using the querySelector method. Store these elements in the flip_btn and color_hex variables, respectively.

2. Select the body element from the HTML document and store it in the body variable.

3. Add an event listener to the flip_btn element that listens for a "click" event and calls an anonymous function when the event is triggered.

4. Inside the anonymous function, set the background property of the body element to the value returned by the hex function.

5. Set the innerHTML property of the color_hex element to the value returned by the hex function.

6. Define the hex function, which generates a random hexadecimal color value and returns it. To generate the random color, the function uses the Math.random() and Math.floor() methods to generate a random number between 0 and 16777215, then converts it to a hexadecimal value using the toString(16) method. The function also adds a # symbol at the beginning of the color value.

7. Save the JavaScript file and open the HTML file in a web browser to test the code. When the "Flip" button is clicked, the background color and text of the h1 element should change to a random hexadecimal color.

Java Script: 


let flip_btn = document.querySelector('#flip');
let color_hex = document.querySelector('#color');
let body = document.body;
flip_btn.addEventListener("click",function(){
body.style.background=hex();
color_hex.innerHTML = hex();
});

function hex(){

let hex = '#' + Math.floor(Math.random()*16777215).toString(16); 

return hex; 
}

You can improve this project in your own version.

We are ready to release more projects please support us by sharing and visiting webdevmonk