Getting Started
Hey everyone! Today we are going to cover styling alerts with Sweet Alert. To get started go to: https://sweetalert.js.org/
Then click on the button here:
Then copy the CDN:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Overview
We are going to start off with a brief description of what Sweet Alert is, then create some examples that can be found in their documentation.
Sweet Alert is a way to customize alerts in your games and websites. It allows you to change from a standard JavaScript button. We can add buttons, change the color text, and even add additional alerts that change depending on user click. We can also put icons with our alerts. Our examples will start with a button click and , when that button is clicked a function runs. Our function will have a setTimout. This will create a timer for our alert to begin, note that time is in milliseconds, so the easy way is to choose how many seconds you are going to have and add three zeros to the end of it. (Similar to when you look at your paycheck and mentally add three zeros).
Standard Alerts
Our starting code :
<button onClick="myFunction()">Try it</button>
Then we start our function that we will start placing all of our buttons in:
<script> function myFunction() {
We have a <script> tag to start our JavaScript to create our JavaScript with just an HTML page; after all the buttons we add a </script> tag.
To get started we will look at a JavaScript button:
setTimeout(function(){alert("Hello"); }, 5000);
The alert will look like:
This is just a simple alert. The only difference between calling an alert like this and a Sweet Alert alert, is switching alert to swal. A standard Sweet Alert alert:
setTimeout(function(){ swal("Hello"); }, 3000);
Sweet Alert alert:
Alerts With Two Alerts
Next we are going to create a alert with two alerts:
setTimeout(function(){ swal({ title: "Are you sure?", text: "Once deleted, you will not be able to recover this imaginary file!", icon: "warning", buttons: true, dangerMode: true, }) .then((willDelete) => { if (willDelete) { swal("Poof! Your imaginary file has been deleted!", { icon: "success", }); } else { swal("Your imaginary file is safe!"); } });; }, 1000);
The first alert fires:
Then when we click a button, it activates the secondary alert, for this example I clicked “OK” and this is what it creates:
If you look at the top of the alerts you will see icons. Sweet Alert has four icons.
Now, lets get into some more advanced alerts:
setTimeout(function(){ swal("A wild Pikachu appeared! What do you want to do?", { buttons: { cancel: "Run away!", catch: { text: "Throw Pokéball!", value: "catch", }, defeat: true, }, }) .then((value) => { switch (value) { case "defeat": swal("Pikachu fainted! You gained 500 XP!"); break; case "catch": swal("Gotcha!", "Pikachu was caught!", "success"); break; default: swal("Got away safely!"); } }); }, 20000);
Alerts With Three Alerts
This is an alert that has three buttons and then three alerts that fire in response to a click:
Each one will create an alert with a different message. Clicking “run away” will create “got away safely”, clicking “Throw Pokeball” will create “Pikachu was caught!”, clicking “Defeat” will create “Pikachu fainted! You gained 500 XP!”.
Now we are going to create an alert that pulls movie information from an API:
setTimeout(function(){ swal({ text: 'Search for a movie. e.g. "La La Land".', content: "input", button: { text: "Search!", closeModal: false, }, }) .then(name => { if (!name) throw null; return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`); }) .then(results => { return results.json(); }) .then(json => { const movie = json.results[0]; if (!movie) { return swal("No movie was found!"); } const name = movie.trackName; const imageURL = movie.artworkUrl100; swal({ title: "Top result:", text: name, icon: imageURL, }); }) .catch(err => { if (err) { swal("Oh noes!", "The AJAX request failed!", "error"); } else { swal.stopLoading(); swal.close(); } }); }, 25000);
Alerts That Call An API
This alert will ask for a movie :
It will search our API for the movie that our user inputs and then return a picture of the movie cover, and the title. If it can’t find a match it will say “Oh no!”, “The AJAX request failed!”.
Custom Alert
Now we are going to look at a alert I built after seeing starter code in the Docs:
setTimeout(function(){ swal({ text:"WWWWWWWWWWHHHHHHHHHHAAAAAAAAAATTTTTTTTTT????????????????????", buttons: { cancel: true, confirm: "Confirm", roll: { text: "Do a barrell roll!", value: "roll", }, }, }) .then((value) => { switch (value) { case "roll": swal("Great Job! You did a Barrell Roll"); break; } }); }, 32000);
This creates an alert:
If you click “Do a Barrel roll!” you get two things a awesome Star Fox reference and an alert “Great Job! You did a Barrel Roll.”
This is a start to Sweet Alert. Now you can create your own alerts. Try different icons, buttons and add your own alert statements and use .then to create custom secondary alerts.
YouTube Video to this Tutorial: