Javascript state change reverting

Javascript state change reverting - javascript

I have a simple jQuery app to display images from Giphy based on an ajax call, and toggle animate/stop them on mouseclick by toggling the src URL and data-state attributes.
I'm also displaying a different set of images based on user input.
I have a bug where it only animates gifs displayed after the first ajax call. It doesn't animate gifs displayed by subsequent calls. console-logging for each condition makes me think that for the latter it changes the state and changes it back, but I can't wrap my head around why.
Screencap: https://screencast.com/t/uZCzH6E6hZ8n
$('document').ready(function () {
//array with topics
var topics = [
"Ronaldinho",
"Zidan",
"Messi",
"Maradona",
"Pele"
]
//function loop to display all topics in buttons
function displayTopics() {
for (var i = 0; i < topics.length; i++) {
$('#buttons').append('<div class="btn btn-info get-giphy" data-attribute=' + topics[i] +
'>' + topics[i] +
'</div>');
}
}
//call function to display all the topic buttons
displayTopics();
//on clicking button
$('#buttons').on('click', '.get-giphy', function () {
$('#gifs-appear-here').empty();
//set topic to the clicked button's data-attribute
var topic = $(this).attr('data-attribute');
//set query URL to picked topic
var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + topic +
"&api_key=O2X0wRMnWEjylyUypx1F5UVxCz5Jp8kr&limit=10";
//ajax call to Giphy API
$.ajax({
url: queryURL,
method: 'GET'
}).then(function (response) {
console.log(response);
// Storing an array of results in the results variable
var results = response.data;
// Looping over every result item
for (var i = 0; i < results.length; i++) {
// Only taking action if the photo has an appropriate rating
if (results[i].rating !== "r") {
// Creating a div with the class "item"
var gifDiv = $("<div class='item'>");
// Storing the result item's rating
var rating = results[i].rating;
// Creating a paragraph tag with the result item's rating
var p = $("<p>").text("Rating: " + rating);
// Creating an image tag
var topicImage = $("<img>");
// Giving the image tag necessary attributes
topicImage.attr({
"class": "topicImage",
"src": results[i].images.fixed_height_still.url,
"data-state": "still",
"data-still": results[i].images.fixed_height_still.url,
"data-animate": results[i].images.fixed_height.url
});
// Appending the paragraph and personImage we created to the "gifDiv" div we created
gifDiv.append(topicImage);
gifDiv.append(p);
// Prepending the gifDiv to the "#gifs-appear-here" div in the HTML
$("#gifs-appear-here").prepend(gifDiv);
}
}
});
$('#gifs-appear-here').on('click', '.topicImage', function () {
var state = $(this).attr("data-state");
if (state === "still") {
$(this).attr("src", $(this).attr("data-animate"));
$(this).attr("data-state", "animate");
console.log('still --> animate');
} else if (state === "animate") {
$(this).attr("src", $(this).attr("data-still"));
$(this).attr("data-state", "still");
console.log('animate --> still');
}
else {
return false;
}
});
});
//add buttons
$('button[type="submit"]').click(function () {
var inputValue = $('.form-control').val().trim();
//don't add buttons if they're already in topics array
if (topics.includes(inputValue)) {
$('.modal').modal('show');
$('.modal-body').html('You already have a button for <b>' + inputValue +
'</b>. Use it or add something else');
setTimeout(function () {
$('.modal').modal('hide');
}, 4000);
//add buttons if they aren't in the topics array
} else {
topics.push(inputValue);
$('#buttons').empty();
displayTopics();
}
});
//get form input on pressing "enter key"
$('.form-control').keypress(function (e) {
if (e.which == 13) { //Enter key pressed
$('button[type="submit"]').click(); //Trigger search button click event
}
});
});
.row {
margin-top: 30px;
}
.col {
background-color: #eee;
padding: 15px;
border-radius: 10px;
}
.get-giphy {
margin: 0 15px 15px 0;
}
.topicImage {
max-width: 100%;
}
#media all and (min-width: 768px) {
#buttons {
border-right: 15px solid #fff;
}
#formWrap {
border-left: 15px solid #fff;
}
}
#media all and (max-width: 768px) {
#buttons {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#formWrap {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
#media all and (max-width: 575px) {
.row {
margin-left: 0;
margin-right: 0;
}
}
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="main.js"></script>
<title>Homework 6</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-12">
<h1>Who's your favorite Futbol star?</h1>
</div>
</div>
<div class="row">
<div id="buttons" class="col col-12 col-md-6 col-lg-6">Click a button!
<br>
<br>
</div>
<div id="formWrap" class="col col-12 col-md-6 col-lg-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="You can also add more buttons!">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="row">
<div id="gifs-appear-here" class="col col-12">
Your gifs will appear here
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="answerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Not so fast!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>

As it stands, ('#gifs-appear-here').on('click', '.topicImage', ...) is executed inside the buttons' onclick handler, causing that delegated click handler to accumulate every time one of the buttons is clicked.
To fix, simply move ('#gifs-appear-here').on('click', '.topicImage', ...) out of the buttons' onclick handler.
Here it is (significantly tidied) :
$('document').ready(function () {
var topics = [
"Ronaldinho",
"Zidan",
"Messi",
"Maradona",
"Pele"
];
function displayTopics() {
for (var i = 0; i < topics.length; i++) {
$('#buttons').append('<div class="btn btn-info get-giphy" data-attribute=' + topics[i] + '>' + topics[i] + '</div>');
}
}
displayTopics();
$('#buttons').on('click', '.get-giphy', function () {
$('#gifs-appear-here').empty();
var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + $(this).data('attribute') + "&api_key=O2X0wRMnWEjylyUypx1F5UVxCz5Jp8kr&limit=10";
$.ajax({
'url': queryURL,
'method': 'GET'
}).then(function (response) {
var results = response.data;
for (var i = 0; i < results.length; i++) {
if (results[i].rating !== "r") {
var gifDiv = $("<div class='item'/>").prependTo("#gifs-appear-here");
$("<img class='topicImage'/>").attr({
'src': results[i].images.fixed_height_still.url
}).data({
'state': 'still',
'images': results[i].images
}).appendTo(gifDiv);
$('<p/>').text("Rating: " + results[i].rating).appendTo(gifDiv);
}
}
});
});
$('#gifs-appear-here').on('click', '.topicImage', function () {
var data = $(this).data();
if (data.state === 'still') {
$(this).attr('src', data.images.fixed_height.url);
data.state = 'animate';
} else {
$(this).attr('src', data.images.fixed_height_still.url);
data.state = 'still';
}
});
//add buttons
$('button[type="submit"]').click(function () {
var inputValue = $('.form-control').val().trim();
//don't add buttons if they're already in topics array
if (topics.includes(inputValue)) {
$('.modal').modal('show');
$('.modal-body').html('You already have a button for <b>' + inputValue + '</b>. Use it or add something else');
setTimeout(function () {
$('.modal').modal('hide');
}, 4000);
//add buttons if they aren't in the topics array
} else {
topics.push(inputValue);
$('#buttons').empty();
displayTopics();
}
});
//get form input on pressing "enter key"
$('.form-control').keypress(function (e) {
if (e.which == 13) { //Enter key pressed
$('button[type="submit"]').click(); //Trigger search button click event
}
});
});
.row {
margin-top: 30px;
}
.col {
background-color: #eee;
padding: 15px;
border-radius: 10px;
}
.get-giphy {
margin: 0 15px 15px 0;
}
.topicImage {
max-width: 100%;
}
#media all and (min-width: 768px) {
#buttons {
border-right: 15px solid #fff;
}
#formWrap {
border-left: 15px solid #fff;
}
}
#media all and (max-width: 768px) {
#buttons {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#formWrap {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
#media all and (max-width: 575px) {
.row {
margin-left: 0;
margin-right: 0;
}
}
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="main.js"></script>
<title>Homework 6</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-12">
<h1>Who's your favorite Futbol star?</h1>
</div>
</div>
<div class="row">
<div id="buttons" class="col col-12 col-md-6 col-lg-6">Click a button!
<br>
<br>
</div>
<div id="formWrap" class="col col-12 col-md-6 col-lg-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="You can also add more buttons!">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="row">
<div id="gifs-appear-here" class="col col-12">
Your gifs will appear here
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="answerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Not so fast!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>

Related

Pass the Message project problem with setTimeout or setInterval

I'm making beginner javascript pass the message project I'm having a problem with this: If no input is submitted, an alert should show (using the ‘show' class in the CSS file) in the “Last Message Delivered” section and then disappear after 2 second. I don't know setTimeout and setInterval methods really good and how to break them but if someone could help.
const adder = document.getElementById('message-form')
const cont = document.querySelector('.boxer')
const feeder = document.querySelector('.feedback')
let counter = 0;
adder.addEventListener('submit', e => {
e.preventDefault();
let texto = adder.oop.value
if (texto.length) {
html = `
<div class="boxerr">
<h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
<h4 class="text-capitalize my-3">last message delivered</h4>
<h4 class="message-content text-uppercase">${texto}</h4>
</div>
`
cont.innerHTML += html
adder.reset()
} else {
let timer = setTimeout(() => {
counter++
feeder.classList.toggle('show')
if (counter === 2) {
clearTimeout(timer)
}
}, 100);
}
});
:root {
--lightBlue: #95b8d1;
--mainwhite: #f5f5f5;
--mainBlack: #333333;
}
.max-height {
min-height: 100vh;
}
body {
background: var(--lightBlue);
}
.message-container {
background: var(--mainwhite);
}
.message-content {
color: var(--lightBlue);
}
#submitBtn {
background: var(--lightBlue);
color: var(--mainwhite);
}
#submitBtn:hover {
color: var(--lightBlue);
color: var(--mainBlack);
}
.feedback {
display: none;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row max-height align-items-center">
<div class="col-10 mx-auto col-md-8 message-container text-center p-3">
<h4 class="text-capitalize">A messge you would like to pass</h4>
<form id="message-form">
<input type="text" name="oop" id="message" class="w-100 my-3 p-2">
<input type="submit" id="submitBtn" class="btn btn-lg">
</form>
<div class="boxer">
<div class="boxerr">
<h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
<h4 class="text-capitalize my-3">last message delivered</h4>
<h4 class="message-content text-uppercase">hello world</h4>
</div>
</div>
</div>
</div>
</div>

You can do something like this in the else block:
feeder.classList.add("show");
setTimeout(() => feeder.classList.remove("show"), 2000);
This code will add the show class to the .feedback element and after 2000 milliseconds (i.e. 2 seconds as 1000ms = 1s) the show class will be removed from the .feedback element.
Complete Code:
const adder = document.getElementById('message-form')
const cont = document.querySelector('.boxer')
const feeder = document.querySelector('.feedback')
let counter = 0;
adder.addEventListener('submit', e => {
e.preventDefault();
let texto = adder.oop.value
if (texto.length) {
html = `
<div class="boxerr">
<h4 class="text-capitalize my-3">last message delivered</h4>
<h4 class="message-content text-uppercase">${texto}</h4>
</div>
`
cont.innerHTML += html
adder.reset()
} else {
feeder.classList.add("show");
setTimeout(() => feeder.classList.remove("show"), 2000);
}
});
:root {
--lightBlue: #95b8d1;
--mainwhite: #f5f5f5;
--mainBlack: #333333;
}
.max-height {
min-height: 100vh;
}
body {
background: var(--lightBlue);
}
.message-container {
background: var(--mainwhite);
}
.message-content {
color: var(--lightBlue);
}
#submitBtn {
background: var(--lightBlue);
color: var(--mainwhite);
}
#submitBtn:hover {
color: var(--lightBlue);
color: var(--mainBlack);
}
.feedback {
display: none;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row max-height align-items-center">
<div class="col-10 mx-auto col-md-8 message-container text-center p-3">
<h4 class="text-capitalize">A messge you would like to pass</h4>
<form id="message-form">
<input type="text" name="oop" id="message" class="w-100 my-3 p-2">
<input type="submit" id="submitBtn" class="btn btn-lg">
</form>
<h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
<div class="boxer">
<div class="boxerr">
<h4 class="text-capitalize my-3">last message delivered</h4>
<h4 class="message-content text-uppercase">hello world</h4>
</div>
</div>
</div>
</div>
</div>

how do i open modal with javascript. without using jquery

How do I make a modal visible with javascript? I don't want to do it using jquery. i just want it with javascript. And I don't want it to open when I click a button. I want it to be opened as a result of some operations in javascript. I made it with modal bootstrap. my codes are below.
html code:
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="modal fade" tabindex="-1" id="sonucModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Test Durumu</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p id="durum"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Çıkış</button>
<button type="button" class="btn btn-primary">2. Aşamaya Geç</button>
</div>
</div>
</div>
</div>
<div class="container" style="height: 100vh;">
<div class="row" style="height: 100vh;">
<div class="col-md-12 d-flex justify-content-center" style="height: 400px;">
<div class="card" style="width: 25rem; margin-top:20vh; ">
<div class="card-body" style="text-align: center;">
<h5 class="card-title text-primary">Soru</h5>
<span class="text-black-50 fs-5" id="soru"></span>
<input class="w-100 form-control mt-4" type="text" id="cevap"/>
<button class="btn btn-outline-primary mt-4 w-100" id="ok">Tamam</button>
</div>
<ul class="list-group list-group-flush">
<li id="anaCan" class="list-group-item fw-bold">Kalan Can: <span id="can"></span></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
javascript code:
var turkceCumleler = [
"Merhaba",
"İyi Sabahlar",
"İyi Günler",
"İyi Akşamlar",
"İyi Geceler",
"Tekrar Görüşmek Üzere(Yüz yüze)",
"Tekrar Görüşmek Üzere(Tel.)",
"Yakında Görüşürüz",
"Güle Güle"
];
var almancaCumleler = [
"hallo",
"guten morgen",
"guten tag",
"guten abend",
"gute nacht",
"auf wiedersehen",
"auf wiederhögen",
"bis bald",
"tschüss"
]
var sayilar = [];
var healt = 3;
const getQuestion = () =>{
document.getElementById('can').textContent=healt;
let rastgele = Math.floor(Math.random()*turkceCumleler.length);
if(sayilar.indexOf(rastgele) === -1){
sayilar.push(rastgele)
document.getElementById('soru').textContent = turkceCumleler[rastgele];
document.getElementById('cevap').value = ""
}else{
getQuestion();
}
if(sayilar.length === turkceCumleler.length){
//here i want modal to open
}
}
const compareQuestionAnswer = () =>{
if(document.getElementById('cevap').value === ''){
alert("boş geçilemez")
}else{
let deger = almancaCumleler.indexOf(document.getElementById('cevap').value.toLowerCase());
if(deger === -1){
healt--;
document.getElementById('can').textContent=healt;
if(healt === 0){
document.getElementById('anaCan').style.color='red';
document.getElementById('ok').disabled = true;
}
}else{
let deger1 = turkceCumleler.indexOf(document.getElementById('soru').textContent);
if(deger === deger1){
getQuestion();
}else{
healt--;
document.getElementById('can').textContent=healt;
if(healt === 0){
document.getElementById('anaCan').style.color='red';
document.getElementById('ok').disabled = true;
}
}
}
}
}
window.onload = getQuestion;
document.getElementById('ok').addEventListener('click',compareQuestionAnswer);
document.getElementById('anaCan').style.color='green';

Bootstrap depends on jQuery, and you're already including jQuery in your code.
But if you want to create a modal without Bootstrap and jQuery, you can do so with CSS and JavaScript. Use an event listener to listen for whatever JavaScript event you desire, then show the modal when that event occurs.
Here is a simple example:
// Show the modal when you hover over the red box
trigger.onmouseover = () => {
modal.style.display = "block";
}
// Hide the modal when you click the close button
document.getElementsByClassName("close")[0].onclick = () => {
modal.style.display = "none";
}
// Hide the modal if you click outside of the modal area
window.onclick = (event) => {
if (event.target == modal) {
modal.style.display = "none";
}
}
#trigger {
height: 100px;
width: 100px;
background-color: red;
}
.modal {
display: none; /* Hidden Initially */
position: fixed;
z-index: 1; /* Higher Z-Index To Sit On Top */
left: 0;
top: 0;
width: 100%; /* Full Width */
height: 100%; /* Full Height */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div id="modal" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<span class="close">x</span>
<p>Modal content here</p>
</div>
</div>
<div id="trigger">
Move mouse into this box to trigger modal.
</div>

You just need to declare a new modal object, like:
const sonucModal= document.getElementById('sonucModal');
const modalEl = new bootstrap.Modal(sonucModal);
and then call it like this whenever you need to open it:
modalEl.show();
Here is a JSFiddle for reference, the modal opens automatically after 2 seconds.

Changing Iframes HTML

I need a script to change the iframes src every certain amount of seconds. The time between the change is different between each one.
Example:
Page Loads
Google.com is loaded.
15 seconds later
Yahoo.com is loaded.
37 seconds later
Ask.com is loaded.
12 seconds later
Dogpile.com is loaded.
and so on and so forth.
I've tried that:
<html>
<head>
<meta charset="utf-8" />
<title>Monitor Presidência</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</head>
<body>
<div style="width: 100%; display: flex;">
<div class="ui teal progress" data-percent="0" id="example1" style="width: 90%;margin-bottom: 0px">
<div class="bar"></div>
</div>
<div class="ui icon buttons" style="width: 10%">
<button class="ui button" style="width: 25%" onclick="menos_um()">
<i class="left chevron icon"></i>
</button>
<button class="ui button " style="width: 25%" onclick="inicia()">
<i class="play icon"></i>
</button>
<button class="ui button" style="width: 25%" onclick="para_aplicacao()">
<i class="pause icon"></i>
</button>
<button class="ui button" style="width: 25%" onclick="mais_um()">
<i class="right chevron icon"></i>
</button>
</div>
</div>
<iframe id="envase" class="frame_mon" style="width: 100%;height: 100%;" src="www.google.com.br"></iframe>
<iframe id="frete_hl" class="frame_mon" style="width: 100%;height: 100%;display: none;" src="www.yahoo.com.br"></iframe>
<iframe id="frete_hl_acum" class="frame_mon" style="width: 100%;height: 100%;display: none;" src="www.terra.com.br"></iframe>
</body>
<script>
var arr_monitores = ["envase", "frete_hl", "frete_hl_acum"];
var num_monitor = 0;
var progresso = 0;
var myVar;
var setintervalatualizaframe;
function mais_um() {
/* if (num_monitor === 2) {
num_monitor = 0;
} else {
num_monitor++;
}
$('.frame_mon').css('display', 'none');
document.getElementById(arr_monitores[num_monitor]).style.display = "";*/
progresso = 100;
myStopFunction();
inicia();
/* if (num_monitor === 2) {
num_monitor = 0;
} else {
num_monitor++;
}*/
};
function menos_um() {
//progresso = 100;
if (num_monitor === 0) {
num_monitor = 2;
} else {
num_monitor--;
}
$('.frame_mon').css('display', 'none');
document.getElementById(arr_monitores[num_monitor]).style.display = "";
progresso = 0;
myStopFunction();
inicia();
};
function inicia() {
clearInterval(setintervalatualizaframe);
myStopFunction();
myVar = setInterval(function () {
if (progresso === 100) {
progresso = 0;
if (num_monitor === 2) {
location.reload();
//num_monitor = 0;
} else {
num_monitor++;
}
$('.frame_mon').css('display', 'none')
document.getElementById(arr_monitores[num_monitor]).style.display = "";
};
progresso++;
progresso++;
$('#example1').data('percent', progresso);
$('#example1').progress();
}, 3800);
}
function myStopFunction() {
clearInterval(myVar);
//atualiza_frame();
}
inicia();
function para_aplicacao(){
clearInterval(myVar);
atualiza_frame();
}
function atualiza_frame() {
clearInterval(setintervalatualizaframe);
setintervalatualizaframe = setInterval(function () {
document.getElementById(arr_monitores[num_monitor]).src=document.getElementById(arr_monitores[num_monitor]).src;
},1);
}
</script>
</html>

The way you are using setInterval and setTimeout is not properly
handled, as it creates a timer id to schedule execution. 0
A much more efficient way is to use the Promises async library, which is displayed below. 1
For websites that won't work, they are using a response header that won't allow their pages to be framed. You can work around this with some back-end program, where the server loads the web files then forwards them. 2
<!DOCTYPE html>
<html>
<head>
<title> Hello </title>
<style>
iframe {
display: block;
width: 1000px;
height: 500px;
margin-left: auto;
margin-right: auto;
}
iframe:focus {
outline: none;
}
button {
display: block;
margin: auto auto;
}
label {
display: block;
margin-left: auto;
margin-right: auto;
}
input {
display: block;
margin: auto auto;
}
</style>
</head>
<body>
<div id='main'>
<button id='wait' onclick='wait()'>Wait</button>
<label>Seconds</label>
<input type='number' id='seconds' placeholder='milliseconds'>
<button id='switching' onclick='webSwitch()'>Switch sites</button>
<iframe id='switchMe' src='https://codepen.io'></iframe>
</div>
<script>
//Array of webpages
var webList = ["https://www.bing.com", "https://www.walmart.com","https://www.codepen.io"];
//For tracking position in array
var count = 0;
//Function to be ran by event
function webSwitch() {
console.log('I have been called');
if (count >= webList.length) {
count = 0;
}
//Setting new URL
document.getElementById('switchMe').src = webList[count];
//Make sure to use next URL
count++;
}
function wait() {
console.log('Click!');
var numMS = document.getElementById('seconds').value;
sleep(numMS).then(() => {
webSwitch();
})
}
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
</script>
</body>
</html>

change global variable with click event

I am trying to change a global variable with a click event and I'm stuck. I've tried it in the way the code is written below, and I'm getting the correct result in the console, but it's not working globally. How else can I do it?
const levels = {
easy: 5,
medium: 3,
hard: 2
}
let currentLevel = levels.hard
document.querySelector('#easyBtn').addEventListener('click', function () {
currentLevel = levels.easy
console.log (currentLevel)
})
<button id="easyBtn" type="button">Easy</button>
Full Code:
window.addEventListener('load', init);
// Globals
const levels = {
easy: 5,
medium: 3,
hard: 2
}
let currentLevel = levels.hard
document.querySelector('#easyBtn').addEventListener('click', function () {
currentLevel = levels.easy
console.log (currentLevel)
})
document.querySelector('#mediumBtn').addEventListener('click', function() {
currentLevel = levels.medium
console.log (currentLevel)
})
document.querySelector('#hardBtn').addEventListener('click', function() {
currentLevel = levels.hard
console.log (currentLevel)
})
let time = currentLevel;
let score = 0;
let isPlaying;
// DOM Elemennts
const wordInput = document.querySelector('#word-input');
const currentWord = document.querySelector('#current-word');
const scoreDisplay = document.querySelector('#score');
const timeDisplay = document.querySelector('#time');
const message = document.querySelector('#message');
const seconds = document.querySelector('#seconds');
const words = [
'hat',
'river',
'fun',
'billion',
'park',
'superman',
'quacky',
'juggler',
'word',
'race',
'bullet',
'computer',
'Anne',
'Jacob',
'Drew',
'garden',
'bike',
'waffle',
'hero',
'statue',
'loom',
'backpack',
'picture',
'stand',
'window',
'marker',
'bank',
'chord',
'lettuce',
'color'
];
//Initialize game
function init() {
seconds.innerHTML = currentLevel;
//load word from array
showWord(words);
//start matching on word input
wordInput.addEventListener('input', startMatch)
//call countdown every second
setInterval(countdown, 1000);
//check game status
setInterval(checStatus, 50);
}
//start match
function startMatch() {
if(matchWords()) {
isPlaying = true;
time = currentLevel + 1;
showWord(words);
wordInput.value = '';
score++;
}
//score is -1 display 0
if(score === -1) {
scoreDisplay.innerHTML = 0;
} else {
scoreDisplay.innerHTML = score;
}
}
//match current word to wordInput
function matchWords() {
if(wordInput.value === currentWord.innerHTML) {
message.innerHTML = 'Correct!!!'
return true;
} else {
message.innerHTML = '';
return false;
}
}
function showWord(words) {
// Generate random array index
const randIndex = Math.floor(Math.random() * words.length);
// Output random word
currentWord.innerHTML = words[randIndex];
}
function countdown() {
//make sure time is not run out
if(time > 0) {
time--;
}else if(time === 0) {
isPaying = false;
}
timeDisplay.innerHTML = time;
}
function checStatus() {
if (!isPlaying === false && time === 0) {
message.innerHTML = 'Game Over!!!';
score = -1;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body {
background-color: #a8a8a8;
}
.header {
background-color: #4646c7;
display: flex;
justify-content: center;
height: 70px;
align-items: center;
}
.btnSpacing {
display: flex;
justify-content: space-around;
align-content: center;
width: 100;
}
#easyBtn {
display: flex;
justify-content: center;
}
#mediumBtn {
display: flex;
justify-content: center;
}
#hardBtn {
display: flex;
justify-content: center;
}
#seconds {
color: rgba(248, 2, 2, 0.753);
font-weight: bold
}
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Word Race</title>
</head>
<!DOCTYPE html>
<html lang="en">
<body class="body">
<header class="header">
<h1>Word Race</h1>
</header>
<br>
<div class="container text-center col-md-6 mx-auto ">
<!-- Buttons -->
<div class="btnSpacing">
<div>
<button id="easyBtn" type="button" class="btn btn-success">Easy</button>
</div>
<div>
<button id="mediumBtn" type="button" class="btn btn-warning">Medium</button>
</div>
<div>
<button id="hardBtn" type="button" class="btn btn-danger">Hard</button>
</div>
</div>
<br>
<br>
<!-- Word & Input -->
<div class="row">
<div class="col-md-6 mx-auto">
<p class="lead">Type The Given Word Within
<span id="seconds">5</span> Seconds:</p>
<h2 class="display-2 mb-5" id="current-word">hello</h2>
<input type="text" class="form-control form-control-lg" placeholder="Start typing..." id="word-input" autofocus>
<h4 class="mt-3" id="message"></h4>
<!-- Time & Score Columns -->
<div class="row mt-5">
<div class="col-md-6">
<h3>Time Left:
<span id="time">0</span>
</h3>
</div>
<div class="col-md-6">
<h3>Score:
<span id="score">0</span>
</h3>
</div>
</div>
<!-- Instructions -->
<div class="row mt-5">
<div class="col-md-12">
<div class="card card-body bg-secondary text-white">
<h5>Instructions</h5>
<p>Type each word in the given amount of seconds to score. To play again, just type the current word. Your score
will reset.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

What I take it you're asking is "Why isn't stuff like the time given updating when I update the variable?"
Javascript won't "listen" for changes on its own. After, you update the variable, you need to tell everything relying on it to also update.
There's a million different way to go about this (and a million libraries that try to make JavaScript essentially listen on changes). At the simplest level: you can try switching the currentLevel setting to a function, and have that also re-init the game.
setCurrentLevel(level) {
currentLevel = levels.easy
init()
// any other stuff that needs to be updated/reset
}
// ...
document.querySelector('#easyBtn').addEventListener('click', function () {
setCurrentLevel(levels.easy)
})
window.addEventListener('load', init);
// Globals
const levels = {
easy: 5,
medium: 3,
hard: 2
}
let currentLevel = levels.hard
document.querySelector('#easyBtn').addEventListener('click', function () {
setCurrentLevel(levels.easy)
})
document.querySelector('#mediumBtn').addEventListener('click', function() {
setCurrentLevel(levels.medium)
})
document.querySelector('#hardBtn').addEventListener('click', function() {
setCurrentLevel(levels.hard)
})
let time = currentLevel;
let score = 0;
let isPlaying;
// DOM Elemennts
const wordInput = document.querySelector('#word-input');
const currentWord = document.querySelector('#current-word');
const scoreDisplay = document.querySelector('#score');
const timeDisplay = document.querySelector('#time');
const message = document.querySelector('#message');
const seconds = document.querySelector('#seconds');
const words = [
'hat',
'river',
'fun',
'billion',
'park',
'superman',
'quacky',
'juggler',
'word',
'race',
'bullet',
'computer',
'Anne',
'Jacob',
'Drew',
'garden',
'bike',
'waffle',
'hero',
'statue',
'loom',
'backpack',
'picture',
'stand',
'window',
'marker',
'bank',
'chord',
'lettuce',
'color'
];
//Initialize game
function init() {
seconds.innerHTML = currentLevel;
//load word from array
showWord(words);
//start matching on word input
wordInput.addEventListener('input', startMatch)
//call countdown every second
setInterval(countdown, 1000);
//check game status
setInterval(checStatus, 50);
}
//start match
function startMatch() {
if(matchWords()) {
isPlaying = true;
time = currentLevel + 1;
showWord(words);
wordInput.value = '';
score++;
}
//score is -1 display 0
if(score === -1) {
scoreDisplay.innerHTML = 0;
} else {
scoreDisplay.innerHTML = score;
}
}
//match current word to wordInput
function matchWords() {
if(wordInput.value === currentWord.innerHTML) {
message.innerHTML = 'Correct!!!'
return true;
} else {
message.innerHTML = '';
return false;
}
}
function showWord(words) {
// Generate random array index
const randIndex = Math.floor(Math.random() * words.length);
// Output random word
currentWord.innerHTML = words[randIndex];
}
function countdown() {
//make sure time is not run out
if(time > 0) {
time--;
}else if(time === 0) {
isPaying = false;
}
timeDisplay.innerHTML = time;
}
function checStatus() {
if (!isPlaying === false && time === 0) {
message.innerHTML = 'Game Over!!!';
score = -1;
}
}
function setCurrentLevel(level) {
currentLevel = level;
init();
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body {
background-color: #a8a8a8;
}
.header {
background-color: #4646c7;
display: flex;
justify-content: center;
height: 70px;
align-items: center;
}
.btnSpacing {
display: flex;
justify-content: space-around;
align-content: center;
width: 100;
}
#easyBtn {
display: flex;
justify-content: center;
}
#mediumBtn {
display: flex;
justify-content: center;
}
#hardBtn {
display: flex;
justify-content: center;
}
#seconds {
color: rgba(248, 2, 2, 0.753);
font-weight: bold
}
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Word Race</title>
</head>
<!DOCTYPE html>
<html lang="en">
<body class="body">
<header class="header">
<h1>Word Race</h1>
</header>
<br>
<div class="container text-center col-md-6 mx-auto ">
<!-- Buttons -->
<div class="btnSpacing">
<div>
<button id="easyBtn" type="button" class="btn btn-success">Easy</button>
</div>
<div>
<button id="mediumBtn" type="button" class="btn btn-warning">Medium</button>
</div>
<div>
<button id="hardBtn" type="button" class="btn btn-danger">Hard</button>
</div>
</div>
<br>
<br>
<!-- Word & Input -->
<div class="row">
<div class="col-md-6 mx-auto">
<p class="lead">Type The Given Word Within
<span id="seconds">5</span> Seconds:</p>
<h2 class="display-2 mb-5" id="current-word">hello</h2>
<input type="text" class="form-control form-control-lg" placeholder="Start typing..." id="word-input" autofocus>
<h4 class="mt-3" id="message"></h4>
<!-- Time & Score Columns -->
<div class="row mt-5">
<div class="col-md-6">
<h3>Time Left:
<span id="time">0</span>
</h3>
</div>
<div class="col-md-6">
<h3>Score:
<span id="score">0</span>
</h3>
</div>
</div>
<!-- Instructions -->
<div class="row mt-5">
<div class="col-md-12">
<div class="card card-body bg-secondary text-white">
<h5>Instructions</h5>
<p>Type each word in the given amount of seconds to score. To play again, just type the current word. Your score
will reset.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Edit: It looks like there may be some other function that may need to also be rewritten like when/how the actual countdown is set (or some general refactoring so they're called in init are there are fewer global variables) but this is the rough answer. You need to explicitly tell the game when settings have been updated and when to re-run.

How to remove old div out to the left and add a new div from the right by sliding effect using jquery?

So after trying different things for 3 hours or so, I finally decided to post a question on StackOverFlow. Here is the problem:
On click of the "next" button, I want to remove the old div by sliding it to the left and add a dynamically created div by sliding it from the right.
So far, I can only create the remove effect by sliding it to the left while fading it. But I can't add a new div sliding in from the right. How would I accomplish this?
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Google Project</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="bootstrap-2.3.6-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/secret_api.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" type="image/ico" href="photos/favIcon.png">
</head>
<body>
<h1 class="text-center">All Your Directions In One Spot</h1>
<div class="container">
<div class="row row-content" id="tempDiv">
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
<div class="text-center">
<h2>From:</h2>
</div>
</div>
<div style="padding: 20px 20px"></div>
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
<div>
<input id="origin" type="text" class="form-control input-lg" placeholder="Origin" value="8844 N Wisner St">
</div>
</div>
<div style="padding: 40px 40px"></div>
<div class="col-xs-12 col-sm-6 col-sm-offset-3">
<div class="row row-content">
<div class="text-center">
<div class="col-xs-12 col-sm-3 col-sm-offset-3">
<button class ="btn btn-lg" id="next">Next</button>
</div>
<div class="col-xs-12 col-sm-3">
<button class="btn btn-lg" id="done">Done</button>
</div>
</div>
</div>
</div>
</div>
<div style="padding: 40px 40px"></div>
<div id="listDirections">
</div>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
Here is the Css:
body {
background-color: #2b669a;
}
h1 {
color: white;
font-size: 3em;
}
button {
background-color: #204056;
color: white;
font-weight: bold;
}
button:hover,
button:focus {
color: lightgray !important;
}
.directions {
background-color: whitesmoke;
color: #5A5A5A;
padding: 20px 20px;
font-size: 1.5em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom: 20px;
}
.glyphicon-plus {
font-size: 2em;
color: white;
padding: 5px 5px;
}
.glyphicon-plus:hover {
color: coral;
cursor: pointer;
}
Here is the javascript:
function getDirections(json) {
"use strict";
var steps = json.routes[0].legs[0].steps;
var directions = [];
var counter = 1;
steps.forEach(function (step) {
directions.push(counter + ". " + step.html_instructions);
counter += 1;
});
// Separates the 2 conjoint words in the last line.
// so "Ave Destination" instead of "AveDestination"
directions[directions.length - 1] = directions[directions.length - 1].replace(/([a-z])([A-Z])/g, "$1 $2");
return directions;
}
/**
* Takes in the Google Maps API JSON object as input and returns the ETA as a string.
* #param {Object} json
* #return {string}
*/
function getEta(json) {
"use strict";
return json.routes[0].legs[0].duration.text;
}
function showDirections(json) {
"use strict";
// creates div, adds class, and appends the div
var div = document.createElement("div");
$(div).addClass("directions col-xs-12 col-sm-8 col-sm-offset-2");
$(div).append("<b>FROM: </b> " + $("#origin").val() + "<br>");
$(div).append("<b>TO: </b>" + $("#destination").val() + "<br>");
$(div).append("<em>It will take you " + getEta(json) + " to get there.</em> <p></p>");
getDirections(json).forEach(function (item) {
$(div).append("<p>" + item + "</p>");
});
$("#listDirections").append(div);
}
$('#next').click(function() {
$('#tempDiv').animate({
opacity: 0, // animate slideUp
marginLeft: '-100%',
marginRight: '100%'
}, 'fast', 'linear', function() {
$(this).remove();
});
$('.container').append($("#origin"));
});
/*
$("#next").click(function() {
// $('#tempDiv').hide('slide', {direction: 'left'}, 500).fadeOut('fast');
$('#next').show('slide', {direction: 'left'}, 500);
});
*/
$(document).ready(function () {
"use strict";
$("#getButton").click(function () {
// Get the user input
var origin = $('#origin').val().replace(/ /g, "%20");
var destination = $('#destination').val().replace(/ /g, "%20");
// Create the URL
var URL = "https://maps.googleapis.com/maps/api/directions/json?origin=" +
"" + origin + "&destination=" + destination + "&key=" + APIKEY;
// Obtain json object through GET request
$.getJSON(URL, function (json) {
console.log(getEta(json));
console.log(getDirections(json));
showDirections(json);
});
});
});

If I've understood well your question, you want to remove an "old div" animating it to the left, and then you want to create a "new div" animating it from the right. This code will helps you with that task (The comments in the code will help you to understand it):
HTML Code:
<button id="btn">Create</button>
<div id="container"></div>
JavaScript Code:
var sum = 1;
//---Function to create divs to animate
function createDiv() {
//---Disable button
active(false);
//---Access to the slide div
var slide = $("#container .slide");
//---If slide exists
if (slide.length > 0) {
//---Dissapear the slide to the left
slide.animate({
"opacity": 0,
"right": "100%"
}, function() {
//---Delete slide
$(this).remove();
//---Create new slide
var slide = create();
//---Appear slide from the right
appearSlide(slide);
});
//---If the slide no exists
} else {
//---Create slide
var slide = create();
//---Appear slide from the right
appearSlide(slide);
}
}
//---Create slide function
function create() {
var slide = $("<div/>");
slide.addClass("slide");
slide.text("div " + sum);
$("#container").append(slide);
sum++;
return slide;
}
//---Appear slide from the right function
function appearSlide(slide) {
slide.animate({
"opacity": 1,
"right": "0"
}, function() {
//---Enable button
active(true);
});
}
//---Enable / disable button function
function active(state) {
$("#btn").prop("disabled", !state);
}
//---Create a div by default
createDiv();
//---Create a alide when press the button
$("#btn").on("click", createDiv);
jsfiddle

We Keep Coding

JavaScript is the programming language of the Web.

Javascript state change reverting - javascript

Related

Pass the Message project problem with setTimeout or setInterval

how do i open modal with javascript. without using jquery

Changing Iframes HTML

change global variable with click event

How to remove old div out to the left and add a new div from the right by sliding effect using jquery?

Categories

Resources