Fake Social Proof Notification

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
	window.addEventListener('load', function () {
		var availableProducts = [
		'LE LIVRE',
		'LA FORMATION',
		'LE CADEAU',
		'LE BONUS',
		];

	let mynewdiv = document.createElement("div");
	mynewdiv.setAttribute("style", "position:fixed; bottom: 10px; left: 10px;");
	mynewdiv.setAttribute("class", "toast");
	mynewdiv.setAttribute("id", "toast-achat");
	mynewdiv.setAttribute("role", "alert");
	mynewdiv.setAttribute("aria-live", "assertive");
	mynewdiv.setAttribute("aria-atomic", "true");

	mynewdiv.innerHTML = (`
        <div class="toast-header">
            <img id="personface" src="https://parmois.com/125x125.png" class="rounded-circle me-2" alt="...">
            <strong class="me-auto">PARMOIS<i>.com</i></strong>
            <small class="text-muted" id="date-achat">à l'instant</small>
            <button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="contenu-achat">
        </div>
    `);
    document.querySelector("#app").appendChild(mynewdiv);

		const toastLive = new bootstrap.Toast(document.getElementById('toast-achat'), {animation: true, autohide: true, delay: 6000});

		async function generatePerson() {
        	const response = await fetch('https://randomuser.me/api/?nat=fr');
        	const data = await response.json();
        	return (data['results'][0]);
    	}

    	function generateRandomNumber(maxInt, failSafe=false) {
        	var finalNumber = Math.round(Math.random() * maxInt);
        	if (failSafe === true) {
            	if (finalNumber <= 8) {
                	return finalNumber + 8;
            	}
        	}
        	return finalNumber;
    	}

    	function generateToastPopup() {
        	toastLive.show();
    	}

    	async function generateSalesNotification() {
        	var person = await generatePerson();
        	var fullname = person['name']['first'] +' '+ person['name']['last'];
        	var picture = person['picture']['thumbnail'];
        	var city = person['location']['city'];
        	var selectedProduct = availableProducts[generateRandomNumber(availableProducts.length-1)];
        	var whenBought = generateRandomNumber(59);
        	if(whenBought <2) {
          		if(whenBought <1) {
            		whenBought = 'À l\'instant.';
          		} else {
            		whenBought = 'Il y a ' + whenBought + ' minute.';
          		}
        	} else {
          		whenBought = 'Il y a ' + whenBought + ' minutes.';
        	}
        	var toastContentBody = fullname + ' (' + city + ') a téléchargé <em style="color: #d87d6a;">' + selectedProduct + '</em>';
        	document.getElementById('personface').src = picture;
        	document.getElementById('personface').alt = fullname;
        	document.getElementById('date-achat').innerHTML = whenBought;
        	document.getElementById('contenu-achat').innerHTML = toastContentBody;
	        generateToastPopup();
    	}

		var randomTimeInterval = generateRandomNumber(22, failsafe=true) * 1000;

    	function randomPopupInterval() {
        	randomTimeInterval = generateRandomNumber(22, failsafe=true) * 1000;
        	generateSalesNotification();
        	setTimeout(randomPopupInterval, randomTimeInterval);
    	}

    	randomPopupInterval();
	});
</script>