A Notification mini system with JavaScript

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com

hive-169321·@anomadsoul·4 years ago

0.000 HBD

A Notification mini system with JavaScript

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>
````

![image.png](https://images.ecency.com/DQmTqG9AvNTW3bep3t6d8CfvdU4RQaD81avJn88YQtftEbf/image.png)

### 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;
}
````

![image.png](https://images.ecency.com/DQmfT2y58dn8nogapLUMYzhkFBD2B9mGZuoX3VhPk6CS1qb/image.png)

### 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)
  ];
}
````

![gif2.gif](https://images.ecency.com/DQmXdKXcVwbSASCvGyAN7X6gLHazqb747HoLQX5Bs275kR2/gif2.gif)

👍 stortebeker, xabi, joeyarnoldvn, adyorka, yrmaleza, nomadicsoul, chike4545, carbodexkim, soyunasantacruz, chickenmeat, hungryharish, steemindian, macodi1, mahyulmaulana, hungryanu, atma-yoga, elmauza, reggaejahm, shanibeer, shani.jahming, swedishdragon76, reggaesteem, gerber, ezzy, exyle, steem.leo, mice-k, polish.hive, dcityrewards, hivecur, joele, neoconqueso, reazuliqbal, pkocjan, bestboom, followjohngalt, triplea.bot, hatta.jahm, dune69, caladan, unconditionalove, steem.services, swisswitness, bobby.madagascar, mfblack, tiffin, ribary, dpend.active, iansart, felander, jemmanuel, dlike, milu-the-dog, jelly13, borbolet, mistia, ctime, bishoppeter1, cheer-up, onlavu, yogacoach, aleister, maxer27, steemimages, anech512, horpey, crypto-whiz, hitmeasap, kgsupport, rubencress, gooze, karinxxl, tesmoforia, blewitt, bilpcoinrecords, cryptocurator, actifitsmart, dhingvimal, smonian, jeffjagoe, isaria, otom, journeyofanomad, htliao, dougbudlong, mcfarhat, lunaticpandora, clayboyn, morph, sportschain, celestal, jagoe, sm-jewel, tr77, ocd-accountant, nicollefiallo, strongwoman, nicewoody69, elteamgordo, krommus, cryptosharon, abdulmath, jjangjjanggirl, smonbear, isaria-ccc, driedfruit, smoner, yacobh, enormeanimal, smon-fan, ma1neevent, meanbees, abcor, abacam, teamashen, cyclope, jaynie, uche-nna, agustinaka, slobberchops, futurethinker, m-san, yestermorrow, hyborian-strain, reinhard-schmid, feuerbolt, drifter1, nanzo-scoop, mummyimperfect, ak2020, emily-cook, t-bot, mafeeva, hengary, heidiwo, scoopstakes, nanzo-snaps, kgswallet, squidben1, espoem, ctrpch, juanmcar, bookoons, luiscalzadilla, themarkymark, buildawhale, makerhacks, upmyvote, apeminingclub, recoveryinc, samrisso, deisip67, gvand, x30, deadsparrow, dying, juanmiguelsalas, trans-juanmi, kilianmiguel, asbonclz, stellazinc, giftinkindph, teachblogger, leonellaforever, amos811, gabriellecd, galenkp, aioflureedb, gloriaolar, omarrojas, eroche, abh12345, philnewton, misterengagement, tryskele, doze, anomadsoul, kryptik, rajneesh774, borran, thrasher666, v4vapid, likwid, shanhenry, promobot, tipy, aftabkhan10, themonetaryfew, fw206, techlhab, cocaaladioxine, jokinmenipieleen, cryptothesis,

properties (23)vote details (193)