Exiting a for loop that creates divs when reached end of screen

Question

Exiting a for loop that creates divs when reached end of screen

378 views Asked by DumbDevGirl42069 At 24 November 2024 at 22:59

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

Original Q&A

There are 2 answers

Emil Ng On 08 January 2017 at 19:21

Instead of using 100 for the number of dots you have to figure out how many dots fit in your browser window given the dimensions of the browser window.

var w = window.innerWidth; // browser width
var h = window.innerHeight; // browser height
var size = 60; // 50px + 5px + 5px (width or height) + (left or top margin) + (right or bottom margin)
var hdots = Math.floor(w/size); // how many dots fit horizontally
var vdots = Math.floor(h/size); // how many dots fit vertically
var numDots = hdots * vdots;

**Tomas Ramirez Sarduy** · Accepted Answer · 2017-01-08 19:42:39

I think you're looking for something like this:

https://jsbin.com/racahapevi/edit?html,css,js,output

Key points:

Calculate numbers of dots that can fit horizontally
Calculate total numbers of dots
Define <html>, <body> width and height to 100% of the viewport
overflow: hidden on html, so there will not be scroll
Add onclick event the button.

Here some code:

var numDots = hdots * vdots;

while(numDots--){
    red = colourSelect();
    green = colourSelect();
    blue = colourSelect();
    rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
    htmlDot += "<div class='dot' style=\"background-color:"+ rgbColor + " \"></div>";
}

TechQA.

Exiting a for loop that creates divs when reached end of screen

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in FOR-LOOP

Related Questions in RESPONSIVE

Related Questions in SCREEN-SIZE

Popular Questions

Popular Tags

Trending Questions