Поддельное уведомление о продажах с использованием JavaScript

В сегодняшнем уроке мы погрузимся в мир веб-разработки и узнаем, как создать поддельное уведомление о продажах с использованием HTML, CSS и JavaScript. Эта интерактивная функция будет отображать случайные уведомления о покупках, имитируя взаимодействие с клиентами в режиме реального времени. К концу этого руководства вы будете лучше понимать управление DOM, обработку событий и создание привлекательных пользовательских интерфейсов.

СКАЧАТЬ

Чему вы научитесь:

Управление DOM: узнайте, как управлять объектной моделью документа (DOM) для динамического обновления содержимого на веб-странице, не требуя полного обновления страницы.
Обработка событий: узнайте, как обрабатывать взаимодействия с пользователем, добавляя прослушиватели событий к элементам DOM, что позволяет выполнять определенные действия на основе поведения пользователя.
Рандомизация: изучите методы генерации случайных данных, такие как выбор случайного имени из массива или генерация случайного временного интервала.
Оформление CSS: повысьте визуальную привлекательность вашего проекта, применяя стили CSS для создания привлекательного и удобного для пользователя дизайна.

HTML КОД:


<div id="product-alert">
<div class="product-info">
<img src="" alt="Product Image" id="product-image" />
<div id="product-text"></div>
</div>
<button id="close-btn">Close</button>
</div>

CSS КОД:


#alert-btn {
cursor: pointer;
}
#product-alert {
background: #fff;  
width: 350px;
position: fixed;
bottom: 120px;
right: 20px;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
display: none;
align-items: flex-start;
gap: 0.5em;
z-index:99999999;
}
.product-info {
display: flex;
}
.product-info img {
width: 100px;
height: 100px;
margin-right: 10px;
}
.message {
font-size: 16px;
}
.time {
font-size: 14px;
margin-top: 16px;
color: #a0a0a0;
}
#close-btn {
background-color: transparent;
color: red;
border: none;
outline: none;
cursor: pointer;  
}

JAVASCRIPT КОД:


const productAlert = document.getElementById("product-alert");
const closeAlertBtn = document.getElementById("close-btn");
const productText = document.getElementById("product-text");
const productImage = document.getElementById("product-image");
const names = ["John", "Alice", "Bob", "Emma", "Betty"];
const products = [
  {
    name: "Nike Red Shoes",
    image: "product-image-1.jpg",
  },
  {
    name: "Chanel Noir Perfume",
    image: "product-image-2.jpg",
  },
  {
    name: "Awesome Black Shirt",
    image: "product-image-3.jpg",
  },
  {
    name: "Ray-Ban Sunglasses",
    image: "product-image-4.jpg",
  },
  {
    name: "Black Apple Watch",
    image: "product-image-5.jpg",
  },
];

function getRandomItemFromArray(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function getRandomTime() {
  return Math.floor(Math.random() * 59) + 1;
}

const getRandomDisplayTime = () => Math.random() * (8 - 3) + 3;
const showAlert = () => {
  const randomName = getRandomItemFromArray(names);
  const randomProduct = getRandomItemFromArray(products);
  const { name, image } = randomProduct;
  productImage.src = image;
  productText.innerHTML = `<p class="message">${randomName} purchased ${name}</p> <p class="time">${getRandomTime()} mins ago</p>`;
  productAlert.style.display = "flex";
};

closeAlertBtn.addEventListener("click", () => {
  productAlert.style.display = "none";
  setTimeout(showAlert, Math.floor(getRandomDisplayTime()) * 1000);
});

setTimeout(showAlert, Math.floor(getRandomDisplayTime()) * 1000);