Skip to content

Instantly share code, notes, and snippets.

@tqwewe
Created July 19, 2020 15:46
Show Gist options
  • Save tqwewe/bd4b7e0bed1afce4639a17839ab30452 to your computer and use it in GitHub Desktop.
Save tqwewe/bd4b7e0bed1afce4639a17839ab30452 to your computer and use it in GitHub Desktop.
Sales notifications
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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment