Custom Toast Notification using HTML, CSS and JavaScript (Source Code) - Coding Torque

Custom Toast Notification using HTML, CSS and JavaScript

Greetings, fellow coders! Welcome to Coding Torque, where we delve into the world of coding through fun and informative tutorials. In today's blog post, we will be creating a custom toast notification using HTML, CSS, and JavaScript. To add an extra layer of convenience and dynamic functionality, we will also be utilizing the jQuery library in our JavaScript code. Whether you're a seasoned developer or just starting out, this tutorial will provide a great opportunity to learn and practice your skills. So let's get started!

Join us on Telegram Join Now

Before we start, here are some more JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. QR Code Generator using JavaScript


I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.


Demo



HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Custom Toast using JavaScript - @codingtorque</title>
</head>

<body>      
    <!-- Further code here -->
    <!-- JQUERY -->
    <script src="https://code.jquery.com/jquery-3.6.3.js"
        integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

    <script src="script.js"></script>
</body>

</html>


Paste the below code in your <body> tag

<div class="container">
    <div id="toast-btn">Show me toast</div>
    <input type="text" id="textbox" placeholder="type something here!" />
</div>


Output Till Now


CSS Code

Create a file style.css and paste the code below. 

* {
  box-sizing: border-box;
}

input {
  outline: none;
}

body {
  font-family: "BentonSans", "Helvetica Neue", Helvetica, Arial, Geneva,
    sans-serif;
  background-color: #3b2f63;
  background-image: -webkit-radial-gradient(
      50% top,
      rgba(84, 90, 182, 0.6) 0%,
      rgba(84, 90, 182, 0) 75%
    ),
    -webkit-radial-gradient(right top, #794aa2 0%, rgba(121, 74, 162, 0) 57%);
  background-image: radial-gradient(
      at 50% top,
      rgba(84, 90, 182, 0.6) 0%,
      rgba(84, 90, 182, 0) 75%
    ),
    radial-gradient(at right top, #794aa2 0%, rgba(121, 74, 162, 0) 57%);
  background-repeat: no-repeat;
  background-size: 100% 1000px;
  margin: 0;
  padding: 0;
}

.container {
  width: 500px;
  margin: 100px auto;
  background: transparent;
  overflow: hidden;
  border: 2px solid #fff;
  display: flex;
}

#toast-btn {
  display: inline-block;
  float: left;
  background: #fff;
  padding: 10px;
  cursor: pointer;
  border: 2px solid #3b2f63;
  white-space: no-wrap;
  font-size: 20px;
  color: #3b2f63;
  width: 40%;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#toast-btn:hover {
  background: #3b2f63;
  color: #fff;
}

#textbox {
  background: transparent;
  border: none;
  font-size: 20px;
  padding: 0 10px;
  color: #fff;
  border-left: 2px solid #fff;
  width: 60%;
}

.toast {
  padding: 15px 20px;
  color: #fff;
  background: rgba(0, 0, 10, 0.7);
  display: inline-block;
  position: fixed;
  top: -100px;
  right: 15px;
  opacity: 0;
  transition: all 0.4s ease-out;
}  

Output Till Now

Custom Toast Notification using HTML, CSS and JavaScript

JavaScript Code

Create a file script.js and paste the code below.

function ToastBuilder(options) {
    var opts = options || {};

    opts.defaultText = opts.defaultText || 'default text';
    opts.displayTime = opts.displayTime || 3000;
    opts.target = opts.target || 'body';

    return function (text) {
        $('<div/>')
            .addClass('toast')
            .prependTo($(opts.target))
            .text(text || opts.defaultText)
            .queue(function (next) {
                $(this).css({
                    'opacity': 1
                });
                var topOffset = 15;
                $('.toast').each(function () {
                    var $this = $(this);
                    var height = $this.outerHeight();
                    var offset = 15;
                    $this.css('top', topOffset + 'px');

                    topOffset += height + offset;
                });
                next();
            })
            .delay(opts.displayTime)
            .queue(function (next) {
                var $this = $(this);
                var width = $this.outerWidth() + 20;
                $this.css({
                    'right': '-' + width + 'px',
                    'opacity': 0
                });
                next();
            })
            .delay(600)
            .queue(function (next) {
                $(this).remove();
                next();
            });
    };
}

// customize it with your own options
var myOptions = {
    defaultText: 'Toast, yo!',
    displayTime: 3000,
    target: 'body'
};

var showtoast = new ToastBuilder(myOptions);

$('#toast-btn').click(function () {
    showtoast($('#textbox').val());
});

$('#textbox').keypress(function (e) {
    if (e.which == 13) {
        showtoast($('#textbox').val());
        return false;
    }
});

// Demo:

$('body')
    .queue(function (next) {
        showtoast('Hello! from Coding Torque.');
        next();
    })


Join us on Telegram Join Now

Written by: Coding Torque | Piyush Patil

Code Credits: @Khazii

If you have any doubts or any project ideas feel free to Contact Us 

Hope you find this post helpful💖
 
 Follow us on Instagram for more projects like this👨‍💻 

Post a Comment

Previous Post Next Post