Notification System Using JavaScript and Bootstrap

0
12998

Welcome back to short learner , today we will see how we can make a notification system using java-script and bootstrap.
first of all you must have some basic knowledge of java script and bootstrap classes.
In this tutorial we will use some bootstrap classes for precise look of our web based notification system, and also we will use some of java script functions
to play sound.


For using bootstrap i would recommend the use of maxcdn files A maxcdn bootstrap file allows you to directly call all bootstrap functions without downloading the bootstrap package.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Use these files inside your <head> section of your html code. Now we will write some javascript function which is used to show the preview of html code.
After putting maxcdn links in head section we move to the body part of our html code. in body section we make a form which will contains 2 fields , first is Name and another one is message. after filling name and message we click on to the submit button, after submission a javaascript function will be called and the function will invoke the sound script.

Also Read :
PHP Login Script With Remember me.
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript
Check Email is Already Registered in Database using Ajax and JavaScript.
How to hide extension of html and php file.?

<div>
<div>
    <div>
<h3 style="text-align: center; color: purple">Notification Sound Using Javascript</h3>
  <div >
    <div>
                <div>
                    <span></span> Shortlearner
                    <div>
                        <button type="button" data-toggle="dropdown">
                            <span></span>
                        </button>
                        <ul>
                        </ul>
                    </div>
                </div>
   <div>
  <form id="form1" >
  <ul>
    <li><span>
                            <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" />
                        </span>
                            <div>
                                <div>
                                    <strong>Shortlearner</strong> <small>
                                        <span></span>12 mins ago</small>
                                </div>
                                <p>
                                   Hey, welcome to <a href="http://mainvps.shortlearner.com">shortlearner.com</a>.
                                </p>
                            </div>
                        </li>
    <li></li>
  </ul>
  </td></tr>
  <tr><td>
  <input type="hidden" name="fname" value="form1"> 
  <div>
  <input type="text" name="name" placeholder="Enter Name" required="required" style="width:100px;"> </div><br><br>
  <div>
  <input type="text" name="msg" placeholder="Enter Msg" required="required"></div><br>
   <br><br><button type="button">Submit</button> 
  </form>
</div>
  </div>
</div>
  </div>
</div>
    </div>

Here is the javascript which is important to invoked the sound..

<script>
  $(function() {
     $("button").click(function() {
      var name = $.trim($("input[name='name']").val());
        var msg = $.trim($("input[name='msg']").val());
        if(name == '' || msg == '') {
            alert("Please enter required fields");
            return false;
        }
        var audio = new Audio('notification.mp3');
        audio.play();
        $(".Shortlearner").append("<li class='right clearfix'><b>"+name+": </b> "+msg+"</li>");
        $("input[name='msg']").val("");
     });
  });
  </script>

Put the above javascript on the head section of your html code.
Note: the audio file must be present inside the same folder as your html code is placed.