Develop Reference

How can i display images from firestore to the carousel slider?

I have 3 images in the image array in my firestore database. However, when i change ${info.image[0]} to ${info.image1} its displaying the next image. How can i put them all together and when i click on the next button it takes me to the next image?
This is picture of my database and my website
This is my code:
const setupSub = data => {
const id = window.location.href.split('?')[1];
data.forEach(doc => {
if(doc.id === id) {
let info = doc.data();
let html = `
<div class="row" >
<div class="col l6 s12 m12">
<div class="carousel carousel-slider" data-indicators ="true" style="border-radius: 5px;">
<a href="#" class="carousel-item">
<img src="${info.image[0]}" alt="istanbul" style="height: 390px;">
</a>
</div>
<div class="btn indigo waves-affect prev">Prev</div>
<div class="btn indigo waves-affect right next">Next</div>
</div>
<div class="col l6 s12 m12">
<div class="card" style="height: 357px; border-radius: 5px; background-color: #f9f9f9; padding: 10px;">
<h5 class="center">${info.title}</h5><br><br>
<span style="font-weight: bold;">Price: ${info.price} $</span><br><br>
<span><i class="material-icons blue-text">room</i> Located in ${info.city}.</span><br><br>
<span><i class="material-icons blue-text">single_bed</i> Total Rooms ${info.rooms}.</span><br><br>
</div>
</div>
</div>
`;
// To activate the image slider (Materialize css)
$(document).ready(function(){
$('.carousel').carousel();
// function for next slide
$('.next').click(function(){
$('.carousel').carousel('next');
});
// function for prev slide
$('.prev').click(function(){
$('.carousel').carousel('prev');
});
});
propShow.innerHTML = html;
}
})
}

I have managed to do it, for those who are having the same issue this is how you do it:
data.forEach(doc => {
let info = doc.data();
const images = info.image.map(img => {
return (
<a href="#" class="carousel-item">
<img src=${img} alt="istanbul" style="height: 390px;">
</a>
)
});
let html =
<div class="row" >
<div class="col l6 s12 m12">
<div class="carousel carousel-slider";"> ${images.join('')} </div>
...

Counter animation for Django variable

I want to do one of those cool dashboard counter animations using my Django variables. My code isn't rendering any numbers yet so I'm doing something wrong.
Something like this if what I'm after:
Here's my code so far:
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-users"></i>
<h2 class="users-count"></h2>
<h3 class="count-label">Users</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-handshake-o"></i>
<h2 class="dealers-count"></h2>
<h3 class="count-label">Dealers</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-address-card"></i>
<h2 class="staff-count"></h2>
<h3 class="count-label">Employees</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-eye"></i>
<h2 class="visitors-count"></h2>
<h3 class="count-label">Visitors Today</h3>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
function counter(id, start, end, duration) {
let obj = document.getElementsByClassName(id),
current = start,
range = end - start,
visitors_range = 11 - start,
increment = end > start ? 1 : -1,
step = Math.abs(Math.floor(duration / range)),
timer = setInterval(() => {
current += increment;
obj.textContent = current;
if (current == end) {
clearInterval(timer);
}
}, step);
}
counter("users-count", 0, {{users.count}}, 3000);
counter("dealers-count", 100, {{dealers.count}}, 2500);
counter("staff-count", 0, {{staff.count}}, 3000);
counter("visitors-count", 0, {{visitors.count}}, 3000);
});
</script>

setTimeout function on a <div>

I am working on my own portfolio and I want to put a delay between 2 pages with a setTimeout function. I've tried some ways but haven't worked yet. I am already using a function to open my "href" with all my box but now I just want to put a delay to go from accueil.html to presentation.html.
"accueil.html":
document.addEventListener('DOMContentLoaded', function()
{
var items = document.querySelectorAll('.ouverture');
for (var i = 0; i < items.length; i++)
{
var item = items[i];
item.addEventListener('click', function()
{
var url = this.getElementsByTagName('a');
url = url[0];
window.location = url;
});
}
});
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>Présentation</h4>
</div>
</div>
</div>
</div>
</div>
</div>

Just add a timeout add the part where you redirect to another page:
item.addEventListener('click', function() {
var url = this.getElementsByTagName('a');
if(url.length > 0)
url = url[0];
setTimeOut(() => {
window.location = url;
}, 2000); // 2000 = 2000ms === 2sec
});
More info is found here

A general-purpose snippet that "delays" clicks. Just add the script at the top of the page and use the delay-click[=numberOfMilliseconds] attribute.
document.body.addEventListener("click", function(event) {
var target = event.target;
var currentTarget = target.closest("[delay-click]:not(.delay-click-ignore)");
if (!currentTarget) return;
var delay = +currentTarget.getAttribute("delay") || 2000;
currentTarget.classList.add("delay-click-ignore");
setTimeout(function() {
target.click();
currentTarget.classList.remove("delay-click-ignore");
}, delay);
event.preventDefault();
});
.delay-click-ignore,
.delay-click-ignore a,
.delay-click-ignore input,
.delay-click-ignore button {
cursor: progress !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<!-- on the element itself -->
<h4><a href="presentation.html" delay-click>default delay</a></h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- or somewhere up the ranks -->
<div class="box-part text-center ouverture" delay-click=5000>
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>delay 5s</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>immediate</h4>
</div>
</div>
</div>
</div>
<div class="form-group">
<!-- works here too -->
<input type="checkbox" class="form-control" delay-click />
</div>
</div>
</div>

Only fire a function once on scroll

So, I'd like to fire a function only once on scroll.
The problem is that I don't get to fire the function only once. I've tried different solutions ( .on(), setting a counter, setting it outside/inside the window.scrollstop function) but nothing worked.
It does work... but it works whenever I scroll! :(
I don't think it's difficult, but.. I didn't get to make it work so far.
here's my code:
$(window).scroll(function(){
$('.sr-icons').toggleClass('scrolled', $(this).scrollTop() > 950);
});
CSS:
.sr-icons.scrolled {
opacity: 0.2;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5 mx-auto">
<i class="fa fa-4x fa-superpowers text-primary mb-3 sr-icons"></i>
<h3 class="mb-3 text-dark">Sturdy Templates</h3>
<p class="text-muted mb-0">Our templates are updated regularly so they don't break.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5 mx-auto">
<i class="fa fa-4x fa-paper-plane text-primary mb-3 sr-icons"></i>
<h3 class="mb-3 text-dark">Ready to Ship</h3>
<p class="text-muted mb-0">You can use this theme as is, or you can make changes!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5 mx-auto">
<i class="fa fa-4x fa-newspaper-o text-primary mb-3 sr-icons"></i>
<h3 class="mb-3 text-dark">Up to Date</h3>
<p class="text-muted mb-0">We update dependencies to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5 mx-auto">
<i class="fa fa-4x fa-cog fa-spin text-primary mb-3 sr-icons"></i>
<h3 class="mb-3 text-dark">I Work For You</h3>
<p class="text-muted mb-0">Just think about any website you want to have, I will make that a reality.</p>
</div>
</div>
</div>
</div>

If I understood you, you can do something like :
$(window).on('scroll', function(){
if($(this).scrollTop() > 950) {
$('.sr-icons').toggleClass('scrolled', true);
$(window).off('scroll');
}
});
As said in other comments, you should check wether you want $(this).scrollTop() > 950 or $(this).scrollTop() < 950
Edit : A more proper solution would be to remove only that specific handler, so you can attach other events on scroll if you ever want to :
var handler = function(){
if($(this).scrollTop() > 950) {
$('.sr-icons').toggleClass('scrolled', true);
$(window).off('scroll', handler);
}
}
$(window).on('scroll', handler);

You can use a flag variable, initially 0, then increment on scroll.
Then you can add check as
var flag=0;
$(window).scroll(function(){
if(flag==0){
$('.sr-icons').toggleClass('scrolled', $(this).scrollTop() > 950);
flag++;
}
});

Javascript Filter array has element on click/ multiple option

I try to write an filter in Javascript, which sorts different content blocks with headlines (the headlines are the filters).
I´ll try to explain what kind of filter I want to have.
For example I´ve 3 contentenblocks the first is only content1 the secont is content 1,2 and 3 and the third is content 2 and 3.
I wrote sth. like that.
HTML:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 text-center">
<div id="filter1" class="filter_btn">
Filter 1
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-center">
<div id="filter2" class="filter_btn">
Filter 2
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-center">
<div id="filter3" class="filter_btn">
Filter 3
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-center ">
<div class="filter_check">
filter checker
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-center ">
<div class="filter_clear">
filter clear
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 text-left st_dis_none filter1 filter1_only">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter1 only content</h4>
</div>
<div class="col-xs-12 text-left st_dis_none filter1 filter2 filter3">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter1 and filter2 and filter 3</h4>
</div>
</a>
</div>
<div class="col-xs-12 text-left st_dis_none filter2 filter3">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter2 and filter 3</h4>
</div>
</a>
</div>
JS sth like that
var array = new Array();
$(function () {
$('.filter_btn').click(function () {
array.push(this.id);
});
$('.filter_clear').click(function () {
$(".post").hide();
array = [];
});
$('.filter_check').click(function () {
alert(array);
});
});
$(function () {
$('#filter1').click(function () {
$(".filter2:not(.filter1_only .filter1)").hide();
$(".filter3:not(.filter1_only .filter1)").hide();
$(".filter1").show();
});
});
//
$(function () {
$('#filter2').click(function () {
// $(".filter1_only:not(.filter2_only .filter2)").hide();
// $(".filter3_only:not(.filter2_only .filter2)").hide();
$(".filter2").show();
});
});
$(function () {
$('#filter3').click(function () {
// $(".filter1_only:not(.filter3_only .filter3)").hide();
// $(".filter2_only:not(.filter3_only .filter3)").hide();
$(".filter3").show();
});
});
I tried to do sth with arrays und array. IndexOf but I do not know how to go on with this...
DEMO Code-Pen

You can add a class to main div and show hide its child according to filter please see below code
<div class="row mainfilter">
<div class="col-xs-12 text-left st_dis_none filter1 filter1_only">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter1 only content</h4>
</div>
</div>
<div class="col-xs-12 text-left st_dis_none filter1 filter2 filter3">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter1 and filter2 and filter 3</h4>
</div>
</a>
</div>
<div class="col-xs-12 text-left st_dis_none filter2 filter3">
<a href="">
<div class="col-xs-12 col-sm-9 no-padding">
<h4>filter2 and filter 3</h4>
</div>
</a>
</div>
</div>
Javascript
$(function () {
$('#filter1').click(function () {
$(".mainfilter").children().hide();
$(".filter1").show();
});
});
//
$(function () {
$('#filter2').click(function () {
// $(".filter1_only:not(.filter2_only .filter2)").hide();
// $(".filter3_only:not(.filter2_only .filter2)").hide();
$(".mainfilter").children().hide();
$(".filter2").show();
});
});
$(function () {
$('#filter3').click(function () {
// $(".filter1_only:not(.filter3_only .filter3)").hide();
// $(".filter2_only:not(.filter3_only .filter3)").hide();
$(".mainfilter").children().hide();
$(".filter3").show();
});
});

var fil1 = "";
var fil2 = "";
var filcomp = "";
$(function func() {
/*Filter 1*/
$("#Filter_btn_1").click(function () {
fil1 = ".filter_option1";
filter();
});
$("#Filter_btn_2").click(function () {
fil1 = ".filter_option2";
filter();
});
$("#Filter_btn_3").click(function () {
fil1 = ".filter_option3";
filter();
});
/*Filter 2*/
$("#Filter_btn_4").click(function () {
fil2 = ".filter_option4";
filter();
});
$("#Filter_btn_5").click(function () {
fil2 = ".filter_option5";
filter();
});
$("#Filter_btn_6").click(function () {
fil2 = ".filter_option6";
filter();
});
filcomp = fil1 + fil2;
$('.filter_btn').click(function () {
$(".filter_btn").removeClass("filter_selected");
$(this).addClass("filter_selected");
});
$('.filter_btn2').click(function () {
$(".filter_btn2").removeClass("filter_selected");
$(this).addClass("filter_selected");
});
$('.filter_reset_btn').click(function () {
location.reload();
});
function filter() {
alert(filcomp);
func();
$(".post").hide();
$("div").filter(filcomp).show();
};
});