We Keep Coding

How to make a created div in Javascript fade in and fade out?

I'm making a website with a 'like' function and if you click the like icon it should make div as a alert at the bottom of the website. The code that I wrote makes the div fade in and after a few seconds the pop up fades out. Then after the fade out the pop up just shows up again on the screen, but stuck this time. I'm learning Javascript so it is new to me so anything would be appreciated.
function myFunction() {
var test = document.querySelector('#color');
var x = document.createElement('div');
if(test.style.color == ""){
test.style.color = "red";
x.innerHTML ='Liked this tournament!';
x.id = "snackbar";
x.className = "show";
} else{
test.style.color = "";
x.innerHTML('Removed like from this tournament!');
x.id = "snackbar";
x.className = "show";
}
document.body.appendChild(x);
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 10%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<ul>
<li onclick="myFunction();"><i id="color" class="fas fa-heart"></i></li>
<li><i class="fas fa-plus"></i></li>
<li><i class="fas fa-expand"></i></li>
</ul>
I think it's maybe because of the document.body.appendChild(x); overwriting the css? I'm not sure what's happening..
A short video about the pop up: https://imgur.com/a/KfD7hNW

I'm not sure if you forgot to copy a portion of your CSS but you don't seem to have any actual animations. If you want those effects you can use the CSS that https://animate.style/ provides either by importing it or extracting it from their GitHub files if you just want the two animations. But if you're going to use the animation attribute, you need some kind of keyframe animation built out otherwise nothing is going to happen. The forwards value lets the animations play and then doesn't repeat them so it's not flashing after the user clicks the button.
Also, you had some broken JS but that was a simple mistake.
Worth reading: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations so you can see how all of the attributes can be animated and controlled
function myFunction() {
var test = document.querySelector('#color');
var x = document.createElement('div');
if(test.style.color == ""){
test.style.color = "red";
x.innerHTML ='Liked this tournament!';
x.id = "snackbar";
x.className = "show";
} else{
test.style.color = "";
x.innerHTML='Removed like from this tournament!'
x.id = "snackbar";
x.className = "show";
}
document.body.appendChild(x);
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 10%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
animation: fadeIn 0.5s, fadeOut 0.5s 2.5s forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
.fadeIn {
animation-name: fadeIn;
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<ul>
<li onclick="myFunction();">click me<i id="color" class="fas fa-heart"></i></li>
<li>not me<i class="fas fa-plus"></i></li>
<li>or me<i class="fas fa-expand"></i></li>
</ul>

In your approach every time that you click your icon you will create a new div element in the same place, which will create tons of div.. This is not efficient. So you can try something like this.
After adding show class to your div element you can set a timer which will wait for animation happens. Then remove that class with
myDiv.classList.remove('show');
const test = document.querySelector('#color');
const myDiv = document.createElement('div');
myDiv.id = "snackbar";
document.body.appendChild(myDiv);
test.addEventListener('click',() =>{
if(test.style.color == ""){
test.style.color = "red";
myDiv.innerText ='Liked this tournament!';
myDiv.className = "show";
setTimeout(() =>{
myDiv.classList.remove('show');
}, 2000);
}
else{
test.style.color = "";
myDiv.innerText = 'Removed like from this tournament!';
myDiv.className = "show";
setTimeout(() =>{
myDiv.classList.remove('show');
}, 2000);
}
})
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
overflow: hidden;
display: grid;
place-content: center;
margin:0;
background-color: bisque;
font-size: 100px;
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 10%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
animation: fadeIn 0.5s, fadeOut 0.5s 1s forwards;
}
#keyframes fadeIn {
0%{
opacity:0;
}
100%{
opacity: 1;
}
}
#keyframes fadeOut {
0%{
opacity:1;
}
100%{
opacity: 0;
}
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<ul>
<li>click me<i id="color" class="fas fa-heart"></i></li>
<li>not me<i class="fas fa-plus"></i></li>
<li>or me<i class="fas fa-expand"></i></li>
</ul>

Stuck with hamburger menu

I am making a hamburger menu that when clicked will show up on the entire screen it works just fine but now I am trying to make it when i click on option in the menu it takes me to the section i want but them it closes i have written this code but it only works on the first option the others don't do anything
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav_options");
const navMargin = document.querySelector(".sec_about");
const onClick = document.querySelector(".nav_item")
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
navMargin.classList.toggle("active");
}
onClick.addEventListener("click", closeham);
function closeham() {
navMenu.classList.toggle("active");
hamburger.classList.toggle("active");
}
/* making the navbar responsive */
.hamburger {
display: none;
margin-right: 20px;
}
.bar {
display: block;
width: 30px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #fa900f;
}
#media only screen and (max-width: 1000px) {
.nav_options {
position: absolute;
left: -100%;
top: 4rem;
flex-direction: column;
background-color: #000000;
border: solid 15px #fff;
width: 100%;
height: 1000px;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
}
nav ul li a {
color: #fa900f;
}
.nav_options.active {
left: 0;
}
.nav_item {
margin: 3rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.sec_about.active {
margin-top: 35rem;
}
}
<header>
<nav>
<img src="/images/Logo.png" alt="Logo">
<ul class="nav_options">
<li class="nav_item"><a class="nav_item" href="#About">&ltAbout&gt</a></li>
<li class="nav_item"><a class="nav_item" href="#Skills">&ltSkill&gt</a></li>
<li class="nav_item"><a class="nav_item" href="#ResumeWork">&ltWork&gt</a></li>
<li class="nav_item"><a class="nav_item" href="#ResumeWork">&ltResume&gt</a></li>
<li class="nav_item"><a class="nav_item" href="#Contact">&ltContact&gt</a></li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>

You have a tiny error in your code.
The function querySelector() captures only one item that pass the requirements. You need to use querySelctorAll() to assign a click event. Based on your posted code here your new javascript:
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav_options");
const navMargin = document.querySelector(".sec_about");
//Here was a mistake
const onClick = document.querySelectorAll(".nav_options li.nav_item");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
navMargin.classList.toggle("active");
}
//Addational change, because querySelectorAll returns an array of elements
for (i = 0; i < onClick.length;i++) {
onClick[i].addEventListener("click", closeham);
}
function closeham() {
navMenu.classList.toggle("active");
hamburger.classList.toggle("active");
}

Fade in pause for a sec and fade out a span only JS CSS HTML

hey i try to fade in pause for a sec and fade out a span , im using class add and remove through timeout and interval . i cant figure it out someone can help?
i tried to do it with active class but i didnt make it .
i searched for it on google and found nothing with JS only Jquery that i dont want to use ATM
--------HTML----
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
-----CSS-----
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
visibility: hidden;
position: absolute;
}
/* .design-kinds.active {
opacity: 1;
visibility: visible;
animation: fade 3s ease-in-out 3s 1;
} */
.design-kinds.fadein {
animation: fadeIn 1s ease-in;
visibility: visible;
}
.design-kinds.fadeout {
animation: fadeOut 1s ease-out;
visibility: hidden;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
#keyframes fadeOut {
0% {
opacity: 100;
}
100% {
opacity: 0;
}
}
---JS---
const changeText = document.querySelector(".what__design");
const textToShow = document.querySelectorAll(".design-kinds");
//Fade in First span and fade out Last span
let index = 0;
let doneOrNot = "not";
function showText() {
const spans = [...textToShow];
if (index === spans.length - 1) {
index = 0;
}
if (doneOrNot === "done") {
doneOrNot = "not";
setTimeout(() => {
spans[index].classList.remove("fadein");
spans[index].classList.add("fadeout");
}, 4000);
index++;
console.log(doneOrNot);
}
if (doneOrNot === "not") {
spans[index].classList.add("fadein");
doneOrNot = "done";
console.log(doneOrNot);
}
}
setInterval(showText, 4000);
THANKS <3

If you want to animate it for a single time, than you don't want to need javascript.
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
position: absolute;
}
.web{
animation: animate1 4s 2s 1 ease-in-out ;
color: black;
opacity: 0;
}
.logo{
animation: animate1 4s 8s 1 ease-in-out ;
opacity: 0;
}
.brand{
animation: animate1 4s 14s 1 ease-in-out ;
opacity: 0;
}
#keyframes animate1{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
#keyframes animate2{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
#keyframes animate3{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds web">WebSite's</span>
<span class="design-kinds logo">Logos</span>
<span class="design-kinds brand">Brands</span>
</div>
</div>
<!-- <script src="index.js"></script> -->
</body>
</html>

The given JS checks whether done is set, if it is immediately sets it to not and then checks if it's not and acts on that. This probably needs changing to an if...else combination.
Although you can do the animation by JS you may like to consider doing it with CSS as that should optimise the system's use of for example the GPU as you are only changing an animatable property (opacity).
While the specific example given here could be done entirely by CSS - setting up one set of keyframes which fade in, pause and fadeout a text for 33.3333% of the total animation time of 3*whatever seconds you choose - to be more general it adds a bit of JS which is run just once at the start to set up the keyframes to give the right %s however many texts there are.
This is done by setting CSS variables which are used in CSS calcs to give the overall animation time and the delay times - each text starts its animation offset depending on its index and then it runs forever.
<head>
<style>
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
/*visibility: hidden;*/
position: absolute;
animation: fadeInOut calc(var(--num) * var(--t)) infinite linear;
animation-delay: calc(var(--n) * var(--t));
animation-fill-mode: forwards;
}
</style>
<style id="keyframes">
</style>
</head>
<body>
div class="desgin">
<div class="im__desgin">
<h1>I'm Desgin.</h1>
</div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
<script>
const showFor = 6; // set this to the number of seconds each text takes to fade in, pause for 1 second and fade out again
const whatDesign = document.querySelector('.what__design');
const designKinds = document.querySelectorAll('.design-kinds');
const len = designKinds.length;
whatDesign.style.setProperty('--num', len);
whatDesign.style.setProperty('--t', showFor + 's');
for (let n = 0; n < len; n++) {
designKinds[n].style.setProperty('--n', n);
}
const pcEachGets = 100 / len; // the percentage of total cycle time each bit of text gets
const pcForOneSecond = pcEachGets / showFor; // the % of total cycle time that equals 1 second - 1 second is the required pause time
const pcFadeInOrOut = (pcEachGets - pcForOneSecond) / 2;
document.querySelector('#keyframes').innerHTML = `#keyframes fadeInOut {
0% {
opacity: 0;
}
` + pcFadeInOrOut + `% {
opacity: 1;
}
` + (pcFadeInOrOut + pcForOneSecond) + `% {
opacity: 1;
}
` + pcEachGets + `% {
opacity: 0;
}
100% {
opacity: 0;
}
}`;
</script>
</body>

I think this will help you.
if you want this animation as a infinite loop.
const changeText = document.querySelector(".what__design");
const textToShow = document.querySelectorAll(".design-kinds");
//Fade in First span and fade out Last span
let index = 0;
function showText() {
setInterval(() => {
if (index < 2) {
textToShow[index].classList.add("fadeinOut");
index++;
}
else {
textToShow[index].classList.add("fadeinOut");
setTimeout(() => {
textToShow[2].classList.remove("fadeinOut");
}, 4000);
index = 0;
}
if (index > 0) {
setTimeout(() => {
textToShow[index - 1].classList.remove("fadeinOut");
}, 4000);
}
}, 5000);
}
showText();
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
visibility: hidden;
position: absolute;
}
/* .design-kinds.active {
opacity: 1;
visibility: visible;
animation: fade 3s ease-in-out 3s 1;
} */
.design-kinds.fadeinOut {
animation: fadeInOut 4s ease-in;
visibility: visible;
}
#keyframes fadeInOut {
0%,100% {
opacity: 0;
}
20%,80% {
opacity: 100;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>

I figure some out but still i have a delay that i doest succeed to manage the delay after the function is done
<div class="im__desgin"><h1>I Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds" id="Kind-1">WebSite's</span>
<span class="design-kinds" id="Kind-2">Logos</span>
<span class="design-kinds" id="Kind-3">Brands</span>
</div>
</div>
.desgin {
text-align: center;
font-size: 40px;
color: aliceblue;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
position: relative;
}
.design-kinds {
text-align: center;
opacity: 0;
position: absolute;
}
.effect {
animation: animate1 4s 2s 1 ease-in-out;
transform: scale(0.5);
opacity: 0;
}
#keyframes animate1 {
0%,
100% {
transform: scale(0.5);
opacity: 0;
}
30%,
50% {
transform: scale(1);
opacity: 10;
}
30% {
transform: scale(1);
opacity: 10;
}
}
const spans = document.querySelectorAll(".design-kinds");
//call function before page load
showText();
//Changing Text
function showText() {
//Kind --1--
$("#Kind-1").addClass("effect");
setTimeout(() => {
$("#Kind-1").removeClass("effect");
}, 6000);
//Kind --2--
setTimeout(() => {
$("#Kind-2").addClass("effect");
}, 3700);
setTimeout(() => {
$("#Kind-2").removeClass("effect");
}, 9800);
//Kind --3--
setTimeout(() => {
$("#Kind-3").addClass("effect");
}, 7700);
setTimeout(() => {
$("#Kind-3").removeClass("effect");
}, 14000);
}
setInterval(showText, 13000);

How to make copy buttons alert for many button?

Hey am new to javascript but putting my all efforts I have written a javascript to copy the text inside a <p></p> element.
My javascript
function copyToClipboard(var1){
let val = document.getElementById(var1).innerHTML;
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = val;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
}
But I needed a custom alert button when text is copied.
My html
<div class="Engstatus">
<h2 class="statusheading">Latest English Status</h2>
<div id="englishstatus">
<div class="latestatus">
<p id="p1">life os good when hou have books</p>
<button class="copystatus btn" onclick="copyToClipboard('p1')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
<div class="latestatus">
<p id="p2">Google is a open source library. It is a open source by lary page and sergy brime</p>
<button class="copystatus btn" onclick="copyToClipboard('p2')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
<div class="latestatus">
<p id="p3">Cat is better than dog</p>
<button class="copystatus btn" onclick="copyToClipboard('p3')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
</div>
</div>
I needed the <span class="copystatusalert">Copied!</span> to be visible for a few seconds when clicked the respective copy button and become vanished.
For more reference My Css
.copystatusalert{
position: relative;
background-color: var(--primary-color);
color: #ffffff;
margin-left: 10px;
padding: 3px 3px;
border-radius: 5px;
z-index: 2;
opacity: 1;
pointer-events: auto;
transition: opacity 0.4s, margin-top 0.4s;
}
.copystatusalert:before{
content:"";
position: absolute;
height: 10px;
width: 10px;
background-color: var(--primary-color);
left: -5px;
transform: translateY(50%) rotate(45deg);
z-index: -1;
top: 17%;
}

Here is a short addition to the copyToClipboard function in order to just change the .copystatusalert color...
function copyToClipboard(var1) {
let val = document.getElementById(var1).innerHTML;
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = val;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
// to change the color of .copystatusalert
let copyStatus = document.getElementById(var1).closest(".latestatus").querySelector(".copystatusalert")
copyStatus.style.color = "black";
// Change the color again in 800 milliseconds
setTimeout(function(){
copyStatus.style.color = "white";
},800)
}
.copystatusalert {
position: relative;
background-color: var(--primary-color);
color: #ffffff;
margin-left: 10px;
padding: 3px 3px;
border-radius: 5px;
z-index: 2;
opacity: 1;
pointer-events: auto;
transition: opacity 0.4s, margin-top 0.4s;
}
.copystatusalert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: var(--primary-color);
left: -5px;
transform: translateY(50%) rotate(45deg);
z-index: -1;
top: 17%;
}
<div class="Engstatus">
<h2 class="statusheading">Latest English Status</h2>
<div id="englishstatus">
<div class="latestatus">
<p id="p1">life os good when hou have books</p>
<button class="copystatus btn" onclick="copyToClipboard('p1')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
<div class="latestatus">
<p id="p2">Google is a open source library. It is a open source by lary page and sergy brime</p>
<button class="copystatus btn" onclick="copyToClipboard('p2')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
<div class="latestatus">
<p id="p3">Cat is better than dog</p>
<button class="copystatus btn" onclick="copyToClipboard('p3')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
</div>
</div>
Now... Since you are "new to javascript", I suggest you to close look at this solution.
The intend is to create ONE function which will apply to as many as you want status elements... and avoid managing the unique id for all <p>... And to "reduce" the redondant HTML markup (buttons and alert spans).
Please look at the comments below for step-by-step details and feel free for questions. ;)
// The animation delay for the "copied" alert
let copyAlertAnimationDelay = 400; // ms
// Get all the status elements
let status = document.querySelectorAll(".status");
// For each status, add a button with its event listener
status.forEach(function(elem) {
// Create the button
let btn = document.createElement('button');
btn.setAttribute("class", "copystatus btn");
btn.innerText = "Copy";
// Append the button
elem.after(btn);
// Set the button event listener
btn.addEventListener("click", function() {
// Get the status
let statusToCopy = elem.innerText;
// Create the temporary textarea to copy the text
const selBox = document.createElement('textarea');
// Use a class instead of multiple element.style.property changes
selBox.setAttribute("class", "hiddenCopy");
selBox.value = statusToCopy;
// Append, copy and remove.
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
selBox.remove();
// create a "Copied!" element.
let alert = document.createElement("span");
alert.innerText = "Copied!";
alert.setAttribute("class", "copystatusalert");
// Use the copyAlertAnimationDelay variable to set the CSS transition
// So it matches the setTimeout delay below
alert.style.transition = `all ${copyAlertAnimationDelay/1000}s`;
// The animation timeouts
// Show
this.after(alert);
setTimeout(function() {
alert.style.opacity = 1;
}, 1)
// Hide
// Change opacity
setTimeout(function() {
alert.style.opacity = 0;
// Remove element
setTimeout(function() {
document.querySelector(".copystatusalert").remove();
}, copyAlertAnimationDelay);
}, copyAlertAnimationDelay * 3) // 3 times the animation delay...
});
});
body {
--primary-color: #a7d8f2; /* ADDED */
}
.copystatusalert {
position: relative;
background-color: var(--primary-color);
/*color: #ffffff; REMOVED */
margin-left: 10px;
padding: 3px 3px;
border-radius: 5px;
z-index: 2;
opacity: 0;
/* opacity was 1 */
pointer-events: auto;
/*transition: opacity 0.4s, margin-top 0.4s; REMOVED */
}
.copystatusalert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: var(--primary-color);
left: -5px;
transform: translateY(50%) rotate(45deg);
z-index: -1;
top: 17%;
}
/* ADDED */
.hiddenCopy {
position: "fixed";
left: 0;
top: 0;
opacity: 0;
}
<div class="Engstatus">
<h2 class="statusheading">Latest English Status</h2>
<div id="englishstatus">
<div class="latestatus">
<p class="status">life os good when hou have books</p>
</div>
<div class="latestatus">
<p class="status">Google is a open source library. It is a open source by lary page and sergy brime</p>
</div>
<div class="latestatus">
<p class="status">Cat is better than dog</p>
</div>
</div>
</div>

Toast is used to display tasks like this.
Use this code
function myFunction() {
var x = document.getElementById("message");
x.className = "show";
// you can set the time here//
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
body {
font-family: 'Oswald', sans-serif;
}
#message {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
#message.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* The animation*/
#-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
<button onclick="myFunction()">Copy</button>
<!-- This is the toast message -->
<div id="message">Text is copied!!</div>

Updating "status()"

I'm creating a portfolio website and the way I'm navigating through projects is by using "status". So for instance, if you click/scroll once, project 1 will reveal. Click/scroll a second time, project 2 will reveal. So on so forth.
<body onwheel="switchprojects()"></body>
<div class="explore-box" onClick="switchprojects()"></div>
projectStatus = 1;
function switchprojects() {
if(projectStatus==1) {
$('#bona').removeClass('float');
$('#peak').addClass('float');
projectStatus = 2;
}
else if(projectStatus==2) {
$('#peak').removeClass('float');
$('#trap').addClass('float');
projectStatus = 3;
}
else if(projectStatus==3) {
$('#trap').removeClass('float');
$('#fp').addClass('float');
projectStatus = 4;
}
else if(projectStatus==4) {
$('#fp').removeClass('float');
$('#bona').addClass('float');
projectStatus = 1;
}
}
As you can see I have two separate elements, one for scrolling and one for clicking. It's working great so far, but I'm running into one issue—the status does not update between the two elements. If I scroll twice in the body for example, the same function on the clickable div won't update its status. Does anyone know how to fix this?
Thank you!
https://codepen.io/anon/pen/qozoKj Here's the codepen.
UPDATE: I'm not sure why, but when I uploaded my code to codepen, it seems to have updated the status of the clicks....but now every key on my keyboard activates the css change. I'm very confused.

The reason all the keys are triggering switchprojects() is because you have an onkeydown="switchprojects()" on the <body>.
The reason the clicks are not listened to is that the <div class="explore-box"> has no height or width set on it although its position: absolute. Mabey you should consider changing the click event to the <div class="section"> CodePen

Try something like
$(function(){
$('#bona').addClass('float');
});
projectStatus = 1;
function switchprojects() {
if(projectStatus==1) {
$('#bona').removeClass('float');
$('#peak').addClass('float');
projectStatus = 2;
}else if(projectStatus==2) {
$('#peak').removeClass('float');
$('#trap').addClass('float');
projectStatus = 3;
}else if(projectStatus==3) {
$('#trap').removeClass('float');
$('#fp').addClass('float');
projectStatus = 4;
}else if(projectStatus==4) {
$('#fp').removeClass('float');
$('#bona').addClass('float');
projectStatus = 1;
}
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.section {
width: 100%;
height: 100vh;
position: relative;
}
h1 {
color: white;
font-family: 'league';
font-size: 8vw;
position: absolute;
text-align: center;
line-height: 100vh;
width: 100%;
font-weight: 100;
margin: 0;
padding: 0;
transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
transition: 0s;
}
.float {
transform: translate(0)!important;
transition: transform 1s;
transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
opacity: 1!important;
}
.explore-box {
position: absolute;
margin-left: 55%;
margin-top: 70vh;
}
.explore-line {
background-color: white;
width: 70px;
height: 1px;
position: relative;
float: left;
margin-top: 9pt;
margin-right: 7pt;
transition-timing-function: cubic-bezier(0.0, 0.3, 0.5, 1);
transition: 0.4s;
}
.explore-wrap {
overflow: hidden;
float: right;
}
.explore-wrap h2 {
color: white;
margin: 0;
font-size: 14pt;
transform: 1s ease;
}
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<body style="background-color: #141219;" onwheel="switchprojects()">
<div class="section">
<h1 id="bona" style="transform: translateY(10%); opacity: 0;">BONA COFFEE</h1>
<h1 id="peak" style="transform: translateY(10%); opacity: 0;">PEAK EXPLORATIONS</h1>
<h1 id="trap" style="transform: translateY(10%); opacity: 0;">TRAP MAGAZINE</h1>
<h1 id="fp" style="transform: translateY(10%); opacity: 0;">FIELD & PANTRY</h1>
<div class="explore-box" onClick="switchprojects()">
<div class="explore-line"></div>
<div class="explore-wrap">
<h2>View</h2>
</div>
<br>
<div class="explore-wrap" style="position: absolute; right: 0;">
<h2>Project</h2>
</div>
</div>
</div>
</body>
As You say I have added the click event on View Projects instead of body