We Keep Coding

Trying to use the same function on individual cards

i have these 3 cards where i have the main body of text hidden. i want to be able to click on each individual button and it shows the details for that card. but every time i do get the JavaScript to work each button will only open the first cards hidden text. i was hiding the text by setting a max-height so i could use transition on the height.
any help would be appreciated
var cardBtns = document.querySelectorAll('.cardBtn');
var cardDetails = document.querySelectorAll(".card-details");
cardBtns.forEach(function(cardBtn) {
cardBtn.addEventListener('click', function() {
cardDetails.classList.toggle('card-open');
});
});
<div class="container">
<div class="card1" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card2" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card3" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
**<button class="cardBtn">show more</button>**
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
</div>
I feel like the JavaScript is wrong, I've tried many alternatives

You were close:
var cardBtns = document.querySelectorAll('.cardBtn');
var cardDetails = document.querySelectorAll(".card-details");
cardBtns.forEach(function (cardBtn, index) {
cardBtn.addEventListener('click', function(){
cardDetails[index].classList.toggle('card-open');
});
});
The problem was inside the event handler, bacause by calling cardDetails you deal with an array of elements, not just one.

You had all 3 with id='card' so I made that a class.
The way you can find the relative 'card-detail' is through capturing the event (e) and finding the closest 'card' class, then querySelector finding the associated 'card-body'
The transition is a css rule, and with height the way to do it is to work with max-height - setting the 'open' max-height to be larger than the actual.
var cardBtns = document.querySelectorAll('.cardBtn');
var cardDetails = document.querySelectorAll(".card-details");
window.addEventListener('load', () => {
cardBtns.forEach(cardBtn => {
cardBtn.addEventListener('click', e => {
e.target.closest('.card').querySelector('.card-body').classList.toggle('card-open');
});
});
});
.card {}
.card-body {
max-height: 0;
transition: all .5s ease-in;
overflow: hidden;
padding: 15px;
}
.card-body.card-open {
max-height: 200px;
}
<div class="card1 card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card2 card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card3 card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
**<button class="cardBtn">show more</button>**
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>

This is the right way to do it:
<div class="card1" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body d-none">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card2" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body d-none">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card3" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body d-none">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<script>
var cardBtns = document.querySelectorAll('.cardBtn');
cardBtns.forEach(function(cardBtn) {
cardBtn.addEventListener('click', function() {
let cardDetails = cardBtn.closest('.card-details');
let cardBody = cardDetails.getElementsByClassName('card-body')[0];
if (cardBody.classList.contains('d-none')) {
cardBody.classList.remove('d-none');
cardBody.classList.add('d-block');
cardBtn.textContent = 'Show Less';
} else {
cardBody.classList.remove('d-block');
cardBody.classList.add('d-none');
cardBtn.textContent = 'Show more';
}
});
});
</script>
<style>
.d-none {
display: none;
}
.d-block {
display: block;
}
</style>
JS fiddle Demo: https://jsfiddle.net/5sqkdp0x/

I would just add one event listener for the entire page. I don't know how many cards you will end up having, but if you got 10.000 of them, it will take time to add them all.
Also, id on elements should be unique, so remove all occurrences of id="card" because they serves almost no purpose.
window.addEventListener('click', function(event) {
let element = event.target;
if (element.classList.contains('cardBtn')) {
let cardHeadingEl = element.parentNode;
let cardDetailsEl = cardHeadingEl.parentNode;
cardDetailsEl.classList.toggle('open');
}
});
.card-body {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 300ms, max-height 400ms;
transition-timing-function: ease-out;
}
.card-details.open > .card-body {
max-height: 200px;
opacity: 1;
}
<div class="container">
<div class="card1" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card2" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
<button class="cardBtn">show more</button>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
<div class="card3" id="card">
<div class="card-details">
<div class="card-heading">
<h3>Heading</h3>
**<button class="cardBtn">show more</button>**
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eaque rem sapiente omnis</p>
</div>
</div>
</div>
</div>

What is the best approach to make my HTML code responsive for mobile with minimal amount of re-writing code?

sorry if this is a fairly vague question, I have a grid with two rows ontop of one another with content expanding below either of the two rows when the panel is clicked. This works fine on desktop and tablet sized devices but for mobile I'd like the panels to span vertically, with the expanding content opening directly beneath each panel. Any pointers on a starting point for this would be great, I know I can use media queries but really unsure how to structure my code to make it a reality.
Working fiddle here: https://jsfiddle.net/simoncunningham/a3e6514r/3/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
<script src="index.js"></script>
</head>
<body>
<div style="text-align: center">
<h2>Expanding Grid</h2>
<p>Click on the boxes below:</p>
</div>
<!-- Four columns -->
<div class="row">
<div class="column" onclick="openTab('b1');">
<img src="./Icons/Banking.svg" />
<p>Banking</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onClick="openTab('b2');">
<img src="./Icons/Regtech.svg" />
<p>RegTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onClick="openTab('b3');">
<img src="./Icons/InsurTech.svg" />
<p>InsurTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onClick="openTab('b4');">
<img src="./Icons/Lending.svg" />
<p>Lending</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
</div>
<!-- Full-width columns: (hidden by default) -->
<div id="b1" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h3>Banking</h3>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b2" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>RegTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b3" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>InsurTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b4" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Lending</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<!-- Bottom four columns -->
<div class="row">
<div class="column" onclick="openTab('b5');">
<img src="./Icons/Accounting.svg" />
<p>Accounting</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b6');">
<img src="./Icons/Payments.svg" />
<p>Payments</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b7');">
<img src="./Icons/Quote.svg" />
<p>Quote Aggregators</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
<div class="column" onclick="openTab('b8');">
<img src="./Icons/WealthTech.svg" />
<p>WealthTech</p>
<img class="arrow-down" src="./Icons/arrow-down.png" />
</div>
</div>
<div id="b5" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Accounting</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b6" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Payments</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b7" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>Quote</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
<div id="b8" class="containerTab" style="display: none; background: black">
<span onclick="this.parentElement.style.display='none'" class="closebtn"
>×</span
>
<h2>WealthTech</h2>
<p>
Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
deseruisse ad
</p>
</div>
</body>
</html>
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName('containerTab');
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
document.getElementById(tabName).style.display = 'block';
}
// Get all the tabs into a collection
// (don't use .getElementsByClassName()!)
let tabs = document.querySelectorAll('.column');
// Set up a click event handler on each of the tabs
tabs.forEach(function (tab) {
tab.addEventListener('click', function (event) {
// Loop over all the tabs and remove the active class
tabs.forEach(function (tab) {
tab.classList.remove('active-column');
});
// Set the background of the clicked tab
this.classList.add('active-column');
});
});
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* The grid: Four equal columns that floats next to each other */
.column {
background-color: black;
float: left;
width: 25%;
height: 226px;
padding: 50px;
text-align: center;
font-size: 16px;
cursor: pointer;
color: white;
}
.active-column {
background-color: green;
float: left;
width: 25%;
height: 226px;
padding: 50px;
text-align: center;
font-size: 16px;
cursor: pointer;
color: white;
}
.containerTab {
padding: 20px;
color: white;
}
/* Clear floats after the columns */
.row:after {
content: '';
display: table;
clear: both;
}
/* Closable button inside the container tab */
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
.arrow-down {
width: 25px;
height: 25px;
}

you can add this code to your css:
#media screen and (max-width: 768px) {
.column{
width:100%
}
}

You can a #media in css to make it so it responds really well on mobile devices

If you want my advice, you should use bootstrap for a base of your css. It will really help you when you'll organise your page. There is a lot of good documentation in their. You only need to add classes in your elements. It's really easy to use.
link: https://getbootstrap.com/docs/4.0/layout/grid/
Your page is separated by 12 pieces. You can say, if my page is large, take 3/12 of the space for each elements. If the page is medium size, take the half of the page and if it's small, take all the horizontal space. So in my class, I'll write class="col-lg-3 col-md-6 col-sm-12". I'm sorry if it's not clear. But for real it's really simple.

Problem with Intersection Observer API and Bootstrap

I have a problem with the intersection observer API. I'm trying to trigger an animation when the intersectionRatio is at least 40%, so I'm using the code below:
if(entry.intersectionRatio > 0.40){
DO SOMETHING
}
However I keep getting intersection ratios of "0.0xxxx" or even less at "0.00xxxx". For example right now I'm getting a intersection ratio printed to the console of 0.007672634441405535. I could try to use this values to trigger my animations instead but the value are very unpredictables and also the element never get fully into view since the element never gets a intersectionRatio of 1, even when I can see the element completely, so I want to know where the error is and learn to fix it.I'm using bootstrap and I have deleted the scripts that the framework uses and that have no solved the problem.
Here is the website, the section that I'm talking about is the cards below the "Meet the team" title. Also my script will print to the console the intersection ratio of the cards element when you scroll to that section.
Thank you for you help.
let cards = document.querySelectorAll(".card");
let container = document.querySelector("#cards");
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
console.log("The intersectionRatio is: " + entry.intersectionRatio);
if (entry.intersectionRatio > 0.40) {
cards.forEach(card => {
card.classList.add("animate");
});
}
});
});
cards.forEach(card => {
observer.observe(card);
});
html,
body {
font-family: "Poppins", sans-serif;
color: #222;
}
.site-wrapper {
width: 100%;
padding: 0;
margin: 0;
}
/*Navbar*/
#navbar .navbar-brand>img {
height: 3rem;
}
/*End Navbar*/
/*Welcome*/
.welcome hr {
border-top: 2px solid #b4b4b4;
width: 95%;
}
.welcome {
width: 65%;
padding: 3rem;
}
/*End Welcome*/
/*Showcase Icons*/
#showcase .row {
padding: 3rem;
}
#showcase .icon {
padding: 2rem;
}
#showcase .icon {
display: flex;
justify-content: center;
}
#showcase .icon>svg {
height: 6rem;
width: 6rem;
}
#showcase .icon0 {
color: #e54d26;
}
#showcase .icon1 {
color: #563d7c;
}
#showcase .icon2 {
color: #2163af;
}
/*End Showcase*/
/*Section 1*/
#section1 {
padding: 4rem
}
#section1 img {
height: 100%;
width: 100%;
}
#section1 .btn {
margin-bottom: 2rem;
}
/*End Section 1*/
/*Paralax*/
figure {
height: 30rem;
width: 100%;
}
figure .fixed-wrap {
height: 100%;
width: 100%;
}
#fixed {
height: 100%;
width: 100%;
background-image: url(http://lorempixel.com/output/animals-q-c-640-480-4.jpg);
background-attachment: fixed;
background-size: cover;
}
/*End Paralax*/
/*Emoji*/
#emoji-container {
padding: 3rem;
overflow: hidden;
}
#emoji-container .btn {
width: 100%;
}
#emoji img {
width: 200px;
}
#emoji {
overflow: hidden;
}
/*End Emoji*/
/*Section 2*/
/*TODO*/
#section2 {
padding: 2rem;
}
#section2 hr {
border-top: 2px solid #d5d5d5;
width: 75%;
padding: .8rem;
}
#section2 h1 {
padding: 1.5rem;
}
/*End Section 2*/
/*Cards*/
#cards {
padding: 3rem;
}
/*End Cards*/
/*Section 3*/
#section3 {
padding: 3rem;
}
#section3 .row {
padding: 1rem;
}
/*End Section 3*/
/*Social-media*/
#social-media {
padding-bottom: 4rem;
margin-bottom: 3rem;
text-align: center;
}
#social-media h2 {
padding: 2rem;
}
#social-media a {
text-decoration: none;
padding: 3rem;
}
#social-media .icon {
height: 4.5rem;
width: 4.5rem;
display: inline-block;
}
#social-media .icon0 {
color: #3b5998;
}
#social-media .icon1 {
color: #00aced;
}
#social-media .icon2 {
color: #dd4b39;
}
#social-media .icon3 {
color: #517fa4;
}
#social-media .icon4 {
color: #bb0000;
}
#social-media .icon0:hover,
#social-media .icon1:hover,
#social-media .icon2:hover,
#social-media .icon3:hover,
#social-media .icon4:hover {
color: #d5d5d5;
}
/*End Social-media*/
/*Footer*/
footer {
background-color: #3f3f3f;
color: #d5d5d5;
padding-top: 2rem;
padding-bottom: 1rem;
}
footer a {
color: #d5d5d5;
}
hr.light {
border-top: 1px solid #d5d5d5;
width: 75%;
margin-top: .8rem;
margin-bottom: 1rem;
}
hr.light-100 {
border-top: 1px solid #d5d5d5;
width: 100%;
margin-top: .8rem;
margin-bottom: 1rem;
}
/*End Footer*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<link rel="stylesheet" type="text/css" href="Showcase.css">
<link rel="stylesheet" type="text/css" href="Jumbotron.css">
<link rel="stylesheet" type="text/css" href="animation.css">
<link rel="stylesheet" type="text/css" href="slider.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500" rel="stylesheet">
</head>
<body>
<div class="site-wrapper">
<!--Navbar-->
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light" id="navbar">
Placeholder
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
<li class="nav-item">Placeholder</li>
</ul>
</div>
</nav>
<!--End Navbar-->
<!--Slider-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://lorempixel.com/output/nightlife-q-c-640-480-7.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://lorempixel.com/output/food-q-c-640-480-4.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--End Slider-->
<!--Jumbotron-->
<div class="jumbotron">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">A web design agency that allows individuals and organizations to make their brand accessible via the World Wide Web.
</p>
</div>
<div class="col-xs-12 col sm-12 col-md-3 col-lg-3 col-xl-2">
<button class="btn btn-secondary">
Learn more
</button>
</div>
</div>
</div>
<!--End Jumbotron-->
<!--Welcome-->
<div class="container-fluid welcome">
<div class="row text-center">
<div class="col-12">
<h1>Built with ease</h1>
</div>
<hr class="my-4">
<div class="col-12">
<p class="lead">Welcome to my Portafolio website. It is free. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas eos itaque velit odit repudiandae!</p>
</div>
</div>
</div>
<!--End Welcome-->
<!--Showcase Icons-->
<div class="container-fluid showcase" id="showcase">
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon icon0">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="html5" class="svg-inline--fa fa-html5 fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path>
</svg>
</div>
<h2>HTML5</h2>
<p>Built with the latest version of html, HTML5.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon icon1">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="bootstrap" class="svg-inline--fa fa-bootstrap fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M292.3 311.93c0 42.41-39.72 41.43-43.92 41.43h-80.89v-81.69h80.89c42.56 0 43.92 31.9 43.92 40.26zm-50.15-73.13c.67 0 38.44 1 38.44-36.31 0-15.52-3.51-35.87-38.44-35.87h-74.66v72.18h74.66zM448 106.67v298.66A74.89 74.89 0 0 1 373.33 480H74.67A74.89 74.89 0 0 1 0 405.33V106.67A74.89 74.89 0 0 1 74.67 32h298.66A74.89 74.89 0 0 1 448 106.67zM338.05 317.86c0-21.57-6.65-58.29-49.05-67.35v-.73c22.91-9.78 37.34-28.25 37.34-55.64 0-7 2-64.78-77.6-64.78h-127v261.33c128.23 0 139.87 1.68 163.6-5.71 14.21-4.42 52.71-17.98 52.71-67.12z"></path>
</svg>
</div>
<h2>BOOTSTRAP</h2>
<p>Built with the latest version of html, HTML5.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon icon2">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="css3" class="svg-inline--fa fa-css3 fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M480 32l-64 368-223.3 80L0 400l19.6-94.8h82l-8 40.6L210 390.2l134.1-44.4 18.8-97.1H29.5l16-82h333.7l10.5-52.7H56.3l16.3-82H480z"></path>
</svg>
</div>
<h2>CSS3</h2>
<p>Built with the latest version of html, HTML5.</p>
</div>
</div>
<hr class="my-4">
</div>
<!--End Showcase-->
<!--Section 1-->
<div class="container-fluid section1" id="section1">
<div class="row">
<div class="col-lg-6">
<h2>If you built it...</h2>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat excepturi quibusdam quisquam rerum dolorem nam saepe fuga iusto error nemo? </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur quia officia delectus aliquid magni assumenda dolorem eligendi, cumque reiciendis, ad incidunt ut fuga expedita commodi dolorum minima. Accusantium maxime, magni necessitatibus
itaque esse modi corrupti, facilis commodi vero ratione illo est neque impedit. Illum, repellat. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dolorum placeat quas vel veniam at consequatur libero pariatur? Commodi suscipit accusamus sequi animi excepturi atque esse debitis, ipsam autem in cumque maxime, nesciunt, minus
iusto libero rerum optio eveniet quia eum ullam soluta labore fugiat consequuntur. Neque, tenetur. Excepturi perspiciatis placeat dolorum accusantium molestiae autem eaque ut, sint veniam, iusto qui tempore repellat, optio voluptatem alias
libero eligendi facilis laudantium quam. Error omnis officiis nulla eius at fuga dolorem! Similique facere nesciunt numquam ad distinctio. </p>
<br>
<button class="btn btn-primary">
Learn more
</button>
</div>
<div class="col-lg-6">
<img src="http://lorempixel.com/output/food-q-c-640-480-8.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
<hr class="my-4">
<!--End Section 1-->
<!--Paralax-->
<figure id="uno">
<div class="fixed-wrap">
<div id="fixed">
</div>
</div>
</figure>
<!--End Parallax-->
<!--Emoji-->
<div class="container-fluid emoji-container" id="emoji-container">
<button class="btn btn-primary fun" data-toggle="collapse" data-target="#emoji">
Click for fun.
</button>
<div class="collapse" id="emoji">
<div class="container-fluid">
<div class="row text-center">
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/people-q-c-640-480-4.jpg" alt="" class="gif">
</div>
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/technics-q-c-640-480-4.jpg" alt="" class="gif">
</div>
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" alt="" class="gif">
</div>
<div class="col-sm-6 col-md-3">
<img src="http://lorempixel.com/output/animals-q-c-640-480-9.jpg" alt="" class="gif">
</div>
</div>
</div>
</div>
</div>
<!--End Emoji-->
<!--Section 2-->
<div class="container-fluid section2" id="section2">
<div class="row text-center">
<div class="col-12">
<h1 class="display-4">Meet the Team</h1>
</div>
<hr>
</div>
</div>
<!--End Section 2-->
<!--Cards-->
<div class="container-fluid cards" id="cards">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="http://lorempixel.com/output/technics-q-c-640-480-1.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Johnn Doe1</h4>
<p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
<button class="btn btn-primary">See profile</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="http://lorempixel.com/output/technics-q-c-640-480-3.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Johnn Doe2</h4>
<p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
<button class="btn btn-primary">See profile</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="http://lorempixel.com/output/fashion-q-c-640-480-7.jpg" alt="" class="card-img-top">
<div class="card-body">
<h4 class="card-title">Johnn Doe3</h4>
<p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
<button class="btn btn-primary">See profile</button>
</div>
</div>
</div>
</div>
</div>
<!--End Cards-->
<!--Section 3-->
<div class="container-fluid section3" id="section3">
<div class="row">
<div class="col-md-12 col-lg-6">
<h2>Our Philosofy</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, eum saepe? Quisquam, dolores. Consectetur soluta ad voluptatum magnam eveniet ipsa! </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel maxime similique culpa doloremque debitis unde accusamus, dolores explicabo laboriosam ratione quos, recusandae doloribus. Voluptates non iusto modi quae quam! </p>
</div>
<div class="col-lg-6">
<img src="img/05.jpg" alt="" class="img-fluid">
</div>
</div>
<hr class="my-4">
</div>
<!--End Section 3-->
<!--Social Media-->
<div class="container-fluid social-media" id="social-media">
<div class="row">
<div class="col-12">
<h2>Connect</h2>
</div>
<div class="col-12">
<a href="#">
<div class="icon icon0">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon1">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon2">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google-plus-g" class="svg-inline--fa fa-google-plus-g fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon3">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</div>
</a>
<a href="#">
<div class="icon icon4">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
<!--End Social Media-->
<!--Footer-->
<footer>
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-4">
<img src="img/logo.svg" alt="">
<hr class="light">
<p>555-555-555</p>
<p>email#myemail.com</p>
<p>505 Street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our hours</h5>
<hr class="light">
<p>Monday:9am-5pm</p>
<p>Saturday:10am-4pm</p>
<p>Sunday:colsed</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Service Area</h5>
<hr class="light">
<p>City, State, 0000</p>
<p>City, State, 0000</p>
<p>City, State, 0000</p>
<p>City, State, 0000</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>© Juan Pedro Erbetta</h5>
</div>
</div>
</div>
</footer>
<!--End Footer-->
</div>
<!-- /.site-wrapper -->
<script src="animation.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

You are missing the OPTIONS for the IntersectionObserver, without that you will be just using the defaults.
See: https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API
So, for your example, try the following:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
console.log("The intersectionRatio is: " + entry.intersectionRatio);
if (entry.intersectionRatio > 0.40) {
cards.forEach(card => {
card.classList.add("animate");
});
}
});
}, {
root: null,
rootMargin: '0px',
threshold: 1.0
});
Hope that helps.

why background image slide show delays?

I try to make a background slideshow with a content slider but each one with different code and javascript on loading page the background image slider delays so the content not appear correct with background
html code
<section id="home">
<div class="" id="whiteback"></div>
<div class="row" style="position: absolute; margin: auto; z-index: 10; width: 100%; height: 100vh;">
<div id="slideshow" class="slider__inner">
<div class="slider__contents">
<i class="slider__image fa fa-lightbulb-o"></i>
<h1 class="slider__caption ml5"><span class="text-wrapper"><span class="letters letters-left">loream </span> <span class="letters letters-right">ipsum</span> </span></h1>
<p class="slider__txt">lorem ipsum</p>
</div>
<div class="slider__contents">
<i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents">
<i class="slider__image fa fa-diamond fa-2x"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>
</section>
javascript code
<script>
var images = new Array('images/download.jpg', 'images/christ.jpg', 'images/download1.jpg');
var nextimage = 0;
$("#slideshow > div:gt(0)").hide();
setInterval(function () {
if (nextimage >= images.length) { nextimage = 0; }
$('#home')
.css('background-image', 'url("' + images[nextimage++] + '")')
.fadeIn(1000);
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 5200);
</script>

Owlcarousel2 "dots:true" not working?

I am trying to make a carousel using the owl-carousel plugin but I am having a problem showing the dots. Dots are not being shown despite they are enabled on the javascript. Is it the problem with owl carousel 2? I have tried adding owl-dots class inside the owl-carousel class. It does produce some result but one extra dot is being shown.Here is the fiddle for you :https://jsfiddle.net/aoa9a457/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slides" class="owl-carousel owl-theme">
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
</div>
</div>
</div>
</div>
CSS( I am just going to show of owl-carousel)
.owl-carousel .owl-item img{
display: block;
width:160px;
}
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
Javascript
(function ($) {
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
items :4,
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
dots: true,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
}
});
});
}(jQuery));

'owl-dots disabled' class can also show if you do not have enough items to allow the function of the dots.
It seems in your example you have set in the owl carousel config to 'items :4' but only have 3 HTML elements to 'carousel'
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
items :4, <<
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
},
onInitialized:setDots,
onChanged:setDots
});
});
}(jQuery));
This may be just your HTML markup but going by your example code this would display the 'owl-dots disabled' class as there aren't enough items to cycle.

I couldn't debug why your dots aren't appearing... that been said you can use this work around that removes the disabled class from your DOM, which is currently hiding them. with css you can fix your dots style...
(function ($) {
function setDots(){
$("#testimonial-slides .owl-dots").removeClass('disabled');
}
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
//items :4,
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
},
//onInitialized:setDots,
//onChanged:setDots
});
});
}(jQuery));
.owl-carousel .owl-item img{
display: block;
width:160px;
}
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slides" class="owl-carousel owl-theme">
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
</div>
</div>
</div>
</div>
EDITION As suggested #navigator you are setting 3 elements and declaring four, if you add more elements and set the default configuration you will see the dots appearing...