Javascript HEX Color Flipper
~ Javascript Hex Color Flipper is the best project to do using Javascript. Through this project you will learn to use Math.floor, Math.random etc. So it's Best Project for the Beginners.
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">
<title>Color Flipper Hex</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="header">
<div class="header-box" id="box">
Color Flipper
</div>
</div>
<div class="flipper">
<div class="details-box">
<div class="title" id="titl">
Hey ! We have Generated Random Hex Color For You
</div>
<div class="color-name" id="name">
#0C7FF2
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.header{
padding:2%;
}
.header .header-box{
background-color:white;
color:black;
width:150px;
font-family:Lemon Milk;
padding:1%;
border-radius:2px;
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 6px 8px rgba(0,0,0,0.11),
0 8px 8px rgba(0,0,0,0.11);
color:#0C7FF2;
}
body{
background-color:#0C7FF2;
cursor: pointer;
}
.flipper{
display: flex;
justify-content: center;
align-items: center;
height:70vh;
}
.flipper .details-box{
height:150px;
width:500px;
background-color:#ffffff;
border-radius:2px;
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 6px 8px rgba(0,0,0,0.11),
0 8px 8px rgba(0,0,0,0.11);
}
.flipper .details-box .title{
font-family:Open Sans;
font-weight:bolder;
font-size:1.3rem;
text-align: center;
padding:2%;
color:#0C7FF2;
}
.flipper .details-box .color-name{
color:#0C7FF2;
font-size:2rem;
font-family:Lemon Milk;
text-align:center;
font-weight:bolder;
}
JAVASCRIPT
let container = document.getElementById('container');
let colorname = document.getElementById('name');
let title = document.getElementById('titl');
let box = document.getElementById('box');
let hexcolor=[1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
function randomnum(){
let random = Math.floor(Math.random()*hexcolor.length);
return random;
}
container.addEventListener('click',()=>{
let hex="#";
for(let i=0;i<=5;i++){
hex=hex+hexcolor[randomnum()];
}
document.body.style.backgroundColor=hex;
colorname.style.color=hex;
colorname.textContent=hex;
title.style.color=hex;
box.style.color=hex;
});