Develop Reference

How to animate a js filtering

I'm using Bootstrap and I get the JavaScript code for the filterable div elements from W3Schools. It's an easy mode to filter but it's a bit bored without animations.
Because of this, I'm trying to add some animations by CSS or js in my filter code and I don't know how to run it. I tried CSS and js animations but nothing, it's not working.
HTML
<div class="container-fluid">
<div id="myBtnContainer">
<ul>
<li class="list-inline-item"><button class="btn active" onclick="filterSelection('all')">All</button></li>
<li class="list-inline-item"><button class="btn" onclick="filterSelection('category1')">Category1</button></li>
<li class="list-inline-item"><button class="btn" onclick="filterSelection('category2')">Category2</button></li>
</ul>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 pt-2 pb-5">
<div class="col fade-in-image filterDiv category1 show">
<a href="http://localhost:8888/test01/projects/project1/">
<div class="card">
<img width="480" height="320" src="http://localhost:8888/test01/wp-content/uploads/2021/06/img1.jpeg" class="img-fluid wp-post-image" alt="" loading="lazy">
<div class="hover-project">
<h3 class="titol-projecte">Project 1</h3>
<p class="location pb-4">Location 1</p>
<p class="category">Category 1</p>
</div>
</div>
</a>
</div>
<div class="col fade-in-image filterDiv category-2 show">
<a href="http://localhost:8888/test01/projects/project2/">
<div class="card">
<img width="480" height="320" src="http://localhost:8888/test01/wp-content/uploads/2021/06/img2.jpeg" class="img-fluid wp-post-image" alt="" loading="lazy">
<div class="hover-project">
<h3 class="titol-projecte">Project 2</h3>
<p class="location pb-4">Location 2</p>
<p class="category">Category 2</p>
</div>
</div>
</a>
</div>
</div>
</div>
The JavaScript I used:
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
The CSS i used
.filterDiv {
display: none; /* Hidden by default */
visibility: hidden;
opacity: 0;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
visibility: visible;
opacity: 1;
}
Thank you!!

Here is one ready example you can use for your code, its pretty amazing in my opinion
<div class="wrap">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>Filter Programs</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<div class="programs">
<button class="filter-btn" data-filter="all">All</button>
<button class="filter-btn" data-filter=".undergraduate">Undergraduate</button>
<button class="filter-btn" data-filter=".graduate">Graduate</button>
<button class="filter-btn" data-filter=".phd">PhD</button>
</div>
</div>
</div><!-- end of row -->
<div class="row">
<div class="columns twelve">
<h4>Sort Programs</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="columns twelve">
<div class="programs">
<button class="sort-btn" data-sort="default:asc">Default</button>
<button class="sort-btn" data-sort="random">Random</button>
<button class="sort-btn" data-sort="order:asc">Ascending</button>
<button class="sort-btn" data-sort="year:desc order:desc">Descending<span
class="multi">(Multi)</span></button>
</div>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<h4>Programs List</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<ul class="courses" id="mix-wrapper">
<li class="mix-target undergraduate" data-order="5" data-year="4">Economics<span>(U)</span></li>
<li class="mix-target graduate" data-order="14" data-year="2">Pharmacology<span>(G)</span></li>
<li class="mix-target graduate" data-order="7" data-year="1">Informatics<span>(G)</span></li>
<li class="mix-target phd" data-order="4" data-year="3">Criminology<span>(P)</span>
</li>
<li class="mix-target undergraduate" data-order="16" data-year="3">Sociology<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="6" data-year="4">Greek<span>(U)</span></li>
<li class="mix-target phd" data-order="1" data-year="3">Astrophysics<span>(P)</span>
</li>
<li class="mix-target undergraduate" data-order="12" data-year="4">Nursing<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="10" data-year="5">Microbiology<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="9" data-year="4">Mathematics<span>(U)</span></li>
<li class="mix-target graduate" data-order="11" data-year="3">Nanoscience<span>(G)</span></li>
<li class="mix-target phd" data-order="2" data-year="2">Biochemistry<span>(P)</span>
</li>
<li class="mix-target phd" data-order="13" data-year="3">Pathology<span>(P)</span>
</li>
<li class="mix-target graduate" data-order="8" data-year="1">Management<span>(G)</span></li>
<li class="mix-target graduate" data-order="3" data-year="2">Biostatistics<span>(G)</span></li>
<li class="mix-target phd" data-order="15" data-year="4"><a href="#">Public
Health<span>(P)</span></a></li>
</ul>
</div>
</div>
</div>
</div>
The CSS:
#import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC);
body {
background: #ededed;
font-family: 'Alegreya Sans SC', sans-serif;
}
h4 {
font-size: 21px;
border-radius: 5px;
margin: 0 auto;
text-align: center;
background: #d2d2d2;
color: white;
font-weight: 700;
padding: 3px 0;
}
li {
margin: 0;
}
a {
font-size: 18px;
text-decoration: none;
}
span {
display: block;
font-size: .75em;
font-style: italic;
position: relative;
top: 5px;
}
.multi {
display: inline;
top: 0;
left: 3px;
}
img {
max-width: 100%;
}
.programs,
.courses {
margin: 8px 0 0 0;
}
.programs {
font-size: 0;
margin-bottom: 15px;
}
.programs button {
outline: none;
margin-bottom: 0;
background: whitesmoke;
width: 50%;
height: auto;
font-weight: normal;
border: 1px solid #ededed;
color: #000000;
font-size: 14px;
padding: 4px 0;
text-shadow: 0px 0px 0px #2f6627;
}
.programs button:hover {
background: #99cfe0;
}
.programs button.programs-filter-btn-active,
.programs button.programs-sort-btn-active {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;
background: #3a9fbf;
color: white;
}
.courses {
margin-bottom: 15px;
font-size: 0;
background: whitesmoke;
}
.courses li {
text-align: center;
font-size: 14px;
display: inline-block;
width: 46%;
margin: 0 2%;
}
.courses a {
display: block;
height: 60px;
margin: 15px 0;
padding-top: 12.5px;
background: whitesmoke;
color: black;
border: 1px solid white;
transition: all .4s ease;
}
.courses a:hover {
background: #99cfe0;
}
.p, .p a {
font-family: Arial, sans-serif;
font-size: 14px;
text-align: center;
}
/* MEDIA QUERIES STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media only screen and (min-width: 750px) {
.container {
width: 95%;
}
.courses a {
background: #EBEBEB;
border: none;
}
h4 {
width: 50%;
margin-top: 12px;
}
img {
margin-bottom: 0;
}
.programs {
margin-bottom: 0;
}
.programs button {
width: 25%;
margin-bottom: 15px;
}
.courses li {
width: 21%;
}
}
The JS:
mixitup('#mix-wrapper', {
load: {
sort: 'order:asc'
},
animation: {
effects: 'fade rotateZ(-180deg)',
duration: 700
},
classNames: {
block: 'programs',
elementFilter: 'filter-btn',
elementSort: 'sort-btn'
},
selectors: {
target: '.mix-target'
}
});

How to enable button if all divs are selected in vanilla javascript?

I have some divs generated dynamically. Once all the divs are selected submit button has to be enabled, can someone please help me?
let card = document.getElementsByClassName('card');
let allSelected = document.querySelectorAll('selected');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.add('selected');
})
}
.card.selected{
background: #0173fb;
}
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card">
card items
</div>
</li>
</ul>
<button class='btn'>Submit</button>
</section>
let card = document.getElementsByClassName('card');
let allSelected = document.querySelectorAll('selected');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.add('selected');
})
}
In this code I am adding 'selected' class for the div onclick. I want this in pure javascript.. no jquery or any other library.
Thanks in advance.

try like this. Pure javascript.
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName('btn')[0].setAttribute("disabled","true");
});
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.toggle('selected');
if(card.length === document.getElementsByClassName('selected').length){
btn[0].removeAttribute("disabled");
}
else{
btn[0].setAttribute("disabled","true");
}
})
}
.card{
padding: 8px;
border: 1px solid #eee;
cursor: pointer;
}
ul, li{
list-style: none;
}
.card.selected{
background-color: rgb(155,155,155);
}
.btn{
padding: 10px;
margin: 10px;
}
<body>
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card">
card items 1
</div>
<div class="card">
card items 2
</div>
<div class="card">
card items 3
</div>
</li>
</ul>
<button class='btn'>Submit</button>
</section>
</body>
Or you can add eventListener without for. Like below:
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
document.body.addEventListener('click', function(e) {
if(e.target.classList.contains('card')){
e.target.classList.toggle('selected');
if(card.length === document.getElementsByClassName('selected').length){
btn[0].removeAttribute("disabled");
}
else{
btn[0].setAttribute("disabled","true");
}
}
});

Compare the available divs with the selected divs and enable the button if it matches.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
height: 10px;
background-color: red;
margin-bottom: 10px;
}
.selected{
background-color: blue;
}
</style>
</head>
<body>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<button class="btn" disabled>Click</button>
<script>
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
// add seclected class to clicke div
e.target.classList.add('selected');
// get all selected/clicked divs
let allSelected = document.querySelectorAll('.selected');
// compare available divs with selected divs
if(card.length === allSelected.length){
console.log("Enable button", btn[0])
btn[0].onclick = () => {
alert("Button clicked");
};
// enable button
btn[0].disabled = false;
}
});
}
</script>
</body>
</html>
EDIT: Troubleshooting (https://github.com/Bhanumathi-a/cards)
Your problem with your code is that you add the "selected" class on sub elements too! `` When you add a console log on the event handler you see that there are other elements than the divs get selected which gives you the filled array that matches the length of the available divs:
You can clearly see that the array contains more elements than only divs.
To fix this, find the nearest div.card element from the clicked children:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Member FDIC</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
min-width: 360px;
}
header {
display: block;
}
a.logo {
display: inline-block;
font-size: 50px;
color: #0173fb;
text-decoration: none;
padding: 15px;
}
nav {
display: inline-block;
}
.loanDetails {
background: #f8f8f8;
display: flex;
}
.cardBlk {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.cards {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.cardItm {
display: flex;
padding: 10px;
}
#media(min-width:1240px) {
.container {
max-width: 1140px;
}
.cardItm {
width: 24%;
}
}
#media(min-width:1920px) {
.container {
max-width: 1820px;
}
.cardItm {
width: 33%;
}
}
.card {
background: #f8f8f8;
color: #2a2b2d;
border-radius: 10px;
padding: 15px 15px 30px 15px;
box-sizing: border-box;
width: 100%;
display: block;
overflow: hidden;
position: relative;
text-align: center;
cursor: pointer;
justify-content: center;
}
.card .info, .card .checked {
height: 39px;
width: 39px;
position: absolute;
top: 10px;
right: 10px;
border-radius: 50%;
}
.card .info {
background: url(assets/exclamation.png) no-repeat 0 0;
}
.card .checked {
background: url(assets/checked\ active.png) no-repeat 0 0;
}
.card img {
width: auto;
height: auto;
max-width: 50px;
margin: 25px auto;
}
.card.selected, .card:hover {
background: #0173fb;
color: #fff;
}
.card:hover .info, .card.selected .info {
background-image: url(assets/exclamation\ white.png);
}
.card:hover .checked, .card.selected .checked {
background-image: url(assets/checked\ inactive.png);
}
.btnBlk {
text-align: center;
display: block
}
.btn {
background: #0173fb;
border-radius: 25px;
padding: 10px 25px;
color: #fff;
text-align: center;
border: 1px solid #0173fb;
margin: 10px auto;
cursor: pointer;
display: inline-block;
text-transform: uppercase;
}
.btn:disabled {
background: #9ac5fb;
border-color: #9ac5fb;
cursor: default;
}
</style>
</head>
<body>
<header>
<div class="container">
Logo
<!-- <nav class="nav">
<ul>
<li>Dashboard</li>
<li>Welcome, John Doe</li>
</ul>
</nav> -->
</div>
</header>
<main>
<header class="loanDetails">
<div class="container">
loan
<progress value="30" max="100" id=progress>30%</progress>
</div>
</header>
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card 1">
<span class="checked"></span>
<img src="assets/location.png" alt="">
<div>
<h2>Get started</h2>
<span>(100% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card 2">
<span class="info"></span>
<img src="assets/property.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="info"></span>
<img src="assets/income.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/assets.png" alt="">
<div>
<h2>Get started</h2>
<span>(50% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/real estate.png" alt="">
<div>
<h2>Get started</h2>
<span>(70% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="info"></span>
<img src="assets/declarations.png" alt="">
<div>
<h2>Get started</h2>
<span>(90% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/e-concent.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
</ul>
<div class="btnBlk">
<button class="btn" id="submitBtn" disabled>Submit Application</button>
</div>
</section>
</main>
<footer>
</footer>
<script>
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
let progress = document.getElementById('progress');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function (e) {
let closest = e.target.closest("div.card");
closest.classList.add('selected');
progress.value = progress.value + 10;
let allSelected = document.querySelectorAll('div.selected');
if (card.length === allSelected.length) {
btn[0].onclick = () => {
console.log('clicked');
};
btn[0].disabled = false;
}
});
}
</script>
</body>
</html>

Sections appears smaller than intended

I'm having an issue with HTML sections. As shown in the screenshot the blue spot are the sections and they should include the grey space. The white space is what lays inside the section tags in HTML.
The problem was discovered when trying to add some space between each section, but everything we tried it wouldn't do anything.
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
// _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
html {
scroll-behavior: smooth;
}
body {
margin: 0;
display: grid;
grid-template-columns: min-content 1fr;
font-family: 'Roboto';
background-color: grey;
/* this breaks position sticky in Firefox */
/* overflow-x: hidden; */
}
header {
grid-column: 1 / 3;
background: #5D5C61;
background-image: url("../Assets/Images/headerImage.jpg");
image-resolution: 1200x1400;
color: white;
padding: 4rem;
text-align: center;
font-family: 'Chivo';
font-size: 22px;
}
header a {
padding-right: 20px;
color: white;
text-decoration: underline;
}
header h1 {
color: #fb6542;
}
nav {
white-space: nowrap;
background: #37474F;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Only stick if you can fit */
#media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}
nav ul li a {
display: block;
padding: 0.5rem 1rem;
color: white;
font-size: 20px;
text-decoration: none;
}
nav ul li a.current {
background: #51656E;
}
main {
padding-top: -30px;
}
section {
padding: 2rem;
margin: 0 0 10% 0;
background-color: lightblue;
display: block;
}
footer {
grid-column: 1 / 3;
background: #252E39;
padding: 5rem 1rem;
}
a {
color: black;
text-decoration: none;
}
main a {
display: inline-block;
padding-bottom: 20px;
}
a:hover {
color: #6B7B83;
text-decoration: underline;
}
a:active {
color: #6B7B83;
}
.socialIcon {
height: 20px;
width: 20px;
}
#socialMedia {
text-align: center;
}
.CALink:hover {
color: #202F36;
}
.container {
width: 70%;
height: 100%;
float: left;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-group {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: left;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
padding: 30px;
width: 100%;
height: 100%;
margin: 1%;
align-items: center;
}
.containerRight {
width: 20%;
height: 20%;
float: right;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-groupRight {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: center;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
width: 100%;
height: 100%;
align-items: center;
margin: 4% 1% 1% 1%;
}
.navTitle {
text-decoration: underline;
}
.endOfModule {
margin-bottom: 20px;
}
.sectionHolder {
width: 100%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
<link href="CSS/linkHover.css" rel="stylesheet" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="icon" href="Assets/Images/faviconTTT.png"/>
<title>Silverflame</title>
</head>
<body>
<header>
<div id="socialMedia">
<img class="socialIcon" src="Assets/Images/mark-github.svg" alt="logo" />
<img class="socialIcon" src="Assets/Images/twitterSVG.svg" alt="twitter logo"/>
</div>
<h1>SilverFlame</h1>
<h5>Jesper Christensen</h5>
<a target="headerLink" href="https://www.thesilverflame.dk/">Home</a>
<a target="headerLink" href="https://www.thesilverflame.dk/CA.html">CA</a>
<a target="headerLink" href="">About</a>
Contact
</header>
<nav>
<ul>
<li>Module 1</li>
<li>Maven</li>
<li>Network and HTTP</li>
<li>JavaScript & CA1</li>
<li>Module 2</li>
<li>ORM with JPA</li>
<li>Rest webservices with JAX-RS</li>
<li>JavaScript</li>
<li>CA2</li>
<li>Module 3</li>
<li>SYS 1</li>
<li>?</li>
<li>SYS 2</li>
<li>Module 4</li>
<li>SPA with React (TBD)</li>
<li>React routing, Security and RN</li>
<li>CA3 (TBD)</li>
<li>Module 5</li>
<li>Project - Week 1</li>
<li>Project - Week 2</li>
<li>Project - Week 3</li>
</ul>
</nav>
<main>
<section id="section-1">
<div class="container">
<div class="control-group">
<h2>Module 1 - Maven, Test & Network</h2>
</div>
</div>
</section>
<section id="section-2">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Maven</h2>
<div class="tooltip">
Simple Calculator
<span class="tooltiptext">Github link</span>
</div>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-3">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Network & HTTP</h2>
Exercises - Network stack
<br>
Exercise HTTP
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-4">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript and CA1</h2>
The JS array
<br>
JavaScript Exercice 1
<br>
Course Assignment 1
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-5">
<div class="container">
<div class="control-group">
<h2>Module 2 - Webstack</h2>
</div>
</div>
</section>
<section id="section-6">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<h2>Study Point Exercise 3 - JPA, JPQL and Testing </h2>
<h3>Part 1</h3>
Exercise - JPA Entity Mappings - 1
<br>
Exercise - Java Persistence - Querying - 3
<h3>Part 2</h3>
Studypoint part two
<h3>Part 3</h3>
Exam Preparation Exercise on relations and queries
<br>
Exam Preparation Exercise on JPQL
<br>
Object Relational Mapping and Inheritance
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-7">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Rest webservices with JAX-RS</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-8">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-9">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Course Assignment 2</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-10">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
</main>
<footer>
©2022
</footer>
<script src="Assets/JS/hoverEffect.js" type="text/javascript"></script>
<script src="Assets/JS/frontpage.js" type="text/javascript"></script>
</body>
</html>

You are applying a float to the container which takes the item out of the document flow. Consider using flexbox instead of floats for layout.
.sectionHolder {
width: 100%;
margin: auto;
display: flex;
}
.container {
flex: 1 1 70%;
height: 100%;
font-family: 'Alegreya Sans', sans-serif;
}
.containerRight {
flex: 0 0 20%;
height: 20%;
font-family: 'Alegreya Sans', sans-serif;
}

This is a well-known issue when working with floated content. The height of the section elements are not being properly calculated because the floated content is not in the normal document flow.
Add overflow:auto; to the section elements which should correct the issue by forcing the rendering engine to recalculate the height of the element and once it does that, it should recognize the child content and factor it in.
Here's more on the issue and other solutions.

Javascript horizontal image slider

I'm trying to implement a simple image slider with arrows underneath, left and right.
When the slider reaches to the end(left or right), I would like the arrow to disappear at that side. Right now I can't get to the end of the list at the left side. Also I don't know how to center the list so that each item that gets viewed is centered on the screen.
Here is a gif that illustrates these problems:
https://i.gyazo.com/b3b3df55c6953c6b3e539dd347d951da.mp4
Here is the markup:
<!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">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Image Slider</title>
</head>
<body>
<div class="headline">
<h1>
Experience The
<br>
<span>Diamond Revolution</span>
</h1>
<h3>
Spin actual diamonds in 360° HD and zoom in up to 40x. One of the world's biggest collections of loose diamonds, at your
fingertips.
</h3>
</div>
<div class="slider">
<ul class="slider-wrap">
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/round-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
ROUND
</h3>
<h4 class="sub-title">
Maximizes light return from the top of the stone
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/cushion-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
CUSHION
</h3>
<h4 class="sub-title">
Antique cut with 58 facets and rounded corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/marquise-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
MARQUISE
</h3>
<h4 class="sub-title">
Long, narrow surface makes it appear larger than life
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/heart-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
HEART
</h3>
<h4 class="sub-title">
Features a distinctive cleft at the top and superior brilliance
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/pear-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
PEAR
</h3>
<h4 class="sub-title">
Tradition meets brilliance in unique ‘water drop’ shape
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/radiant-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
RADIANT
</h3>
<h4 class="sub-title">
Brilliance combined with non-traditional cropped corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/oval-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
OVAL
</h3>
<h4 class="sub-title">
Elongated shape accentuates the length of the finger
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/asscher-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
ASSCHER
</h3>
<h4 class="sub-title">
Vintage-style square shape with cropped corners
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/emerald-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
EMERALD
</h3>
<h4 class="sub-title">
Long lines create an elegant and sophisticated look
</h4>
</div>
</li>
<li class="slider-item">
<img src="https://ion.r2net.com/images/amazingHomepage/diamonds/princess-Diamond.png?v=3">
<div class="title">
<h3 class="main-title">
PRINCESS
</h3>
<h4 class="sub-title">
Maximum brilliance in an exquisite square form
</h4>
</div>
</li>
</ul>
</div>
<div class="controls">
<div class="title">
<h3>
PRINCESS
</h3>
<h4>
Maximum brilliance in an exquisite square form
</h4>
</div>
<a href="#" id="prev" class="fa fa-long-arrow-right">
<img src="https://ion.r2net.com/images/amazingHomepage/Arrow.svg">
</a>
<a href="#" id="next" class="fa fa-long-arrow-left">
<img src="https://ion.r2net.com/images/amazingHomepage/Arrow.svg">
</a>
</div>
<script src="js/index.js"></script>
</body>
</html>
Index.js:
var imageSlider = function () {
var slider = document.querySelector(".slider");
var items = document.querySelectorAll(".slider-item");
var itemWidth = items[0].offsetWidth;
var sliderList = document.querySelector(".slider-wrap");
var count = items.length / 2;
// Control Buttons
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var isNextHidden = false;
var isPrevHidden = false;
// Diamond Display
var mainTitle = document.querySelector(".controls .title h3");
var subTitle = document.querySelector(".controls .title h4");
window.addEventListener("resize", function () {
itemWidth = items[0].offsetWidth;
});
centerItem(count);
sliderList.style.left = "-" + count * itemWidth + "px";
var nextSlide = function () {
uncenterItem(count);
if (count >= 2) {
count--;
sliderList.style.left = "-" + count * itemWidth + "px";
} else if (count === 1) {
next.style.display = "none";
isNextHidden = true;
}
centerItem(count);
}
var prevSlide = function () {
uncenterItem(count);
if (count < items.length) {
if (isNextHidden) {
next.style.display = "block";
}
count++;
sliderList.style.left = "-" + count * itemWidth + "px";
} else if (count == items.length - 1) {
prev.style.display = "none";
isPrevHidden = true;
}
centerItem(count);
}
function uncenterItem(count) {
var centeredItem = items[count];
centeredItem.classList.remove("centered");
}
function centerItem(count) {
console.log(count);
var centeredItem = items[count];
centeredItem.classList.add("centered");
var title = centeredItem.getElementsByClassName("title");
var itemTitle = title[0].children[0].innerText.trim();
var itemSubtitle = title[0].children[1].innerText.trim();
// Assigning values to the fields
mainTitle.innerHTML = itemTitle;
subTitle.innerHTML = itemSubtitle;
}
next.addEventListener("click", nextSlide);
prev.addEventListener("click", prevSlide);
};
window.onload = function () {
imageSlider();
};
SASS file:
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
}
.headline {
text-align: center;
h1 {
font-size: 50px;
font-weight: normal;
margin-bottom: 0;
span {
font-weight: 700;
}
}
h3 {
font-size: 18px;
}
}
.slider {
position: relative;
width: 100%;
height: 300px;
padding-bottom: 50px;
overflow: hidden;
.slider-wrap {
display: flex;
justify-content: space-around;
position: relative;
list-style: none;
height: 100%;
min-width: 200%;
padding: 0;
margin: 80px 0;
transition: all 750ms ease;
left: 0;
.slider-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin: 0 20px;
height: 100%;
width: 250px;
float: left;
transition: all 750ms ease;
.title {
display: none;
}
img {
margin: 0 auto;
width: 250px;
}
}
.centered {
transform: scale(1.5);
}
}
}
.controls {
.title {
display: block;
position: absolute;
bottom: 30px;
left: 50%;
text-align: center;
margin: 20px;
color: black;
transform: translateX(-55%);
h3 {
font-size: 20px;
font-weight: 700;
}
h4 {
font-size: 15px;
font-weight: normal;
}
}
#prev,
#next {
position: absolute;
bottom: 0;
width: 100px;
line-height: 50px;
margin-top: 50px;
margin-bottom: 50px;
border-radius: 50%;
font-size: 70px;
text-align: center;
color: black;
text-decoration: none;
transform: translateY(-50%);
transition: all 150ms ease;
}
#prev {
right: 10px;
margin-right: 20vw;
}
#next {
left: 10px;
margin-left: 20vw;
img {
transform: rotate(180deg);
}
}
}

The condition in line number 42 else if (count == items.length - 1) should be replaced with else if (count == items.length).
Also need to take care of the undefined errors, by checking for the existence of objects using if condition. See the pen and refer line number 50 and 58.
Hope this helps.

My JS is not working with my html/css. Not sure why. (Console error 'ReferenceError: $ is not defined')

I am trying to create a content slider, and am having difficulties with it functioning appropriately. Specifically when testing locally the aspect that is not working is: (When you click the arrows left or right the current-slide fades out and fades back in but the slide content does not switch to the next block of content.)
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<html lang="en-US">
<meta charset="UTF-8">
<title>PLACEHOLDER</title>
<meta name"keywords" content="PLACEHOLDER" />
<meta name"description" content="PLACEHOLDER" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="code.js"></script>
<link type="text/css" rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
Here is my JS:
var main = function () {
$('.arrow-next').click(function () {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next()
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function()
{
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev()
if(prevSlide.length == 0)
{
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
HERE IS MY CSS(Just to tie it all together):
.slider {
position: relative;
width: 50%;
height: 470px;
margin-left: 25%;
border-bottom: 1px solid #ddd;
margin-top: -8%;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
margin-top: 30%;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
NOTE: I only put the sections of html/js/css that matter for this case. And I used placeholders for some text and images. On my local machine those placeholders are replaced with correct content.

if you look at the HTML closely, you'll see that the slider div's are not positioned properly. all the other div's with the class '.slide' are enclosed inside <div class="slide active-slide"> whereas they should be independent of each other.
the javascript code is not able to find the next() slide since they're all contained in one single parent which is the 'active-slide'
you need to update your HTML to the following
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
here's a working JSFIDDLE for the same. hope this helps

You just need to include the jQuery library from here: http://jquery.com/download/

You will get this error if you haven't included jquery file or you are getting conflicts in jquery.
ReferenceError: $ is not defined
Add following in Head section of your code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>