Why is my "play song" button not working? - javascript

I'm making a music player but when i click the play button the image doesn't spin around and the "music-info" div does't show up either tho no mistakes are announced in the console? i don't know what is wrong? Can anybody help me? Thank you so much! For some reasons, i will leave my html and css in the comment! sorry for this!
This is my js:
const musicContainer = document.querySelector('.music-container');
const playBtn = document.querySelector('#play');
const prevBtn = document.querySelector('#prev');
const nextBtn = document.querySelector('#next');
const audio = document.querySelector('#audio');
const progressContainer = document.querySelector('.progress-container');
const progress = document.querySelector('.progress');
const title = document.querySelector('#title');
const cover = document.querySelector('#cover');
//song titles
const songs = ['love you and love me', 'high kick ost', 'my girl ost'];
//keep tracks of songs
let songIndex = 2;
//initially load songs into DOM
loadSong(songs[songIndex]);
//update songs details
function loadSong(song){
title.innerText = song;
audio.src = `${song}.mp3`;
cover.src = `${song}.jpg`;
}
function playSong(){
musicContainer.classList.add('play');
}
//Event Listener
playBtn.addEventListener('click', ()=>{
const isPlaying = musicContainer.classList.contains('play');
if(isPlaying){
pauseSong();
}else{
playSong();
};
});
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Music Player</title>
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Music Player</h1>
<div class="music-container ">
<div class="music-info">
<h4 id="title">Ukelele</h4>
<div class="progress-container">
<div class="progress" alt="music-cover" id="cover"></div>
</div>
</div>
<audio src="loveyou.mp3" id="audio"></audio>
<div class="img-container">
<img src="ukelele.jpg">
</div>
<div class="navigation">
<button id="prev" class="action-btn">
<i class="fas fa-backward"></i>
</button>
<button id="play" class="action-btn-big">
<i class="fas fa-play"></i>
</button>
<button id="next" class="action-btn">
<i class="fas fa-forward"></i>
</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
This is my css:
*{
box-sizing: border-box;
}
body{
height:100vh;
margin: 0;
background-image: linear-gradient(0deg, rgb(247, 247, 247 ) 23.8%,
rgb(252, 221, 221) 92%
);
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.music-container{
background-color:white;
border-radius: 15px;
box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
display: flex;
padding: 20px 30px;
position: relative;
margin:100px 0;
}
.img-container::after {
content: '';/*compulsory for before and after*/
background-color: #fff;
height: 20px;
width: 20px;
position: absolute;
bottom: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.img-container {
position: relative;
width: 110px;
}
.img-container img{
width: inherit;/*lets the element's width be the same as its parent's*/
height:110px;
border-radius:50%;
object-fit: cover;
position: absolute;
bottom:0;
left:0;
animation:rotate 3s linear infinite;
animation-play-state: paused;
}
.music-container.play .img-container img{
animation-play-state: running;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navigation{
display: flex;/*set items side by side*/
align-items: center;
justify-content: center;
}
.action-btn{
background-color: #fff;
border: none;
font-size: 20px;
padding: 10px;
margin: 0 20px;
cursor: pointer;
}
.action-btn-big{
color: #cdc2d0;
font-size: 30px;
}
.action-btn-big{
border: none;
}
.music-info {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px 15px 0 0;
padding: 10px 10px 10px 150px;
position: absolute;
top:0;
left:20px;
width: calc(100% - 40px);
opacity: 0;
transform: translateY(0%);
transition: transform 0.3s ease-in, opacity 0.3s ease in;/*in line with the up and down transform property*/
}
.music-info h4{
margin: 0;
}
.music-container.play .music-info{
opacity:1;
transform: translateY(-100%);
}
.progress-container{
background: #fff;
border-radius: 5px;
cursor: pointer;
margin: 10px 0;
height: 4px;
width: 100%;
}
.progress{
background: #fa8daa;
border-radius: 5px;
height: 100%;
width: 0%;
transition: width 0.1s linear;
}

there are a lot of errors in your code, Below is the correct code for music player.
Try this after adding your local songs in the songs = []
//song titles
const songs = ["over.wav", "rain.mp3", "robot.wav"];
var song;
let currSong = 2;
const nextSong = () => {
song.pause()
currSong = (currSong + 1) % songs.length;
playSong(currSong);
};
const prevSong = () => {
song.pause()
if(currSong - 1 < 0){
currSong = songs.length - 1
}
else{
currSong = (currSong-1);
}
playSong(currSong);
};
//Event Listener
const playSong = (currPlayingSong = songs[2]) => {
song = new Audio(songs[currSong]);
song.play();
};
*{
box-sizing: border-box;
}
body{
height:100vh;
margin: 0;
background-image: linear-gradient(0deg, rgb(247, 247, 247 ) 23.8%,
rgb(252, 221, 221) 92%
);
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.music-container{
background-color:white;
border-radius: 15px;
box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
display: flex;
padding: 20px 30px;
position: relative;
margin:100px 0;
}
.img-container::after {
content: '';/*compulsory for before and after*/
background-color: #fff;
height: 20px;
width: 20px;
position: absolute;
bottom: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.img-container {
position: relative;
width: 110px;
}
.img-container img{
width: inherit;/*lets the element's width be the same as its parent's*/
height:110px;
border-radius:50%;
object-fit: cover;
position: absolute;
bottom:0;
left:0;
animation:rotate 3s linear infinite;
animation-play-state: paused;
}
.music-container.play .img-container img{
animation-play-state: running;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navigation{
display: flex;/*set items side by side*/
align-items: center;
justify-content: center;
}
.action-btn{
background-color: #fff;
border: none;
font-size: 20px;
padding: 10px;
margin: 0 20px;
cursor: pointer;
}
.action-btn-big{
color: #cdc2d0;
font-size: 30px;
}
.action-btn-big{
border: none;
}
.music-info {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px 15px 0 0;
padding: 10px 10px 10px 150px;
position: absolute;
top:0;
left:20px;
width: calc(100% - 40px);
opacity: 0;
transform: translateY(0%);
transition: transform 0.3s ease-in, opacity 0.3s ease in;/*in line with the up and down transform property*/
}
.music-info h4{
margin: 0;
}
.music-container.play .music-info{
opacity:1;
transform: translateY(-100%);
}
.progress-container{
background: #fff;
border-radius: 5px;
cursor: pointer;
margin: 10px 0;
height: 4px;
width: 100%;
}
.progress{
background: #fa8daa;
border-radius: 5px;
height: 100%;
width: 0%;
transition: width 0.1s linear;
}
.fas {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Music Player</title>
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Music Player</h1>
<div class="music-container ">
<!-- <div class="music-info">
<h4 id="title">Ukelele</h4>
<div class="progress-container">
<div class="progress" alt="music-cover" id="cover"></div>
</div>
</div> -->
<!-- <audio src="loveyou.mp3" id="audio"></audio> -->
<!-- <div class="img-container">
<img src="ukelele.jpg">
</div> -->
<div class="navigation">
<button id="prev" class="action-btn">
<i class="fas fa-backward" onclick="prevSong()"></i>
</button>
<div id="play" class="action-btn-big">
<i class="fas fa-play" onclick="playSong()"></i>
</div>
<button id="next" class="action-btn">
<i class="fas fa-forward" onclick="nextSong()"></i>
</button>
</div>
</div>
<script src="style.js"></script>
</body>
</html>

Related

How can I prevent my FadeIn animation from repeating when I refresh or click divs

I'm trying to create a todo board with sticky notes. I'm using vanilla js to practise. After pressing the add button, a new div appears with a fadeIn animation. Every time I refresh the page or press the line with the notes, the FadeIn animation repeats.
I've tried to give my div a class when adding throw dom, but I cannot figure out how to remove it after adding a new div (a new note). I know my code is messed up, I'm just experimenting with JS, CSS and HTML for fun. Any advice will be accepted with great pleasure I'm here to learn.
let stickyNotesArr = [];
const notesColor = ['#7afcff', '#feff9c', '#ff7eb9'];
if (localStorage.getItem('notesLclArr')) {
stickyNotesArr = JSON.parse(localStorage.getItem('notesLclArr'));
};
const cards = document.querySelector('#cards');
const sendBtn = document.querySelector('#sendBtn');
const resetBtn = document.querySelector('#resetBtn');
const date = document.querySelector('#date');
const time = document.querySelector('#time');
const txtInp = document.querySelector('#txtinp');
sendBtn.addEventListener('click', () => {
const randomColor = notesColor[Math.floor(Math.random() * notesColor.length)];
stickyNotesArr.push({
txtinp: txtInp.value,
date: date.value,
time: time.value,
color: randomColor
});
addStickyNts();
resetBtn.click();
});
function addStickyNts() {
cards.innerHTML = '';
let count = 0;
for (note of stickyNotesArr) {
const ntsRows = `
<div class="notesDiv mb-4" style="background-color: ${note.color};">
<div class='d-flex justify-content-end'>
<button type='button' class='btn myCustomBtn deleteBtn' ><i data-id=${count} class="deleteBtn fa-solid fa-xmark"></i></button>
</div>
<div class='txtArea d-flex scrollbar scrollbarNote'>${note.txtinp}</div>
<div class='timeNdate'>${note.date}<br>${note.time}</div>
</div>
`
count++
cards.insertAdjacentHTML('beforeend', ntsRows);
};
localStorage.setItem('notesLclArr', JSON.stringify(stickyNotesArr));
};
addStickyNts();
cards.addEventListener('click', (event) => {
let myId;
if (event.target.getAttribute('data-id')) {
myId = event.target.getAttribute('data-id');
};
if (event.target.classList.contains('deleteBtn')) {
stickyNotesArr.splice(myId, 1);
};
addStickyNts();
});
resetBtn.addEventListener('click', () => {
txtInp.value = '';
date.value = '';
time.value = '';
})
addStickyNts();
body {
font-family: 'Dancing Script', cursive;
}
#bgrImg {
margin: 1em;
background-image: url("images/pexels-fwstudio-168442.jpg");
background-size: 100% auto;
border: 1em solid #7f55398e;
border-radius: 15px;
min-height: 96vh;
background-clip: border-box;
}
h1 {
font-family: 'Abril Fatface', cursive;
text-align: center;
}
#mainDiv {
height: 400px;
width: 400px;
position: relative;
}
#txtinp {
position: absolute;
top: 91px;
left: 104px;
border: transparent;
background-color: transparent;
font-size: 1.5em;
outline: none;
resize: none;
overflow: auto;
transition: all 1s ease-out;
}
#duedate {
position: absolute;
top: 286px;
left: 142px;
font-size: 1.2em;
transition: 0.5s;
}
#duetime {
position: absolute;
top: 317px;
left: 187px;
font-size: 1.2em;
transition: 0.3s;
}
#duedate:hover,
#duetime:hover {
transform: translateY(-2px);
}
#time,
#date {
border: transparent;
background-color: transparent;
max-width: 125px;
outline: none;
}
#sendBtn {
position: absolute;
top: 296px;
left: 39px;
background-color: transparent;
border: transparent;
font-size: 1.4em;
transition: 0.5s;
}
#resetBtn {
position: absolute;
top: 322px;
left: 48px;
background-color: transparent;
border: transparent;
font-size: 1.4em;
transition: 0.5s;
}
#sendBtn:hover,
#resetBtn:hover {
color: #767676;
font-size: 1.2em;
cursor: pointer;
}
.notesDiv {
transition: 0.4s;
display: flex;
flex-direction: column;
width: 250px;
height: 250px;
font-size: 20px;
word-break: break-word;
}
.notesDiv:hover {
transform: scale(1.05);
box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5);
}
.myCustomBtn {
display: flex;
visibility: hidden;
justify-content: center;
align-items: center;
margin-top: 5px;
margin-left: 200px;
border: none;
padding: 0px;
}
.notesDiv:hover .myCustomBtn {
visibility: visible;
}
.timeNdate {
margin-top: auto;
overflow: none;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.notesDiv {
animation: fadeIn 0.5s 1;
}
.notesDiv.animated {
animation: fadeIn paused;
}
.txtArea {
margin-top: 5px;
overflow: auto;
}
/*.........................................................................................................................*/
/*MY CUSTOM SCROLL BAR WORKING WITH EDGE/CHROME*/
.scrollbar::-webkit-scrollbar {
width: 12px;
background-color: #f5f5f53b;
scrollbar-color: grey;
border-radius: 10px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #afb1b454;
}
/* FOR MOZILLA FIRE-FOX ONLY:*/
#-moz-document url-prefix() {
.scrollbar {
width: 240px;
scrollbar-color: grey;
border-radius: 10px;
}
.scrollbarNote {
width: 230px;
scrollbar-color: grey;
border-radius: 10px;
}
}
/*.........................................................................................................................*/
#media (max-width: 560px) {
#bgrImg {
width: 100%;
min-width: 460px;
}
}
<!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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<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=Abril+Fatface&family=Dancing+Script:wght#400;500;600;700&family=Lobster&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="boardstyle.css">
</head>
<body>
<div id="bgrImg">
<form id="npdform">
<h1 class="text-light">Write Down Your Tasks:</h1>
<div id="mainDiv" class="d-flex justify-content-center m-auto">
<img id="inpImg" class="img-fluid" src="images/notepad-icon-17524.png">
<textarea class="scrollbar" id="txtinp" rows="5" cols="22" placeholder="write a task"></textarea>
<div id="duedate">
<label for="date">Due Date:</label>
<input id="date" type="date">
</div>
<div id="duetime">
<label for="time">Time:</label>
<input id="time" type="time">
</div>
<button class="ntpdBtns" id="sendBtn" type="button">
Add<i class="fa-solid fa-check"></i>
</button>
<button class="ntpdBtns" id="resetBtn" type="button">
Reset<i class="fa-solid fa-eraser"></i></i>
</button>
</div>
</form>
<section class="container-fluid">
<div id="cards" class="row d-flex justify-content-evenly">
</div>
</section>
</div>
<script src="boardfeatures.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>

How do I make a paragraph fade in everytime I swipe on my 3d carousel swiper?

What's going on and what should be going on
I built a 3 d carousel popup. There are 3 slides; each slide must show a paragraph if it's "selected".
The z-index for the "selected" one always equals 1, the one on the right equals 0 and the one on the left equals -1.
I tried to add and remove visibility from the paragraphs if the z-index for the slide = 1. But unfortunately,your text it only works when I open the page because that's when the z-index is being checked I guess.
I would like to fade in the paragraphing that belongs to the slide every time it's "selected".
(I know my code for this might be 100% wrong.)
What I think should work...
I think I might need some sort of a swipe event listener but I'm not sure and I don't know how to do one of those.
HTML
`
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/661fc68da9.js" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://kit.fontawesome.com/661fc68da9.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<button onclick="Size()"></button>
<div class="sizeGuidance">
<form data-multi-step2>
<div class="whatGuideD" data-step2>
<br>
<h1>The Size Guide</h1>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div id="sw1" class="swiper-slide">
<span style="--i:1;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span>
</div>
<div id="sw2" class="swiper-slide">
<span style="--i:2;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-bullseye fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Super Guide</button></span>
</div>
<div id="sw3" class="swiper-slide">
<span style="--i:3;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-square-poll-horizontal fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span>
</div>
</div>
<div class="swiper-pagination"></div>
<p id="d1" class="d1">Get to know your size in less than 1 minute. <br> - no measuring bands required.</p>
<p id="d2" class="d1">Get a more accurate size recommendation. <br> - no measuring bands required.</p>
<p id="d3" class="d1">You already know your measurments? <br> here is the size guide.</p>
</div>
</div>
</form>
<form data-multi-step2M>
<div class="whatGuideM" data-step2M>
<br>
<h1>The Size Guide</h1>
<br>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span style="--i:1;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:2;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-bullseye fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Super Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:3;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-square-poll-horizontal fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span>
</div>
</div>
<div class="swiper-pagination"></div>
<p id="d1" ></p>
</div>
</div>
</form>
</div>
</body>
</html>
`
CSS
`
<style>
.d1 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d1.showDisc1{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
.d2 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d2.showDisc2{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
.d3 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d3.showDisc3{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
</style>
<style>
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
</style>
<style>
/*only desktop*/
.whatGuideD {
display: none;
}
#media only screen and (min-width: 900px) {
.whatGuideD {display: block;
}
.whatGuideM {display: none;
}
}
</style>
<!-- Demo styles -->
<style>
html {
height: -webkit-fill-available;
}
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
height: -webkit-fill-available;
}
.swiper {
width: 100%;
padding-top: 0;
padding-bottom: 50px;
padding-left: 0;
padding-right: 0;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 60%;
max-width: 500px;
height: 75vh;
max-height: 500px;
border-radius: 15px;
background: rgb(238, 235, 241);
box-shadow: 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
-10px -10px 10px -1px rgba(255, 255, 255, 0.70);
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #fff6)
}
.swiper-slide button {
display: block;
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
Font-family: 'Bebas Neue', cursive;
font-size: 5vw;
margin: 0;
}
.pickGuideD {
Font-family: 'Bebas Neue', cursive;
text-transform: uppercase;
font-size: 48px;
font-weight: 500;
height: 100%;
background: rgb(238, 235, 241);
cursor: pointer;
border-radius: 10px;
color: rgb(0, 0, 0);
border: none;
text-align: center;
}
.pickGuideD:hover {
box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
inset -10px -10px 10px -1px rgba(255, 255, 255, 0.70);
}
</style>
<style>
.pickGuideM {
Font-family: 'Bebas Neue', cursive;
text-transform: uppercase;
font-size: 24px;
font-weight: 500;
height: 100%;
background: rgb(238, 235, 241);
cursor: pointer;
border-radius: 10px;
color: rgb(0, 0, 0);
border: none;
text-align: center;
}
.pickGuideM:hover {
box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
inset -10px -10px 10px -1px rgba(255, 255, 255, 0.70);
}
.close-button1D {
background-color: rgb(238, 235, 241);
color: rgb(0, 0, 0);
cursor: pointer;
font-size: 30px;
float: right;
margin-right: 40px;
border: 0;
}
::-webkit-scrollbar {
display: none;
}
</style>
<style>
.whatGuideD {
width: 100%;
height:100vh;
background: rgb(238, 235, 241);
text-align: center;
color: rgb(15, 15, 15);
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.whatGuideD.active2{
visibility: visible;
opacity: 1;
position: fixed;
z-index: 4;
overflow-y: scroll;
transform: translate(-50%, -50%) scale(1);
}
.whatGuideM {
width: 100%;
height:100vh;
background: rgb(238, 235, 241);
text-align: center;
color: rgb(15, 15, 15);
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.whatGuideM.active2M{
visibility: visible;
opacity: 1;
position: fixed;
z-index: 4;
overflow-y: hidden;
transform: translate(-50%, -50%) scale(1);
}
</style>
`
JS
`
<script>
var disc1 = document.querySelector("[showdiscrip1]")
function showdisc1() {
disc1.classList.add("disc");
}
function removedisc1() {
disc1.classList.remove("disc")
}
var disc2 = document.querySelector("[showdiscrip2]")
function showdisc2() {
disc2.classList.add("disc");
}
function removedisc2() {
disc2.classList.remove("disc")
}
var disc3 = document.querySelector("[showdiscrip3]")
function showdisc3() {
disc3.classList.add("disc");
}
function removedisc3() {
disc3.classList.remove("disc")
}
const mulitStepForm2 = document.querySelector("[data-multi-step2]")
const formSteps2 = [...mulitStepForm2.querySelectorAll("[data-step2]")]
let currentStep2 = formSteps2.findIndex(step2 => {
return step2.classList.contains("active2")
})
if (currentStep2 < 0) {
function SizeD() {
currentStep2 = 0
formSteps2[currentStep2].classList.add("active2")
showCurrentStep2();
window.scrollTo(0, 20);
}
}
mulitStepForm2.addEventListener("click", j => {
if (j.target.matches("[data-next]")) {
currentStep2++
} else if (j.target.matches("[data-closeguide]")) {
currentStep2 = -1
}
showCurrentStep2()
})
function showCurrentStep2() {
formSteps2.forEach((step2, index) => {
step2.classList.toggle("active2", index ===
currentStep2)
})
}
const mulitStepForm2M = document.querySelector("[data-multi-step2M]")
const formSteps2M = [...mulitStepForm2M.querySelectorAll("[data-step2M]")]
let currentStep2M = formSteps2M.findIndex(step2M => {
return step2M.classList.contains("active2M")
})
if (currentStep2M < 0) {
function SizeM() {
currentStep2M = 0
formSteps2M[currentStep2M].classList.add("active2M")
showCurrentStep2M();
window.scrollTo(0, 0);
}
}
mulitStepForm2M.addEventListener("click", j => {
if (j.target.matches("[data-nextM]")) {
currentStep2M++
} else if (j.target.matches("[data-closeguideM]")) {
currentStep2M = -1
}
showCurrentStep2M()
})
function showCurrentStep2M() {
formSteps2M.forEach((step2M, index) => {
step2M.classList.toggle("active2M", index ===
currentStep2M)
})
}
function Size() {
SizeD();
SizeM();
}
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 500,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
});
</script>
<script>
const sw1 = document.getElementById("sw1");
const sw2 = document.getElementById("sw2");
const sw3 = document.getElementById("sw3");
const sw1CS = window.getComputedStyle(sw1);
const sw2CS = window.getComputedStyle(sw2);
const sw3CS = window.getComputedStyle(sw3);
console.log(sw1CS.zIndex)
console.log(sw2CS.zIndex)
console.log(sw3CS.zIndex)
if (sw1CS.zIndex == 1) {
document.getElementById("d1").classList.add("showDisc1")
document.getElementById("d2").classList.remove("showDisc2")
}
if (sw2CS.zIndex == 1) {
document.getElementById("d2").classList.add("showDisc2")
document.getElementById("d1").classList.remove("showDisc1")
document.getElementById("d3").classList.remove("showDisc3")
}
if (sw3CS.zIndex == 1) {
document.getElementById("d3").classList.add("showDisc3")
document.getElementById("d2").classList.remove("showDisc2")
}
</script>
`

How do I make close animation?

I have the following code to close modal window when I click on close button. I want it to close with going up animation. For now modal window goes up and then it goes back again.
But it doesn't work. Can someone please help me why is that so?
<!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>Document</title>
<style>
.modal-window{
position: fixed;
left:0;
right:0;
top:0;
display: none;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
z-index: 1;
}
.card{
margin: 100px auto;
position: relative;
z-index: 1;
width: 500px;
height: 300px;
text-align: center;
padding-top: 100px;
background-color: #fefefe;
animation: open .4s;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.show{
display: block;
}
.close-with-anim{
animation:close .4s;
}
#keyframes close {
from{
top:0;
opacity: 1;
}
to{
top:-300px;
opacity: 0;
display: none;
}
}
#keyframes open {
from{
top:-300px;
opacity: 0;
}
to{
top:0;
opacity: 1;
}
}
.close{
cursor: pointer;
}
</style>
</head>
<body>
<button id="modal">Modal window</button>
<div class="modal-window">
<div class="card">
<span class="close">×</span>
<div class="modal-content">
Sign up page
</div>
<div class="moda-form">
<input type="text" name="" id="">
</div>
</div>
</div>
<script>
const modal=document.querySelector('#modal');
const modalWindow=document.querySelector('.modal-window');
const close=document.querySelector('.close');
modal.addEventListener('click',()=>{
modalWindow.classList.toggle('show');
})
close.addEventListener('click',()=>{
modalWindow.classList.add('close-with-anim');
})
</script>
</body>
</html>
Here is the link to codesandbox: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html
animation: close 0.4s forwards; to prevent the animation from resetting to its initial frame.
z-index: -1; inside the close keyframe to not block your "Modal window" button.
And you need to remove close-with-anim to be able to use it again.
const modal = document.querySelector("#modal");
const modalWindow = document.querySelector(".modal-window");
const close = document.querySelector(".close");
modal.addEventListener("click", () => {
modalWindow.classList.remove("close-with-anim");
modalWindow.classList.toggle("show");
});
close.addEventListener("click", () => {
modalWindow.classList.add("close-with-anim");
});
.modal-window {
position: fixed;
left: 0;
right: 0;
top: 0;
display: none;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.card {
margin: 100px auto;
position: relative;
z-index: 1;
width: 500px;
height: 300px;
text-align: center;
padding-top: 100px;
background-color: #fefefe;
animation: open 0.4s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.show {
display: block;
}
.close-with-anim {
animation: close 0.4s forwards;
}
#keyframes close {
from {
top: 0;
opacity: 1;
}
to {
top: -300px;
opacity: 0;
display: none;
z-index: -1;
}
}
#keyframes open {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
.close {
cursor: pointer;
}
<button id="modal">Modal window</button>
<div class="modal-window">
<div class="card">
<span class="close">×</span>
<div class="modal-content">
Sign up page
</div>
<div class="moda-form">
<input type="text" name="" id="" />
</div>
</div>
</div>

Button disappears after several click

I really struggling with doing the same thing in infinite try.
I'm trying to add same functionality to similar element using Foreach on the parent element.
everything went well until I hit the buttons several times, it just disappear.
I think the problem is in the loop, I welcome any kink of comments.
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
arrow.classList.add("active_arr");
if (leftContainer.classList.contains("off")) {
leftContainer.classList.remove("off");
leftContainer.classList.add("active");
}
});
cancel.addEventListener("click", ({ target: cancel }) => {
cancel.classList.add("active_arr");
if (leftContainer.classList.contains("active")) {
leftContainer.classList.remove("active");
leftContainer.classList.add("off")
}
});
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #2c5346, #203a43, #0f2027);
}
.center{
display: flex;
justify-content: center;
align-items: center;
}
.main{
height: 100vh;
}
.box{
width: 250px;
height: 250px;
box-shadow: 0 10px 20px rgba(0,0,0,0.288);
border-radius: 23px;
flex-direction: column;
color: white;
position: relative;
overflow: hidden;
}
}
}
/*arrow*/
.arr_container .cancel{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container{
position: absolute;
width: 50px;
height: 50px;
background: white;
bottom: 0;
right: 0;
border-radius: 23px 0 23px 0;
color: rgb(70,70,70);
font-size: 1.6rem;
cursor: pointer;
transition: all .4s;
}
.arr_container i{
transform: rotate(45deg);
}
.active_arr{
transform: translate(80%, 80%);
}
.left_container{
position: absolute;
background: #0f2027;
width: 100%;
height: 100%;
border-radius: 23px;
padding: 40px 0 0 20px;
transition: all .4s;
}
.off{
transform: translate(-80%,-80%) rotate(90deg);
}
.active{
transform: translate(0) rotate(0);
}
.left_container .icons{
font-size: 1.6rem;
margin-top: 10px;
}
.left_container .icons i{
color: #cfcfcf;
cursor: pointer;
margin-right: 10px;
transition: all .4s;
}
.left_container .icons i:hover{
color: #2c5346;
}
.cancel{
right: 0px;
bottom: 0px;
font-size: 1.5rem;
color: rgb(70,70,70);
position: absolute;
width: 50px;
height: 50px;
background: white;
justify-content: center;
align-items: center;
border-radius: 23px 0 23px 0;
}
.cancel .fas{
position: absolute;
right: 1rem;
bottom: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="cards.css">
<title>cards</title>
</head>
<body>
<div class="main center">
<div class="box center">
<div>
<p class="user_name">Mor Maz</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<div class="box center">
<div>
<p class="user_name">Mor Maz</p>
</div>
<div class="arr_container center">
<i class="fas fa-arrow-right"></i>
</div>
<div class="left_container off">
<p>Skill</p>
<div class="cancel">
<i class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script src="cards.js"></script>
</body>
</html>
I will appreciate any kind of help
thank you
I checked it out and found that the active_arr class the the one that is causing the problem, the buttons are not disappearing but just moving outside the boundary of the parent container which has a overflow: hidden; property. You are forgetting to remove the arctive_arr class from the opposite button do as follows and it will work
const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
const leftContainer = containerDiv.querySelector('.left_container');
const arrow = containerDiv.querySelector('.arr_container');
const cancel = containerDiv.querySelector('.cancel');
arrow.addEventListener("click", ({ target: arrow }) => {
arrow.classList.add("active_arr");
if (leftContainer.classList.contains("off")) {
leftContainer.classList.remove("off");
leftContainer.classList.add("active");
}
cancel.classList.remove("active_arr");
});
cancel.addEventListener("click", ({ target: cancel }) => {
cancel.classList.add("active_arr");
if (leftContainer.classList.contains("active")) {
leftContainer.classList.remove("active");
leftContainer.classList.add("off")
}
arrow.classList.remove("active_arr");
});
});
Tho there is still a padding issue I can see you can fix it on your own
You are adding "active_arr" but you never remove it.
Your css are hiding the buttons then:
.active_arr {
transform: translate(80%, 80%);
}

scroll eventListener not working in javascript

window.addEventListener for scroll event is not working in my JS. I've tried several ways but still not working. I've used intersectionObserver in the JS also. Here is the JS code
const moveToAbout = () => {
document.getElementById('about').scrollIntoView(true)
}
const moveToWork = () => {
document.getElementById('work').scrollIntoView()
}
const moveToTop = () => {
document.getElementById('main-section').scrollIntoView(true)
}
const options = {
root: null,
threshold: 0,
rootMargin: "-150px"
}
const header = document.querySelector("header")
const sections = document.querySelectorAll(".section")
const mainSection = document.querySelector(".main-container")
const bttWrapper = document.getElementById('bttBtn-wrapper')
const veganImage = document.getElementById('vegan-store-image')
const navbar = document.getElementById('header')
veganImage.onclick = () => {
window.open("https://thoughtlessmind.github.io/Vegan-store")
}
const sectionOne = document.querySelector(".about-section");
// bttWrapper.style.display = 'none'
const mainObserver = new IntersectionObserver(function (entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
header.classList.remove("nav-theme-2")
bttWrapper.classList.add("btnWrapperHidden")
bttWrapper.classList.remove("btnWrapperShow")
} else {
header.classList.add("nav-theme-2")
bttWrapper.classList.add("btnWrapperShow")
}
// console.log(entry.target, '-', entry.isIntersecting)
});
}, options);
mainObserver.observe(mainSection)
window.addEventListener("scroll", (event)=>{
console.log("scrolled")
var scroll = this.scrollY
if(scroll > 20){
console.log('reached')
}
})
const test = () =>{
console.log('working')
}
window.addEventListener("scroll", test)
window.addEventListener("scroll", () => console.log(window.pageYOffset));
Later in the lower part, I've tried to add scroll event in some ways but nothing is happening.
Here is the link for the whole repo: Github repo link
remove height property from CSS main. It is working now :
use min-height, max-height
const moveToAbout = () => {
document.getElementById('about').scrollIntoView(true)
}
const moveToWork = () => {
document.getElementById('work').scrollIntoView()
}
const moveToTop = () => {
document.getElementById('main-section').scrollIntoView(true)
}
const options = {
root: null,
threshold: 0,
rootMargin: "-150px"
}
const header = document.querySelector("header")
const sections = document.querySelectorAll(".section")
const mainSection = document.querySelector(".main-container")
const bttWrapper = document.getElementById('bttBtn-wrapper')
const veganImage = document.getElementById('vegan-store-image')
const navbar = document.getElementById('header')
veganImage.onclick = () => {
window.open("https://thoughtlessmind.github.io/Vegan-store")
}
const sectionOne = document.querySelector(".about-section");
// bttWrapper.style.display = 'none'
const mainObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
header.classList.remove("nav-theme-2")
bttWrapper.classList.add("btnWrapperHidden")
bttWrapper.classList.remove("btnWrapperShow")
} else {
header.classList.add("nav-theme-2")
bttWrapper.classList.add("btnWrapperShow")
}
// console.log(entry.target, '-', entry.isIntersecting)
});
}, options);
mainObserver.observe(mainSection)
window.onload = () =>{
console.log("loaded");
window.onscroll = function()
{
console.log("scrolling.....", window.scrollY);
}
}
#import 'global.css';
/* -----Navigation bar styles */
#import 'navbar.css';
/* ----------- Main contaier styles*/
main{
overflow: scroll;
scroll-snap-type: y mandatory;
}
.section{
/* scroll-snap-align: start; */
/* Uncomment above to add snap scrolling effect */
margin-left: auto;
margin-right: auto;
width: 80%;
max-width: 1100px;
border-bottom: 1px solid grey;
}
.main-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
}
.name-text{
font-size: 2.8rem;
font-weight: 500;
color: var(--primary-text-color);
}
.intro-text{
padding: 1rem;
padding-left: 0;
font-size: 1.2rem;
color: var(--para-text-color);
}
.right-container{
text-align: left;
}
.text-container{
align-self: center;
}
.left-image{
width: 200px;
height: 200px;
background-color: palegreen;
animation: rotate 8s infinite ease-in-out ;
}
#keyframes rotate{
0%{
border-radius: 0;
}
50%{
border-radius: 50%;
transform: rotate(145deg);
background-color: green;
}
100%{
transform: rotate(360deg);
border-radius: 0;
}
}
.social-link-container{
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.social-logo{
font-size: 2rem;
color: var(--primary-text-color);
}
.social-link{
margin: 0 10px;
}
/* About section */
.about-section{
height: 100vh;
padding-top: 38.5px;
border-bottom: 1px solid grey;
}
.about-section > h2{
padding: 10px 10px 10px 0px;
}
/* ----Work section ---- */
#work{
height: 100vh;
padding-top: 38.5px;
}
#work >h2 {
padding: 10px 10px 10px 0;
}
/* .inverse{
background-color: #111;
color: #eee;
} */
.project-card{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px;
border-radius: 5px;
margin-top: 15px;
transition: 0.3s;
}
.project-card:hover{
background-color: rgba(200, 200, 200, 0.2);
}
.left-side-card{
padding-right: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
max-height: 145px;
height: 145px;
}
.project-name{
margin-bottom: 10px;
display: inline-block;
}
.project-link{
text-decoration: none;
letter-spacing: 0.8px;
position: relative;
}
.project-name::after{
position: absolute;
bottom: 0;
left: 0;
content: '';
height: 1px;
width: 100%;
background-color: black;
/* transform: scale(1); */
transition: 0.3s;
transform-origin: left;
}
.project-name:hover::after{
transform: scale(0);
transform-origin: left;
}
.project-description {
word-spacing: 0.8px;
letter-spacing: -0.2px;
}
.project-image{
height: 150px;
width: 250px;
cursor: pointer;
border-radius: 5px;
}
.tech-stack-container{
display: flex;
}
.tech-stack{
margin-right: 10px;
font-size: 12px;
font-weight: 600;
color: rgba(198, 198, 198,0.8);
transition: 0.3s;
}
.project-card:hover .tech-stack{
color: #6d6d6d
}
.repo-link{
margin-left: 20px;
}
.repo-logo{
color: rgba(0, 0, 0, 0.8);
}
.repo-logo:hover{
color: rgba(0, 0, 0, 0.6);
}
#media only screen and (max-width: 500px){
nav{
display: flex;
align-items: center;
justify-content: center;
float: none;
height: 22px;
}
.section{
width: 90%;
}
.main-container{
flex-direction: column-reverse;
justify-content: space-evenly;
}
.name-text{
text-align: center;
font-size: 28px;
}
.intro-text{
font-size: 18px;
}
.project-card{
flex-direction: column;
}
#work{
min-height: fit-content;
height: fit-content;
}
}
header {
position: fixed;
width: 100%;
background: rgba(255, 255, 255, 0.8);
padding: 10px 0;
z-index: 1;
transition: all ease-in-out 0.5s;
}
.green-nav {
background-color: lawngreen;
}
header:after {
content: "";
display: block;
clear: both;
}
nav {
float: right;
padding: 0 10%;
}
nav a {
font-size: 1rem;
margin: 5px 10px;
color: #484848;
text-decoration: none;
transition: 0.3s;
padding-bottom: 2px;
font-weight: 500;
position: relative;
padding: 2px 5px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
nav a::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
height: 1px;
width: 100%;
background-color: #484848;
transform: scaleX(0);
transition: 0.5s;
transform-origin: center;
}
nav a:hover::after {
transform: scaleX(1);
}
* {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
:root{
--primary-text-color: #000;
--para-text-color: #323232;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
/* scrollbar-color: rgba(0, 0, 0, .5);
scrollbar-track-color: #f1f1f1; */
}
a {
text-decoration: none;
color: #000;
}
/*-------- Custom scroll bar and selection -----*/
#media only screen and (min-width: 600px) {
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, .6);
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
}
::selection {
background-color: rgb(78, 81, 83);
color: #fff;
}
/* ------- back to top btn */
#bttBtn-wrapper {
position: absolute;
bottom: 50px;
right: 50px;
background-color: grey;
border-radius: 50%;
height: 40px;
width: 40px;
cursor: pointer;
}
.btnWrapperHidden {
transform: scale(0);
transform-origin: center;
transition: 300ms;
}
.btnWrapperShow {
transform: scale(1) rotate(360deg);
transform-origin: center;
transition: 300ms;
}
#bttBtn {
width: 15px;
height: 15px;
border-radius: 2dpx;
border-left: 3px solid;
border-top: 3px solid;
transform: rotate(45deg);
margin: auto;
margin-top: 11px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="x2GVvk7gy3nGrRmARofMXwMNs9MIXvu2BcyEs7RH8KQ" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
<meta name="Description" content="Name: Rajiv, thoughtlessmind, Profession: Web developer, Country: India, ">
<script src="https://kit.fontawesome.com/09ef7cae5b.js" crossorigin="anonymous"></script>
<script defer src="index.js"></script>
<link rel="stylesheet" href="CSS/style.css">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
<title>Rajiv</title>
</head>
<body>
<div id="top"></div>
<header>
<nav>
<a onclick="moveToWork()">Work</a>
<a onclick="moveToAbout()">About</a>
<a onclick="moveToContact()">Contact</a>
</nav>
</header>
<main>
<div class="main-container section" id="main-section">
<!-- <img src="" alt="avatar" class="avatar" style="height: 200px;width: 200px; background-color: wheat;align-self: center;"> -->
<div class="right-container">
<div class="text-container">
<h1 class="name-text">Rajiv</h1>
<p class="intro-text">
Hey, I'm a web developer based in New Delhi.
<br>
I build things using <b>Javasript</b>.
</p>
</div>
</div>
<div class="left-container">
<div class="left-image">
</div>
<div class="social-link-container">
<a href="https://github.com/thoughtlessmind" target="_blank" id="github" class="social-link">
<i class="fab fa-github social-logo"></i>
</a>
<a href="https://www.linkedin.com/in/thoughtlessmind/" target="_blank" id="linkedin"
class="social-link">
<i class="fab fa-linkedin social-logo"></i>
</svg>
</a>
</div>
</div>
</div>
<!-- Work Section -->
<div id="work" class="work-section section">
<h2>Work</h2>
<div class="project-card">
<div class="left-side-card">
<div>
<a href="https://thoughtlessmind.github.io/Vegan-store" target="_blank" class="project-link">
<h3 class="project-name">
Vegan Store
</h3>
</a>
<p class="project-description">
It is a dummy vegan food store website. <br>
This is a fully responsive website made using CSS Flexbox and Grids
</p>
</div>
<div title="techstack used" class="tech-stack-container">
<p class="tech-stack html-logo">HTML</p>
<p class="tech-stack css-logo">CSS</p>
<a title="open repo" href="" class="repo-link">
<i class="fas fa-code repo-logo"></i>
</a>
</div>
</div>
<div class="right-side-card">
<img src="/assets/vegan-store-img.jpg" title="Visit Page" alt="Vegan store" class="project-image"
id="vegan-store-image">
</div>
</div>
<div class="project-card">
<div class="left-side-card">
<div>
<a href="https://thoughtlessmind.github.io/Vegan-store" target="_blank" class="project-link">
<h3 class="project-name">
Vegan Store
</h3>
</a>
<p class="project-description">
It is a dummy vegan food store website. <br>
This is a fully responsive website made using CSS Flexbox and Grids
</p>
</div>
<div title="techstack used" class="tech-stack-container">
<p class="tech-stack html-logo">HTML</p>
<p class="tech-stack css-logo">CSS</p>
<a title="open repo" href="" class="repo-link">
<i class="fas fa-code repo-logo"></i>
</a>
</div>
</div>
<div class="right-side-card">
<img src="/assets/vegan-store-img.jpg" title="Visit Page" alt="Vegan store" class="project-image"
id="vegan-store-image">
</div>
</div>
</div>
<!-- about section -->
<div id="about" class="about-section section">
<h2>About</h2>
<div class="education-container">
<h3>Education</h3>
</div>
</div>
<!-- Back to top btn -->
<div onclick="moveToTop()" id="bttBtn-wrapper">
<div id="bttBtn">
</div>
</div>
</main>
</body>
</html>
Try this one
const main = document.querySelector('main');
// main.onscroll = logScroll;
main.addEventListener('scroll', logScroll)
function logScroll(e) {
console.log(`Scroll position: ${e.target.scrollTop}`);
if(e.target.scrollTop == 761){
console.log('About Page is Reached');
}
}
Note for target.onscroll
Only one onscroll handler can be assigned to an object at a time. For greater flexibility, you can pass a scroll event to the EventTarget.addEventListener() method instead.
As explained here https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll
As I understand here in my code above, the target.scrollTop will only works when you have selected a valid target in your document object. In this case as I inspect your html markup you have wrapped your whole sections to a main tag.
Now that's it, I tried to get your main tag and add an eventListener to it, and it works to me. Hope this also works to you.

Categories