Create a Simple 0-dependency Toast (part 2) - Class-based 
Tags: javascript, tutorial, css, beginners
Published: 2020-03-29 19:51:20

# Intro
Please read the first of this two part mini-series to get a better understanding of this post 🙂.

A few minutes after I published the first post on how to create a simple Toast, I started thinking about ways to make it better and easier to use.

After some thinking, I decided that the best way to easily manage and create Toasts is through classes. So I created a class-based Toast, that accepts a few options to customize the functionality. 

These options are the following: 
1. __title__: (string) What the toast will "say" [default: '']
2. __timer__: (int) How long before the Toast auto expires in ms [default: 2000]
3. __alwaysOn__: (boolean) Overrides the timer option and the Toast doesn't auto expire [default: false]
4. __dismiss__: (boolean) Shows an 'x' icon, when user clicks the icon => the Toast closes [default: false]

# How it works

First the styles are the following:

```css
.toast {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 300px;
  background-color: #213cfd;
  background-image: linear-gradient(19deg, #213cfd 0%, #b421ff 100%);
  color: #fff;
  font-size: 16px;
  padding: 10px;
  -webkit-transition: bottom 350ms;
  -moz-transition: bottom 350ms;
  -o-transition: bottom 350ms;
  -ms-transition: bottom 350ms;
  transition: bottom 350ms;
}

.toast.active {
  bottom: 20px;
}

.toast--dismiss {
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 12px;
    cursor: pointer;
}
```
You can customize the css to fit your needs: change the background color of the Toast, the position etc.

The javascript class: 
```javascript
class Toast {
    constructor(title = '', {
        timer = 2000,
        alwaysOn = false,
        dismiss = false
      } = {}) {
        this.autoTimer = null;
        let self = this;
        /* Close all previous Toasts */
        document.querySelectorAll('.toast').forEach(el => {
            el.classList.remove('active');
        })
        this.title = title;
        /* Check if timer is valid integer */
        let ms = parseInt(timer);
        if(isNaN(ms) || ms < 1) {
            ms = 2000;
        }
        this.toast_el = document.createElement('div');
        this.toast_el.classList.add('toast');
        this.toast_el.innerText = title;

        if(dismiss) {
            let toast_dismiss = document.createElement('button');
            toast_dismiss.setAttribute('type', 'button');
            toast_dismiss.classList.add('toast--dismiss');
            toast_dismiss.innerHTML = "&#10006;";
            
            this.toast_el.appendChild(toast_dismiss);

            toast_dismiss.addEventListener('click', () => {
                /* Remove Toast when user click on 'x' button */
                self.toast_el.classList.remove('active');
                setTimeout(function() {
                    document.querySelector('body').removeChild(self.toast_el);
                }, 100);
                clearTimeout(self.autoTimer);
            });
        }
        /* Append Toast element to body */
        document.querySelector('body').appendChild(this.toast_el);
        setTimeout(function() {
            self.toast_el.classList.add('active');
        }, 100);

        if(!alwaysOn) {
            /* Auto expire the Toast after the specified ms */
            this.autoTimer = setTimeout(function() {
                self.toast_el.classList.remove('active');

                setTimeout(function() {
                    document.querySelector('body').removeChild(self.toast_el);
                }, 100);
            }, ms);
        }
    }
}
```

# Examples

## 1. Classic Toast
```javascript
document.querySelector('#btn-show-toast').addEventListener('click', (e) => {
    let toast = new Toast("✔️ This is a classic toast! 👏", {
        timer: 2000
    });
});
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/juk6uccy9t4cdur51caj.gif)

## 2. Dismissable Toast with timer
```javascript
document.querySelector('#btn-show-toast--dismiss').addEventListener('click', (e) => {
    let toast = new Toast("✔️ This is a dismissable toast with auto expire! 👏", {
        timer: 2000,
        dismiss: true
    });
});
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d9mgu7pfltoovnq5s5id.gif)

## 3. Always-on, dismissable Toast
```javascript
document.querySelector('#btn-show-toast--dismiss--no-timer').addEventListener('click', (e) => {
    let toast = new Toast("✔️ This is a dismissable toast without timer! 👏", {
        dismiss: true,
        alwaysOn: true
    });
});
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kzbt0nhmmanmudbx1xnb.gif)

# Demo with all the code
{% codepen https://codepen.io/tsanak/pen/wvaNKxj %}

# Outro

![](https://media.giphy.com/media/12A2NUqlEb3UhG/source.gif)

🎉 Thank you for reading through all the post! 🎉

If you have any questions or feedback, let me know in the comments 🗨.