We Keep Coding

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 get the canvas to show behind my HTML so my animated cursor will move over the screen?

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

Whats the issue in reset button of JS counter?

This is the script, it work fine as you can see but this reset functionality have some issue, it turns the value to 0 but when again increase the value it starts from the last stored value, whats the issue?
This is the CSS of the counter application this we help you to run this file.
Ans this is the html file is pretty much good but just in issue with script
var counter = 0;
$("#box").text(counter);
function reset() {
counter = 0;
$("#box").text(counter);
}
function inc() {
counter = counter + 1;
$("#box").text(counter);
}
function dec() {
counter = counter - 1;
$("#box").text(counter);
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
}
.main {
background: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 30px;
}
.main h1 {
margin-bottom: 50px;
}
#box {
height: 50px;
line-height: 50px;
background: #efefef;
text-align: center;
margin-top: 40px;
box-shadow: 1px 1px 5px #000;
font-size: 30px;
}
.btn {
display: flex;
}
.inc,
.dec {
margin: 10px;
padding: 10px;
background: #fcfbfc;
margin-top: 30px;
text-transform: uppercase;
cursor: pointer;
}
.reset {
background: orange;
padding: 5px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="counter.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Counter</title>
</head>
<body>
<div class="main">
<h1 style="font-family: sans-serif;">Counter App</h1>
<div id="box">
</div>
<div class="btn">
<div class="inc" id="inc" onclick="inc();">
Increase
</div>
<div class="dec" id="dec" onclick="dec();">
Decrease
</div>
</div>
<div class="reset" onclick="reset();">
RESET
</div>
</div>
</body>
</html>

Added reset counter variable to 0 in reset() function.
var counter = 0;
$("#box").text(counter);
function reset() {
counter = 0;
$("#box").text(0);
}
function inc() {
counter = counter + 1;
$("#box").text(counter);
}
function dec() {
counter = counter - 1;
$("#box").text(counter);
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
}
.main {
background: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 30px;
}
.main h1 {
margin-bottom: 50px;
}
#box {
/* width: 50px; */
height: 50px;
line-height: 50px;
background: #efefef;
text-align: center;
margin-top: 40px;
box-shadow: 1px 1px 5px #000;
font-size: 30px;
}
.btn {
display: flex;
}
.inc,
.dec {
margin: 10px;
padding: 10px;
background: #fcfbfc;
margin-top: 30px;
text-transform: uppercase;
cursor: pointer;
}
.reset {
background: orange;
padding: 5px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="counter.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Counter</title>
</head>
<body>
<div class="main">
<h1 style="font-family: sans-serif;">Counter App</h1>
<div id="box">
</div>
<div class="btn">
<div class="inc" id="inc" onclick="inc();">
Increase
</div>
<div class="dec" id="dec" onclick="dec();">
Decrease
</div>
</div>
<div class="reset" onclick="reset();">
RESET
</div>
</div>
</body>
</html>

Now i have write a new script for it. Check it out all!
var a = 0;
var displayValue = document.getElementById('box');
var updateValue = function() {
displayValue.innerHTML = a;
};
var add = function(valueToAdd) {
a += valueToAdd;
updateValue();
};
var sub = function(valueToAdd) {
a -= valueToAdd;
updateValue();
};
var reset = function() {
a = 0;
updateValue();
};
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
}
.main {
background: #efefef;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 30px;
}
.main h1 {
margin-bottom: 50px;
}
#box {
height: 50px;
line-height: 50px;
background: #efefef;
text-align: center;
margin-top: 40px;
box-shadow: 1px 1px 5px #000;
font-size: 30px;
}
.btn {
display: flex;
}
.inc,
.dec {
margin: 10px;
padding: 10px;
background: #fcfbfc;
margin-top: 30px;
text-transform: uppercase;
cursor: pointer;
}
.reset {
background: orange;
padding: 5px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="counter.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Counter</title>
</head>
<body>
<div class="main">
<h1 style="font-family: sans-serif;">Counter App</h1>
<div id="box">
</div>
<div class="btn">
<div class="inc" id="inc" onclick="add(1);">
Increment
</div>
<div class="dec" id="dec" onclick="sub(1);">
Decrement
</div>
</div>
<div class="reset" onclick="reset();">
RESET
</div>
</div>
</body>
</html>

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.

Make text color of colorpicker value

I need your help. I have button. With the press on it I can make text. With click on this text I can edit this text. And I have colorpicker. I need, when I choose color the text which I created also will change color(it will change on this value of colorpicker) I don't know how to do this. Help me please
function addText() {
var type = $(".select-txt").val();
var align = $(".form-align").val();
var float = "text-align:";
var id = Date.now();
var editBlock = "$('.edit-block')";
var display = ",'block'";
var colorValue = $(".color").val();
var color = "color:";
var closeTag = ";";
var onclick = "onclick="+editBlock+".css('display'"+display+");";
var ordinary = "<div class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+closeTag+
">text</div>";
var h = "<"+type+" class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+">text</"+type+">";
if(type == "ordinary") {
$(".preview").append(ordinary);
}
else if(type.startsWith("h")) {
$(".preview").append(h);
}
$(".color").minicolors({
defaultValue: "#000"
});
$(".color").on("change", function() {
var colorValue = $(".color").val();
ordinary.append(color+colorValue);
});
}
function showTextWindow() {
var modal = $(".modal-txt-container");
if (modal.css('display', "none")) {
modal.css('display', "grid");
}
else {
modal.css('display', "none");
}
}
function showTextWindow() {
var modal = document.querySelector(".modal-txt-container");
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
}
}
function showElement() {
var modal = document.querySelector(".choose-option");
var add = document.querySelector('.add');
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
add.style.display = "block";
}
}
* {
outline: none;
padding: 0;
margin: 0;
}
.choose-option {
background-color: #352a2c;
position: fixed;
color: white;
font-family: 'Scada', sans-serif;
padding: 15px;
width: 14%;
}
.insert-txt-block {
padding-bottom: 3%;
font-size: 1.3em;
}
.btn-txt::before {
content: '\f031';
font-family: "fontAwesome";
margin-right: 3%;
}
.btn-txt {
font-size: 1.2em;
list-style: none;
transition: 0.1s;
padding: 5px;
}
.btn-txt:hover {
background-color: #727272;
}
.modal-insert-txt {
background-color: #352a2c;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
padding-right: 25px;
width: 130%;
border-radius: 4px;
}
.modal-txt-container {
display: grid;
justify-content: center;
right: 0;
left: 0;
position: fixed;
top: 15%;
display: none;
}
.container {
position: fixed;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
border: 0 !important;
background-image: none;
width: 85%;
height: 100%;
margin: 0;
padding: 0 0 0 .5em;
cursor: pointer;
color: black;
background: white;
border-radius: 1px 0px 0px 1px;
}
.form-group::after {
content: '\25BC';
position: absolute;
padding: 0 0.5em;
background: rgb(59, 61, 52);
pointer-events: none;
line-height: 1.7em;
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
color: white;
}
.form-group {
position: relative;
display: block;
height: 1.7em;
margin: 1% 0% 5% 0;
border: 1px solid #272822;
}
.btn-insert-txt {
border: none;
color: white;
background: #ff5959;
padding: 5px;
font-size: 1.01em;
border-radius: 2px;
cursor: pointer;
}
.btn-insert-txt:hover {
background: #e54040;
}
.modal-insert-txt span {
font-size: 1.1em;
}
.modal-insert-txt h2 {
padding-bottom: 2%;
}
.modal-insert-txt hr {
margin-bottom: 3%;
}
.flex-close-title {
display: flex;
justify-content: space-around;
}
.type-insert li {
cursor: pointer;
}
.close {
font-size: 1.7em;
margin-top: -1%;
cursor: pointer;
}
.close::after {
content: '\f057';
font-family: "fontAwesome";
color: #ff5959;
}
.add {
font-size: 2em;
cursor: pointer;
display: none;
position: fixed;
left: 1%;
top: 2%;
}
.add::after {
content: '\f055';
font-family: "fontAwesome";
color: #ff5959;
}
#textarea-edit {
width: 80%;
height: 100px;
resize: none;
border: 2px solid #3B3D45;
background: #3B3D45;
color: white;
padding: 4%;
font-size: 1.05em;
border-radius: 4px;
display: flex;
justify-content: center;
position: relative;
top: 1%;
}
.edit-block {
background: #272822;
width: 20%;
height: 100vh;
float: right;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
display: none;
position: fixed;
top: 0;
right: 0;
}
.edit-block span {
font-size: 1.3em;
}
.minicolors-theme-default .minicolors-input {
height: 29px !important;
padding-left: 30px !important;
}
<!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>Site Bilder</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Scada:400,700&subset=cyrillic" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css">
</head>
<body>
<span class="add" onclick="showElement()"></span>
<div class="choose-option">
<div class="flex-close-title">
<div class="insert-txt-block">Insert elements</div>
<span class="close" onclick="showElement()"></span>
</div>
<ul class="type-insert">
<li class="btn-txt" onclick="showTextWindow()">Text</li>
</ul>
</div>
<div class="modal-txt-container">
<div class="modal-insert-txt">
<h2>Insert text</h2>
<hr>
<span>Тип Текста</span>
<div class="form-group">
<select class="select-txt">
<option value="ordinary" selected>Plain text</option>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
</div>
<span>Text alignment</span>
<div class="form-group">
<select class="form-align">
<option value="left">left</option>
<option value="center">Center</option>
<option value="right">right</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn-insert-txt" onclick="addText()">Insert text</button>
</div>
</div>
</div>
<div class="preview">
</div>
<div class="edit-block">
<div class="wrap">
<span class="title-textarea">
Цвет
</span>
<input type="text" id="hue" class="color" data-control="hue">
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>

The solution I decided on is simple enough, I add a class to know which piece of text I'm currently editing, and then set the color CSS attribute to the colour picker's selection for that selected class.
So your onclick is now:
var onclick = 'onclick="editTextColour(this)"';
I made a new function to handle the basics, (this) as the param for onclick is treated as the element that calls it:
function editTextColour(elem) {
$('.editing').removeClass('editing');
$(elem).addClass('editing');
$('.edit-block').show();
}
And then your change event for the color picker is just this:
$(".color").on("change", function() {
var colorValue = $(".color").val();
$('.preview .editing').css('color', colorValue);
});
JSFiddle