For some reason the following code won't print throughout the whole document. It only prints the top line when it is supposed to print thought-out all the greyed area.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Etch-A-Sketch</title>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
</style>
<header class="header">
<h1>Etch-A-Sketch</h1>
</header>
<div class='display'></div>
<button class='button'><span>Clear</span></button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS
margin: 0 auto;
padding: 0;
}
body {
background-color: red;
}
.header {
height:90px;
}
h1 {
margin-bottom: 20px;
color: white;
margin-left: 475px;
top: 15px;
position: relative;
font-size: 55px;
font-family: 'Syne Mono', monospace;
}
.display {
height: 570px;
background-color: rgb(150, 150, 150);
display: grid;
outline: 1px solid;
grid-template-columns: repeat(16,1fr);
grid-template-rows: repeat(16,1fr);
}
.button {
border-radius: 4px;
background-color: white;
border: none;
color: black;
text-align: center;
font-size: 28px;
padding: 20px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
margin-left: 535px;
margin-top: 45px;
font-family: 'Syne Mono', monospace;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.square {
border: 1px solid;
background-color: black;
}
JavaScript
const display = document.getElementsByClassName('display')[0];
const clear = document.getElementsByClassName('button')[0];
function grid() {
for(let i = 0; i < 4; i++) {
for(let j = 0; j < 4; j++) {
console.log("yoyo");
let square = document.createElement('div');
square.className = 'square';
display.appendChild(square);
}
}
};
grid();
Please help me, I don't see what the problem is. Thank you! Me and my friend are doing the same code, it is very similar and we both have the same issue. Even the coding teach can't figure it out. Lol.
Aucun commentaire:
Enregistrer un commentaire