<meta charset="utf-8">

<title>

the boxes based on a selection from a dropdown menu

</title>

<style>

li {

list-style: none;

border: solid 1px black;

height: 25px;

width: 25px;

border-radius: 100px;

text-align: center;

float: left;

padding: 25px;

margin: 5px;

}

</style>

<label>Select Color:</label>

<select id="color_select" onchange="changeColor()">

<option value="red">Red</option>

<option value="green">Green</option>

<option value="blue">Blue</option>

<option value="yellow">Yellow</option>

<option value="purple">Purple</option>

</select>

<label>Enter Number:</label>

<input type="text" id="box_no">

<button onclick="changeColor()">Result</button>

<ul id="print">

</ul>

<script type="text/javascript">

function generateNewColor() {

const hexCharacters = '0123456789ABCDEF';

let hexColorRep = "#";

for (let i = 0; i < 6; i++) {

hexColorRep += hexCharacters[Math.floor(Math.random() * 16)];

}

return hexColorRep;

}

function changeColor() {

let color = document.getElementById("color_select").value;

let list = parseInt(document.getElementById("box_no").value);

let print_data = document.getElementById("print");

print_data.innerHTML = ''; // Clear previous content

for (let i = 0; i < list; i++) {

let listItem = document.createElement('li');

listItem.style.backgroundColor = color;

listItem.textContent = i + 1;

print_data.appendChild(listItem);

}

}

</script>