Sales notifications

sales-notifications.js

const MIN_NOTIFICATION_TIME = 5; // 5 Seconds
const MAX_NOTIFICATION_TIME = 10; // 10 Seconds
const TEMPLATE = ({ product, time, location }) =>
  `Someone bough a <b>${product}</b> from <b>${location}</b> <b>${time} seconds ago</b>`;
const MIN_TIME_AGO = 15; // Min seconds to show when someone purchased something (eg 'Bob bought this x seconds ago')
const MAX_TIME_AGO = 60; // Max seconds to show when someone purchased something (eg 'Bob bought this x seconds ago')
const SHOW_TIME = 10; // Time to display notification for
const CLASS_NAME = "sales-notification";
const CONTAINER_ID = "sales-notifications";

const PRODUCTS = ["car", "board", "fish", "carrot", "dildo"];

const LOCATIONS = ["Australia", "USA", "India", "Pakistan", "Antartica"];

// Gets a random whole number between min and max.
// min and max included
const getInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

// Get a random notification object.
const generateNotification = () => {
  const product = PRODUCTS[getInt(0, PRODUCTS.length - 1)];
  const time = getInt(MIN_TIME_AGO, MAX_TIME_AGO);
  const location = LOCATIONS[getInt(0, LOCATIONS.length - 1)];
  return { product, time, location };
};

// Show a sales notification.
const showNotification = (text /*, time, location */) => {
  // Create container element
  const containerEl = document.createElement("div");
  containerEl.className = CLASS_NAME;

  // // Create location element
  // const locationEl = document.createElement('div');
  // locationEl.className = `${CLASS_NAME}__location`;
  // locationEl.textContent = location;

  // Create text element
  const textEl = document.createElement("div");
  textEl.className = `${CLASS_NAME}__text`;
  textEl.innerHTML = text;

  // // Create time element
  // const timeEl = document.createElement('div');
  // timeEl.className = `${CLASS_NAME}__time`;
  // timeEl.textContent = text;

  // Combine elements
  // containerEl.appendChild(locationEl);
  containerEl.appendChild(textEl);
  // containerEl.appendChild(timeEl);

  // Show container element
  const notificationsContainer = document.getElementById(CONTAINER_ID);
  notificationsContainer.appendChild(containerEl);

  // Hide element after show time
  setTimeout(() => {
    notificationsContainer.removeChild(containerEl);

    nextNotification();
  }, SHOW_TIME * 1000);
};

const nextNotification = () => {
  const delayUntilNextNotification = getInt(
    MIN_NOTIFICATION_TIME,
    MAX_NOTIFICATION_TIME
  );
  setTimeout(() => {
    const newNotification = generateNotification();
    showNotification(TEMPLATE(newNotification));
  }, delayUntilNextNotification * 1000);
};

nextNotification();