I have this piece of a code where I take data out of JSON and put them into four sections.
Having those four sections, I want to add a border to one section for 2 seconds, then remove and add the border to another section. And so on. Once the border is at the last section, the whole process should start again.
From what I read in similar threads, I should use setInterval and add/remove class to each element via looping, but not sure how to write it. Anyone could help?
function completeAd(obj) {
const offers = obj['offers'];
for (let i = 0; i < 4; i++) {
let rand = Math.floor((Math.random() * offers.length));
const singleAd = document.createElement('section');
singleAd.className = "adSection"
const price = document.createElement('p');
const imgURL = document.createElement('img')
imgURL.src = "http:" + offers[rand].imgURL
price.textContent = offers[rand].price + " " + offers[rand].currency;
singleAd.appendChild(price);
singleAd.appendChild(imgURL);
adSection.appendChild(singleAd);
}
}Yes you need to add and remove a class in an interval
https://jsfiddle.net/mplungjan/pt68Lqoe/
const obj = {
offers : [
{ price:200, currency:"$", imgURL: "https://picsum.photos/200/200" },
{ price:300, currency:"$", imgURL: "https://picsum.photos/300/200" },
{ price:400, currency:"$", imgURL: "https://picsum.photos/400/200" },
{ price:500, currency:"$", imgURL: "https://picsum.photos/500/200" },
{ price:600, currency:"$", imgURL: "https://picsum.photos/600/200" }
]}
const fy = (a, b, c, d) => { c = a.length; while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d}; // shuffle
fy(obj.offers); // shuffle them
window.addEventListener("load", () => {
document.getElementById("adSections").innerHTML = obj.offers.slice(0, 4) // take the first 4
.map(offer => `<section class="adSection"><p>${offer.price}${offer.currency}</p><img src="${offer.imgURL}" />`).join('');
const sections = document.querySelectorAll(".adSection");
let cnt = sections.length - 1;
setInterval(function() {
sections[cnt].classList.remove("active");
cnt++;
if (cnt >= sections.length) cnt = 0;
sections[cnt].classList.add("active")
}, 3000)
})section {
display: block;
border: 1px solid white;
width: 500px
}
.active {
border: 1px solid black
}
img {
height: 200px
}<div id="adSections">
</div>