A Notification mini system with JavaScript

0 comments

This project will be useful in a way that I can notify the user of something important in the form of a pop-up notification. This notification will disappear after a specific amount of time.

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
    />

    <link rel="stylesheet" href="style.css" />

    <title>Pup-up Notifications</title>
  </head>

  <body>
    <div id="notifications"></div>

    <button class="btn" id="button">Show Notification</button>
    <script src="script.js"></script>
  </body>
</html>

CSS Code

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(90deg, #a96666, #ff1100);
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.btn {
  background-color: rgb(255, 255, 255);
  font-size: 100%;
  color: #880c03;
  font-family: inherit;
  font-weight: bold;
  padding: 1rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.btn:focus {
  outline: none;
}

.btn:active {
  transform: scale(0.98);
}

#notifications {
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.notification {
  background-color: #fff;
  color: #880c03;
  border-radius: 5px;
  padding: 1rem 2rem;
  margin: 0.5rem;
}

JavaScript Code

const button = document.getElementById("button");
const notify = document.getElementById("notifications");

const notificationsArray = [
  "Go give some votes to minnows!",
  "Have you commented yet today?",
  "Are you forgetting something? Log out!",
  "To re-Hive this post or not...",
  "It's power up time!",
];

button.addEventListener("click", () => createNotification());

function createNotification() {
  const notif = document.createElement("div");
  notif.classList.add("notification");

  notif.innerText = getRandomMessage();

  notify.appendChild(notif);

  setTimeout(() => {
    notif.remove();
  }, 3000);
}

function getRandomMessage() {
  return notificationsArray[
    Math.floor(Math.random() * notificationsArray.length)
  ];
}