This is what I have right now:
As you can see, the circles go under the big blue rectangle. But I want them to wrap around. I would look something like this:
The rectangle has to be in the center. And notice the indexing, it would be good if it kept increasing from left-to-right, top-to-bottom
This is my code:
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="code.js"></script>
<title>1440 Minutes wallpaper</title>
</head>
<body>
<div id='flexbox'>
<div id="info">big block</div>
<div id="balls"></div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
}
#flexbox {
width: 2560px;
height: 1440px;
}
#balls {
width: 2520px;
height: 960px;
display: flex;
flex-wrap: wrap;
}
#info {
width: 560px;
height: 440px;
font-size: 50px;
color: white;
background-color: rgb(0,0,255,0.5);
top: 500px;
left: 1000px;
position:absolute;
}
.MinuteBall {
background-color: gray;
width: 40px;
height: 40px;
margin: 1px;
border-radius: 50%;
}
JS
document.body.onload = InitiateWallpaper;
function InitiateWallpaper() {
for (let i = 0; i < 1440; i++) {
const newDiv = document.createElement("div");
newDiv.classList.add("MinuteBall");
const text = document.createTextNode(i);
newDiv.appendChild(text);
const currentDiv = document.getElementById("balls");
currentDiv.appendChild(newDiv);
}
}
I am doing this thing only for myself, at least for now, so I am not interested and worried about supporting different screen sizes or browsers and stuff like that. Just Firefox and a 2560×1440 screen.
All the sizes that exist are experimental and don’t really matter as much as the wrap-around thing.
I am new to the web stuff and would appreciate your help a lot!