Colour Box html code for free
index.html
1
<html>2
<head>3
<title>Color Generator</title>4
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">5
</head>6
<body>7
<div class="container mt-5">8
<div class="row">9
<div class="col">10
<input type="text" id="inputColors" class="form-control mb-3" placeholder="Enter color(s)">11
<button onclick="generateColors()" class="btn btn-primary">Generate Colors</button>12
</div>13
</div>14
<div class="row mt-3">15
<div class="col">16
<div id="outputColors" class="color-box mt-3"></div>17
</div>18
</div>19
</div>20
21
<script>22
function generateColors() {23
const inputColors = document.getElementById("inputColors").value;24
const colors = inputColors.split(" ");25
const outputColors = document.getElementById("outputColors");26
outputColors.innerHTML = "";27
28
colors.forEach(color => {29
const colorBox = document.createElement("div");30
colorBox.style.backgroundColor = color;31
colorBox.classList.add("generated-color");32
outputColors.appendChild(colorBox);33
});34
}35
</script>36
37
<style>38
.color-box {39
display: flex;40
justify-content: center;41
align-items: center;42
width: 100px;43
height: 100px;44
margin: 0 auto;45
}46
47
.generated-color {48
width: 50px;49
height: 50px;50
margin: 5px;51
border: 1px solid black;52
}53
</style>54
55
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>56
</body>57
</html>styles.css
1
/* Replace with your CSS Code 2
(Leave empty if not needed) */ 3
main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */