<!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"></link>
<title>Random Color Generator</title>
</head>
<body>
<div class="container">
<h1>Welcome to Random Color Generator</h1>
<p>Click on the HexCode to Copy</p>
<button class="btn-grad" onclick="randomColor()">Generate</button>
</div>
<div class="colorizer" id="colorizer1">
<div id="pallete1" class="color" onclick="copyToClipboard('pallete1')">#967b28</div>
<div id="pallete2" class="color" onclick="copyToClipboard('pallete2')">#df9d4f</div>
<div id="pallete3" class="color" onclick="copyToClipboard('pallete3')">#af704f</div>
<div id="pallete4" class="color" onclick="copyToClipboard('pallete4')">#97013b</div>
<div id="pallete5" class="color" onclick="copyToClipboard('pallete5')">#14ae2e</div>
</div>
<script src="./app.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(to right,
#967b28 0%, #967b28 20%,
#df9d4f 20%, #df9d4f 40%,
#af704f 40%, #af704f 60%,
#97013b 60%, #97013b 80%,
#14ae2e 80%, #14ae2e 100%);
}
#pallete1,
#pallete2,
#pallete3,#pallete4,#pallete5 {
color: #ffffff;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: aliceblue;
height: 25vh;
}
.container p {
margin: 5px;
}
.colorizer {
display: flex;
justify-content: space-around;
text-align: center;
height: 75vh;
align-items: center;
}
.colorizer .color {
padding: 100px;
background-color: transparent;
}
.btn-grad {background-image: linear-gradient(to right, #DA22FF 0%, #9733EE 51%, #DA22FF 100%)}
.btn-grad {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
display: block;
border-radius: 0.5rem;
border-color: transparent;
cursor: pointer;
}
.btn-grad:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}//Generate Random Colors
function randomColor() {
let body = document.body;
let palletes = []
for (let index = 1; index <= document.getElementById("colorizer1").childElementCount; index++) {
palletes.push(document.getElementById(`pallete${index}`))
}
let colors = []
palletes.forEach((pallete,i)=>{
let random = Math.floor(Math.random() * 16777215).toString(16);
pallete.innerHTML = '#'+random;
colors.push(random);
})
let randomizer = {}
colors.forEach((color,i)=>{
randomizer[`random${i+1}`] = "#"+color;
})
body.style.background = `linear-gradient(to right, ${randomizer['random1']} 0%, ${randomizer['random1']} 20%,
${randomizer['random2']} 20%, ${randomizer['random2']} 40%,
${randomizer['random3']} 40%, ${randomizer['random3']} 60%,
${randomizer['random4']} 60%, ${randomizer['random4']} 80%,
${randomizer['random5']} 80%, ${randomizer['random5']} 100%)`;
}
function copyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
navigator.clipboard.writeText(document.getElementById(containerid).innerText);
alert("Color has been copied")
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.