I am trying to complete a little exercise that refreshes the page when the big button in the middle is clicked and the little dots change colour. I have stopped the page from scrolling so the page is full of dots but I have noticed that the overflow property acts differently on different browsers. Then I thought of another issue, on mobile or tablets the dots will show differently again! So I'm not sure if this is even possible but the desired result is for the loop to create dots until the screen is full and the button displaying in the middle of the screen. Could someone please tell me if this idea is possible as I haven't been able to find any similar questions. Or if there is a better way to get my desired result. Also if you have the time could you please briefly explain why as I want to understand how it works and learn from it. So... This is the JavaScript
var htmlDot = "";
var red;
var green;
var blue;
var rgbColor;
function colourSelect() {
return Math.floor(Math.random() * 256 );
}
for(var i = 1; i<=100; i+=1) {
red = colourSelect();
green = colourSelect();
blue = colourSelect();
rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
htmlDot += "<div style=\"background-color:"+ rgbColor + " \"></div>";
}
document.write(htmlDot);
This is the HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id="refresh">Click Me!</button>
<script src="script.js"></script>
</body>
</html>
This is the CSS
body {
position: relative;
overflow: hidden;
}
#refresh {
font: 40px bold;
font-family: sans-serif;
width: 200px;
height: 200px;
display: inline-block;
border-radius: 50%;
margin: 5px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: rgb();
}
div {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
margin: 5px;
}
Thank you in advance
I think you're looking for something like this:
https://jsbin.com/racahapevi/edit?html,css,js,output
Key points:
<html>
,<body>
width and height to 100% of the viewportHere some code: