-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
54 lines (45 loc) · 1.73 KB
/
script.js
File metadata and controls
54 lines (45 loc) · 1.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
const boxConfig = [
{color: "red", width: "33.33%"},
{color: "green", width: "33.33%"},
{color: "blue", width: "33.33%"},
{color: "yellow", width: "50%"},
{color: "orange", width: "50%"},
{color: "purple", width: "70%"},
{color: "pink", width: "30%"},
];
const container = document.createElement("div");
container.className = "container";
document.body.appendChild(container);
function renderBoxes() {
container.innerHTML = ""; // Clear existing boxes before re-rendering
boxConfig.forEach((config) => {
const box = document.createElement("div");
box.className = "box";
box.style.backgroundColor = config.color;
box.style.width = config.width;
container.appendChild(box);
});
}
container.addEventListener("click", (event) => {
const clickedElement = event.target;
if (clickedElement.classList.contains("box")) {
const index = Array.from(container.children).indexOf(clickedElement);
const config = boxConfig[index];
alert(`Color of box ${index + 1} is ${config.color}`);
}
});
// 👇 -------------- Assignment Solution -------------- 👇
renderBoxes(); // Initial render
document.getElementById("boxForm").addEventListener("submit", function (event) {
event.preventDefault();
const color = document.getElementById("colorInput").value;
let width = document.getElementById("widthInput").value; // Get width as number
width = width ? `${width}%` : "100%"; // Default to 100% if width is not specified
// Add the new box config
boxConfig.push({color, width});
// Re-render boxes
renderBoxes();
// Optionally, clear the form fields
document.getElementById("colorInput").value = "#ffffff"; // Reset to white or any default color
document.getElementById("widthInput").value = "";
});