Random Color Generator
Create a color generator webpage. The page should generate a certain number of random color.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=S, initial-scale=1.0"> <title>Random Color Generator</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> </head> <body onload="init()"> <div class="container" style="width:90vw ; height: 100vh;"> <div class="colors row "></div> <input type="number" name="addColor" placeholder="Enter Number of color you want!"> <input type="submit" value="+ Add Colors" class="bg-success text-white"> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <script src="index.js"></script> </body> </html> const container = document.querySelector('.colors'); //select the colors div const input = document.querySelector('input[type=number]'); //select the input element's value const addColor = document.querySelector('input[type=submit]'); //select the submit element function randomColor() { //generate the random color let letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } addColor.addEventListener('click', (e) => { e.preventDefault(); for (let i = 0; i < input.value; i++) { let color = randomColor(); container.insertAdjacentHTML('afterbegin', `<div class="colorBox d-flex justify-content-center align-items-center m-3 position-relative" style="width:10rem ; height: 7rem; background-color:${color}"> ${color}--${i}<button type="button" class="btn-close position-absolute end-0 top-0 p-2" aria-label="Close" id='remove_${i}'></button></div>` ) document.querySelector('#remove_' + i).addEventListener('click', (e) => { let removeElement = e.target.parentNode; // let removeElement = document.querySelector('#remove_' + i).parentNode; container.removeChild(removeElement); }) } }); 
Top comments (0)