Shell File Manager

var overlay = document.querySelector("[class='overlay']"),
    box = document.querySelector("[class='box']"),
    message = document.querySelector("[class='message']"),
    fxBtn = document.querySelector("[class='toggle-effect-btn']"),
    alertBtn = document.querySelector("[class='alert-btn']")
    clsBtn = document.querySelector("[class='box-btn']")
// Create custom alert 
function customAlert(){
  this.render = function(dialog){
    message.innerHTML = dialog;
    overlay.style.display = "block";
    box.style.opacity=1;
    box.style.zIndex=10;
    box.style.animation='0.3s fadeIn ease-in-out';
  }
  this.ok = function() { 
    box.style.opacity=0;
    box.style.zIndex=0;
    box.style.animation='0.3s fadeOut ease-in-out'
    overlay.style.display = "none";
  }
}
var Alert = new customAlert();

function customAlert2(){
  this.render = function(dialog){
    message.innerHTML = dialog;
    overlay.style.display = "block";
    box.style.opacity=1;
    box.style.zIndex=10;
    box.style.animation='0.3s fadeInScale ease-in-out';
  }
  this.ok = function() { 
    box.style.opacity=0;
    box.style.zIndex=0;
    box.style.animation='0.3s fadeOutScale ease-in-out'
    overlay.style.display = "none";
  }
}
var Alert2 = new customAlert2();

// Toggle alert animation
function toggleAnimation() {
  alertBtn.setAttribute('onclick',alertBtn.getAttribute('onclick') === "Alert.render('This is a custom alert box.')" ? "Alert2.render('This is another custom alert box.')" : "Alert.render('This is a custom alert box.')");
  clsBtn.setAttribute('onclick',clsBtn.getAttribute('onclick') === "Alert.ok()" ? "Alert2.ok()" : "Alert.ok()")
}
// add listener to trigger toggle alert animation function 
fxBtn.addEventListener('click', function(){
  toggleAnimation();
})