домашка 07.09.23 №1

<div>
        <label>Color:</label><br>
        <button id="blue-button" class="color-button">Blue</button>
        <button id="red-button" class="color-button">Red</button>
        <button id="green-button" class="color-button">Green</button>
        <button id="yellow-button" class="color-button">Yellow</button>
        <button id="black-button" class="color-button">Black</button>

<label>Shape:</label><br>
        <button id="circle-button" class="shape-button">Circle</button>
        <button id="square-button" class="shape-button">Square</button>
        <button id="pill-button" class="shape-button">Pill</button>
        <button id="rectangle-button" class="shape-button">Rectangle</button>

<label for="background-checkbox">Background:</label>
        <input type="checkbox" id="background-checkbox">

<label for="border-checkbox">Border:</label>
        <input type="checkbox" id="border-checkbox">

</div>

const colorButtons = document.getElementsByClassName("color-button");
        const shapeButtons = document.getElementsByClassName("shape-button");
        const backgroundCheckbox = document.getElementById("background-checkbox");
        const borderCheckbox = document.getElementById("border-checkbox");
        const preview = document.getElementById("preview");

let currentColor = "blue";

for (let i = 0; i < colorButtons.length; i++) {
            colorButtons[i].addEventListener("click", function() {
                currentColor = this.innerHTML.toLowerCase();
                preview.style.backgroundColor = currentColor;
            });
        }

for (let i = 0; i < shapeButtons.length; i++) {
            shapeButtons[i].addEventListener("click", function() {
                preview.className = "shape " + this.innerHTML.toLowerCase();
            });
        }

backgroundCheckbox.addEventListener("change", function() {
            if (this.checked) {
                preview.style.visibility = "hidden";
                preview.style.border = "1px solid black";
            } else {
                preview.style.visibility = "visible";
                preview.style.border = "none";
            }
        });

borderCheckbox.addEventListener("change", function() {
			if (this.checked) {
				preview.style.border = "1px solid black";
				preview.style.outline = "2px solid red";
			} else {
				preview.style.visibility = "visible";
				preview.style.border = "none";
				preview.style.outline = "none";
			}
		});

Results: