javascript
Random & Unique CSS Gradient-Color Generator
// HTML CODE
// <h1>Welcome to the game!</h1>
// <input type="text" name="number" id="" onkeyup="generate(this)"
// placeholder="Enter your favourite number and then press TAB">
// <div id="result">
let generate = (ele) => {
if (!isNaN(ele.value)) {
document.getElementById("result").innerHTML = "";
// alert(ele.value);
let letters = "0123456789ABCDEF";
array_1 = [];
array_2 = [];
for (i = 0; i < ele.value; i++) {
let color_1 = '#';
let color_2 = '#';
do {
for (let i = 0; i < 6; i++) {
color_1 += letters[(Math.floor(Math.random() * 16))];
color_2 += letters[(Math.floor(Math.random() * 16))];
}
array_1.push(color_1);
array_2.push(color_2);
} while (!array_1.includes(color_1) && array_2.includes(color_2));
let div = document.createElement("div");
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundImage = "linear-gradient(to right," + color_1 + "," + color_2 + ")";
div.style.color = "white";
div.style.display = "inline-flex";
div.style.margin = "25px";
document.getElementById("result").appendChild(div);
}
array_1 = [];
array_2 = [];
} else {
alert("Only Number is allowed");
document.getElementById("result").innerHTML = "";
}
}
Check the log to check the generated colors.
Optimize or Refactore the code according to your requirements.
Was this helpful?
Similar Posts