I have a gif that I am trying to remove after 3 seconds of it being toggled on. Here is the breakdown. • When the user clicks on the orange square it gets removed. • A gif is toggled on. • After 3 seconds I want the gif to get removed and the brown circle toggle on. I know I have to use the setTimeout method, but I do not know how to apply it. Can anyone help? `
//Removes square
function remove(){
this.remove();
}
//Adds gif
let gif = document.querySelector (".gif");
function showHide(){
gif.classList.toggle("hide");
}
//Removes gif
*{
padding:0;
margin:0;
}
body{
background-color:pink;
}
.parent{
width:100vw;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.gif{
border-radius: 20px;
z-index: 1;
}
.hide{
display:none;
}
#square{
width:200px;
height:200px;
position: absolute;
background-color:orange;
border-radius: 20px;
z-index: 2;
top:50%;
left:50%;
transform: translate(-50%,-50%);
cursor: pointer;
}
.circle{
width: 200px;
height:200px;
background-color:brown;
border-radius: 50%;
}
.hide_2{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> gif reveal </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parent">
<img class="gif hide" src="kuromi.gif">
<div id="square" onclick="this.remove();showHide();">
<div class="circle hide_2"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>