Modal on button click does not display - javascript

Trying to launch a modal upon a button click. I can console.log "button clicked" but the modal will not display. Please help me find where I am going wrong. Been looking for a while but I am somehow overlooking the error. Thank you.
The full code can be found at this Codepen: https://codepen.io/centem/pen/BaajLZm
var app = angular.module('myApp', []);
app.controller('myController',
function ($scope, $http) {
$scope.list = [
{
"ID": "001",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "002",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "003",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "004",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "005",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "006",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "007",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "008",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "009",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "010",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "011",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "012",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "013",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "014",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "015",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "016",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "017",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "018",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "019",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "020",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "021",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "022",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "023",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "024",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "025",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "026",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "027",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "028",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "029",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "030",
"Name": "Black Vulture",
"Type": "Hawk"
}
];
$scope.count = $scope.list.length;
$scope.reverseOrder = true;
$scope.sortField = 'ID';
$scope.sortBy = function(sortField) {
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
};
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
console.log("button clicked");
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
margin: 0 auto;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
ul {
background: rgb(67, 66, 66);
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: rgb(67, 66, 66);
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.3s;
width: 70px;
}
li a {
color: #fff;
}
li:hover,
li:focus-within {
background: rgb(0,0,0);
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
background: rgb(67, 66, 66);
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.3s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
section {
width: 90%;
margin: auto;
margin-top: 50px;
display: block;
border: 1px solid black;
min-height: 400px;
max-height: 700px;
overflow: auto;
}
.section-header {
border-bottom: 1px solid black;
padding: 5px;
background-color: #7C9DB9;
}
.section-header > div {
display: inline-block;
}
.section-header div:nth-child(3) {
color: red;
float: right;
}
.content {
padding: 5px;
}
#company-name {
float: left;
vertical-align: middle;
}
.logo {
float: right;
vertical-align: middle;
}
img {
height: 40px;
vertical-align: middle;
}
footer {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<nav>
<img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg">
<ul>
<li>One</li>
<li>Two
<ul>
<li href="#">One</li>
<li href="#">Two</li>
</ul>
</li>
<li>Three
<ul>
<li href="#">One</li>
<li href="#">Two</li>
<li href="#">Three</li>
</ul>
</li>
<li>Four</li>
<li>Five</li>
</ul><span>
<img class="logo" src="https://i.imgur.com/ITht7Gc.jpg">
<img class="logo" src="https://i.imgur.com/qNV0oMX.jpg">
</span>
</nav>
<section ng-app="myApp" ng-controller="myController">
<div class="section-header">
<div>One</div>
<div>Two</div>
<div>Count: {{list.length}}</div>
</div>
<div class="content">
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr>
<th ng-click="sortBy('ID')">ID</th>
<th ng-click="sortBy('Name')">Bird Name</th>
<th ng-click="sortBy('Type')">Type of Bird</th>
</tr>
<tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
<td>{{birds.ID}}</td>
<td>{{birds.Name}}</td>
<td>{{birds.Type}}</td>
<td><button id="myBtn">Edit</button></td>
</tr>
</table>
</div>
</section>
<!--
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>-->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>


OK first of all the Edit button is inside a ng-repeat which will create so many buttons and all of them with the same ID which is not valid as each element must have a unique id.
Secondly the button as is created inside angulars's context is not accessible to you getElementById as that is executed even before the button is rendered. And as you button clicked function is bound to window so it logs. Below is a sample code that works fine. Just create a function inside controller that opens the modal. Below is a working sample.
var app = angular.module('myApp', []);
app.controller('myController',
function($scope, $http) {
$scope.list = [{
"ID": "001",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "002",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "003",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "004",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "005",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "006",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "007",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "008",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "009",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "010",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "011",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "012",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "013",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "014",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "015",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "016",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "017",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "018",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "019",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "020",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "021",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "022",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "023",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "024",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "025",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "026",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "027",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "028",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "029",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "030",
"Name": "Black Vulture",
"Type": "Hawk"
}
];
$scope.count = $scope.list.length;
$scope.reverseOrder = true;
$scope.sortField = 'ID';
$scope.sortBy = function(sortField) {
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
};
$scope.openModal = function() {
debugger
modal.style.display = "block";
}
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
console.log("button clicked");
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
margin: 0 auto;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
ul {
background: rgb(67, 66, 66);
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: rgb(67, 66, 66);
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.3s;
width: 70px;
}
li a {
color: #fff;
}
li:hover,
li:focus-within {
background: rgb(0, 0, 0);
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
background: rgb(67, 66, 66);
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.3s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover>ul,
ul li:focus-within>ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
section {
width: 90%;
margin: auto;
margin-top: 50px;
display: block;
border: 1px solid black;
min-height: 400px;
max-height: 700px;
overflow: auto;
}
.section-header {
border-bottom: 1px solid black;
padding: 5px;
background-color: #7C9DB9;
}
.section-header>div {
display: inline-block;
}
.section-header div:nth-child(3) {
color: red;
float: right;
}
.content {
padding: 5px;
}
#company-name {
float: left;
vertical-align: middle;
}
.logo {
float: right;
vertical-align: middle;
}
img {
height: 40px;
vertical-align: middle;
}
footer {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
tr:nth-child(even) {
background: #CCC
}
tr:nth-child(odd) {
background: #FFF
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<nav>
<img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg">
<ul>
<li>One</li>
<li>Two
<ul>
<li href="#">One</li>
<li href="#">Two</li>
</ul>
</li>
<li>Three
<ul>
<li href="#">One</li>
<li href="#">Two</li>
<li href="#">Three</li>
</ul>
</li>
<li>Four</li>
<li>Five</li>
</ul><span>
<img class="logo" src="https://i.imgur.com/ITht7Gc.jpg">
<img class="logo" src="https://i.imgur.com/qNV0oMX.jpg">
</span>
</nav>
<section ng-app="myApp" ng-controller="myController">
<div class="section-header">
<div>One</div>
<div>Two</div>
<div>Count: {{list.length}}</div>
</div>
<div class="content">
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr>
<th ng-click="sortBy('ID')">ID</th>
<th ng-click="sortBy('Name')">Bird Name</th>
<th ng-click="sortBy('Type')">Type of Bird</th>
</tr>
<tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
<td>{{birds.ID}}</td>
<td>{{birds.Name}}</td>
<td>{{birds.Type}}</td>
<td><button ng-click="openModal()" class="myBtn">Edit</button></td>
</tr>
</table>
</div>
</section>
<!--
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>-->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
Hope this helps :)

Related

Json data not displayed because of a syntax error

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Florida Tempatations</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
</head>
<body>
<section class = "header">
<nav>
<img src="logo.png">
<div class="nav-links">
<ul>
<li>HOME</li>
<li>ATTRACTIONS</li>
<li>ABOUT US</li>
</ul>
</div>
</nav>
<div id="attractions-container" style="text-align: center;"> </div>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
</html>
index.html^^
fetch('attractions.json')
.then(response => response.json())
.then(data => {
const list = document.querySelector('attractions');
data.forEach(attraction => {
const item = document.createElement('li');
item.innerHTML = `<h2>${attraction.name}</h2>
<p>Location: ${attraction.location}</p>
<p>Category: ${attraction.category}</p>`;
list.appendChild(item);
});
})
.catch(error => {
console.error('Error:', error);
});
script.js
{ "attractions":[
{
"name": "Walt Disney World", "location": "Orlando", "category": "Theme Park"
},
{
"name": "Universal Studios Florida", "location": "Orlando", "category": "Theme Park"
},
{ "name": "Kennedy Space Center", "location": "Cape Canaveral", "category": "Science and Technology"
},
{"name": "South Beach", "location": "Miami", "category": "Beach"
},
{ "name": "Everglades National Park", "location": "Homestead", "category": "National Park",
}
]
}
attractions.json^^
*{
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url('back.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
nav{
justify-content: space-between;
align-items: center;
display: flex;
padding: 1% 2%;
}
nav img{
text-align: right;
flex: 1;
}
.nav-links ul li{
padding: 8px 12px;
position: relative;
list-style: none;
display: inline-block;
}
.nav-links ul li a{
text-decoration: none;
font-size: 24px;
color: #fff;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 4px;
display: block;
margin: auto;
background: #e7902c;
transition: .25s;
}
.nav-links ul li:hover::after{
width: 100%;
}
style.css^^
So basically I am trying to make this display on my website but I am not sure why it's not displaying. I tried my json fetch code and it works after I run some tests on it but I am not sure what is wrong with it because it's not displaying. I have a syntax error but I don't know where so I would appreciate if someone can help me with that. I am still learning my way around HTML CSS and JSON(This is my first time). Sorry if this is a silly question
Error:
Error: Error: SyntaxError
{}https://fd7ab24b-cc13-4b1d-9bf6-51305c5b96b1.id.repl.co/__replco/static/devtools/devtools.js:74
at t.formatMsg
(https://fd7ab24b-cc13-4b1d-9bf6-51305c5b96b1.id.repl.co/__replco/static/devtools/devtools.js:74:4990) at new e
(https://fd7ab24b-cc13-4b1d-9bf6-51305c5b96b1.id.repl.co/__replco/static/devtools/devtools.js:74:1632) at t.insertSync
(https://fd7ab24b-cc13-4b1d-9bf6-51305c5b96b1.id.repl.co/__replco/static/devtools/devtools.js:97:17121)
at
https://fd7ab24b-cc13-4b1d-9bf6-51305c5b96b1.id.repl.co/__replco/static/devtools/devtools.js:97:18724

"category": "National Park", needs to be "category": "National Park" since it is the last item.
console.log(JSON.parse(`{ "attractions":[
{
"name": "Walt Disney World", "location": "Orlando", "category": "Theme Park"
},
{
"name": "Universal Studios Florida", "location": "Orlando", "category": "Theme Park"
},
{ "name": "Kennedy Space Center", "location": "Cape Canaveral", "category": "Science and Technology"
},
{"name": "South Beach", "location": "Miami", "category": "Beach"
},
{ "name": "Everglades National Park", "location": "Homestead", "category": "National Park"
}
]
}`))
But with the comma at the end you get an error:
console.log(JSON.parse(`{ "attractions":[
{
"name": "Walt Disney World", "location": "Orlando", "category": "Theme Park"
},
{
"name": "Universal Studios Florida", "location": "Orlando", "category": "Theme Park"
},
{ "name": "Kennedy Space Center", "location": "Cape Canaveral", "category": "Science and Technology"
},
{"name": "South Beach", "location": "Miami", "category": "Beach"
},
{ "name": "Everglades National Park", "location": "Homestead", "category": "National Park",
}
]
}`))

I can't make the books slider

There are books in my incoming data. I want to make these books slider by categories. In other words, when I click on the 1st class, the books belonging to the 1st class will be listed. When I click on 2nd grade I want 2nd grade books to be listed. But I want it to be in slider shape. The categories will increase more after that. like 3rd grade 4th grade. Please run the codes in full page
const books = [
{
id: 1,
bookname: "Book Name 1",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 2,
bookname: "Book Name 2",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 3,
bookname: "Book Name 3",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 4,
bookname: "Book Name 4",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 5,
bookname: "Book Name 5",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 6,
bookname: "Book Name 6",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 7,
bookname: "Book Name 7",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 8,
bookname: "Book Name 8",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 9,
bookname: "Book Name 9",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class"
},
{
id: 10,
bookname: "Book Name 10",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class"
},
]
const n = 6;
const bookshelfbox = document.querySelector('.bookshelfbox');
const bookproduct = document.querySelectorAll('.bookproduct');
const className = document.querySelector('.slides');
const bookproductbox = document.querySelector('.bookproductbox');
const grouredBooks = books.reduce((r, e, i) =>
(i % n ? r[r.length - 1].push(e) : r.push([e])) && r
, []);
console.log(grouredBooks)
grouredBooks.map((books) => {
const row = document.createElement('div');
row.className = 'row';
bookshelfbox.appendChild(row);
return books.map(
(book) =>
(row.innerHTML += `
<div class="bookproductbox">
<div class="bookproduct">
<img
src="${book.bookimage}"
alt=""
width="120"
height="180"
class="img_thumb" style="width: 120px; height: 180px; top: -73px;"
>
<div class="producttitle">
<p> ${book.bookname} </p>
<p> ${book.bookClass} </p>
</div>
</div>
`)
);
});
#charset "UTF-8";
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;600;800&family=PT+Serif:wght#400;700&display=swap");
*,
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
font-family: 'PT Serif', serif;
}
body a {
text-decoration: none;
}
body a:hover {
text-decoration: none;
}
body .form-control:focus {
outline: none;
box-shadow: none !important;
}
body button:focus {
outline: none;
box-shadow: none;
}
body p {
margin-bottom: 0 !important;
}
.wrapper .booklib {
width: 100%;
height: 100%;
}
.wrapper .booklib .header {
background: #93643a url('images/header2.png') repeat;
color: #e4b173;
width: 100%;
height: 70px;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
.wrapper .booklib .header ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.wrapper .booklib .header ul li {
list-style: none;
margin: 0;
padding: 0;
display: block;
float: left;
margin-right: 15px;
padding: 4px 8px;
border-radius: 5px;
border: #d39e6b solid 1px;
cursor: pointer;
box-shadow: 1px 1px 4px rgb(0 0 0 / 40%);
font-size: 18px;
opacity: 0.7;
transform: scale(0.9);
transition: all .5s ease;
font-weight: 900;
}
.wrapper .booklib .header ul .active {
opacity: 1;
transform: scale(1);
}
.bookshelfbox {
position: relative;
margin: 0;
padding: 0;
left: 0px;
top: 0px;
float: left;
display: block;
width: 100%;
height: auto;
}
.bookshelfbox .bookproductbox {
background: url('images/shelf2.png');
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
padding: 1rem;
height: 225px;
}
.bookproduct {
margin-left: 50px;
position: relative !important;
display: block;
direction: ltr !important;
}
.bookproduct img {
display: block !important;
border: none !important;
cursor: pointer;
margin: 0 !important;
padding: 0 !important;
}
.producttitle {
position: absolute;
top: 80%;
z-index: 1;
text-align: center !important;
color: #ffffff;
background: #c33b4e;
overflow: hidden;
max-height: auto;
line-height: 14px !important;
width: 100%;
box-shadow: 0px 0px 8px rgb(0 0 0 / 40%);
font-size: 11px;
padding: 1px 5px 3px 5px;
font-family: Arial, Helvetica, sans-serif;
}
.bookproduct:hover .producttitle {
color: rgb(255, 255, 255);
background: url("http://srvalle.com/wp-content/plugins/bookshelf-slider/assets/title_product_bg.png") repeat rgb(195, 59, 78);
overflow: visible;
max-height: 150px;
}
.flexslider {
margin:0;
border:0;
background: none!important;
}
.flex-nav-prev, .flex-nav-next {
display: none;
}
#media (max-width: 575.98px) {
.wrapper .booklib .booklibnav .header {
left: 60px;
right: 60px;
}
.book-content {
margin-left: 15px;
}
}
#media (min-width: 576px) and (max-width: 767.98px) {
.wrapper .booklib .booklibnav .header {
left: 60px;
right: 60px;
}
}
#media (min-width: 768px) and (max-width: 991.98px) {
}
.bookshelfbox {
display: flex;
flex-direction: column;
}
.bookproductbox, .row {
display: flex;
}
<!doctype html>
<html lang="tr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="/_tema/cms/images/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title> TG Book Library </title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="booklib">
<div class="header">
<ul class="slides">
<li class="active">
First Class
</li>
<li>
Second Class
</li>
</ul>
</div>
<div class="bookshelfbox">
</div>
</div>
</div>
</div>
<!--/ container end -->
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

I used SwiperApi for this. Check and customize by yourself please.
const books = [
{
id: 1,
bookname: "Book Name 1",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 2,
bookname: "Book Name 2",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 3,
bookname: "Book Name 3",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 4,
bookname: "Book Name 4",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 5,
bookname: "Book Name 5",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 6,
bookname: "Book Name 6",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 7,
bookname: "Book Name 7",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 8,
bookname: "Book Name 8",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 9,
bookname: "Book Name 9",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class",
},
{
id: 10,
bookname: "Book Name 10",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class",
},
];
const n = 6; // slide per page
const booksBase = $("#booksInto"); // books going to be added into swiper-swapper class.
let defaultClass = $(".btnFilter").data("classname"); // initialize class.
$(document).ready(function () {
$(".btnFilter").click(filterBooks);
filterBooks();
});
filterBooks = function (classname = null) {
// getting value from data attribute if any button clicked
if (classname != null) defaultClass = $(this).data("classname");
let theDiv = "";
$.each(
books.filter((t) => t.bookClass == defaultClass),
function (index, obj) {
theDiv += `
<div class="swiper-slide">
<div class="bookItem">
<img class="card-img-top" src="${obj.bookimage}" alt="${obj.bookname}" />
<div class="card-body">
<p class="card-text">${obj.bookname}</h5>
<p class="card-text">${obj.bookClass}</h5>
Read Book
</div>
</div>
</div>
`;
}
);
booksBase.html(theDiv);
makeSlider();
};
makeSlider = function () {
const swiper = new Swiper(".swiper", {
slidesPerView: n,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-lg-12">
<div class="btn-group" role="group" aria-label="Basic example">
<button
type="button"
class="btn btn-secondary btnFilter defaultClass"
data-classname="First Class"
>
Class 1
</button>
<button
type="button"
class="btn btn-secondary btnFilter"
data-classname="Second Class"
>
Class 2
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper" id="booksInto"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Json data render onclick with different content

I am having trouble connecting the button to my JSON structure. I want each button to render each domain. I tried selecting $('button') and applying onlclick() function but it did not work.
Is it because I used JSON to render 4 buttons instead of creating an HTML structure for each?
//landing domain info/deisgn and structure
const domainInfo = [{
id: 001,
domain: "Title 1",
photo: "title-1.jpg",
},
{
id: 002,
domain: "Title 2",
photo: "title-2.jpg",
},
{
id: 003,
domain: "Title 3",
photo: "title-3.jpg",
},
{
id: 004,
domain: "Title 4",
photo: "title-4.jpg",
},
]
function domainTemplate(domaininfo) {
return `
<div class="box__shadow">
<button id="myBtn" class="myBtn" type="button">
<img src="${domaininfo.photo}" width="90%;"style="margin: 0em; padding: 0em;">
<div class="cover-bkg-ser-domain4">
<h4 style="overflow:hidden; color: #1a4177; font-weight: bold; font-size: 18px; padding: 1em; margin: 0em;">${domaininfo.domain}</h4>
</div>
</button>
</div>
`
}
document.getElementById("domainCat").innerHTML = `
${domainInfo.map(domainTemplate).join('')}
`
//Serice category data
const serviceData = [{
domain1Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
},
//domain 2 data
{
domain2Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
},
// domain 3 data
{
domain3Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
},
//domain 4 data
{
domain4Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
}
]
function servTemplate(servicedata) {
return `
<div class="info-data" id="infodata">
<table>
<colgroup>
<col width="30%"/>
<col width="70%"/>
</colgroup>
<tr>
<th colspan="2" class="header">
<h3>${servicedata.subcat}</h3>
</th>
</tr>
<tr class="">
<td class="title">
<h5>Section 1</h5>
</td>
<td class="text">
<img class="img-service" src="${servicedata.prefpart}">
</td>
</tr>
<tr>
<td class="">
<h5>Section 2</h5>
</td>
<td class="">
<img class="img-service" src="${servicedata.secpart}">
</td>
</tr>
<tr>
<td>
<h5>Section 3</h5>
</td>
<td class="">
<img class="img-service" src="${servicedata.locpart}">
</td>
</tr>
</table>
</div>
`
}
document.getElementById("serviceCat").innerHTML = `
${serviceData.map(servTemplate).join('')}
`
/*domain names and pics css*/
#domainCat {
width: 100%;
}
.box__shadow {
width: auto;
height: auto;
margin-top: 1em;
display: flex;
justify-content: center;
align-items: center;
float: left;
}
.myBtn {
border: 0px solid #000000;
outline: none;
box-shadow: none;
width: 260px;
height: auto;
background: none;
margin: 1em 1.1em 5em 1.1em;
padding: 0em -1em 5em -1em;
float: left;
}
.myBtn:hover {
outline: none;
background: none;
box-shadow: none;
cursor: pointer;
}
.cover-bkg-ser-domain4 {
background-color: #2BD5F2;
margin: auto auto -2em auto;
width: 90%;
}
.cover-bkg-ser-domain4:hover {
background-color: rgba(165, 209, 238, 0.8);
}
/*list rendering css*/
#serviceCat {
overflow: hidden;
float: left;
background-color: rgba(117, 117, 117, 0.8);
/* Black w/ opacity */
overflow: auto;
/* Enable scroll if needed */
width: 72.5%;
/* Full width */
height: 50%;
/* Full height */
top: 0;
left: 0;
margin-left: 2em;
}
.service-title {
font-style: normal;
font-weight: normal;
font-size: 22px;
text-align: center;
color: #000000;
width: 100%;
}
.info-data {
width: auto;
height: auto;
}
.img-service {
width: 50%;
margin: 1em;
padding: 0em;
display: block;
}
.header {
width: 100%;
background-color: #83e06c;
text-align: center;
}
.row {
display: inline;
background-color: rgba(76, 76, 76, 0.4);
width: 70%;
height: auto;
padding: 0.1em;
margin: 0.2em;
}
.column-1 {
width: 20%;
height: auto;
float: left;
vertical-align: auto;
margin-left: 2em;
font-size: 20px;
font-weight: bold;
}
.column-2 {
width: 70%;
height: auto;
float: left;
vertical-align: auto;
margin-left: 2em;
}
table,
th,
tr {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<section id="domainCat"></section>
<section id="serviceCat"></section>
</body>
</html>
I can only use jQuery as a library since I am trying to fit the code in SharePoint webparts.

So the issue is that you were trying to add click listener on the object that was created dynamically. You need 4 buttons here so we should also create dynamical listeners in function domainTemplate(); Also we need to pass index here so we can understand which button we are clicking and add class to all buttons.
function domainTemplate(domaininfo, index) {
$(document).on('click',`.btn-${index}`, function() {
document.getElementById("serviceCat").innerHTML = servTemplate(serviceData[index]);
return `
...some html here
<button id="myBtn" class="myBtn btn-${index}" type="button">
`;
});
Also I have fixed your servTemplate() function. There was object that we need to call so we have to always get first item of object. So now servicedata is correct if we call it like this.
function servTemplate(data) {
const servicedata = data[Object.keys(data)[0]][0];
return some html;
}
Please check the full code here https://jsfiddle.net/yh915e6o/

Issue with Selection dropdown when it is 'required'

I am using the 'required' tag in HTML to validate input. However, I am having an error with the the selection. It does not show the option nor am I able to continue.
const slidePage = document.querySelector(".slide-page");
const nextBtnFirst = document.querySelector(".firstNext");
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");
const progressText = document.querySelectorAll(".step p");
const progressCheck = document.querySelectorAll(".step .check");
const bullet = document.querySelectorAll(".step .bullet");
let current = 1;
nextBtnFirst.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-25%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
nextBtnSec.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-50%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
nextBtnThird.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-75%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
submitBtn.addEventListener("click", function() {
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
setTimeout(function() {
alert("Your Consultation Successfully Submitted");
location.reload();
}, 800);
});
prevBtnSec.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "0%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
prevBtnThird.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-25%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
prevBtnFourth.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-50%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
let data = [{
"id": 1,
"name": "Management",
"parentid": 0
},
{
"id": 2,
"name": "Support",
"parentid": 0
},
{
"id": 3,
"name": "Digital Business",
"parentid": 0
},
{
"id": 4,
"name": "Cyber Security",
"parentid": 0
},
{
"id": 5,
"name": "Infrastructure",
"parentid": 0
},
{
"id": 6,
"name": "Network",
"parentid": 0
},
{
"id": 8,
"name": "MDM Solution",
"parentid": 1
},
{
"id": 9,
"name": "IT Procurement",
"parentid": 1
},
{
"id": 10,
"name": "Vendor Management",
"parentid": 1
},
{
"id": 11,
"name": "Managed servers, Network, Firewall",
"parentid": 1
},
{
"id": 12,
"name": "Backup and Storage",
"parentid": 1
},
{
"id": 13,
"name": "Email Management",
"parentid": 1
},
{
"id": 14,
"name": "Microsoft Office Management",
"parentid": 1
},
{
"id": 15,
"name": "Asset Management",
"parentid": 1
},
{
"id": 16,
"name": "Network Management",
"parentid": 1
},
{
"id": 17,
"name": "Communication Management",
"parentid": 1
},
{
"id": 21,
"name": "Patch Management",
"parentid": 1
},
{
"id": 18,
"name": "IT Helpdesk",
"parentid": 2
},
{
"id": 19,
"name": "Maintenance of Servers",
"parentid": 2
},
{
"id": 20,
"name": "Network Maintenance",
"parentid": 2
},
{
"id": 21,
"name": "Communication Maintenance",
"parentid": 2
},
{
"id": 21,
"name": "Patch Management",
"parentid": 2
},
{
"id": 22,
"name": "Disaster Recovery Testing and Support",
"parentid": 2
},
{
"id": 23,
"name": "Pro-active Capacity Planning and Support",
"parentid": 2
},
{
"id": 24,
"name": "Remote and Onsite Support",
"parentid": 2
},
{
"id": 25,
"name": "Office 365 Migration",
"parentid": 3
},
{
"id": 26,
"name": "Managed Offsite Backups",
"parentid": 3
},
{
"id": 27,
"name": "Azure Migration & Uplift",
"parentid": 3
},
{
"id": 28,
"name": "SaaS Products Support ",
"parentid": 3
},
{
"id": 29,
"name": "Microsoft Teams Setup",
"parentid": 3
},
{
"id": 30,
"name": "SharePoint Configuration",
"parentid": 3
},
{
"id": 32,
"name": "Risk Assessment",
"parentid": 4
},
{
"id": 33,
"name": "Cloud base & on prem SIEM Solution Implementation",
"parentid": 4
},
{
"id": 34,
"name": "Vulnerability & penetration testing",
"parentid": 4
},
{
"id": 35,
"name": "Cyber Security Incident Response Plan",
"parentid": 4
},
{
"id": 36,
"name": "Cloud Security",
"parentid": 4
},
{
"id": 37,
"name": "CyberArk PAM solution",
"parentid": 4
},
{
"id": 38,
"name": "SME Upgrades and Consolidation",
"parentid": 5
},
{
"id": 39,
"name": "Dell Networking",
"parentid": 5
},
{
"id": 40,
"name": "Data Centre Design",
"parentid": 5
},
{
"id": 41,
"name": "Storage Design and Installation",
"parentid": 5
},
{
"id": 42,
"name": "Disaster Recovery Infrastructure",
"parentid": 5
},
{
"id": 43,
"name": "Redundancy Planning",
"parentid": 6
},
{
"id": 44,
"name": "Internet and WAN Connectivity Design",
"parentid": 6
},
{
"id": 45,
"name": "Cabling Design",
"parentid": 6
},
{
"id": 46,
"name": "Network Switching Design and Scale",
"parentid": 6
},
{
"id": 47,
"name": "Routing Design ",
"parentid": 6
},
{
"id": 48,
"name": "Firewall Design and Maintenance ",
"parentid": 6
},
{
"id": 49,
"name": "Fibre, Cat5, Cat6 and WiFi Planning and Installation",
"parentid": 6
},
{
"id": 50,
"name": "Access Network Design ",
"parentid": 6
},
{
"id": 51,
"name": "Automation Workflows and Software Development",
"parentid": 6
},
{
"id": 52,
"name": "Campus Network Design",
"parentid": 6
},
{
"id": 53,
"name": "ISP Network Design",
"parentid": 6
},
]
function populateList(list, pid) {
let l = document.getElementById(list);
l.innerHTML = "";
let topItem = document.createElement("option");
topItem.value = 0;
topItem.text = "--Select--";
l.appendChild(topItem);
let items = data.filter(item => item.parentid == pid);
items.forEach(function(item) {
let newItem = document.createElement("option");
newItem.value = item.id;
newItem.text = item.name;
l.appendChild(newItem);
})
}
function updateList(selList, thisList) {
if (thisList.value != 0) {
populateList(selList, Number(thisList.value));
} else {
let s = document.getElementById(selList);
s.value = 0;
triggerEvent(s, "onchange");
let sCopy = s.cloneNode(false);
let p = s.parentNode;
p.replaceChild(sCopy, s);
}
}
function triggerEvent(e, trigger) {
if ((e[trigger] || false) && typeof e[trigger] == 'function') {
e[trigger](e);
}
}
function loadList1() {
populateList("list1", 0);
}
window.onload = loadList1;
if (FullNameValue === '') {
setErrorFor(FullName, FullName 'Full Name cannot be blank');
}
::selection {
color: #fffef8;
background: #4197a9;
}
.container {
width: 750px;
margin-left: 0px;
text-align: center;
border-radius: 5px;
padding: 50px 35px 10px 35px;
}
.container header {
font-size: 35px;
font-weight: 600;
margin: 0 0 30px 0;
right: auto;
}
.container .form-outer {
width: 100%;
overflow: hidden;
margin-left: 300px;
}
.container .form-outer form {
display: flex;
width: 600%;
}
.form-outer form .page {
width: 25%;
transition: margin-left 0.3s ease-in-out;
}
.form-outer form .page .title {
text-align: left;
font-size: 25px;
font-weight: 500;
}
.form-outer form .page .field {
width: 800px;
height: 45px;
margin: 90px 0;
display: flex;
position: relative;
}
form .page .field .label {
position: absolute;
top: -30px;
font-weight: 500;
}
form .page .field input {
height: 80%;
width: 70%;
border: 1px solid #33343d;
border-radius: 5px;
padding-left: 15px;
font-size: 18px;
}
form .page .field select {
width: 80%;
padding-left: 10px;
font-size: 17px;
font-weight: 500;
}
form .page .field button {
width: 250px;
height: calc(100% + 5px);
border: none;
background: #4197a9;
margin-top: -10px;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s ease;
margin-left: 10px;
margin-right: 10px;
}
form .page .field button:hover {
background: #000;
}
form .page .btns button {
margin-top: -20px!important;
}
form .page .btns button.prev {
margin-right: 10px;
font-size: 17px;
}
form .page .btns button.next {
margin-left: 20px;
}
.container .progress-bar {
display: flex;
user-select: none;
left: 250px;
position: relative;
}
.container .progress-bar .step {
text-align: center;
width: 100%;
position: relative;
}
.container .progress-bar .step p {
font-weight: 500;
font-size: 18px;
color: #000;
margin-bottom: 8px;
}
.progress-bar .step .bullet {
height: 28px;
width: 28px;
border: 2px solid #000;
display: inline-block;
border-radius: 50%;
position: relative;
transition: 0.2s;
font-weight: 500;
font-size: 17px;
line-height: 24px;
}
.progress-bar .step .bullet.active {
border-color: #4197a9;
background: #4197a9;
}
.progress-bar .step .bullet span {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.progress-bar .step .bullet.active span {
display: none;
}
.progress-bar .step .bullet:before,
.progress-bar .step .bullet:after {
position: absolute;
content: '';
bottom: 11px;
right: -51px;
left: 50px;
height: 3px;
width: 100px;
background: black;
}
.progress-bar .step .bullet.active:after {
background: #4197a9;
transform: scaleX(0);
transform-origin: left;
animation: animate 0.3s linear forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet:after {
display: none;
}
.progress-bar .step p.active {
color: #d43f8d;
transition: 0.2s linear;
}
.progress-bar .step .check {
position: absolute;
left: 50%;
top: 70%;
font-size: 15px;
transform: translate(-50%, -50%);
display: none;
}
.progress-bar .step .check.active {
display: block;
color: #fffef8;
}
<div class="progress-bar">
<div class="step">
<p>
Name</p>
<div class="bullet">
<span>1</span>
</div>
<div class="check fas fa-check">
</div>
</div>
<div class="step">
<p>
Contact</p>
<div class="bullet">
<span>2</span>
</div>
<div class="check fas fa-check">
</div>
</div>
<div class="step">
<p>
Service</p>
<div class="bullet">
<span>3</span>
</div>
<div class="check fas fa-check">
</div>
</div>
<div class="step">
<p>
Submit</p>
<div class="bullet">
<span>4</span>
</div>
<div class="check fas fa-check">
</div>
</div>
</div>
<div class="form-outer">
<form action="#">
<div class="page slide-page">
<div class="title">
Lets get Started
</div>
<div class="form-control">
<div class="field">
<div class="label">
Full Name </div>
<input type="text" placeholder="FirstName SecondName " id="FullName" required>
</div>
<div class="field">
<div class="label">
Company Name</div>
<input type="text" placeholder="Name" id="comname" required>
</div>
<div class="field">
<button class="firstNext next" style="position: relative; left: 280px;">Next</button>
</div>
</div>
</div>
<div class="page">
<div class="title">
Contact Info:</div>
<div class="field">
<div class="label">
Email Address</div>
<input type="email" placeholder="name#example.com" required>
</div>
<div class="field">
<div class="label">
Phone Number</div>
<input type="number" placeholder="+61 412 345 678" required>
</div>
<div class="field btns">
<button class="prev-1 prev">Previous</button>
<button class="next-1 next">Next</button>
</div>
</div>
<div class="page">
<div class="title">
Services</div>
<div class="field">
<div class="label">
Service Category</div>
<select id="list1" onchange="updateList('list2', this);" required>
</select>
</div>
<div class="field">
<div class="label">
Service</div>
<select id="list2" onchange="updateList('list3', this);" required></select>
</div>
<div class="field">
<div class="label">
Description
</div>
<textarea name="Description" id="" cols="75" rows="100" style="height:60px;" placeholder="Provide a small description about the service you have selected."></textarea>
</div>
<div class="field btns">
<button class="prev-2 prev" style="position: relative; left: 30px;">Previous</button>
<button class="next-2 next" style="position: relative; left: 30px;">Next</button>
</div>
</div>
<div class="page">
<div class="title">
Submit</div>
<div class="field">
<div class="label">
Pefered method of Communication</div>
<select name="communica" id="" required>
<option value=""></option>
<option value="Phone">Phone </option>
<option value="Email ">Email </option>
<option value="SMS">SMS </option>
</select>
</div>
<div class="textsub" style="position: relative; left: 0; margin-right: 400px;">
We will reach out to you with some proposal and we will discuss which will be the best for you while hearing your feedback. You should recieve an email within 24 hours with what will be happening. Thank you
</div>
<div class="field btns">
<button class="prev-3 prev">Previous</button>
<button class="submit" style="left: 50px; position: relative;">Submit</button>
</div>
</div>
</form>
</div>
</div>
I have included the relevant code below.
<select id="list1" onchange="updateList('list2', this);" required >
</select>
</div>
<div class="field">
<div class="label">
Service</div>
<select id="list2" onchange="updateList('list3', this);" required ></select>
</div>

Background is blocking my login form to write ID Password

Please use the below code in notepad and save as html to see output. There is a login form and an animated background. After adding the background, I am not able to click the username box and not able to write anything in that. Tried changing position in CSS. But it is not happening.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> html,
body {
height: 100%;
margin: 0;
background: rgb(2, 0, 36);
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(149, 199, 20, 1) 0%, rgba(0, 212, 255, 1) 96%);
}
.myForm {
background-color: rgba(0, 0, 0, 0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input {
position: fixed;
border-radius: 0 15px 15px 0 !important;
}
input:focus {
outline: none;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.br-15 {
border-radius: 15px 0 0 15px !important;
}
.submit_btn {
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
z-index: 1;
}
</style> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <dvi class="container h-200"> <div class="d-flex justify-content-center"> <div class="card mt-5 col-md-4 animated bounceInDown myForm"> <div class="card-header"> <center> <h5>Admin Portal</h5> </center> </div> <form> <div class="card-body"> <div id="dynamic_container"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-user"></i></span> </div> <input type="text" placeholder="Login ID" class="form-control"/> </div> <div class="input-group mt-3"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-key"></i></span> </div> <input type="password" placeholder="Login Password" class="form-control"/> </div> </div> </div> <div class="card-footer"><center> <button class="btn btn-success btn-lg submit_btn"> <i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center> </div> </form> </div> </div> </dvi> <div id="particles-js"></div> <script type="text/javascript"> $.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function() {
particlesJS('particles-js', {
"particles": {
"number": {
"value": 80, "density": {
"enable": true, "value_area": 800
}
}
, "color": {
"value": "#ffffff"
}
, "shape": {
"type": "circle", "stroke": {
"width": 0, "color": "#000000"
}
, "polygon": {
"nb_sides": 6
}
, "image": {
"width": 100, "height": 100
}
}
, "opacity": {
"value": 0.5, "random": false, "anim": {
"enable": false, "speed": 1, "opacity_min": 0.1, "sync": false
}
}
, "size": {
"value": 5, "random": true, "anim": {
"enable": false, "speed": 40, "size_min": 0.1, "sync": false
}
}
, "line_linked": {
"enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
}
, "move": {
"enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": {
"enable": false, "rotateX": 600, "rotateY": 1200
}
}
}
, "interactivity": {
"detect_on": "canvas", "events": {
"onhover": {
"enable": true, "mode": "repulse"
}
, "onclick": {
"enable": true, "mode": "push"
}
, "resize": true
}
, "modes": {
"grab": {
"distance": 400, "line_linked": {
"opacity": 1
}
}
, "bubble": {
"distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3
}
, "repulse": {
"distance": 200
}
, "push": {
"particles_nb": 4
}
, "remove": {
"particles_nb": 2
}
}
}
, "retina_detect": true, "config_demo": {
"hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover"
}
}
);
}
);
</script>

You have an error in tag name replace dvi to div line 72.
Just change z-index in #particles-js to 0 and add class:
.container {
position: relative;
z-index: 1;
}

Just add the style:
.card {
z-index: 33;
}
because the input is being rendered behind the canvas.
.card
{
z-index: 33;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,body{
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm{
background-color: rgba(0,0,0,0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input{
position: fixed;
border-radius:0 15px 15px 0 !important;
}
input:focus{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
.br-15{
border-radius: 15px 0 0 15px !important;
}
.submit_btn{
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
z-index:1;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<dvi class="container h-200">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<center>
<h5>Admin Portal</h5>
</center>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user"></i></span>
</div>
<input type="text" placeholder="Login ID" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-key"></i></span>
</div>
<input type="password" placeholder="Login Password" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer"><center>
<button class="btn btn-success btn-lg submit_btn">
<i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center>
</div>
</form>
</div>
</div>
</dvi>
<div id="particles-js"></div>
<script type="text/javascript">
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
});
</script>
</body>
</html>
</body>
</html>

Replace this line
<div class="card mt-5 col-md-4 animated bounceInDown myForm" >
with this line
<div class="card mt-5 col-md-4 animated bounceInDown myForm" style="z-index: 999999;">

I have tested your HTML code on my browser and have fixed your problem by just adding a few lines of CSS in style tag. The problem was of z-index
.d-flex.justify-content-center {
position: relative;
z-index: 9999 !important;
}
You can add this css in your style tag and your problem is solved

No need to manage z-index. Just remove the z-index:1 in #particles-js css and move the whole <dvi> block below <div id="particles-js"></div>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,body{
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm{
background-color: rgba(0,0,0,0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input{
position: fixed;
border-radius:0 15px 15px 0 !important;
}
input:focus{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
.br-15{
border-radius: 15px 0 0 15px !important;
}
.submit_btn{
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div id="particles-js"></div>
<dvi class="container h-200">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<center>
<h5>Admin Portal</h5>
</center>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user"></i></span>
</div>
<input type="text" placeholder="Login ID" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-key"></i></span>
</div>
<input type="password" placeholder="Login Password" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer"><center>
<button class="btn btn-success btn-lg submit_btn">
<i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center>
</div>
</form>
</div>
</div>
</dvi>
<script type="text/javascript">
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
});
</script>
</body>
</html>
</body>
</html>

Categories

Resources