JSFiddle - React, Tailwind, and code Playground

by Arina Gavrilova

HTML

<div class="imgListArea">
    <div class="img img-0"></div>
    <div class="img img-1"></div>
    <div class="img img-2"></div>
    <div class="img img-3"></div>
    <div class="img img-4"></div>
    <div class="img img-5"></div>
    <div class="img img-6"></div>
    <div class="img img-7"></div>
    <div class="img img-8"></div>
    <div class="img img-9"></div>
    <div class="img img-10"></div>
    <div class="img img-11"></div>
    <div class="img img-12"></div>
    <div class="img img-13"></div>
    <div class="img img-14"></div>
    <div class="img img-15"></div>
    <div class="img img-16"></div>
    <div class="img img-17"></div>
</div>

CSS

.img {
    float: left;
    margin: 0 15px 20px;
    background: red;
    width: 50px;
    height: 50px;
}
.img.imgLong {
    width: 200px;    
}

JavaScript

var imgList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];
var imgNum = [];

for ( var i = 0; i < imgList.length; i++ ) {
    imgNum[i] = imgList[i] % 10;
    if(imgNum[i] == 0 | imgNum[i] == 6) {
    	console.log('bingo');
    }
}

//console.log(imgNum);

var imgItem = document.getElementsByClassName('img');
var imgItemElement = [];
var numItem = [];

for ( var t = 0; t < imgItem.length; t++ ) {
    //numItem[t] = imgItem.indexOf('div.img.img-' + t) % 10;
	//imgItemElement[t] = numItem[t] % 10;
}

console.log(imgItem);