We Keep Coding

Multiple popup windows - information is the same in all of them - javascript

I have a problem with my modals. I'm creating my first portfolio website using js and the popup window is not working as I expect.
Everything works fine, only when I open the portfolio item and click "project details" each popup window has the same information about the item. Project name, category etc. do not change. What could be the problem? I will be grateful for your help.
and JavaScript, HTML and CSS:
const filterContainer = document.querySelector(".portfolio-filter"),
portfolioItemsContainer = document.querySelector(".portfolio-items"),
portfolioItems = document.querySelectorAll(".portfolio-item"),
popup = document.querySelector(".portfolio-popup"),
prevBtn = popup.querySelector(".pp-prev"),
nextBtn = popup.querySelector(".pp-next"),
closeBtn = popup.querySelector(".pp-close"),
projectDetailsContainer = popup.querySelector(".pp-details"),
projectDetailsBtn = popup.querySelector(".pp-project-details-btn");
let itemIndex, slideIndex, screenshots;
/* filter portfolio items*/
filterContainer.addEventListener("click", (event) => {
if (event.target.classList.contains("filter-item") &&
!event.target.classList.contains("active")) {
filterContainer.querySelector(".active").classList.remove("outer-shadow",
"active");
event.target.classList.add("active", "outer-shadow");
const target = event.target.getAttribute("data-target");
portfolioItems.forEach((item) => {
if (target == item.getAttribute("data-category") || target === 'all') {
item.classList.remove("hide");
item.classList.add("show");
} else {
item.classList.remove("show");
item.classList.add("hide");
}
})
}
})
portfolioItemsContainer.addEventListener("click", (event) => {
if (event.target.closest(".portfolio-item-inner")) {
const portfolioItem = event.target.closest(".portfolio-item-inner").
parentElement;
itemIndex = Array.from(portfolioItem.parentElement.children).indexOf(
portfolioItem);
screenshots = portfolioItems[itemIndex].querySelector(".portfolio-item-img img").getAttribute("data-screenshots");
screenshots = screenshots.split(",");
if (screenshots.length === 1) {
prevBtn.style.display = "none";
nextBtn.style.display = "none";
} else {
prevBtn.style.display = "block";
nextBtn.style.display = "block";
}
slideIndex = 0;
popupToggle();
popupSlideshow();
popupDetails();
}
})
closeBtn.addEventListener("click", () => {
popupToggle();
if (projectDetailsContainer.classList.contains("active")) {
popupDetails();
}
})
function popupToggle() {
popup.classList.toggle("open");
bodyScrollingToggle();
}
function popupSlideshow() {
const imgSrc = screenshots[slideIndex];
const popupImg = popup.querySelector(".pp-img");
popupImg.src = imgSrc;
popup.querySelector(".pp-counter").innerHTML = (slideIndex + 1) + " of " +
screenshots.length;
}
nextBtn.addEventListener("click", () => {
if (slideIndex === screenshots.length - 1) {
slideIndex = 0;
} else {
slideIndex++;
}
popupSlideshow();
})
prevBtn.addEventListener("click", () => {
if (slideIndex === 0) {
slideIndex = screenshots.length - 1
} else {
slideIndex--;
}
popupSlideshow();
})
function popupDetails() {
if (!portfolioItems[itemIndex].querySelector(".portfolio-item-details")) {
projectDetailsBtn.style.display = "none";
return;
}
projectDetailsBtn.style.display = "block";
const details = portfolioItems[itemIndex].querySelector(".portfolio-item-details").innerHTML;
popup.querySelector(".pp-project-details").innerHTML = details;
const title = portfolioItems[itemIndex].querySelector(".portfolio-item-title").innerHTML;
popup.querySelector(".pp-title h2").innerHTML = title;
const category = portfolioItems[itemIndex].getAttribute("data-category");
console.log(category);
popup.querySelector(".pp-project-category").innerHTML = category.split("-").join("-");
}
projectDetailsBtn.addEventListener("click", () => {
popupDetails();
})
function popupDetails() {
if (projectDetailsContainer.classList.contains("active")) {
projectDetailsBtn.querySelector("i").classList.remove("fa-minus");
projectDetailsBtn.querySelector("i").classList.add("fa-plus");
projectDetailsContainer.classList.remove("active");
projectDetailsContainer.style.maxHeight = 0 + "px"
} else {
projectDetailsBtn.querySelector("i").classList.remove("fa-plus");
projectDetailsBtn.querySelector("i").classList.add("fa-minus");
projectDetailsContainer.classList.add("active");
projectDetailsContainer.style.maxHeight = projectDetailsContainer.
scrollHeight + "px";
popup.scrollTo(0, projectDetailsContainer.offsetTop);
}
}
#import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Montserrat&family=Oooh+Baby&family=Poppins:wght#200;300;400;500;600&display=swap');
:root {
--bg-black-900: #f2f2fc;
--bg-black-100: #fdf9ff;
--bg-black-50: #e8dfec;
--text-black-900: #302e4d;
--text-black-700: #504e70;
--outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
--outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
--inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8;
--bg-opacity: rgba(255, 255, 255, 0.5);
}
.padd-10 {
padding-bottom: 30px;
}
body {
line-height: 1.5;
font-size: 16px;
font-family: 'Poppins' sans-serif;
}
body.stop-scrolling {
overflow-y: hidden;
}
* {
margin: 0;
padding: 0;
outline: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
::before,
::after {
box-sizing: border-box;
}
ul {
list-style: none;
}
.section {
background: var(--bg-black-900);
min-height: 100vh;
display: block;
padding: 0 30px;
opacity: 1;
}
.hidden {
display: none !important;
}
.padd-15 {
padding-left: 15px;
padding-right: 15px;
}
.container {
max-width: 1100px;
width: 100%;
margin: auto;
}
.containerr {
max-width: 1100px;
width: 100%;
margin: auto;
}
.section .containerr {
padding-top: 100px;
padding-bottom: 70px;
}
.section .container {
padding-top: 60px;
padding-bottom: 70px;
}
.section-title {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 60px;
}
.section-title h2 {
font-size: 40px;
color: var(--text-black-900);
font-weight: 700;
position: relative;
}
.section-title h2::before {
content: '';
height: 4px;
width: 50px;
background-color: var(--skin-color);
position: absolute;
top: 100%;
left: 0;
}
.section-title h2::after {
content: '';
height: 4px;
width: 25px;
background-color: var(--skin-color);
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
position: relative;
}
/* portfolio */
.portfolio .portfolio-filter {
padding: 0 15px;
flex: 0 0 100%;
max-width: 100%;
text-align: center;
margin-bottom: 20px;
}
.portfolio .section-title {
margin-bottom: 40px;
}
.portfolio .filter-item {
display: inline-block;
margin: 0 5px 10px;
padding: 5px 10px;
border-radius: 30px;
cursor: pointer;
font-weight: 500;
color: var(--text-black-700);
text-transform: capitalize;
font-size: 16px;
transition: all 0.3s ease;
}
.portfolio .filter-item:hover:not(.active) {
opacity: 0.6;
}
.portfolio .filter-item.active {
color: var(--skin-color);
}
.portfolio .portfolio-item {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
display: flex;
flex-wrap: wrap;
}
.portfolio .portfolio-item-inner {
padding: 15px;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
.portfolio .portfolio-item-details {
display: none;
}
.portfolio img {
border-radius: 5px;
width: 100%;
transition: all 0.3s ease;
}
.portfolioo-item-img {
position: relative;
}
.portfolio .portfolio-item.hide {
display: none;
}
.portfolio .portfolio-item.show {
display: block;
animation: fadeInTop 0.5s ease;
}
.portfolio .view-project {
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
color: var(--skin-color);
display: flex;
z-index: -1;
opacity: 0;
}
.portfolio-item-title {
margin-top: -18px;
}
.portfolio .portfolio-item-inner:hover img {
transform: translateY(-23px);
}
.portfolio .portfolio-item-inner:hover .view-project {
transform: translateY(-23px);
transition: all 0.3s ease;
opacity: 1;
}
.portfolio .portfolio-item-inner p {
font-size: 16px;
color: var(--text-black-700);
text-transform: capitalize;
}
.btn1 {
border-radius: 30px;
font-size: 16px;
font-weight: 500;
color: var(--text-black-900);
cursor: pointer;
padding: 0 15px;
top: 15px;
height: 40px;
line-height: 40px;
text-align: center;
}
.btn1:hover {
color: var(--skin-color);
cursor: pointer;
}
.nacisk {}
/*portfolio popup*/
.portfolio-popup {
background-color: var(--bg-black-900);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
overflow-y: scroll;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.portfolio-popup.open {
visibility: visible;
opacity: 1;
}
.portfolio-popup .pp-details {
max-width: 1350px;
width: calc(85% + 30px);
margin: auto;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.portfolio-popup .pp-details.active {
opacity: 1;
}
.portfolio-popup .pp-title {
padding: 0 15px;
}
.portfolio-popup .pp-title h2 {
font-size: 28px;
color: var(--text-black-900);
text-transform: capitalize;
font-weight: 600;
margin: 0 0 5px;
}
.portfolio-popup .pp-title p {
font-size: 14px;
font-weight: 600;
color: var(--text-black-700);
margin: 0 0 15px;
border-bottom: 1px solid rgb(230, 228, 228);
padding-bottom: 10px;
}
.portfolio-popup .pp-title p span {
font-weight: 400;
text-transform: capitalize;
}
.portfolio-popup .pp-details-inner {
padding: 30px 0;
}
.portfolio-popup .pp-project-details h3 {
font-size: 20px;
font-weight: 600;
color: var(--text-black-700);
margin: 0 0 15px;
text-transform: capitalize;
}
.portfolio-popup .description p {
font-size: 16px;
color: var(--text-black-700);
line-height: 26px;
margin: 0;
}
.portfolio-popup .description {
flex: 0 0 65%;
max-width: 65%;
padding: 0 15px;
}
.portfolio-popup .info {
flex: 0 0 35%;
max-width: 35%;
padding: 0 50px;
}
.portfolio-popup .info ul li {
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 16px;
}
.portfolio-popup .info ul li span {
font-weight: 400;
}
.portfolio-popup .info ul li a {
color: var(--skin-color);
}
.portfolio-popup .info ul li:last-child {
margin-bottom: 0;
}
.portfolio-popup .separator {
height: 1px;
width: 100%;
display: block;
background-color: rgb(230, 228, 228);
}
.portfolio-popup .pp-img {
max-width: 100%;
width: auto;
height: auto;
padding: 10px;
border-radius: 5px;
}
.portfolio-popup .pp-main {
min-height: 100vh;
max-width: 1350px;
width: 85%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.portfolio-popup .pp-main-inner {
padding: 70px 0 50px;
position: relative;
}
.portfolio-popup .pp-project-details-btn {
position: absolute;
left: 0;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
color: var(--text-black-900);
cursor: pointer;
padding: 0 15px;
top: 15px;
height: 40px;
line-height: 40px;
}
.portfolio-popup .pp-project-details-btn:hover {
color: var(--skin-color);
}
.portfolio-popup .pp-project-details-btn i {
margin-left: 5px;
}
.portfolio-popup .pp-close {
position: absolute;
right: 0;
border-radius: 50%;
text-align: center;
line-height: 40px;
font-size: 35px;
height: 40px;
width: 40px;
top: 15px;
color: var(--text-black-900);
cursor: pointer;
}
.portfolio-popup .pp-close:hover {
color: var(--skin-color);
}
.portfolio-popup .pp-counter {
position: absolute;
right: 0;
height: 40px;
line-height: 40px;
bottom: 5px;
font-size: 16px;
color: var(--text-black-700);
}
.portfolio-popup .pp-prev,
.portfolio-popup .pp-next {
position: fixed;
top: 50%;
height: 40px;
width: 40px;
cursor: pointer;
text-align: center;
font-size: 20px;
z-index: 1010;
color: var(--text-black-900);
opacity: 0.6;
}
.portfolio-popup .pp-prev:hover,
.portfolio-popup .pp-next:hover {
opacity: 1;
}
.portfolio-popup .pp-prev i,
.portfolio-popup .pp-next i {
line-height: 40px;
}
.portfolio-popup .pp-prev i {
transform: rotate(180deg);
}
.portfolio-popup .pp-prev {
left: 15px;
}
.portfolio-popup .pp-next {
right: 15px;
}
<!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">
<title>Bartek Lisowski</title>
<!--css file-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="color-1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
<!-- Main Container Start -->
<div class="main-container">
<!-- Portfolio Section Start-->
<section class="portfolio section" id="portfolio">
<div class="container">
<div class="row">
<div class="section-title padd-15">
<h2>Portfolio</h2>
</div>
</div>
<div class="row">
<div class="portfolio-heading padd-15 padd-10">
<h2>My Last Projects : </h2>
</div>
<div class="portfolio-filter padd-15 ">
<span class="filter-item outer-shadow active" data-target="all">All</span>
<span class="filter-item" data-target="web-application">web-application</span>
<span class="filter-item" data-target="photoshop">photoshop</span>
<span class="filter-item" data-target="mobile-app">mobile app</span>
<span class="filter-item" data-target="e-commerce">e commerce</span>
</div>
</div>
<!--- Portfolio item starts-->
<div class="row portfolio-items">
<!--portfolio item start-->
<div class="portfolio-item" data-category="photoshop">
<div class="portfolio-item-inner outer-shadow">
<div class="portfolio-item-img">
<img src="https://picsum.photos/200" alt="portfolio" data-screenshots="https://picsum.photos/200">
<!-- project button-->
<span class="view-project">view project</span>
</div>
<p class="portfolio-item-title">Web designs</p>
<!-- portfolio item details start-->
<div class="portfolio-item-details">
<div class="row">
<div class="description">
<h3>Project Brief:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?
</p>
</div>
<div class="info">
<h3>Project info</h3>
<ul>
<li>Date - <span>2020</span></li>
<li>Client - <span>xyz</span></li>
<li>Tools - <span>html, css, js</span></li>
<li>Web - <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
<!-- portfolio item details end-->
</div>
</div>
<!--portfolio item end-->
<!--portfolio item start-->
<div class="portfolio-item" data-category="mobile-app">
<div class="portfolio-item-inner outer-shadow">
<div class="portfolio-item-img">
<img src="https://picsum.photos/200" alt="portfolio" data-screenshots="https://picsum.photos/200">
<!-- project button-->
<span class="view-project">view project</span>
</div>
<p class="portfolio-item-title">Photosho Projects</p>
<!-- portfolio item details start-->
<div class="portfolio-item-details">
<div class="row">
<div class="description">
<h3>Project Brief:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?
</p>
</div>
<div class="info">
<h3>Project info</h3>
<ul>
<li>Date - <span>2020</span></li>
<li>Client - <span>xyz</span></li>
<li>Tools - <span>html, css, js</span></li>
<li>Web - <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
<!-- portfolio item details end-->
</div>
</div>
<!--portfolio item end-->
<!-- portfolio item button start-->
<!-- portfolio item button end-->
</div>
</section>
<!--portfolio popup start-->
<div class="pp portfolio-popup">
<div class="pp-details">
<div class="pp-details-inner">
<div class="pp-title">
<h2>personal portfolio</h2>
<p>Category - <span class="pp-project-category">Web Application</span></p>
</div>
<div class="pp-project-details">
<div class="row padd-15">
<div class="description">
<h3>Project Brief:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?
</p>
</div>
<div class="info">
<h3>Project info</h3>
<ul>
<li>Date - <span>2020</span></li>
<li>Client - <span>xyz</span></li>
<li>Tools - <span>html, css, js</span></li>
<li>Web - <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="separator">
</div>
<div class="pp-main">
<div class="pp-main-inner">
<div class="pp-project-details-btn outer-shadow in-shadow">Project Detils <i class="fas fa-plus"></i></div>
<div class="pp-close outer-shadow in-shadow">×</div>
<img src="https://picsum.photos/200" alt="img" class="pp-img outer-shadow">
<div class="pp-counter">1 of 6</div>
</div>
<div class="pp-loader">
<div></div>
</div>
<!-- pp navigation-->
<div class="pp-prev"><i class="fas fa-play"></i></div>
<div class="pp-next"><i class="fas fa-play"></i></div>
</div>
</div>
<!--portfolio popup end-->
<!-- Portfolio Section End-->
</div>
<!-- Main Content End-->
</div>
<!-- Main Container End -->
<!-- JS Files-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>

Related

I want the canvas to show behind the website not over it. I have tried using z index and that does not work. I want to be able to see my actual website while moving the cursor over things. So I need the cursor to show on the website. It just blocks out my whole section. How can I get this to work correctly?
const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelectorAll('.nav__link')
navToggle.addEventListener('click', () => {
document.body.classList.toggle('nav-open');
});
navLinks.forEach(link => {
link.addEventListener('click', () => {
document.body.classList.remove('nav-open');
})
})
// Canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let spots = [];
let hue = 0;
const mouse = {
x: undefined,
y: undefined
}
canvas.addEventListener('mousemove', function (event) {
mouse.x = event.x;
mouse.y = event.y;
for (let i = 0; i < 3; i++) {
spots.push(new Particle());
}
});
class Particle {
constructor() {
this.x = mouse.x;
this.y = mouse.y;
this.size = Math.random() * 2 + 0.1;
this.speedX = Math.random() * 2 - 1;
this.speedY = Math.random() * 2 - 1;
this.color = 'hsl(' + hue + ', 100%, 50%)';
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.1) this.size -= 0.03;
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
function handleParticle() {
for (let i = 0; i < spots.length; i++) {
spots[i].update();
spots[i].draw();
for (let j = i; j < spots.length; j++) {
const dx = spots[i].x - spots[j].x;
const dy = spots[i].y - spots[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 90) {
ctx.beginPath();
ctx.strokeStyle = spots[i].color;
ctx.lineWidth = spots[i].size / 10;
ctx.moveTo(spots[i].x, spots[i].y);
ctx.lineTo(spots[j].x, spots[j].y);
ctx.stroke();
}
}
if (spots[i].size <= 0.3) {
spots.splice(i, 1); i--;
}
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
handleParticle();
hue++;
requestAnimationFrame(animate);
}
window.addEventListener('resize', function () {
canvas.width = innerWidth;
canvas.height = innerHeight;
init();
})
window.addEventListener('mouseout', function () {
mouse.x = undefined;
mouse.y = undefined;
})
animate()
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
overflow-x: hidden;
}
body {
position: relative
}
/* Custom Properties */
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-light: #fff;
--clr-dark: #303030;
--clr-accent: #16e0bd;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25),
0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}
#media (min-width: 800px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
/* General styles */
html {
scroll-behavior: smooth;
}
body {
background: var(--clr-light);
color: var(--clr-dark);
margin: 0;
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
}
#canvas {
width: 100%;
height: 100%;
border: 2px solid red;
z-index: -1;
}
/* #canvas {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
} */
section {
padding: 5em 2em;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
/* Buttons */
.btn {
display: inline-block;
padding: .5em 2em;
background: var(--clr-accent);
color: var(--clr-dark);
text-decoration: none;
cursor: pointer;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: var(--fw-bold);
transition: transform 200ms ease-in-out;
margin: 15px;
border-radius: 8px;
border-style: groove;
border-width: 3px;
border-color: var(--clr-accent);
}
.btn2 {
display: inline-block;
padding: .4em 1em;
background: var(--clr-accent);
color: var(--clr-dark);
text-decoration: none;
cursor: pointer;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: var(--fw-bold);
transition: transform 200ms ease-in-out;
margin: 15px;
border-radius: 8px;
border-style: groove;
border-width: 3px;
border-color: var(--clr-accent);
}
.btn2:hover {
transform: scale(1.2);
}
.btn:hover {
transform: scale(1.2);
}
/* Typography */
h1,
h2,
h3 {
line-height: 1;
margin: 0;
}
h1 {
font-size: var(--fs-h1)
}
h2 {
font-size: var(--fs-h2)
}
h3 {
font-size: var(--fs-h3)
}
.section__title {
margin-bottom: .25em;
}
.section__title--intro {
font-weight: var(--fw-reg);
}
.section__title--intro strong {
display: block;
}
.section__subtitle {
margin: 0;
font-size: var(--fs-h3);
}
.section__subtitle--intro,
.section__subtitle--about {
background: var(--clr-accent);
padding: .25em 1em;
font-family: var(--ff-secondary);
margin-bottom: 1em;
}
.section__subtitle--work {
color: var(--clr-accent);
font-weight: var(--fw-bold);
margin-bottom: 2em;
}
/* header */
header {
display: flex;
justify-content: space-between;
padding: 1em;
}
.logo {
max-width: 150px;
z-index: 100;
}
.nav {
position: fixed;
background: var(--clr-dark);
color: var(--clr-light);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
transform: translateX(100%);
transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
}
.nav__list {
list-style: none;
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin: 0;
padding: 0;
}
.nav__link {
color: inherit;
font-weight: var(--fw-bold);
font-size: var(--fs-h2);
text-decoration: none;
}
.nav__link:hover {
color: var(--clr-accent);
}
.nav-toggle {
padding: .5em;
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
right: 1em;
top: 1em;
z-index: 1000;
}
.nav-open .nav {
transform: translateX(0);
}
.nav-open .nav-toggle {
position: fixed;
}
.nav-open .hamburger {
transform: rotate(.625turn);
}
.nav-open .hamburger::before {
transform: rotate(90deg) translateX(-6px);
}
.nav-open .hamburger::after {
opacity: 0;
}
.hamburger {
display: block;
position: relative;
}
.hamburger,
.hamburger::before,
.hamburger::after {
background: var(--clr-accent);
width: 2em;
height: 3px;
border-radius: 1em;
transition: transform 250ms ease-in-out;
}
.hamburger::before,
.hamburger::after {
content: '';
position: absolute;
left: 0;
right: 0;
}
.hamburger::before {
top: 6px;
}
.hamburger::after {
bottom: 6px;
}
/* Intro section */
.intro {
position: relative;
}
.intro__img {
box-shadow: var(--bs);
border-radius: 8px;
}
.section__subtitle--intro {
display: inline-block;
}
#media (min-width: 600px) {
.intro {
display: grid;
width: min-content;
margin: 0 auto;
grid-column-gap: 1em;
grid-template-areas:
"img title"
"img subtitle";
grid-template-columns: min-content max-content;
}
.intro__img {
grid-area: img;
min-width: 300px;
position: relative;
z-index: 2;
}
.section__subtitle--intro {
align-self: start;
grid-column: -1 / 1;
grid-row: 2;
text-align: right;
position: relative;
left: -1.5em;
width: calc(100% + 1.5em);
}
}
/* My services section */
.my-services {
background-color: var(--clr-dark);
color: var(--clr-light);
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
.section__title--services {
position: relative;
}
.section__title--services::after {
content: '';
display: block;
width: 2em;
height: 1px;
margin: 0.5em auto 1em;
background: var(--clr-light);
opacity: 0.25;
}
.service {
max-width: 500px;
margin: 0 auto;
}
.service p:hover {
color: var(--clr-accent);
}
.service p {
font-family: var(--ff-secondary);
font-size: 15px;
}
#media (min-width: 800px) {
.services {
display: flex;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.service+.service {
margin-left: 2em;
}
}
.about-me {
max-width: 1000px;
margin: 0 auto;
margin-top: -3%;
margin-bottom: -3%;
}
.about-me__body {
font-family: var(--ff-secondary);
text-align: center;
}
.about-me__img {
box-shadow: var(--bs);
border-radius: 8px;
}
#media(min-width: 600px) {
.about-me {
display: grid;
grid-template-columns: 1fr 200px;
grid-template-areas:
"title img"
"subtitle img"
"text img";
grid-column-gap: 2em;
}
.section__title--about {
grid-area: title;
}
.section__subtitle--about {
grid-column: 1 / -1;
grid-row: 2;
position: relative;
left: -1em;
width: calc(100% + 2em);
padding-left: 1em;
padding-right: calc(200px + 4em);
}
.about-me__img {
grid-area: img;
position: relative;
z-index: 2;
}
}
/* My Work */
.my-work {
background-color: var(--clr-dark);
color: var(--clr-light);
text-align: center;
padding-top: 30px;
padding-bottom: 40px;
}
.portfolio {
display: grid;
margin-left: 50px;
column-gap: 20px;
row-gap: 30px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
#media(min-width: 200px) {
.portfolio__item {
text-align: center;
padding-right: 50%;
}
}
#media(min-width: 250px) {
.portfolio__item {
text-align: center;
}
}
#media(min-width: 350px) {
.portfolio__item {
text-align: center;
padding-right: 60px
}
}
.item-header1,
.item-header2,
.item-header3,
.item-header4,
.item-header5,
.item-header6 {
text-align: center;
color: white;
display: flex;
justify-content: center;
}
.item-header1:hover,
.item-header2:hover,
.item-header3:hover,
.item-header4:hover,
.item-header5:hover,
.item-header6:hover {
color: var(--clr-accent);
}
.text1,
.text2,
.text3 {
opacity: 0;
position: absolute;
text-align: center;
font-weight: var(--fw-bold);
margin-top: 10%;
border: solid 2px;
border-radius: 50%;
padding: 20px;
border-color: aqua;
background-color: var(--clr-dark);
width: 130px;
height: 130px;
font-size: 20px;
color: var(--clr-accent);
}
.text4,
.text5,
.text6 {
opacity: 0;
position: absolute;
text-align: center;
font-weight: var(--fw-bold);
margin-top: 40%;
border: solid 2px;
border-radius: 50%;
padding: 20px;
border-color: aqua;
background-color: var(--clr-dark);
width: 130px;
height: 130px;
font-size: 20px;
color: var(--clr-accent);
}
.text1:hover,
.text2:hover,
.text3:hover,
.text4:hover,
.text5:hover,
.text6:hover {
transition:
transform 750ms cubic-bezier(.5, 0, .5, 1),
opacity 250ms linear;
opacity: 20;
}
.link {
text-decoration: none;
color: var(--clr-accent);
text-align: center;
}
.text1,
.text4 {
margin-left: 7%;
}
.text2,
.text5 {
margin-left: 38%;
}
.text3,
.text6 {
margin-left: 69%;
}
.portfolio__item {
overflow: hidden;
text-decoration: none;
}
.portfolio__img {
transition:
transform 750ms cubic-bezier(.5, 0, .5, 1),
opacity 250ms linear;
border-radius: 8px;
border-style: double;
border-color: var(--clr-accent);
border-width: 10px;
}
.portfolio__item:focus {
position: relative;
z-index: 2;
}
.portfolio__img:hover,
.portfolio__item:focus .portfolio__img {
opacity: .5;
}
/* footer */
.footer {
background: #111;
color: var(--clr-accent);
text-align: center;
padding: 2.5em 0;
font-size: var(--fs-h3);
}
.footer a {
color: inherit;
text-decoration: none;
}
.footer__link {
font-weight: var(--fw-bold);
}
.footer__link:hover,
.social-list__link:hover {
opacity: .7;
}
.footer__link:hover {
text-decoration: underline;
}
.social-list {
list-style: none;
display: flex;
justify-content: center;
margin: 2em 0 0;
padding: 0;
}
.social-list__item {
margin: 0 .5em;
}
.social-list__link {
padding: .5em;
}
/* Individual portfolio item styles */
.portfolio-item-individual {
padding: 0 2em 2em;
max-width: 1000px;
margin: 0 auto;
}
.portfolio-item-individual p {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Megan Portfolio Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Canvas -->
<section height=90vh>
<canvas id="canvas" width="100%" height="100vh" z-index="-1">
<header height=10vh z-index="6">
</header>
<!-- (anything in here like social icons etc give them higher z-index then 5) -->
<header>
<div class="logo">
<img src="img/DevMegan2.png" alt="">
</div>
<!-- NAVBAR -->
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">My Skills</li>
<li class="nav__item">About me</li>
<li class="nav__item">My Work</li>
</ul>
</nav>
</header>
<!-- Introduction -->
<section class="intro" z-index="1000" id="home">
<h1 class="section__title section__title--intro">
Hi, I am <strong>Megan Lynn</strong>
</h1>
<p class="section__subtitle section__subtitle--intro">Full-Stack Developer</p>
<img src="img/me.jpg" width="770" alt="a picture of Megan smiling" class="intro__img">
</section>
</canvas>
</section>
<!-- My services -->
<section class="my-services" id="services">
<h2 class="section__title section__title--services">My Skills</h2>
<div class="services">
<div class="service">
<h3>Programming Languages</h3>
<p>Skilled in programming with back-end languages such as Python, C#, and C++. Can manage data
held
in
relational
databases using SQL. Have experience in front-end programming with JavaScript, HTML, and
CSS.
</p>
</div> <!-- / service -->
<div class="service">
<h3>Tools & Technologies</h3>
<p>Experienced in the operating systems, Windows, Linux, and macOS. Know how to use
shell scripting. Have experience with using frameworks in Visual Studio Code such as, .NET
and
ASP.NET
MVC. Have some experience using React. </p>
</div> <!-- / service -->
<div class="service">
<h3>Full-Stack Development</h3>
<p>Have a variety of different skills and enjoy utilizing the back and front end to create Full
Stack applications and programs. Have made projects that connect to a back-end API and
database
</p>
</div> <!-- / service -->
</div> <!-- / services -->
My Work
</section>
<!-- About me -->
<section class="about-me" id="about">
<h2 class="section__title section__title--about">Who I am</h2>
<p class="section__subtitle section__subtitle--about">Developer based out of the East Coast, US</p>
<div class="about-me__body">
<p>Hello! Thank you for visiting my page! My name is Megan and I am currently a student in college.
I
will
be graduating with my Bachelor's degree in both Computer Science and CIT & Cybersecurity as a
double
major
in December, 2022. I maintain a 4.0 GPA. I am pursuing a career as a Software
Developer/Engineer.
</p>
<p>I genuinely enjoy programming and solving problems. I am passionate about Software Development. I
spend
all of my free time learning as much as I can about it. I am getting better by the day. Practice
makes
perfect! I am extremely motivated and I believe anybody can do or solve anything if you really
put
your
mind
to it!</p>
</div>
<img src="img/me2.jpg" class="about-me__img">
</section>
<!-- My Work -->
<section class="my-work" id="work">
<h2 class="section__title section__title--work">My Projects</h2>
<p class="section__subtitle section__subtitle--work">A selection of my range of work</p>
<div class="portfolio">
<!-- Portfolio item 01 -->
<a href="https://loancalculate.azurewebsites.net/Home/App" target="blank" class="portfolio__item">
<header class="item-header1">
<h3>Loan Calculator</h3>
</header>
<img src="img/LoanCalc.PNG" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text1"><a href="https://loancalculate.azurewebsites.net/Home/App" class="link"
target="_blank">Open
Project</a>
</div>
<!-- Portfolio item 02 -->
<a href="https://github.com/meganlynn21/Palindrome_Checker" target="blank" class="portfolio__item">
<header class="item-header2">
<h3>Palindrome Checker</h3>
</header>
<img src="img/palindrome.png" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text2"><a href="https://github.com/meganlynn21/Palindrome_Checker" class="link"
target="_blank">Open
Project</a>
</div>
<!-- Portfolio item 03 -->
<a href="https://github.com/meganlynn21/Password-Validator" target="blank" class="portfolio__item">
<header class="item-header3">
<h3>Password Validator</h3>
</header>
<img src="img/psswrd-validator.PNG" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text3"><a href="https://github.com/meganlynn21/Password-Validator" class="link"
target="_blank">Open
Project</a>
</div>
<!-- Portfolio item 04 -->
<a href="https://github.com/meganlynn21/Real-Estate-Calculator" target="blank" class="portfolio__item">
<header class="item-header4">
<h3>Real Estate Calculator</h3>
</header>
<img src="img/Real-Estate-Img.PNG" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text4"><a href="https://github.com/meganlynn21/Real-Estate-Calculator" class="link"
target="_blank">Open
Project</a>
</div>
<!-- Portfolio item 05 -->
<a href="https://github.com/meganlynn21/ATM" target="blank" class="portfolio__item">
<header class="item-header5">
<h3>ATM</h3>
</header>
<img src="img/atm.png" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text5"><a href="https://github.com/meganlynn21/ATM" class="link" target="_blank">Open
Project</a>
</div>
<!-- Portfolio item 06 -->
<a href="https://github.com/meganlynn21/shopping_list" target="blank" class="portfolio__item">
<header class="item-header6">
<h3>Shopping List</h3>
</header>
<img src="img/shopping-list.png" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text6"><a href="https://github.com/meganlynn21/shopping_list" class="link" target="_blank">Open
Project</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<!-- My email -->
#rosettastone0203
<ul class="social-list">
<li class="social-list__item"><a class="social-list__link"
href="https://www.linkedin.com/in/megan-keyes-a81146224" target="blank"><i
class="fab fa-linkedin fa-2x"></i></a>
</li>
<li class="social-list__item"><a class="social-list__link" href="https://twitter.com/meganlynn22"
target="blank"> <i class="fab fa-twitter-square fa-2x"></i></a></li>
<li class="social-list__item"><a class="social-list__link" href="https://github.com/meganlynn21"
target="blank"><i class="fab fa-github fa-2x"></i></a></li>
</ul>
</footer>
<script src="js/index.js"></script>
</body>
</html>

I used position: fixed on the section that the canvas element was in and then I used position: relative on the elements that were not clickable and it works now

I have a page with multiple MCQ cards and every one should have an option to add another option if necessary but my current function adds this option to all the cards
Here is my fiddle https://jsfiddle.net/abdotamer3/s57jauxw/11/
My function:
$(".TextInputSimpleInputPlaceholder").on("click", function () {
var clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
clone.className = "radioListItemPrimaryContent";
clone.appendTo(".radioListItemView");
});
My cloning function:
function cloneQuestion() {
var question = document.querySelector(".questions");
var clone = question.cloneNode(true);
var numItems = $(".questions").closest(".radioListItemPrimaryContent").length;
var radioButtons = question.querySelectorAll(".radioItemToggle");
console.log(numItems);
clone.querySelector(".questionMainTextArea").value = "Untitled Question";
var addBtn = document.querySelector(".addQuestionBtnRow");
var tbody = addBtn.parentNode;
tbody.insertBefore(clone, addBtn);
}

Generally you should add scope to your selector:
var $card = $(this).closest('.card');
$clone.appendTo($(".radioListItemView", $card));
Also Option numbering should be per card I think.
$(".TextInputSimpleInputPlaceholder").on("click", function () {
var $card = $(this).closest('.card');
var numItems = $(".radioListItemPrimaryContent", $card).length;
var $clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
$clone.className = "radioListItemPrimaryContent";
$clone.find(".optionText").val("Option " + numItems);
numItems++;
$clone.appendTo($(".radioListItemView", $card));
});
.card {
border-radius: .5rem !important;
width: 45rem;
}
.card-body {
padding: 1rem 1.5rem !important;
}
.form_frame td {
padding-top: 12px;
}
.FormHeaderBorder {
background-color: #673ab7;
color: rgba(255, 255, 255, 1);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 10px;
left: -1px;
position: absolute;
top: -1px;
width: calc(100% + 2px);
z-index: 1;
}
.card-selector {
display: flex;
height: calc(100% + 2px);
left: -1px;
position: absolute;
bottom: -1px;
width: 8px;
}
.card-selector-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-selector-color {
background-color: transparent;
flex-grow: 1;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
position: relative;
}
.viewItemActive .card-selector-color {
background-color: #4285f4;
}
.viewItemActive .questionMainTextAreaContent {
display: block;
}
.viewItemInactive .questionMainTextAreaContent {
display: none;
}
.questionMainTextAreaContent {
padding-top: 16px;
background-color: #f8f9fa;
border-radius: 4px 4px 0 0;
width: 60%;
}
.questionMainTextAreaContentArea {
padding-top: 0;
padding-bottom: 0;
display: flex;
position: relative;
}
.viewItemActive .questionHeader {
display: none;
}
.viewItemInactive .questionHeader {
display: block;
}
.questionMainTextArea {
height: 24px;
font-family: 'Google Sans', Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
letter-spacing: .1px;
line-height: 24px;
font-weight: 400;
color: #000;
flex-grow: 1;
flex-shrink: 1;
background-color: transparent;
border: none;
box-sizing: content-box;
caret-color: #1a73e8;
display: block;
min-height: 24px;
margin: 0;
outline: none;
overflow-y: visible;
overflow-x: hidden;
padding: 0 16px 16px;
resize: none;
white-space: pre-wrap;
z-index: 1;
}
.questionMainTextAreaUnderline {
background-color: #80868b;
bottom: 0;
height: 1px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
.questionMainTextArea:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #fff;
transition: width .3s ease 0s, left .3s ease 0s;
width: 0;
}
.questionMainTextArea:hover:after {
width: 100%;
left: 0;
}
.questionBodyRadioBody {
margin-right: 0;
margin-bottom: 24px;
}
.radioListItemView {
min-height: 48px;
background: #fff;
}
.radioListItemPrimaryContent {
-moz-box-align: start;
display: flex;
align-items: center;
}
.radioListItemGutter {
-moz-box-align: center;
align-items: center;
display: flex;
flex-shrink: 0;
height: 48px;
}
.radioListTypeIndicator {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #202124;
margin-right: 10px;
}
input.radioItemToggle {
-moz-user-select: none;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 3px;
box-sizing: content-box;
cursor: pointer;
display: inline-block;
height: 20px;
outline: none;
position: relative;
vertical-align: middle;
width: 20px;
z-index: 0;
}
.radioListItemEditRegion {
padding-right: 2.5rem;
min-height: 48px;
display: flex;
flex: 1;
-moz-box-flex: 1;
flex-wrap: wrap;
}
.radioListValue {
flex-grow: 1;
-moz-box-align: center;
align-items: center;
display: flex;
}
.radioListMorseValue {
flex-grow: 1;
}
.radioListItemValueInput {
margin-top: 8px;
width: 100%;
-moz-user-select: none;
display: inline-block;
outline: none;
}
.TextInputSimpleInputContentArea {
display: flex;
}
.radioListItemValueInput .exportInput {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #202124;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.TextInputSimpleInput {
flex-grow: 1;
flex-shrink: 1;
background-color: transparent;
border: none;
display: block;
font: 400 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
margin: 0;
min-width: 0;
outline: none;
padding: .125em 0;
z-index: 0;
}
.viewItemActive .radioListItemPrimaryContent:hover .exportUnderline,
.TextInputSimpleInputUnderline {
visibility: visible;
}
.viewItemActive .radioListItemPrimaryContent:focus-within .exportUnderline,
.TextInputSimpleInputUnderline {
visibility: visible;
}
.radioListItemValueInput .exportUnderline {
margin-top: 4px;
}
.TextInputSimpleInputUnderline {
background-color: rgba(0, 0, 0, 0.12);
height: 2px;
margin: 0;
padding: 0;
width: 100%;
visibility: hidden;
}
.radioListItemGhostItemInput {
flex-basis: auto;
margin-top: 7px;
width: auto;
display: inline-block;
outline: none;
}
.TextInputSimpleInputMainContent {
position: relative;
vertical-align: top;
}
.TextInputSimpleInputPlaceholder {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #70757a;
}
.viewItemActive .itemHideInactive {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card MCQuestion viewItemActive">
<div class="row g-0">
<div class="col">
<div class="card-body">
<div class="questionMainTextAreaContent">
<div class="questionMainTextAreaContentArea">
<textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
<div class="questionMainTextAreaUnderline"></div>
<div class="questionMainTextAreaFocusUnderline"></div>
</div>
</div>
<div class="card-title questionHeader"></div>
<div class="questionBodyRadioBody">
<div class="radioListItemView">
<div class="radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" name="radio-0" class="radioItemToggle">
</div>
</div>
<div class="radioListItemEditRegion">
<div class="radioListValue">
<div class="radioListMorseValue">
<span>
<div class="radioListItemValueInput">
<div class="TextInputSimpleInputContentArea">
<input class="TextInputSimpleInput exportInput optionText" type="text" value="Option 1" tabindex="0">
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="itemHideInactive radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" class="radioItemToggle" aria-checked="false" disabled>
</div>
</div>
<div class="radioListItemGhostItemInput">
<div class="TextInputSimpleInputMainContent">
<div class="TextInputSimpleInputPlaceholder" role="button">
<div class="TextInputSimpleInputContentArea">
<div class="TextInputSimpleInput exportInput optionText">
Add option
</div>
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card MCQuestion viewItemActive">
<div class="row g-0">
<div class="col">
<div class="card-body">
<div class="questionMainTextAreaContent">
<div class="questionMainTextAreaContentArea">
<textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
<div class="questionMainTextAreaUnderline"></div>
<div class="questionMainTextAreaFocusUnderline"></div>
</div>
</div>
<div class="card-title questionHeader"></div>
<div class="questionBodyRadioBody">
<div class="radioListItemView">
<div class="radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" name="radio-0" class="radioItemToggle">
</div>
</div>
<div class="radioListItemEditRegion">
<div class="radioListValue">
<div class="radioListMorseValue">
<span>
<div class="radioListItemValueInput">
<div class="TextInputSimpleInputContentArea">
<input class="TextInputSimpleInput exportInput optionText" type="text" value="Option 1" tabindex="0">
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</span>
</div>
</div>
</div>
<div class="radioListMorselRoot itemHideInactive">
<div class="radioListMorselDeleteButton" aria-label="Remove Option">
<span class="ButtonContent">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#5f6368" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="itemHideInactive radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" class="radioItemToggle" aria-checked="false" disabled>
</div>
</div>
<div class="radioListItemGhostItemInput">
<div class="TextInputSimpleInputMainContent">
<div class="TextInputSimpleInputPlaceholder" role="button">
<div class="TextInputSimpleInputContentArea">
<div class="TextInputSimpleInput exportInput optionText">
Add option
</div>
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I'm not sure if it's a bug, but I see whitespace (sometimes) when looking at the responsive side of things in the chrome browser. I said sometimes because my website manages to fix itself when I refresh. This problem only happens when working with responsive side.The image is how it looks like to me.
const fade = document.querySelectorAll('.fade');
window.addEventListener('scroll', checkBoxes);
checkBoxes();
function checkBoxes() {
const triggerBottom = window.innerHeight / 3.5 * 4;
fade.forEach(fade => {
const fadeTop = fade.getBoundingClientRect().top;
if(fadeTop < triggerBottom) {
fade.classList.add('show');
} else {
fade.classList.remove('show');
}
})
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
:root {
--shade-background: #FAFAFA;
}
ul {
list-style-type: none;
}
body {
background-color: #fff;
overflow-x: hidden;
width: 100%;
margin: 0;
padding: 0;
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
.intro-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.intro-container::before {
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url(../images/airpods.jpg);
background-size: cover;
background-position:center;
opacity: .9.5;
}
.intro-container .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
z-index: 1;
}
.content h1 {
font-size: 5em;
font-weight: 600;
margin-bottom: 10px;
}
.content p {
margin-bottom: 20px;
font-size: .9rem;
margin-right: 5px;
}
/* MAIN CONTENT*/
.chapternav {
background: rgba(245,245,247,0.7);
padding: 0;
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
height: 100px;
z-index: 9987;
width: 100%;
position: relative;
overflow: hidden;
}
.chapternav-wrapper {
position: relative;
height: 100%;
z-index: 1;
}
.chapternav-items {
margin: 0 34px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
list-style: none;
padding-bottom: 50px;
}
.chapternav-item {
display: inline-block;
vertical-align: top;
margin: 0 -.11765em;
padding: 0 20px;
}
.chapternav-label {
font-size: 12px;
line-height: 1.33337;
font-weight: 400;
letter-spacing: -.01em;
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
display: block;
margin: 0;
font-size: 17px;
}
/* nav items */
.container {
margin: 0 auto; /* this will center the page */
max-width: 960px; /* use your width here */
}
.container h2 {
text-align: center;
padding: 2rem;
}
.fade {
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: var(--shade-background);
margin-bottom: 2rem;
flex-wrap: wrap;
height: 450px;
transform: translateX(400%);
transition: transform 2s ease;
/* animation: fadeIn 4s; */
}
.fade h3 {
margin-bottom: 1rem;
font-size: 40px;
line-height: 1.1;
font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-weight: 600;
letter-spacing: 0em;
}
.fade p {
max-width: 300px;
font-size: 17px;
line-height: 1.23536;
font-weight: 400;
letter-spacing: -.022em;
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-weight: 600;
margin: 15px 0;
}
.fade img {
width: 400px;
height: 300px;
border-radius: 5px;
}
.learn-copy {
color: #0071e3;
margin-top: 3rem;
cursor: pointer;
}
.icon-arrow {
color: #0071e3;
cursor: pointer;
}
.learn-copy:hover {
text-decoration: underline;
}
/* javascript */
.fade:nth-of-type(even) {
transform: translateX(-400%);
}
.fade.show {
transform: translateX(0);
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
/* end of javascript */
<!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="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="intro-container">
<div class="content">
<h1>AirPods</h1>
<p>Don't Just Listen, Feel It</p>
<!-- <button>Explore</button> -->
<!-- <i class="fa fa-arrow-down"></i> -->
</div>
</div>
<nav class='chapternav'>
<div class="chapternav-wrapper">
<ul class="chapternav-items">
<li class="chapternav-item">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg==">
<span class='chapternav-label'>AirPods</span>
<li class="chapternav-item">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg==">
<span class='chapternav-label'>AirPods</span>
</li>
<li class="chapternav-item">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg==">
<span class='chapternav-label'>AirPods</span>
</li>
</ul>
</div>
</nav>
<div class="container">
<h2>Wireless to the Fullest</h2>
<div class="fade">
<img src="../images/earphonesbackdrop.jpg" alt="">
<div class="text">
<h3>Get 3% <br>Daily Cash back <br>
with Apple Card.</h3>
<p>Consectetur adipisicing elit.
Asperiores pariatur modi quis omnis non obcaecati inventore
ad amet voluptates commodi. etxcepturi, illum.</p>
<span class="learn-copy">Learn more</span>
</div>
</div>
<div class="fade">
<div class="text">
<h3>Say it in a way <br>only you can.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Asperiores pariatur commodi. etxcepturi, illum modi amet.</p>
<span class="learn-copy">Learn more</span>
</div>
<img src="../images/airpods2.jpg " alt="">
</div>
<div class="fade">
<img src="../images/airpods3.jpg " alt="">
<div class="text">
<h3>Magic runs <br>in the family.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Asperiores pariatur commodi. etxcepturi, illumdolar illum.</p>
<span class="learn-copy">Learn more</span>
</div>
</div>
</div>
<script src='script.js'></script>
</body>
</html>

It's all thank to your transform: translateX(400%); that set's element far into right side.
Default browser behaviour will be to stretch body to fit all elements in it. That's why it looks like on your screenshot.
Try adding overflow-x: hidden to your .container class and see if that helps you.

Error does not recognize the top:
Hello, my problem is that when the window is less than 1300px, the upper part does not apply: 100% only applies this condition if I update the page, on the contrary, if it is the other way around, ¿the same thing happens. How can i fix this.?
I leave the code so that you can test the error I am a newbie I hope you can help me. Cheers
var open = document.getElementById("open");
var photo = document.getElementById("photo");
function mediaQueries(btn) {
//Width: 1300px
if (btn.matches) {
//top 100% does not apply, left 100% still applies
open.addEventListener("mouseenter", () => {
photo.style = "top: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "top: 0";
});
} else {
open.addEventListener("mouseenter", () => {
photo.style = "left: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "left: 0";
});
}
}
var btn = window.matchMedia("(max-width: 1300px)");
mediaQueries(btn);
btn.addListener(mediaQueries);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box-container {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 350px;
max-width: 450px;
position: relative;
margin: 50px auto;
display: flex;
flex-direction: row;
align-items: center;
background: url("https://i.ibb.co/pdnQfFn/black-and-white-1281562-640-min.jpg");
box-shadow: 2px 2px 6px;
}
.box-container .box-content {
width: 100%;
height: auto;
padding: 20px;
color: #fff;
}
.box-container .box-content h2 {
letter-spacing: 1px;
}
.box-container .box-content p {
margin: 10px 0 20px 0;
line-height: 19.2px;
/*120%*/
}
.box-container .box-content button {
padding: 10px 20px;
border: none;
background: #5d08be;
color: #fff;
font-weight: bold;
transition: 0.4s;
cursor: pointer;
}
.box-container .box-content button:hover {
background: #10960b;
transition: 0.4s;
}
.box-container img {
width: 100%;
height: 100%;
position: absolute;
transition: 0.4s;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card effect</title>
</head>
<body>
<div class="box-container" id="open">
<div class="box-content">
<div class="txt">
<h2>Articulos de Moda</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit, ullam assumenda.
Quibusdam, dolores? Atanimi
rerum nobis velit necessitatibus qui.</p>
<button>LEER MÁS</button>
</div>
</div>
<img src="https://i.ibb.co/zhm9qNd/girl-min.jpg" id="photo">
</div>
</body>
</html>

I have solved your problem by adjusting the code in the box-container. Your image was at the top, however the div containing the image wasn't. I changed box-container to have a top of 0, and removed the max-width because you had already said the width should be 100%. You can adjust the code (like adding margin and padding) to your needs.
var open = document.getElementById("open");
var photo = document.getElementById("photo");
function mediaQueries(btn) {
//Width: 1300px
if (btn.matches) {
//top 100% does not apply, left 100% still applies
open.addEventListener("mouseenter", () => {
photo.style = "top: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "top: 0";
});
} else {
open.addEventListener("mouseenter", () => {
photo.style = "left: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "left: 0";
});
}
}
var btn = window.matchMedia("(max-width: 1300px)");
mediaQueries(btn);
btn.addListener(mediaQueries);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box-container {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 350px;
position: relative;
top:0;
display: flex;
flex-direction: row;
align-items: center;
background: url("https://i.ibb.co/pdnQfFn/black-and-white-1281562-640-min.jpg");
box-shadow: 2px 2px 6px;
}
.box-container .box-content {
width: 100%;
height: auto;
padding: 20px;
color: #fff;
}
.box-container .box-content h2 {
letter-spacing: 1px;
}
.box-container .box-content p {
margin: 10px 0 20px 0;
line-height: 19.2px;
/*120%*/
}
.box-container .box-content button {
padding: 10px 20px;
border: none;
background: #5d08be;
color: #fff;
font-weight: bold;
transition: 0.4s;
cursor: pointer;
}
.box-container .box-content button:hover {
background: #10960b;
transition: 0.4s;
}
.box-container img {
width: 100%;
height: 100%;
position: absolute;
transition: 0.4s;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card effect</title>
</head>
<body>
<div class="box-container" id="open">
<div class="box-content">
<div class="txt">
<h2>Articulos de Moda</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit, ullam assumenda.
Quibusdam, dolores? Atanimi
rerum nobis velit necessitatibus qui.</p>
<button>LEER MÁS</button>
</div>
</div>
<img src="https://i.ibb.co/zhm9qNd/girl-min.jpg" id="photo">
</div>
</body>
</html>

Image and backgroung color out of sync. And i need smooth animation so the image & bgcolor fade's together.
It works smooth only on first iteration. Check codepen, please. I spent 5 hours and did not understand what was happening. It works smooth only on first iteration. Check codepen, please. I spent 5 hours and did not understand what was happening.
https://codepen.io/l-ba-iwanowa/pen/poJZQVN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Caveat&display=swap" rel="stylesheet">
<style>
body,
.col-1,
.col-3-4,
.col-1 p {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#rcorners1 {
border-radius: 15px 50px;
background-color: yellow;
padding: 20px;
width: 200px;
height: 150px;
animation-name: bbb;
animation-duration: 5s;
animation-fill-mode: forwards;
}
#rcorners1:hover {
width:600px;
transform: translate(300px);
transition:1s;
}
#keyframes bbb {
0% {background-color: blue;}
100% {background-color: red}
}
.asd {
width: 1000px;
height: 600px;
/*overflow: hidden;*/
position:relative;
margin: 0 auto;
}
.asd img{
width: 100%;
width: 1000px;
height: 600px;
}
.asd img {
position:absolute;
top: 0;
}
.asd img.top {
/*position:relative;*/
opacity: 0;
transition: 2s;
}
/*
.asd img.top:hover {
opacity: 100;
}*/
.trans {
opacity: 100 !important;
}
#container {
max-width: 1000px;
margin:0 auto;
}
.col-1 {
width:25%;
display:inline-block;
vertical-align: top;
}
.col-3-4 {
width:75%;
display:inline-block;
vertical-align: top;
}
.relative {
position:relative;
}
.black-col {
position: relative;
top: -150px;
background: #474747;
height: 300px;
color:white;
padding: 1rem;
}
.zastup {
position: relative;
top:-50px;
background-color: white;
word-wrap: break-word;
}
img {
max-width: 100%;
}
.slider-bg {
background-color: rgb(0,0,0);
transition: background-color 2s;
}
#container2 {
width: 900px;
margin: 0 auto;
}
.slider-nav {
float:right !important;
}
ul {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
li {
/* Rounded border */
border-radius: 9999px;
height: 14px;
width: 14px;
/* Active dot */
/*background-color: rgba(0, 0, 0, .3);*/
/* Inactive dot */
background-color: rgba(255, 255, 255, .3);
/*border: 1px solid rgba(0, 0, 0, .3);*/
/* OPTIONAL: Spacing between dots */
margin: 0 12px;
transition: transform 0.5s, background-color 0.5s;
}
.nav-active {
background-color: rgba(255, 255, 255, .9);
transform: scale(1.5);
}
.clear {
clear:both;
zoom: 1;
}
.col-1-3 {
position: relative;
width: 33%;
word-wrap: break-word;
white-space: nowrap;
display: inline-block;
vertical-align: top;
padding: 1rem;
box-sizing: border-box;
}
button.abc {
border: 0;
background-color: #e86d10;
padding: 1rem 2rem;
border-radius: 25px;
font-size: inherit;
color: #fff;
}
.price {
font-size:1.5rem;
position: relative;
top:-20px;
}
.description {
position: relative;
top:-40px;
word-break: break-all;
white-space: pre-wrap;
font-size: 1.2rem;
}
.p1rem {
padding: 1rem;
}
.orange {
color: #e86d10;
}
.apply-font {
font-family: 'Caveat', cursive;
}
.bg-black {
background-color: rgb(0,0,0);
}
.bg-blue {
background-color: rgb(34, 73, 200);
}
</style>
</head>
<body>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur illum ab corrupti impedit culpa provident nemo numquam? Magnam, rerum, magni. Autem quisquam deserunt a est iste iure odit laudantium, dolores.</p>
</div>
<div class="slider-bg ">
<div class="asd">
<!-- <img src="https://i.ytimg.com/vi/tAp9BKosZXs/maxresdefault.jpg" alt=""> -->
<img src="https://i.imgur.com/xCGxXuy.jpg" alt="">
<img class="top" src="https://i.imgur.com/D1tDvcG.jpg" alt="">
<img class="top" src="https://cdn.vox-cdn.com/thumbor/gBv91a9YqyhIxGsxc26x5TORV_8=/0x0:1296x730/1200x800/filters:focal(669x161:875x367)/cdn.vox-cdn.com/uploads/chorus_image/image/66274455/horsegirl.0.jpg" alt="">
<img class="top" src="https://1.bp.blogspot.com/-73o9cfxSC7Q/XQMxoVjfdMI/AAAAAAAAUkM/RSi0lSlsQoAfhMHLR-3U8Sfk_PpvZuziQCLcBGAs/s1600/copertina.jpg" alt="">
</div></div>
<div id="container2" style="position: relative;top:-60px; ">
<ul class="slider-nav">
<li data-id='0' class="nav-active"></li>
<li data-id='1'></li>
<li data-id='2'></li>
<li data-id='3'></li>
<li data-id='4'></li>
</ul></div><div class="clear"></div>
<div id="container2">
<div class="col-1 black-col">asd</div><!--
--><div class="col-3-4 zastup">
<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js'></script> -->
<script type="text/javascript">
console.log(111);
// document.querySelector('#btn-click').addEventListener('click', ()=>{
// document.querySelector('.top').classList.toggle("trans");
// console.log(document.querySelector('.top').classList);
// });
let p = document.querySelectorAll('.slider-bg img');
let pp = Array.from(p);
console.log(pp);
function changeBgColor (){
if (i == 0 ) {
document.querySelector('.slider-bg').style.backgroundColor = 'rgb(0,0,0)';
}
if (i == 1 ) {
document.querySelector('.slider-bg').style.backgroundColor = 'rgb(34, 73, 200)';
}
if (i == 2 ) {document.querySelector('.slider-bg').style.backgroundColor = 'red';}
if (i == 3 ) {document.querySelector('.slider-bg').style.backgroundColor = 'green';}
}
let i = 1;
function asd(arguments) {
setTimeout(()=>{
// b = arrayImages[i];
// document.querySelector('#slider-hero img').src = b;
let z = document.querySelectorAll('li');
let zz = Array.from(z);
zz.forEach((item)=>{item.classList.remove('nav-active')});
// console.log(el);
zz[i].classList.add('nav-active');
b = pp[i];
pp.forEach((val)=>{
val.classList.remove('trans');
});
b.classList.add('top');
b.classList.add('trans');
changeBgColor();
i++;
if (i ==4) {
i =0;
}
console.log(b);
asd();
},4000);
}
asd();
document.querySelector('.slider-nav').addEventListener('click',(el)=>{
if (el.target.tagName === 'LI') {
let z = document.querySelectorAll('li');
let zz = Array.from(z);
console.log(el.target.dataset.id);
b = pp[el.target.dataset.id];
pp.forEach((val)=>{
val.classList.remove('trans');
});
b.classList.add('top');
b.classList.add('trans');
zz.forEach((item)=>{item.classList.remove('nav-active');});
el.target.classList.add('nav-active');
i = el.target.dataset.id;
changeBgColor();
}
});
</script>
</body>
</html>

Seems working fine to Chrome Browser. You can validate the css for all the browser using: https://www.browseemall.com/Compatibility/ValidateCSS
There might be chances of browser compatibility issues.
Seems broken in IE10 and lower.
ul{align-items:center;display:flex;justify-content:center;list-style-type:none;margin:0;padding:0;}