Frontend Forever

Custom Toast Notifications

About this Code

Hello reader, I am dui77. Nice to meet you again in this free code sharing website. In this post I am going to explain about Custom Toast Notifications. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<!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">
    <title>Document</title>
</head>
<body>
   <form class="form">
	<h1>Generate your custom Toast Notification</h1>
        
	<div class="form__radios">
		<div class="form__radio">
			<p>Should your notification have buttons?</p>
			<input type="radio" name="buttons" id="buttonsNo" value="false" checked>
			<label for="buttonsNo">No</label>
			<input type="radio" name="buttons" id="buttonsYes" value="true">
			<label for="buttonsYes">Yes</label>
		</div>
		<div class="form__radio">
			<p>Should the user be allowed to close the window themselves?</p>
			<input type="radio" name="close" id="closeNo" value="false">
			<label for="closeNo">No</label>
			<input type="radio" name="close" id="closeYes" value="true" checked>
			<label for="closeYes">Yes</label>
		</div>
	</div>
	
	<div class="form__radios" id="buttonsDiv">
		<div class="form__inputs">
			<label for="button1">Set first button text (optional)</label>
			<input type="text" name="button1" id="button1" maxlength="20" />
		</div>
		<div class="form__inputs">
			<label for="button2">Set second button text (optional)</label>
			<input type="text" name="button2" id="button2" maxlength="20" />
		</div>
	</div>

<div class="form__inputs">
		<label for="heading">Set a custom heading (optional)</label>
		<input type="text" name="heading" id="heading" />
		<label for="paragraph">Set a custom text (optional)</label>
		<input type="text" name="paragraph" id="paragraph" />
	</div>

<div class="form__buttons">
		<button class="btn btn--regular" value="regular">Create Regular notification</button>
		<button class="btn btn--success" value="success">Create Susccess notification</button>
		<button class="btn btn--error" value="error">Create Error notification</button>
		<button class="btn btn--warning" value="warning">Create Warning notification</button>
	</div>
</form>

</div> 
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    font-size: 62.5%;
}
body {
    box-sizing: border-box;
    font-size: 1.6rem;
    background-color: #222226;
    color: #FEE;
    font-family: "Roboto", sans-serif;
    margin: 5rem;
}
h1 {
    margin-bottom: 2rem;
}

/* CREATE FORM */
.form {
    max-width: 60rem;
}

.form__radios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
}
.form__radio {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2rem;
    row-gap: .8rem;
    margin-top: 1rem;
}
.form__radio p {
    grid-column: 1 / -1;
}

.form__inputs {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: 4rem;
}
.form__inputs input, .form__radios input {
    margin-bottom: 1rem;
    background-color: #556;
    border: none;
    padding: 1rem 1.5rem;
    color: inherit;
    outline: transparent;
}

.form__buttons {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 2fr));
    gap: 1rem 2rem;
}

.btn {
    background-color: #778;
    color: inherit;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
}
.btn:hover { background-color: #556; }
.btn--success { background-color: rgb(21, 173, 89); }
.btn--success:hover { background-color: rgb(12, 134, 67); }
.btn--error { background-color: rgb(199, 29, 66); }
.btn--error:hover { background-color: rgb(158, 16, 47); }
.btn--warning { background-color: rgb(232, 172, 21); color: #222226; }
.btn--warning:hover { background-color: rgb(199, 141, 15); }

/* THE ACTUAL TOAST NOTIFICATIONS */
.toast {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 90%;
}

.toast__message {
    position: relative;
    color: #EEE;
    background-color: #334;
    width: 50rem;
    max-width: 100%;
    max-width: 100%;
    padding: 3rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: center;
    font-size: 1.3rem;
    border-left: 3px solid #EEE;
    animation: toast 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

.toast__icon {
    background-color: rgb(21, 173, 89);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: #222226;
    display: grid;
    place-items: center;
}

.toast__icon svg {
    height: 2rem;
    width: 2rem;
}

.toast__heading {
    margin-bottom: .8rem;
}

.toast__buttons {
    display: grid;
    /* flex-direction: row; */
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: stretch;
}
.toast__buttons button {
    background-color: rgba(255,255,255, .1);
    border: none;
    color: inherit;
    padding: .5rem 1rem;
    cursor: pointer;
}
.toast__buttons button:hover {
    background-color: rgba(255,255,255, .2);
}

.toast__close {
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 2rem;
    font-weight: 100;
    color: #888;
    cursor: pointer;
}

/* ERROR MESSAGES */
.toast__message--error {
    background-color: #334;
    background-image: linear-gradient(to right,
        rgba(136, 7, 35, 0.3),
        rgba(136, 7, 35, 0) 30%);
    border-left: 3px solid rgb(199, 29, 66);
}
.toast__message--error .toast__icon {
    background-color: rgb(199, 29, 66);
}
.toast__message--error .toast__icon svg {
    height: 1.6rem;
    width: 1.6rem;
}
.toast__message--error .toast__heading {
    color: rgb(199, 29, 66);
}

/* WARNING MESSAGES */
.toast__message--warning {
    background-color: #334;
    background-image: linear-gradient(to right,
        rgba(145, 93, 10, 0.3),
        rgba(145, 93, 10, 0) 30%);
    border-left: 3px solid rgb(232, 172, 21);
}
.toast__message--warning .toast__icon {
    background-color: rgb(232, 172, 21);
}
.toast__message--warning .toast__icon svg {
    height: 2.5rem;
    width: 2.5rem;
}
.toast__message--warning .toast__heading {
    color: rgb(232, 172, 21);
}

/* SUCCESS MESSAGES */
.toast__message--success {
    background-color: #334;
    background-image: linear-gradient(to right,
        rgba(12, 100, 52, 0.3),
        rgba(12, 100, 52, 0) 30%);
    border-left: 3px solid rgb(21, 173, 89);
}
.toast__message--success .toast__icon {
    background-color: rgb(21, 173, 89);
}
.toast__message--success .toast__icon svg {
    height: 2rem;
    width: 2rem;
}
.toast__message--success .toast__heading {
    color: rgb(21, 173, 89);
}

@keyframes toast {
    0% {
        transform: translateY(150%);
        opacity: 0;
    }
    10%, 90% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@media only screen and (max-width: 650px) {
    html {
        font-size: 50%;
    }
    body {
        margin: 2rem;
    }
}

console.log("Event Fired")
'use strict';

const btns = document.querySelectorAll('.btn');
const toastContainer = document.querySelector('.toast');
const buttonYes = document.querySelector('#buttonsYes');
const buttonNo = document.querySelector('#buttonsNo');
const buttonsContainer = document.querySelector('#buttonsDiv');

const options = {
    regular: {
        heading: 'This is a Regular notification',
        paragraph: 'This toast message notifies you of something. Whatever that may be.',
        svg: ''
    },
    success: {
        heading: 'This is a Success notification',
        paragraph: 'This toast message notifies you of all your great successes. You rock!',
        svg: '<div class="toast__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9 20.42l-6.21-6.21l2.83-2.83L9 14.77l9.88-9.89l2.83 2.83z"/></svg></div>'
    },
    error: {
        heading: 'This is an Error notification',
        paragraph: 'This toast message notifies you of an Error. Don\'t worry it\'s probably not your fault.',
        svg: '<div class="toast__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M15.1 3.1L12.9.9L8 5.9L3.1.9L.9 3.1l5 4.9l-5 4.9l2.2 2.2l4.9-5l4.9 5l2.2-2.2l-5-4.9z"/></svg></div>'
    },
    warning: {
        heading: 'This is a Warning notification',
        paragraph: 'This toast message notifies you of a Warning. Who knows what might have happened.',
        svg: '<div class="toast__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M11 14V5h2v9zm0 5v-2h2v2z"/></svg></div>'
    }
}

function createToast({type='regular', buttons='false', close='true', heading='', paragraph='', button1='', button2=''}) {
    const html = `
        <div class="toast__message toast__message--${type}">
            ${options[type].svg}
            <div class="toast__text">
                <h3 class="toast__heading">
                    ${heading ? heading : options[type].heading}
                </h3>
                <p>
                    ${paragraph ? paragraph : options[type].paragraph}
                </p>
                ${buttons === 'true' ? `<div class="toast__buttons">
                    <button>
                        ${button1 ? button1 : 'Cool'}
                    </button>
                    <button>
                        ${button2 ? button2 : 'Whatever'}
                    </button>
                </div>` : ''}
                
            </div>
            ${close === 'true' ? `<span class="toast__close">×</span>` : ''}
            
        </div>
    `;
    toastContainer.insertAdjacentHTML('beforeend', html);

const toast = toastContainer.lastElementChild;
    toast.addEventListener('animationend', () => toast.remove());
}

function resetForm() {
    document.querySelector('#button1').value = '';
    document.querySelector('#button2').value = '';
    document.querySelector('#heading').value = '';
    document.querySelector('#paragraph').value = '';
}

btns.forEach(btn => btn.addEventListener('click', function(e) {
    e.preventDefault();
    const buttons = document.querySelector('input[name=buttons]:checked').value;
    const close = document.querySelector('input[name=close]:checked').value;
    const button1 = document.querySelector('#button1').value;
    const button2 = document.querySelector('#button2').value;
    const heading = document.querySelector('#heading').value;
    const paragraph = document.querySelector('#paragraph').value;
    resetForm();
    createToast({type: this.value, buttons, close, heading, paragraph, button1, button2});
}));

toastContainer.addEventListener('click', function(e) {
    if(!e.target.closest('.toast__close')) return;
    e.target.closest('.toast__message').remove();
});

createToast({type: 'success', buttons: 'false', close: 'true', heading: 'Go ahead!', paragraph: 'Create your very own Toast notification'});

function toggleButtonInputs() {
    if(buttonYes.checked) buttonsContainer.style.display = 'grid';
    else buttonsContainer.style.display = 'none';
}

toggleButtonInputs();
buttonYes.addEventListener('change', toggleButtonInputs);
buttonNo.addEventListener('change', toggleButtonInputs);

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Custom Toast Notifications

About this Code

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever