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>

Why is my "play song" button not working?

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>

How can I move my hamburger menu to the top right?

So I'm just getting into JavaScript and HTML and what not, and I'm struggling a little. I'n not quite sure how to position the hamburger menu I made to the top right of the website for desktop and for mobile.
Any help is much appreciated!
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
min-height: 100vh;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<script src="main.js"></script>
</body>
</html>
Reminder, I am quite new and am trying to make a website for my coach to use in the future. I seem to not get the hang of css yet, and I don't believe typing right and left in position will work hahaha. So any help is much needed and apprciated!

just add position: fixed; and top: 0; right: 0 to .menu-btn:
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
min-height: 100vh;
}
.menu-btn {
position: fixed;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<script src="main.js"></script>
</body>
</html>

You want to show the hamburger icon in a nav menu fixed at the top of the page, so there are a few things you need to change
1. Add the navmenu!
Put your menu icon into a nav element at the top of the page:
<nav class="navbar">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</nav>
2. Make it fixed to the top of the page when you scroll using position:fixed and top:0:
nav.navbar {
position: fixed;
top: 0;
width: 100%;
height: 80px;
}
3. Position the div for your hamburger icon in the navbar. We use position:absolute to put it exactly where we want it in the nav bar - in this case top right
.menu-btn {
position: absolute;
top: 0;
right: 0;
/* rest of your CSS */
}
4. Prevent the navbar from overlapping the content Because the navbar is fixed, it is not part of the page flow so the other elements "ignore" it and it will overlap with them.
Therefore we need to move the content on the page down so it isn't hidden behind the navbar, We can use that using margin or padding :
body {
padding-top: 100px;
/* Rest of your CSS */
}
Handy References for Positioning: CSS Tricks and Mozilla Docs
Note: I have removed your display: flex; from the body because it messes up the layout for the content - if you keep it in, all the paragraphs are displayed in continuous lines instead of separate lines for example.
Working Snippet:
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* display: flex; */
/* remove this or it will mess up your standard text display */
background: #272727;
min-height: 100vh;
position: relative;
/* make space for the navbar - the fixed nav bar is not part of the "flow" so it will overlap the content */
padding-top: 100px;
}
p {
color: white;
}
nav.navbar {
background: #444;
position: fixed;
/* means it will always be stuck to the top of the page */
top: 0;
/* places it at the top */
width: 100%;
height: 80px;
}
.menu-btn {
/* Place the element in the exact position we want - top right corner 0,0 */
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<nav class="navbar">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</nav>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</body>
</html>

You can do it many way
generally html align from left. if you need to change alignment there is many way..
you can simply do it by adding margin-left : auto; to .menu-btn class
margin-left : auto;
There is other way do it ..
Firstly you need to remove position: relative; because one html element can't hold two position property then add code below to .menu-btn class
.menu-btn{
position: fixed;
top: 0;
right: 0;
}

On reload, show loading html page and redirect to the correct page

I'm trying to build a website and am facing serious trouble with the following. So let's say that the user reloads or clicks on a link to another page on the site, I want to show the loading page before we arrive at the page we are looking to go to. Here's my code and I really am having some trouble. Any suggestions would be much appreciated, but I would really like to do this without adding or removing too much. I tried to play around with the javascript but alas, it did not work. If you have suggestions about that, please let me know as well. Thank you so much!
index.html
<!DOCTYPE html>
<meta charset = 'UTF-8'>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "styles.css">
<link rel = "stylesheet" href = "animate.css">
<head>
<script src = "scripts.js"></script>
<a href="#">
<img class = "animated zoomIn" src = "image.png">
</a>
<div id = "navbar" class = "overlay">
×
<div class = "overlay-content">
Home
About Us
Gallery
The Podcast
More
Merch
Appearances
Contact Us
We're Hiring!
<div class = "line"></div>
</div>
</div>
<div class = "animated slideInLeft" style = "text-align: center;">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">
☰ Open Me!
</span>
</div>
</head>
<body>
<h1 style ="text-align:center">
</body>
styles.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#font-face {
font-family: Paintball;
font-weight: bold;
src: url(paintball_web.woff);
}
/* Header Properties */
body{
background-color: navy;
font-family: Paintball;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
/*Navigation Bar Properties */
.overlay {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
text-align: center;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
div span{
color:#42f459;
}
/* Loader Properties */
.wrap {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.text {
color: #42f459;
display: inline-block;
margin-left: 5px;
}
.bounceball {
position: relative;
display: inline-block;
height: 37px;
width: 15px;
}
.bounceball:before {
position: absolute;
content: '';
display: block;
top: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #42f459;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: bounce 500ms alternate infinite ease;
animation: bounce 500ms alternate infinite ease;
}
#-webkit-keyframes bounce {
0% {
top: 30px;
height: 5px;
border-radius: 60px 60px 20px 20px;
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
35% {
height: 15px;
border-radius: 50%;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
top: 0;
}
}
#keyframes bounce {
0% {
top: 30px;
height: 5px;
border-radius: 60px 60px 20px 20px;
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
35% {
height: 15px;
border-radius: 50%;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
top: 0;
}
}
Welcome.html
<!DOCTYPE html>
<meta charset = 'UTF-8'>
<meta http-equiv="Refresh" content="4; url=index.html" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "styles.css">
<div class="wrap">
<div class="loading">
<div class="bounceball"></div>
<div class="text">NOW LOADING</div>
</div>
</div>
scripts.js
function openNav() {
document.getElementById("navbar").style.width = "100%";
}
function closeNav() {
document.getElementById("navbar").style.width = "0%";
}
document.addEventListener('DOMContentLoaded',function(){
if(document.readyState === 'complete'){
alert("loaded");
}
}
)
document.addEventListener('readystatechange',function(){
if (document.readystate === 'loading'){
window.location = "Welcome.html";
}
}
)

Progress Bar to hide the page in till the page is loaded completely

My webpage takes anywhere from .5sec - 3 seconds to load completely. I was just wondering if there was a way to have an overlay to show in till the page was loaded. When the page finished loading, I would want this overlay to hide. Something like a progress bar or a .gif. I'm using the razor engine in MVC3.

Three things I have done to make this work: PS, Sorry for poor code blocks, new to all of this.
HTML Div:
<div id ="blocker">
<div>Loading...</div></div>
CSS:
#blocker{position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1000;
opacity: 0.3;
display: none;
}
#blocker div
{ position: absolute;
top: 50%;
left: 50%;
width: 5em;
height: 2em;
margin: -1em 0 0 -2.5em;
color: #fff;
font-weight: bold;
}
JQuery before the Ajax gets called:
$("#blocker").show();
$.ajax`

What I do is:
var loadingTimeout;
$j('body').ajaxStart(function () {
loadingTimeout= setTimeout(function () {
$("#blocker").show();
}, 1000);
});
$j('body').ajaxStop(function () {
clearTimeout(loadingTimeout);
$("#blocker").hide();
});
On every ajaxcall made in your page, your blocker gets displayed after 1 second. When the client gets the resonse, the block gets hidden again. What do yout think?

Maybe this one might help you
$(document).ready(function() {
$('button').click(function(){
$('body').addClass('noscroll');
document.querySelector("#overlay").classList.remove('is-visible');
});
});
#overlay {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
opacity: .80;
}
button {
margin: 40px;
padding: 5px 20px;
cursor: pointer;
}
.spinner {
margin: 0 auto;
height: 64px;
width: 64px;
animation: rotate 0.8s infinite linear;
border: 5px solid firebrick;
border-right-color: transparent;
border-radius: 50%;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.is-visible {
display: none;
}
.noscroll {
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<button>Load Spinner</button>
<div id="overlay" class="is-visible">
<div class="spinner"></div>
<br/>
Loading...
</div>
</body>
</html>