coolors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coolors Clone</title>
</head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
<style>
*{
box-sizing: border-box;
}
:root{
--display: flex;
}
body{
font-family: 'Montserrat', sans-serif;
}
.container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.header{
text-align: center;
}
.box{
/* border: 2px solid red; */
height: 70vh;
width: 70vw;
margin-top: 10px;
display: flex;
}
.color{
display: var(--display);
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.color1{
height: 70vh;
width: 10vw;
/* background-color: blue;s */
}
.color2{
height: 70vh;
width: 10vw;
/* background-color: red; */
}
.color3{
height: 70vh;
width: 10vw;
/* background-color: yellow; */
}
.color4{
height: 70vh;
width: 10vw;
/* background-color: green; */
}
.color5{
height: 70vh;
width: 10vw;
/* background-color: black; */
}
.color6{
height: 70vh;
width: 10vw;
/* background-color: orange; */
}
.color7{
height: 70vh;
width: 10vw;
/* background-color: firebrick; */
}
span{
/* border: 2px solid red; */
margin-bottom: 20px;
font-weight: bold;
font-size: 1.2rem;
}
button{
font-size: 1.5rem;
outline: none;
border: none;
border-radius: 10px;
padding: 10px 20px 10px 20px;
text-align: center;
font-family: 'Montserrat', sans-serif;
margin-top: 20px;
cursor: pointer;
color: white;
background-color: black;
}
</style>
<body>
<div class="container">
<div class="header">
<h1>
Generate Random Colors
</h1>
</div>
<div class="box">
<div class="color1 color" id="col1"><span class="span" id="span1"></span></div>
<div class="color2 color" id="col2"><span class="span" id="span2"></span></div>
<div class="color3 color" id="col3"><span class="span" id="span3"></span></div>
<div class="color4 color" id="col4"><span class="span" id="span4"></span></div>
<div class="color5 color" id="col5"><span class="span" id="span5"></span></div>
<div class="color6 color" id="col6"><span class="span" id="span6"></span></div>
<div class="color7 color" id="col7"><span class="span" id="span7"></span></div>
</div>
<button class="btn" id="btn">
Generate
</button>
</div>
<script>
let hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
// let hex1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const btn = document.getElementById('btn');
let span1 = document.getElementById('span1');
let span2 = document.getElementById('span2');
btn.addEventListener("click", function(){
let hash = "#";
let hash1 = "#";
let hash2 = "#";
let hash3 = "#";
let hash4 = "#";
let hash5 = "#";
let hash6 = "#";
for (i=0; i<6; i++){
hash += hex[getRandom()];
hash1 += hex[getRandom1()];
hash2 += hex[getRandom2()];
hash3 += hex[getRandom3()];
hash4 += hex[getRandom4()];
hash5 += hex[getRandom5()];
hash6 += hex[getRandom6()];
}
document.getElementById('col1').style.backgroundColor = hash;
document.getElementById('col2').style.backgroundColor = hash1;
document.getElementById('col3').style.backgroundColor = hash2;
document.getElementById('col4').style.backgroundColor = hash3;
document.getElementById('col5').style.backgroundColor = hash4;
document.getElementById('col6').style.backgroundColor = hash5;
document.getElementById('col7').style.backgroundColor = hash6;
// document.getElementById('col2').style.backgroundColor = hash;
span1.textContent = hash;
span2.textContent = hash1;
span3.textContent = hash2;
span4.textContent = hash3;
span5.textContent = hash4;
span6.textContent = hash5;
span7.textContent = hash6;
})
function getRandom(){
return Math.floor(Math.random() * hex.length);
}
function getRandom1(){
return Math.floor(Math.random() * hex.length);
}
function getRandom2(){
return Math.floor(Math.random() * hex.length);
}
function getRandom3(){
return Math.floor(Math.random() * hex.length);
}
function getRandom4(){
return Math.floor(Math.random() * hex.length);
}
function getRandom5(){
return Math.floor(Math.random() * hex.length);
}
function getRandom6(){
return Math.floor(Math.random() * hex.length);
}
</script>
</body>
</html>
Comments
Post a Comment