Before start with the tutorial, make shore u already have jQuery installed, cause this library use jQuery, in this case I will use the latest version.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.js"></script>
Let start!
We're going to use the toastr library, so go to the repositorie here.
Before make something else, first we create a directory in your project like this.
As u can see, we have a folder named toastr where we have 2 files.
Now let's create this 2 files(JS and CSS).
So go to the repository that you opened before, enter the file toast.js in the repository, copy the code, and paste in your file project.
Now we'll do the same with the .scss file.
After this, put the references in your HTML.
NOTE: make shore you put the script after the jQuery script.
Now, we'll use the toast
<input
onclick="test()"
type="button"
/>
<script type="text/javascript">
const test = () => {
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
}
</script>
we'll get this result
Very easy right? toastr have a demo where u can personalize with some click and see the result, here u have.
See you soon.
Top comments (0)