I a trying to code the childhood toy 'Etch-a-Sketch' and I am using parents are childs to make a 16x16 grid system in the .display. The following code seems to not work, and I think it is an issue in the grid-template-columns and the grid-template-rows css code. Please help, thank you!
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();
Thank you for your time and effort reading and helping me with my situation, I hope it can be fixed! Have a great day!
Aucun commentaire:
Enregistrer un commentaire