Vue.js Toast Alert Push Notification Popup Bar in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Vue.js Toast Alert Push Notification Popup Bar in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a toast alert push notification popup bar in browser using html5 css3 and javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Notifications Example in Browser</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <div id="vue">
            <notifications :notification-data="notificationData"></notifications>
          </div>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.js"></script>
    <script src="script.js"></script>
</html>

 

 

Now here we are including the vue.js cdn and here we are including the custom styles file which is style.css and also javascript file called script.js

 

Now create a stylesheet file called style.css inside the root directory and copy paste the following code

 

style.css

 

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
 * {
     box-sizing: border-box;
     font-family: "Open Sans";
}
 p {
     margin-bottom: 0;
}
 @keyframes openUp {
     0% {
         transform: translateY(-50%) scale(0);
         opacity: 0;
    }
     100% {
         transform: translateY(0%) scale(1);
         opacity: 1;
    }
}
 .controls {
     margin: 0 auto;
     text-align: center;
}
 .controls input, .controls select {
     font-size: 16px;
     margin: 0.4em;
     padding: 0.6em 1em;
     appearance: none;
     border: 4px solid black;
     border-radius: 5px;
}
 .controls .select {
     position: relative;
     display: inline-block;
}
 .controls .select select {
     padding-right: 2em;
     cursor: pointer;
}
 .controls .select:after {
     content: '';
     width: 0;
     height: 0;
     position: absolute;
     top: 55%;
     right: 1em;
     border-left: 0.4em solid transparent;
     border-right: 0.4em solid transparent;
     border-bottom: 0.4em solid transparent;
     border-top: 0.4em solid black;
     transform: translateY(-50%);
     user-select: none;
     pointer-events: none;
}
 .controls button {
     position: relative;
     display: inline-block;
     margin: 0.4em;
     padding: 0.6em 1em;
     background: #fefefe;
     cursor: pointer;
     user-select: none;
     appearance: none;
     overflow: hidden;
     z-index: 1;
     transition: all 0.1s;
     font-size: 16px;
     font-weight: bold;
     border: 4px solid black;
     border-radius: 0.4em;
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15);
}
 .controls button:hover:after {
     background: black;
     color: white;
}
 .controls button:after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transform: translateX(-100%);
     transition: all 0.1s;
     z-index: -1;
}
 .controls button:hover {
     color: white;
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .5);
}
 .controls button:hover:after {
     transform: translate(0%);
}
 .controls button.error {
     border: 4px solid #ea0000;
}
 .controls button.error:after {
     background: #ea0000;
}
 .controls button.success {
     border: 4px solid #7ad03a;
}
 .controls button.success:after {
     background: #7ad03a;
}
 .controls button.warning {
     border: 4px solid #ffba00;
}
 .controls button.warning:after {
     background: #ffba00;
}
 .notification-wrapper {
     max-width: 1200px;
     margin: 0 auto;
     margin-top: 1em;
}
 .notification-wrapper .notification {
     position: relative;
     margin: 0.5em;
     padding: 0.5em 2em 0.5em 0.5em;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
     border-left: 4px solid #fff;
     background: #fff;
     animation: openUp 0.1s;
}
 .notification-wrapper .notification h2, .notification-wrapper .notification p {
     margin: 0;
}
 .notification-wrapper .notification h2 {
     margin-bottom: 0.25em;
}
 .notification-wrapper .notification .close {
     position: absolute;
     top: 0.5em;
     right: 0.5em;
     cursor: pointer;
}
 .notification-wrapper .notification.error {
     border-left: 4px solid #ea0000;
}
 .notification-wrapper .notification.success {
     border-left: 4px solid #7ad03a;
}
 .notification-wrapper .notification.warning {
     border-left: 4px solid #ffba00;
}

 

See also  Vue.js Clipboard.js Example to Copy Text to Clipboard From Input Field or TextArea Widget on Button Click in Browser Using Javascript Full Project For Beginners

 

And now create a script.js file inside the root directory and copy paste the following code

 

script.js

 

//-------------------------
// Notifications Component
//-------------------------
Vue.component("notifications", {
  ready: function() {
    this.makeNotification(this.testSuccess);
  },

  template: "<div class='controls'>" +
  "<h1>Vue Notifications</h1>" +
  "<p>Select a pre-made notification</p>" +
  "<button class='success' @click='makeNotification(testSuccess)'>Success</button>" +
  "<button class='error' @click='makeNotification(testError)'>Error</button>" +
  "<button class='warning' @click='makeNotification(testWarning)'>Warning</button>" + 
  "<p>-OR- <br> Make one here</p>" +
  "<div class='new-message-wrapper'>" +
  "<div class='select'><select id='newNotificationType' v-model='newNotification.type'>" +
  "<option selected='selected' disabled value='disabled'>Select a type</option>" +
  "<option v-for='option in notificationTypes' value='{{ option }}'>{{ option | capitalize }}</option>" +
  "</select></div>" +
  "<input v-model='newNotification.title' value='{{ newNotification.title }}' placeholder='Give it a title'/>" + 
  "<input v-model='newNotification.message' value='{{ newNotification.message }}' placeholder='Whats the message?'/>" +
  "<button @click='createNewNotification()'>Create New Message</button>" +
  "</div>" + 
  //"<pre>{{ newNotification | json }}</pre>" + 
  //"<pre>{{ notificationData | json }}</pre>" + 
  "</div>" + 
  "<div class='notification-wrapper'>" +
  "<div class='notification' v-for='notification in notificationData' track-by='$index' v-bind:class='notification.type'>" + 
  "<i @click='closeNotification($index)' class='fa fa-times close'></i>" +
  "<h2>{{ notification.title }}</h2>" +
  "<p>{{ notification.message }}</p>" +
  "</div>" +
  "</div>"
  ,

  props: ["notificationData"],

  methods: {
    createNewNotification: function() {
      //soft validation
      //first check to see if the selected type is disabled
      if(this.newNotification.type === "disabled") {
        return;
        die;
      }

      //then check for any empty fields
      //doubt anything will be undefined, but just in case, yo.
      for (var i in this.newNotification) {
        if(this.newNotification[i] == "" || this.newNotification[i] == "undefined") {
          return;
          die;
        }
      }
      //else if it passed soft validation, go on

      //save current message
      var newMessage = JSON.parse(JSON.stringify(this.newNotification));

      //make 'er
      this.makeNotification(newMessage);

      //empty the object after we save the message
      for (var i in this.newNotification) {
        this.newNotification[i] = ""
      }

      //since we reset the values above, we have to wait until the next tick
      //to change the select value
      Vue.nextTick(function () {
        document.getElementById('newNotificationType').selectedIndex = "0";
      })
    },

    makeNotification: function(sentData) {
      this.notificationData.push(sentData);
    },

    closeNotification(sentNotificationIndex) {
      //idk why, but $remove "syntax sugar" method doesnt work
      //gotta schmack it out old school
      this.notificationData.splice(sentNotificationIndex, 1);
    }    
  },

  data: function() {
    return {
      notificationTypes: [
        "warning",
        "error",
        "success"
      ],

      selectedNotificationType: 'success',

      testSuccess: {
        type: "success",
        title: "Noice, bro!",
        message: "This is a success message. Must've done something right. Hooray!"
      },

      testError: {
        type: "error",
        title: "Aw, darn.",
        message: "This is an error message. Assumingly, something went wrong. Sadface."
      },

      testWarning: {
        type: "warning",
        title: "Hey, guess what?",
        message: "This is a warning message. Some info comin' at ya. Meh."
      },

      newNotification: {
        type: "",
        title: "",
        message: ""
      }
    }
  }
})

//----------
// Vue init
//----------
var vue = new Vue({
  el: "#vue",

  //putting the notification data in the parent Vue instance
  //this allows other components to access and see them
  //that means we can also push new notifications to it,
  //and our notifications component will pick them up
  data: {
    notificationData: []
  }
});

 

See also  Vue.js Loading Spinner Overlay Animation Using vue-spinner Library in Javascript Full Example For Beginners

 

And now if you open the index.html file inside the browser you will see the below screenshot as shown below

 

 

Leave a Reply