We Keep Coding

How to Filter for data-rel Value on Load with jQuery

The filter on my website needs to have a default value on load.
My main JS script uses this, in case it's useful for the solution:
window.addEventListener('DOMContentLoaded', event => { //code to be loaded }
The filter has no default, but I want to set it to one of the data-rel values by default so that the page loads with the content already filtered with my defined default.
I looked around for a while at other similar problems but couldn't find a solution to my exact problem.
In a separate filter JS file, I'm using this code as a base:
JS:
$(function(){
var selectedClass = "$('*[data-rel="web"]');";
$(".filter").click(function(){
selectedClass = $(this).attr("data-rel");
$(".work").fadeTo(100, 0.1);
$(".portfolio-item").not("."+selectedClass).fadeOut().removeClass('scale');
setTimeout(function(){
$("."+selectedClass).fadeIn().addClass('scale').sort();
$(".work").fadeTo(300, 1);
}, 300);
});
});
HTML:
<section class="no-padding" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Portfolio</h2>
<h3 class="section-subheading text-muted">A showcase of my work.</h3>
<div class="tabs">
<button class="btn filter" id="filt" href="" data-rel="all">ALL</button>
<button class="btn filter" id="filt" data-rel="web">Web Design</button>
<button class="btn filter" id="filt" data-rel="graphics">Graphic Design</button>
<button class="btn filter" id="filt" data-rel="branding">Branding</button>
<button class="btn filter" id="filt" data-rel="photography">Photography</button>
<button class="btn filter" id="filt" data-rel="motion">Motion Graphics</button>
</div>
<br>
</div>
<div class="work">
<!--div class="row"-->
<div class="col-md-4 portfolio-item web scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 1
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item graphics scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 2
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item branding scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 3
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<!--/div-->
<!-- /.row -->
<!-- Projects Row -->
<!--div class="row"-->
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="img/portfolio/fullsize/1.jpg">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 4
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 5
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 6
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<!--/div-->
<!-- Projects Row -->
<!--div class="row"-->
<div class="col-md-4 portfolio-item photography scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 7
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item graphics scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 8
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item web scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 9
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!--/div--> <!--WORK-->
<!-- /.row -->
<hr>
</div>
</div>
</section>
For this example, I would set "web" as the default (of course, "all" isn't the default, but appears that way as the code just shows all items on the page before a filter is clicked anyway).
I tried making selectedClass = $(.filter).attr("data-rel", "web"); or simply selectedClass = "web";, and various other variants such as $(.filter).attr({"data-rel": "web"}); but none of that works. I believe I'm missing something in regards to how the click function is interacting with the data-rel selection.
I also tried adding this after the initial declaration of selectedClass:
$(".portfolio-item").not("." + "selectedClass").removeClass('scale');
setTimeout(function () {
$("." + selectedClass).addClass('scale').sort();
$(".work");
}, 1)
The idea being to copy what is done when a button is clicked but get rid of the fading and make it as instantaneous as possible. I also tried wrapping that part in $(document).ready(function(){}.
But none of that did anything.
I'd appreciate it if someone could please explain to me what I'm doing wrong so that the default filter is "web" when the page loads.

Get to display the right product info using json file and Due js

The idea would be selecting a product by clicking on view Details button from PortfolioV3.vue and take you to ProductDetail.vue according to the product selected but I can't seem to find a way to make this link. What would be the most efficient way to configure this value passing information taken from json file from one PortfolioV3.vue to ProductDetail.vue?
portfolio-v3.json
{
"data":[
{
"image_path":"static/products/DELUXE-BATHROBE.jpg",
"title":"Productivity Tools",
"title_color":"bg-info",
"heading":"Deluxe Bathrobe",
"read_more_url":"javascript:void(0);",
"content": "bathrobe posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
},
{
"image_path":"static/products/HERRINGBONE-THERMAL-BLANKET.jpg",
"title":"Productivity Tools",
"title_color":"badge-warning",
"heading":"Herringbone Thermal Blanket",
"read_more_url":"javascript:void(0);",
"content": "blanket posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
},
{
"image_path":"static/products/MADISON-SPREAD-BLANKETS.jpg",
"title":"Productivity Tools",
"title_color":"bg-yellow",
"heading":"Madison Spread Blankets",
"read_more_url":"javascript:void(0);",
"content": "blanket posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
}
]
}
PortfolioV3.vue
<template>
<div>
<PageTitle
headerTitle="Our Latest Work"
headerSubTitle="We build something great in the world."
>
</PageTitle>
<div class="portfolio-wrapper section-gap port-3">
<div class="container">
<div class="blog-alternate" v-for="(portfolio,index) of portfoliov3.data" :key="index">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6">
<div class="overlay-wrap">
<img :src="portfolio.image_path" width="500" height="500" class="img-fluid border-rad w-100" alt="gallery images" />
<a :href="portfolio.image_path" data-fancybox="images" class="card-img-overlay primary-tp-layer pos-center text-center">
<span class="center-holder">
<a class="ih-fade-down square-40 rounded-circle bg-white shadow-md">
<i class="fa fa-plus align-middle"></i>
</a>
</span>
</a>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="portfolio-content">
<h5 :class="portfolio.title_color" class="badge p-2 mb-3 btn-pill"> {{portfolio.title}} </h5>
<h3 class="mb-3">{{portfolio.heading}}</h3>
<p class="mb-4">{{portfolio.content}}</p>
<a :href="portfolio.read_more_url" class="btn btn-outline-secondary btn-chk-dark"> READ MORE </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import portfoliov3 from 'Components/data/portfolio-v3.json'
export default {
data(){
return{
portfoliov3
}
}
}
</script>
ProductDetail.vue
<template>
<div>
<div class="product-wrapper section-gap pb-0">
<div class="container">
<div class="row mb-4">
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="mb-4">
<div class="feature-box-thumb">
<img src="static/img/2.jpg" class="img-fluid card-shadow" alt="product image" />
</div>
<!-- feature box thumb closed -->
</div>
<div class>
<ul class="list-unstyled p-gallary-thumb list-p-detail row">
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 product-detail-content mb-4">
<div class="mb-3">
<h2 class="text-capitalize mb-3">Fleece Jacket</h2>
<!--<h4 class="font-26 text-primary">
<del class="text-muted mr-2">$187</del> $125.00
</h4>-->
</div>
<div class="mb-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eros lobortis, vestibulum turpis ac, pulvinar odio. Praesent vulputate a elit ac mollis. In sit amet ipsum turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eros lobortis, vestibulum turpis ac, pulvinar odio. Praesent vulputate a elit ac mollis. In sit amet ipsum turpis. Pellentesque venenatis, libero vel euismod lobortis, mi metus luctus augue, eget dapibus elit nisi eu massa. Phasellus sollicitudin nisl posuere nibh ultricies.</p>
</div>
<div class="mb-4">
<p class="mb-0">
<span class="font-weight-bold">Category :</span>
Electronics,
Lights,
Solar
</p>
</div>
<div></div>
</div>
</div>
</div>
</div>
<!-- container closed -->
</div>
<!-- product wrapper closed -->
</div>
</template>
<script>
import RelatedProducts from "Components/Sections/RelatedProducts.vue";
import portfoliov2 from "Components/data/portfolio-v2.json";
export default {
components: {
RelatedProducts
},
data() {
return {
portfoliov2
};
}
};
</script>

Browser back button is not perform right

I am using Rails and did a navbar. The navbar folds into a burger after the certain width has been reached. I am able to click on the burger-sign without defining any event listener in JS. I just added this into the head of my application.html.erb
<meta>
<%= javascript_include_tag 'application' %>
<%= yield :js %>
<meta>
After adding, the click worked perfectly, but my home link, root_path was broken. It constantly lead to the #index page, but would display only "2019"on the blank page, not the actual #index page layout. I fixed the links adding the get method ty my link, like this:
<li><%= link_to 'Home', root_path, method: :get %></li>
What still doensn't work, is my browser back button, this still leads to this weird blank page with the 2019 printed on it. Can someone explain what is happening and how do I get to the previous page by clicking on the browser back button? Thanks!
P.S. This is the sourse html
<!DOCTYPE html>
<html>
<head>
<title>Neigbornow</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="RST7jzlY6IftapnMzEI9BkObFqh4B8EaX4cnX7PavwQq7ziZ5PKkVtgnExe8oShZxl56m40/UBgYG0OacVrWbg==" />
<meta>
<script src="/assets/jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/bootstrap/affix.self-b2bd74404ab3c627c5129dcdd3bdc2fc0a9d4bff4e1b6f1bae96412f9a1e9723.js?body=1"></script>
<script src="/assets/bootstrap/alert.self-7c7aa23778284da0e4aa395a0a6d858c7efd891c9312fe71908b28292654ac0c.js?body=1"></script>
<script src="/assets/bootstrap/button.self-b7a8ce9f47662b97ab74ef3dd416e93d3a4f644b252307a28231976a0149feef.js?body=1"></script>
<script src="/assets/bootstrap/carousel.self-c2c0ad2347d3fdd8447abd9d5792efed40ad5afadc5e0de3001e34904a6f68ce.js?body=1"></script>
<script src="/assets/bootstrap/collapse.self-4db094cc14a1aafa93e51e6f298115323037bb9e24c060dd0de52f27446f6227.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.self-7efa4aa654357ae664a98ec52151c25cd4927eacd1fabe038d068d9344b62cbd.js?body=1"></script>
<script src="/assets/bootstrap/modal.self-4ca048907279f4bb9187ba2541ae5d03296917d5c42e8fef0b58ec31c8902f0f.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.self-e62629e47ba5fe8b7faaa745f2fef2ccdb1bfd56ffb4f95615684ef40c74bcc4.js?body=1"></script>
<script src="/assets/bootstrap/tab.self-7fbfa844201ceeb4b896e4d185a33df19a284fe461281b7c0f78dbea2ef6da5a.js?body=1"></script>
<script src="/assets/bootstrap/transition.self-3c74f1999fcbf39cfb240b67c9a9e900863859f82f53fb27e5a388fe5e1a1c5c.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.self-82858d5843f55bfed321ea59fc5b180f3d2a8afc498ebc4d665561110b807875.js?body=1"></script>
<script src="/assets/bootstrap/popover.self-a1e6d4555fb912f0405099135eaddbe8273ba8f08323477a471d34419d57b446.js?body=1"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1"></script>
<script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1"></script>
<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/profile.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/reviews.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/user_steps.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/application.self-813dac1f9eb54ab17313987648014af35d74ebeb15c2265509c52491183d3dcc.js?body=1"></script>
<meta>
<link rel="stylesheet" media="all" href="/assets/style.self-67cdb30c3f83239515cab5c4f35c9f7533c426bd77b8d75c40e8ff613eb658ec.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-fe639f1da8d2570340060e10dc6bf2430bb27ff5e40357dce724cbc8efb24584.css?body=1" data-turbolinks-track="reload" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand pull-left" href="#">
<img src="/assets/logo_transparent-ad9441c50046e461177bad078050d5345754d0413d7ef8a7f549aa5bf35e466e.png" width="147" height="70" class="d-inline-block align-left mr-2">
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><a data-method="get" href="/">Home</a></li>
<li><a>About</a></li>
<li><a>Search</a></li>
<li><a>Contact</a>
<li>
<div class="log-in-btn"><button class="btn" type="submit">Log in</button></div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
</div>
<head>
<title>Neignbornow</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="empty-space"> </div>
<div class="site-blocks-cover overlay" style="background-image: url(https://images.unsplash.com/photo-1464082354059-27db6ce50048?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80);" data-aos="fade" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row align-items-center justify-content-end text-center">
<div class="row justify-content-center mb-4">
<div class="col-md-8 text-left">
<div class="site-intro">
<h1>Home is about personal connections, not just neighbors.</h1>
<p>Recconect with your neighbors, by sharing things and experiences. Now.</p>
<button class="btn register" type="submit">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header -->
<!-- About section -->
<div class="site-section bg-light">
<div class="container">
<div class="col-12">
<h2>About Neighborheart</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
</p>
</div>
</div>
</div>
<!-- About section -->
<!-- Testimonials -->
<div class="site-section bg-white">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Testimonials</h2>
</div>
</div>
<div class="slide-one-item home-slider owl-carousel">
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_3.jpg" alt="Image" class="img-fluid mb-3">
<p>John Smith</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_2.jpg" alt="Image" class="img-fluid mb-3">
<p>Christine Aguilar</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_4.jpg" alt="Image" class="img-fluid mb-3">
<p>Robert Spears</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
<div>
<div class="testimonial">
<figure class="mb-4">
<img src="images/person_5.jpg" alt="Image" class="img-fluid mb-3">
<p>Bruce Rogers</p>
</figure>
<blockquote>
<p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur unde reprehenderit aperiam quaerat fugiat repudiandae explicabo animi minima fuga beatae illum eligendi incidunt consequatur. Amet dolores excepturi earum unde
iusto.”</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<!-- Search section and show map -->
<div class="site-section bg-light">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="h5 mb-4 text-black">Search for items in your neighborhood</h2>
<!-- Serach bar -->
<div class="form-search-wrap mb-3" data-aos="fade-up" data-aos-delay="200">
<form method="post">
<div class="row align-items-center">
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-4">
<input type="text" class="form-control rounded" placeholder="What are you looking for?">
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="wrap-icon">
<span class="icon icon-room"></span>
<input type="text" class="form-control rounded" placeholder="Location">
</div>
</div>
<div class="col-lg-12 mb-4 mb-xl-0 col-xl-3">
<div class="select-wrap">
<span class="icon"><span class="icon-keyboard_arrow_down"></span></span>
<select class="form-control rounded" name="" id="">
<option value="">All Categories</option>
<option value="">Real Estate</option>
<option value="">Books & Magazines</option>
<option value="">Furniture</option>
<option value="">Electronics</option>
<option value="">Cars & Vehicles</option>
<option value="">Others</option>
</select>
</div>
</div>
<div class="col-lg-12 col-xl-2 ml-auto text-right">
<input type="submit" class="btn btn-primary btn-block rounded" value="Search">
</div>
</div>
</form>
</div>
<!-- Search bar -->
<!-- Map -->
<!-- Map -->
</div>
</div>
</div>
</div>
<!-- Search section Search section and show map -->
<!-- Cathegories -->
<div class="site-section" data-aos="fade">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-md-7 text-center border-primary">
<h2 class="font-weight-light text-primary">Popular Categories</h2>
<p class="color-black-opacity-5">Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
<div class="overlap-category mb-5">
<div class="row align-items-stretch no-gutters">
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-car"></span></span>
<span class="caption mb-2 d-block">Services</span>
<span class="number">1,921</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-closet"></span></span>
<span class="caption mb-2 d-block">Events</span>
<span class="number">2,339</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-home"></span></span>
<span class="caption mb-2 d-block">Household</span>
<span class="number">4,398</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-open-book"></span></span>
<span class="caption mb-2 d-block">Books & Magazines</span>
<span class="number">3,298</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-tv"></span></span>
<span class="caption mb-2 d-block">Electronics</span>
<span class="number">2,932</span>
</a>
</div>
<div class="col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-2">
<a href="#" class="popular-category h-100">
<span class="icon"><span class="flaticon-pizza"></span></span>
<span class="caption mb-2 d-block">Beverages</span>
<span class="number">183</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Cathegories -->
<div class="newsletter bg-primary py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2>Newsletter</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col-md-6">
<form class="d-flex">
<input type="text" class="form-control" placeholder="Email">
<input type="submit" value="Subscribe" class="btn btn-white">
</form>
</div>
</div>
</div>
</div>
</body>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<h2 class="footer-heading mb-4">About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident rerum unde possimus molestias dolorem fuga, illo quis fugiat!</p>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Navigations</h2>
<ul class="list-unstyled">
<li>About Us</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-md-3">
<h2 class="footer-heading mb-4">Follow Us</h2>
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-instagram"></span>
<span class="icon-linkedin"></span>
</div>
</div>
</div>
<div class="col-md-3">
<form action="#" method="post">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Search products..." aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-white" type="button" id="button-addon2">Search</button>
</div>
</div>
</form>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>
document.write(new Date().getFullYear());
</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>

Bootstrap 4 - form validation combined with tabbed proccess. Not working

I am trying to make a registration process with Bootstrap 4.
I though that the easiest way would be with making tabs. But for some reason, my validation is not working.
I am only using the dafault verification (only on first tab for now), but it still moves on to the second tab even though it is not verfied.
What am I doing wrong? Codeply here
<div class="card mb-3 top-tabs register-card">
<div class="card-header">
<ul class="nav nav-tabs justify-content-md-center" role="tablist">
<li role="presentation" class="nav-item">
1
</li>
<li role="presentation" class="nav-item">
2
</li>
<li role="presentation" class="nav-item">
3
</li>
<li role="presentation" class="nav-item">
4
</li>
</ul>
</div>
</div>
<div class="card register-card">
<div class="card-body">
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<div class="card-header text-center mb-4">
<h4 class="">Account Details</h4>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<label for="validationDefaultUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend2">#</span>
</div>
<input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required="">
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationDefaultUsername">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend2">#</span>
</div>
<input type="email" class="form-control" id="validationDefaultUsername" placeholder="Email" aria-describedby="inputGroupPrepend2" required="">
</div>
</div>
</div>
<button class="btn btn-primary next-step float-right" type="submit">Submit form</button>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<div class="card-header text-center mb-4">
<h4 class="">Create Password</h4>
</div>
<div class="form-group text-center">
<label for="InputPassword">Password</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-lock"></i>
</div>
</div>
<input type="text" class="form-control" id="forminput" placeholder="" required="">
</div>
</div>
<div class="form-group text-center">
<label for="InputPassword">Confirm Password</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-lock"></i>
</div>
</div>
<input type="text" class="form-control" id="forminput" placeholder="" required="">
</div>
</div>
<button type="button" class="btn btn-next next-step float-right">Next</button>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<div class="card-header text-center mb-4">
<h4 class="">Application</h4>
</div>
<p>What is text?</p>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required=""></textarea>
<hr>
<hr>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radiobutton" value="option1" checked="" required="">
<label class="form-check" for="radio1">
I understand
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radiobutton" value="option2">
<label class="form-check" for="radio2">
I do not understand
</label>
</div>
<button type="button" class="btn btn-next next-step float-right">Next</button>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<div class="card-header text-center mb-4">
<h4 class="">Finalize</h4>
</div>
<div class="tos-scroll" style="height: 200px; overflow: scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec elit eu mauris ultrices pretium. Integer tempor nisi quis pretium egestas. Quisque euismod eros in convallis ultrices. Curabitur ut egestas ligula. Pellentesque rhoncus laoreet orci, in convallis neque congue at. Cras eu velit ante. Suspendisse orci quam, pulvinar ac mattis luctus, posuere ut dolor. Mauris tincidunt at nunc sed egestas. Duis magna elit, condimentum vel sodales quis, ornare et nibh. Sed et eleifend augue, ornare posuere erat. Proin lobortis ornare quam vel bibendum. Morbi imperdiet iaculis arcu at pharetra. Quisque et pharetra lacus, id euismod tortor. Mauris eu leo ut mi tempus commodo sit amet eget enim. Donec quis justo egestas, dictum lorem eget, vestibulum risus. Quisque varius maximus aliquam. Nullam turpis velit, sagittis nec ex in, ultrices ultrices magna. Etiam tristique, nisi a dictum dictum, velit felis feugiat nisi, eu fringilla justo justo nec sem. Nunc maximus magna urna, sit amet mattis orci pulvinar sit amet. Nulla mattis at ex vel ultrices. Duis pretium risus ut lorem blandit, ullamcorper auctor libero porta.
</p>
</div>
<div class="d-flex justify-content-between align-items-center">
I accept TOS
<div class="form-group form-check mt-4">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">I agree</label>
</div>
</div>
<button type="button" class="btn btn-next next-step float-right">Finish</button>
</div>
</div></form>
</div>
</div>

My Bootstrap carousels are not working

My Bootstrap carousels are not working. When I click on the slider left or slider right buttons, the webpage just moves down and #bannerCarousel appears in the browser address bar. As for the "Testimonials" carousel, it is supposed to play automatically, but it doesn't do anything. Can someone please help me resolve this issue?
Here is my HTML and Javascript:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('.carouselBanner').carousel(),
$('.carouselTestimonial').carousel()
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RialedUp</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<section class="hero-unit">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
RialedUp
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div><!-- end navbar -->
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active-item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<div> </div>
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
<div class="item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
<div class="item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
</div><!-- end carousel inner -->
<a class="carousel-control left" href="#bannerCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#bannerCarousel" data-slide="next">›</a>
</div><!-- end bannerCarousel -->
</div>
</section><!-- end hero-unit -->
<section id="process">
<div class="container">
<div class="row">
<div class="h-line hidden-phone"> </div>
<div class="span3">
<div class="plan text-center">
<span class="process-icon iplan"> </span>
<h4 class="heading">Plan</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="design text-center">
<span class="process-icon idesign"> </span>
<h4 class="heading">Design</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="develop text-center">
<span class="process-icon idevelop"> </span>
<h4 class="heading">Develop</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="launch text-center">
<span class="process-icon ilaunch"> </span>
<h4 class="heading">Launch</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
</div>
</div>
</section><!-- end process -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="span3">
<div class="p-item">
<h4 class="heading">Portfolio</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<strong>Our Portfolio</strong>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-1.png" class="img-polaroid" alt="Web Design" />
<h5 class="title">LeafireDesigns</h5>
<small class="category">Web Design</small>
</div>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-2.png" class="img-polaroid" alt="Web Development" />
<h5 class="title">Unity</h5>
<small class="category">Web Development</small>
</div>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-3.png" class="img-polaroid" alt="Logo Design" />
<h5 class="title">Ingenious</h5>
<small class="category">Logo Design</small>
</div>
</div>
</div>
</div>
</div>
</section><!-- end portfolio -->
<section id="partners">
<div class="container">
<div class="row">
<div class="span3 text-center">
<img src="img/thumbnail/partner-1.png" alt="Graphic Driver" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-2.png" alt="Theme Forest" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-3.png" alt="Code Canyon" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-4.png" alt="Active Den" />
</div>
</div>
</div>
</section><!-- end partners -->
<section id="widgets">
<div class="container">
<div class="row">
<div class="span4">
<div class="testimonials">
<h4 class="heading">Testimonials</h4>
<div id="testimonialCarousel" class="carouselTestimonial">
<div class="carousel-inner">
<div class="active item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
<div class="item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
<div class="item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
</div><!-- end carousel-inner -->
</div><!-- end testimonialCarousel -->
</div><!-- end testimonials -->
</div>
<div class="span4">
<div class="blog">
<h4 class="heading">Our Latest Posts</h4>
<ul class="blog-lists">
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 4, 2017 | Posted by Admin</small>
</li>
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 3, 2017 | Posted by Admin</small>
</li>
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 2, 2017 | Posted by Admin</small>
</li>
</ul>
</div><!-- end blog -->
</div>
<div class="span3">
<div class="tweets">
<h4 class="heading">Latest Tweets</h4>
<ul class="tweet-lists">
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
</ul>
</div><!-- end tweets-->
</div>
</div>
</div>
</section><!-- end widgets -->
<footer>
<div class="container">
<div class="row">
<div class="span12 text-center">
<div class="table">
<ul class="footer-links">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
<div id="social">
<span class="social-sprite twitter"> </span>Follow Us on Twitter
<span class="social-sprite facebook"> </span>Like Us on Facebook
</div>
<small> © Rialed Up 2017</small>
</div>
</div>
</div>
</footer>

Change
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active-item">
to
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active item"> <!-- active item not active-item -->
https://jsfiddle.net/jv6xzgm6/