Develop Reference

Progress Bar - Loop Through Array and Display Divs

Getting really stuck on this one... I'm trying to build a donation progress bar... In ReactJS - but I'm a beginner, so I want to get the code right first in Vanilla js...
What I'm trying to do, is loop through an array of numbers, (aka, donations already submitted via a form). EG:
[2, 5, 25] etc.
Everytime, a donation is submitted, it get's added to this array.
Want I want, is for my donation bar to increase/fill in colour, based on the donations already made in the array.
The bar would be full at 100%. Or £100.
Here's the snippet of JS I already have:
// FUNCTION TO CALCULATE TOTAL DONATIONS
const numbers = donated.map(Number);
function add(a, b) {
return a + b;
}
// SUM VALUE OF NUMBERS IN THE ARRAY
const sum = numbers.reduce(add, 0);
console.log('numbers', numbers);
//THE VALUE OF NUMBERS IN ARRAY, TURNED INTO A PERCENTAGE
const total = 100;
const percentage = (sum / total) * 100;
console.log('percentage', percentage);
// LOOP THROUGH EVERY NUMBER IN THE ARRAY, AND ADD A DIV WITH A MATCHING WIDTH
for (var i = 0; i < numbers; i++) {
if (i < 100) {
const div = document.createElement('div');
div.style.background = 'red';
div.style.width = numbers + 'px';
div.style.height = '50px';
div.style.float = 'left';
document.querySelector('.bar').appendChild(div);
}
}
The loop works, slightly. The first div in the array gets added. But as I add more donations, no more divs are added to the progress bar.
Eventually, I want to stop at 100...

Got it working! I needed to set numbers[i] in my style width:
for (var i = 0; i < numbers.length; i++) {
if (i < 100) {
div +1;
const div = document.createElement('div');
div.style.background = 'red';
**div.style.width = numbers[i] + 'px';**
div.style.height = '50px';
div.style.float = 'left';
document.querySelector('.bar').appendChild(div);
}
}

As i see, you styled your divs float left. That mean each div will appears over the previous on left. In chrome, right click on the div and left click on inspect. You will see that you have many divs generated in your Dom.

Send While Loop To Next Row If No Change

Because we can't set table-cell's max-height so I am using this loop to limit row height (equal to cell), by increasing the table width until all rows height < height I set in loop.
var i = 0,
row, table = document.getElementsByTagName('table')[0],
j = table.offsetWidth;
while (row = table.rows[i++]) {
while (row.offsetHeight > 200 && j < 3000) {
j += 250;
table.style.width = j + 'px';
}
}
But there is a problem in this script, if for some reason a specific row height can't be less than 400px, which is greater than max-height I set for rows in script, the table becomes unnecessary 3000px wide because of the condition in loop.
Is there any way to send loop to next row if a row height is same before and after table width increment by loop. I tried web searching but nothing found to handle this, if anyone here knows about this please help me
Example (no problem when no <br/> tag): http://jsfiddle.net/jm5cpqr4/5/
Example (problem when <br/> usage limiting least possible height of cell): http://jsfiddle.net/jm5cpqr4/6/

script47 correctly indicated a break statement is used in the resolution.
Readers may need to reduce the offset value tested in the "failing" case on jsfiddle to reproduce the problem in their browser - it did't immediately fail for me
A solution example:
function loaded()
{ var i = 0, row, table = document.getElementsByTagName('table')[0],
j = table.offsetWidth;
var testHeight = 100;
while (row = table.rows[i++])
{ var h0 = row.offsetHeight;
while (row.offsetHeight > testHeight && j < 3000)
{ j += testHeight;
table.style.width = j + 'px';
if(row.offsetHeight==h0)
{ table.style.width = j-testHeight + 'px'
break;
}
}
}
}
loaded();

Calculate Javascript pixel widths for list of elements

I have a list with 4 numbers. If I divide 100 with the list's length, I get 25. I want to set width of four elements to multiples of this number, eg. for the first, it would be 25px, for the second 50px and so on.
This is the (pseudo)code I've written so far:
list{1,2,3,4}
var array = list.split(',');
var width = 100 / array.length;
for (var n = 0; n < array.length; n++) {
if(array[n]==1) {
width = width; //here I want width as 25;
<div style="width:"+Width +"></div>
}
if(array[n]==2){
width = width+width;//here I want width as 50
<div style="width:"+Width +"></div>
}
if(array[n]==3) ){
width = width+width;//here I want width as 75
<div style="width:"+Width +"></div>
}
if(array[n]==4 ){
width = width+width;//here I want width as 100
<div style="width:"+Width +"></div>
}
}

It seems like you mix up html and javascript syntax. Html are those <tag> things.
First of all, I recommend you this course or some other, just to get started with JavaScript.
To create an element in JS, you can either use document.write, which is probably much easier but may be used only before the document loads. You can use it like this:
width = 42; //or whatever
document.write('<div style="width: '+width+'px">adsf</div>');
Or the more difficult, but also more flexible way – to use the DOM. You would do it this way:
var div = document.createElement('div'); //create new element
div.style.width = 42; //set its width to whatever you want
div.textContent = "some text"; //add some text into the div
someElement.appendChild(div); //insert the element into another one
The someElement here is either an element you get by calling document.getElementById (or a similar function) or, if you want them directly inside the body, just write document.body.
.
With respect to #Marc_B's answer, the final code would look something like this:
var list = [1,2,3,4];
var div;
for (var n = 0; n < array.length; n++) {
div = document.createElement('div');
div.style.width = 25*n;
document.body.appendChild(div);
}

You do NOT need all those if() tests:
for (var n = 0; n < array.length; n++) {
width = 25 * (n + 1);
...
}
s0
n = 0 -> width = 25 * (0 + 1) -> 25 * 1 -> 25
n = 1 -> width = 25 * (1 + 1) -> 25 * 2 -> 50
n = 2 -> width = 25 * (2 + 1) -> 25 * 3 -> 75
etc...

Not 100% sure what your asking but I think you just want to times width by 2,3,4 depending on what n is.
(Go to Marc B's answer)
Edit: BTW when you declare width you by mistake (I think) use a capital W
var Width
Should be:
var width

Every nth image with remainder offset for next loop

I have two values that indicate how many results to parse from some data and which nth item I want to target. In this case, it's making every nth item a large image where as the rest are normal size. Here's what I need the loop to do:
First image must be large, or have the option to turn on
Get the remainder of normal size images at the end
Use this remainder so that the next iteration over the data has the correct starting point before the next large image appears.
I got very close but my modulus is wrong or how i'm doing the checking.
var i = 0,
len = productsObj.products.length;
for (i; i < len; i++) {
if ((i + this.nthProductImageOffset) % NTH_PRODUCT_IS_LARGE_TILE === 0) {
productsObj.products[i].PhotoSize = 'large';
} else {
productsObj.products[i].PhotoSize = 'medium';
}
}
// Store the remainder of medium tiles, if any, to be calculated
// against the next set of products to be appended.
this.nthProductImageOffset = i % NTH_PRODUCT_IS_LARGE_TILE;
So, if my two initial values were:
NTH_PRODUCT_IS_LARGE_TILE = 7
productsObj.products.length = 30
First image is large, then every 7th image is large. If we are left with a remainder of 2 medium images at the end of the loop, that needs to be accounted for the next time we run the loop before another large image appears. This way, regardless of the nth number or the number of iterations, we will always have the correct number of medium tiles in between the large ones.

The problem with the code above appears to be your use of the offset. You need to update the offset to the modulus of i + your previous offset. Not just i.
For example:
this.nthProductImageOffset = (i + this.nthProductImageOffset) % NTH_PRODUCT_IS_LARGE_TILE;
Here's a visual jsFiddle example though: https://jsfiddle.net/kwandrews7/6jxsu91y/1/
Every time you click the run button 5 elements will be added to the list. The 7th element will always be LARGE while others will be MEDIUM. Best of luck.
html:
<button id="run">Run</button>
<ol id="list">
</ol>
javascript:
var btnAdd = document.getElementById('run');
btnAdd.addEventListener("click", addElement, false);
var offset = 0
function addElement() {
var olList = document.getElementById('list');
var newListItem = document.createElement('li');
newListItem.innerText = 'New Item';
var len = 5;
var mod = 7;
for (var i=0; i<len; i++) {
var iOffset = i + offset;
if ( iOffset % mod === 0) {
var newListItem = document.createElement('li');
newListItem.innerText = "LARGE: i(" + i + "), offset(" + offset + "), iOffset(" + iOffset + ")";
olList.appendChild(newListItem);
} else {
var newListItem = document.createElement('li');
newListItem.innerText = "MEDIUM: i(" + i + "), offset(" + offset + "), iOffset(" + iOffset + ")";
olList.appendChild(newListItem);
}
}
offset = (i+offset) % mod
}

Try this:
var j = 0;
function run(list) {
for(var i = 0; i < list.length; i++) {
if(j % 7 === 0) {
console.log(list[i] + ' large');
}
else {
console.log(list[i] + ' medium');
}
j += 1;
}
}
run([1, 2, 3]);
run([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
run([16, 17, 18]);
You use j to track the whole number of items in all of your lists and check that against NTH_PRODUCT_IS_LARGE_TILE so that you don't have to care about list.length.
http://jsfiddle.net/nx3jswyk/
Output:
1 large
2 medium
3 medium
4 medium
5 medium
6 medium
7 medium
8 large
9 medium
10 medium
11 medium
12 medium
13 medium
14 medium
15 large
16 medium
17 medium
18 medium

Ok so I tried your Code and it works only if you initialize nthProductImageOffset. Just add
nthProductImageOffset = 0;
to the beginning of your Code and you should be good to go

Dynamically generate a grid of images to fit a predefined area

I need to create a grid of instagram images and fit them in a predefined area. For example: I have a div of 600x400px and 50 square images (there will always be an even number of images). I need to arrange the images in rows and columns to fill as much space of the containing div as possible.
You can see a fiddle of what I am trying to achieve here. This is the end result:
This is actually quite a good result. Things get a little more out of whack when you change the number of images, to 44 for example.
This is how I am working out the grid rows and columns:
//container size:
var width = 600;
var height = 400;
var items = 44;
var rows;
var cols;
var rows = Math.floor(Math.sqrt(items));
while (items % rows != 0) {
rows = rows - 1
}
cols = (items / rows);
if (rows > cols) { //make it landscape
//swap values
rows = [cols, cols = rows][0];
}
The output of this for 44 images for example is 4 rows of 11 columns. The combined height of the 4 rows is 232px, quite a lot less than 400px. So how do I change this to fill more space in the container?

The math's a bit tricky due to wrapping. An alternative is to build the images string without any dimensions, then grow them iteratively until they overflow the container.
var width = 400,
height = 300,
items = 44,
grid_str = '',
$grid = $('#grid'),
i;
function dimensions(x) {
$('#grid div').css({
width: x,
height: x
});
};
$grid.width(width).height(height);
for(i = 0 ; i < items ; i++) {
grid_str+= '<div class="col"></div>';
}
$grid.html(grid_str);
for(i = 1 ; i < 1000 ; i++) {
dimensions(i);
if($grid[0].scrollHeight > $grid.height()) {
break;
}
}
dimensions(i-1);
In this fiddle, change width, height, and items, and you'll see that the maximum size is always chosen for div squares.