<div class="container">
<div>
<input type="color" id="color">
<h4 id="text">#000000</h4>
<p>click to change color</p>
</div>
</div>
xxxxxxxxxx
#color {
width: 13em;
height: 8em;
}
h4, h5, p {
font-family: sans-serif;
text-align: center;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
xxxxxxxxxx
function randomInteger(max) {
return Math.floor(Math.random()*(max + 1));
}
function randomRgbColor() {
let r = randomInteger(255);
let g = randomInteger(255);
let b = randomInteger(255);
return [r,g,b];
}
function randomHexColor() {
let [r,g,b] =randomRgbColor();
let hr = r.toString(16).padStart(2, '0');
let hg = g.toString(16).padStart(2, '0');
let hb = b.toString(16).padStart(2, '0');
return "#" + hr + hg + hb;
}
function changeColor() {
let hex = randomHexColor();
document.getElementById('color').value = hex;
document.getElementById('text').innerHTML = hex;
}
function clickHandler(event) {
changeColor();
event.preventDefault();
}
document.addEventListener('click', clickHandler);
changeColor();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.