Witam jak w powyższym,
Prosty projekt do rysowania w js.
pętla działa za pierwszym razem ale kiedy chcę zresetować całość wciśnięciem przycisku (usuwa głównego diva w którym są dodane dzieci divy z pętli i dodaje nowego z tą sama klasą i odpala pętle, to pętla nie dodaje divow.
działanie - podajesz ilość kwadratów - które są divami ---> pętla rysuje siatkę po najechaniu na diva ten zmienia kolor (taki prosty paint) po wciśnięciu guzika ten powinien usunąć głównego diva z cala zawartością, stworzyć nowego o identycznej klasie --> poprosić o padanie ilości kwadratów przez prompt i odpalenie pętli która wyrysuje siatkę.
kod:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Etch a Sketch</title>
<script src="skrypt.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn">Reset + Set up New grid</button>
<div class="mainDiv"></div>
</body>
</html>
CSS:
body {
display: flex;
flex-direction: column;
align-items: center;
}
.mainDiv {
display: flex;
flex: 1 1 auto;
width: 960px;
height: 960px;
flex-direction: row;
border: 10px solid darkgrey;
}
.divRow {
display: flex;
flex-direction: column;
flex: 1 0 auto;
}
.pola {
flex: 1;
margin: 0px;
background-color: rgb(255, 255, 255);
}
.polaColor {
flex: 1;
margin: 0px;
background-color: black;
}
.btn {
width: 600px;
height: 100px;
font-size: 30pt;
margin-bottom: 70px;
}
JS:
let numberOfSquares = 16;
let divNumber = 0;
let divMain = document.querySelector('.mainDiv');
let pola = document.querySelectorAll('pola');
let button = document.querySelector('button');
addDivs();
function addDivs() {
numberOfSquares = Number(prompt('Podaj ilość pól w lini MAX = 100'));
for (let i = 0; i < numberOfSquares; i++) {
let divrow = document.createElement(`div`);
divrow.classList.add(`divRow`);
divrow.style.width = `${countingPixels()}px`;
divrow.style.height = "960px";
divMain.appendChild(divrow);
for (let j = 0; j < numberOfSquares; j++) {
let div = document.createElement('div');
div.classList.add('pola');
div.addEventListener("mouseenter", function (e) {
div.classList.replace('pola', 'polaColor');
})
divrow.appendChild(div);
};
}
}
function countingPixels() {
let pixels = 960/numberOfSquares;
return pixels;
}
button.addEventListener('click', function (e) {
removeMainDiv();
addMainDiv();
addDivs();
})
function removeMainDiv() {
let body = document.body;
body.removeChild(divMain);
}
function addMainDiv() {
let body = document.body;
let mainDiv = document.createElement('div');
mainDiv.classList.add('mainDiv');
body.appendChild(mainDiv);
}
Z góry dzięki za poświęcony czas i pomoc.
Pozdrawiam