Custom Alert | Disappear after 2 seconds

custom-alert.js

/*
 * Success Alert
 * @script 
 * 
 * */

function customAlert(msg, duration) {
    let styler = document.createElement("div");
    styler.setAttribute("style", "display:block; border: 2px solid 23b7e5;padding:10px; min-width:250px; text-align:left; background-color:#23b7e5; border-radius:4px;font-size:14px;color:#ffffff; padding:15px;position:fixed;top:15px; right: 15px; z-index:5000");
    styler.innerHTML = `
          <div style="display: flex; align-items: center;gap: 15px">
           <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-checkbox" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <polyline points="9 11 12 14 20 6"></polyline>
     <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path>
           </svg>
           <div style="display:flex; flex-direction: column;gap:2px">
                <h3 style="line-height: 1em">Success! </h3>
                <span> ${msg}</span>
                </div>
          </div>
    `
    setTimeout(function () {
      styler.parentNode.removeChild(styler);
    }, duration);
    document.body.appendChild(styler);
  }

  function caller() {
    customAlert("Lorem ipsum dolor sit amet", "2000");
  }



/*
 * Warning Alert
 * @script 
 * 
 * */

  function customAlertWarning(msg, duration) {
    let styler = document.createElement("div");
    styler.setAttribute("style", "display:block; border: 2px solid 23b7e5;padding:10px; min-width:250px; text-align:left; background-color:#ffba00; border-radius:4px;font-size:14px;color:#ffffff; padding:15px;position:fixed;top:15px; right: 15px; z-index:5000");
    styler.innerHTML = `
          <div style="display: flex; align-items: center;gap: 15px">
         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M12 9v2m0 4v.01"></path>
   <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
</svg>
           <div style="display:flex; flex-direction: column;gap:2px">
                <h3 style="line-height: 1em">Warning! </h3>
                <span> ${msg} </span>
                </div>
          </div>
    `
    setTimeout(function () {
      styler.parentNode.removeChild(styler);
    }, duration);
    document.body.appendChild(styler);
  }

  function warningAlert() {
    customAlertWarning("Lorem ipsum dolor sit amet", "2000");
  }

Custom alert disappear after 2000 miliseconds

One more function adds for warning.