alert_popup_emoji/index.js

A lightweight emoji-based popup alert system with optional sounds, status codes, and smooth animations — perfect for enhancing user feedback during web requests.

import './style.css';

const defaultEmojis = {
  success: [
    "✅", "🎉", "😄", "👍", "👌", "🙌", "🚀", "🥳", "💯", "🌟","🏆", "🎊", "😎", "✨", "👏", "🫶", "🕺", "💪"
  ],
  error: [
    "❌", "😢", "🚫", "💥", "👎", "😞", "😡", "⚠️", "😖", "🛑","😤", "😓", "😭", "🤬", "😣", "🤯", "🙁", "🔴", "🔔"
  ]
};



const defaultSounds = {
  success: 'https://res.cloudinary.com/dcj8meqoj/video/upload/v1750740218/success-340660_n6hzhk.mp3',
  error: 'https://res.cloudinary.com/dcj8meqoj/video/upload/v1750740213/error-08-206492_ta4qsj.mp3'
};





function getEmoji(isSuccess = false) {
  const list = isSuccess ? defaultEmojis.success : defaultEmojis.error;
  return list[Math.floor(Math.random() * list.length)];
}



function playSound({ shouldPlay = false, isSuccess = false, customURL }) {
  if (!shouldPlay) return;
  const soundURL = customURL || (isSuccess ? defaultSounds.success : defaultSounds.error);
  const audio = new Audio(soundURL);
  audio.volume = 1;
  audio.play().catch((error) => {console.log("error during playing tune " , error)});
}




export function showEmojiAlert({
  message = "Something happened!!",
  type = true,
  sound = false,
  statusCode,
  successSoundURL,
  errorSoundURL
}) {
  const isSuccess = type === true;
  const containerClass = "emoji-alert-container";

  let container = document.querySelector(`.${containerClass}`);
  if (!container) {
    container = document.createElement("div");
    container.className = containerClass;
    document.body.appendChild(container);
  }

  const div = document.createElement("div");
  div.className = `emoji-browser-alert ${isSuccess ? "success" : "error"}`;

  const emoji = getEmoji(isSuccess);
  const codeSpan = (typeof statusCode !== "undefined")
    ? `<span class="status-code"> (status: ${statusCode})</span>`
    : "";

  const text = `${emoji} ${message.trim()}${codeSpan}`;

  const textSpan = document.createElement("span");
  textSpan.innerHTML = text;

  const dismissBtn = document.createElement("button");
  dismissBtn.innerText = "✖";
  dismissBtn.className = "dismiss-btn";
  dismissBtn.onclick = () => div.remove();

  div.appendChild(textSpan);
  div.appendChild(dismissBtn);
  container.appendChild(div);

  playSound({
    shouldPlay: sound,
    isSuccess,
    customURL: isSuccess ? successSoundURL : errorSoundURL
  });

  setTimeout(() => {
    div.classList.add("fade-out");
    div.addEventListener("transitionend", () => div.remove());
  }, 8000);
}