Up next in 10
Master SweetAlert2 :The Complete Guide to Beautiful Alerts & Dialog Popups with HTML & JavaScript
Jan 9, 2025
Master SweetAlert2 :The Complete Guide to Beautiful Alerts & Dialog Popups with HTML & JavaScript
View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we'll look at a alert
0:04
library in JavaScript which is sweet
0:06
Alert 2 sweet Alert 2 is a very famous
0:09
library in JavaScript if you want to
0:11
show alert and dialog boxes inside your
0:14
application something like this if you
0:16
want to receive user
0:18
input it can even receive user input as
0:21
well so when we submit this email
0:22
address click on okay so you will be
0:24
capturing this email address and also
0:27
the confirm here so if you're building
0:29
any sort of application this these kinds
0:31
of alert boxes makes the UI more
0:34
engaging and
0:36
uh so it will be showing you how to get
0:39
started with sweet Alert 2 so if you
0:42
just type sweet Alert 2 on Google the
0:45
very first link which comes this is
0:47
their official website s2.
0:51
github.io and uh on their
0:55
website they have shown great
0:58
documentation they have you can see each
1:00
and every example they have given of
1:02
every alert box so I will just show you
1:05
how to get started using this Library
1:07
how to include that
1:10
so first of all what we need to
1:13
do we only need this index. HTML file I
1:17
will just make a simple boiler
1:20
plate sweet alert example in browser so
1:24
first of
1:25
all you need to include the CDN of sweet
1:29
alert to for the in order to use it in
1:32
the browser so we will be using the CDN
1:35
here so we are just including the CDN
1:37
stack part
1:39
bootstrap so you just need to include
1:42
this you can even get this from their
1:45
official
1:46
website so I've just copy pasted the CDN
1:49
you can go to this inst installation and
1:53
uh you can include this CDM which they
1:58
have so after that
2:00
we will have
2:03
the simple three
2:08
buttons so this will simply say sweet
2:11
Alert
2:14
2 so we are just using bootstrap for
2:17
constructing the UI that's all so we
2:20
will have these three buttons first we
2:22
will have the button for showing the
2:24
basic alert box the second button will
2:27
be there for showing the input alert
2:31
and the third button will be shown for
2:34
confirm
2:36
alert so I will be taking example of
2:39
these three buttons so we'll be giving
2:42
an ID to it basic
2:47
alert input
2:52
alert and confirm aler so right
2:57
now you also need to give bootstrap
3:00
classes which is BTN BTN primary so
3:03
these are all bootstrap classes so
3:06
bootstrap is not necessary we are just
3:08
using it for styling the
3:12
UI BTN BTN
3:15
danger and for bootstrap we included the
3:19
CDN and now for including the sweet
3:21
alert CDN you will simply copy this CDM
3:24
which is available on their website just
3:27
after the body paste it and if you see
3:30
in the browser we will have these three
3:32
buttons when we click these buttons
3:34
nothing happen because we do need to
3:36
write the JavaScript for these so right
3:39
in the custom JavaScript we will bind on
3:42
click listener to each of these button
3:45
so we have given this ID here basic
3:48
alert we will bind this listener to this
3:51
button so when we
3:53
click this button we will
4:00
now we need to show the sweet
4:03
alert basic alert dialogue so now for
4:06
showing
4:08
that we will use this swell s w s w and
4:15
this actually contains a function called
4:17
as fire and this takes an object this
4:21
fire function this fire method inside
4:23
this Library sueter 2 takes an object
4:27
which contains various properties about
4:29
the alert box such as the title the
4:32
title can be anything so I will say
4:34
welcome and then the actual text that
4:36
you want to show in the alert box so we
4:38
will say this is a basic
4:42
alert third option is the icon which
4:44
icon that you want to show so this will
4:47
be a simple info alert box so info and
4:50
then if you want to show confirm button
4:52
on the alert box you will say this
4:55
option to be cool so if you now refresh
5:00
click on this button you will see this
5:02
info icon is
5:04
appearing this is actually the info icon
5:07
this is actually the title this is
5:09
actual
5:10
basic alert box and this is actual
5:12
button that you see so all these things
5:15
are conf uh changeable you can change
5:18
this title text icon there are different
5:21
types of Icon as well so you can change
5:23
this from info to Danger so now if you
5:26
click that sorry this is not d this is
5:31
if you go to their
5:33
documentation for each example if
5:37
you click on the icons you will see V
5:40
various icons are there five types are
5:43
there success icon error warning info
5:46
and question so five types are there if
5:49
I change this to success so a green box
5:54
will appear you will see that take Mark
5:56
option so whenever you want to depending
5:59
upon your applications you can just
6:02
change these icons whenever you want to
6:04
ask a question you will show this
6:06
question icon these are built in inside
6:09
sweet aler
6:12
to and
6:14
uh if you want to show a error message
6:17
then you will say show this error
6:21
message you can see so various icons are
6:23
there and now I will show you how to
6:26
receive user input this for a basic
6:30
input dialogue now if you want to
6:33
receive some user input from the user so
6:37
how you can do
6:38
that you will bind a event listen we
6:42
have given an ID to the
6:46
button so inside this call back function
6:49
uh again we'll use the
6:51
same syntax well again the fire function
6:55
again it takes a set of objects here the
6:58
title that you want to receive so enter
7:00
your email so we are asking a question
7:02
to the user that you need to enter your
7:04
email address and then here you will
7:07
provide the second property which is
7:09
input so here we are receiving the input
7:11
uh email address so you will simply type
7:15
email and then whatever that you want to
7:18
input
7:19
label your email
7:23
address and the input placeholder if you
7:26
also want to show placeholder text to
7:28
user
7:30
so enter your email
7:34
address so if you just now open this you
7:38
will now see this is actual title this
7:41
is a
7:43
placeholder this is a
7:47
button so now if you want to receive the
7:49
value whatever value the user writes
7:51
right here you will now see in invalid
7:54
email address because we set this type
7:57
input to email so form valid a is built
8:00
in inside sweet alert it automatically
8:02
recognize that uh this is the invalid
8:05
email address you do need to include the
8:07
add the rate symbol now if you want to
8:10
receive whatever the user has written
8:13
inside this this return return
8:16
say call back so we can handle this
8:18
promise we can handle this using dot
8:21
then and we can get the value the user
8:24
has written inside this result Val
8:27
variable and we can show this value
8:30
in the input box swell fire so you can
8:34
simply say
8:37
entered email uh we will use the back
8:40
Teck symbol to show Dynamic value right
8:42
here which is result.
8:46
value so if you
8:50
now enter the email address click on
8:53
okay you will see entered email this
8:57
one so you captured the dat details
8:59
which is entered by the user and you are
9:02
showing it so in this way if you want to
9:04
receive any user input this input can be
9:07
anything it can be the age as well so
9:09
for age this will be number so you will
9:12
change this from email to number so here
9:14
you will receive your enter your age you
9:17
can ask any question to the
9:22
user so enter AG if you now open this
9:29
here the user will enter the age so now
9:31
this changes to number input so here you
9:34
can't write text so you can't write it
9:36
you only need to
9:38
uh the user can only write a number so
9:41
if I write this number click on okay you
9:44
will now see enter age so we captured
9:46
this input same goes if you want to
9:49
receive text you will change this to
9:51
text and you can just say ask any
9:55
question
9:56
enter name
10:01
so we have this is very simple
10:04
uh there are three
10:07
inputs so here the user will write any
10:10
text so you will now so if you want to
10:13
receive a password this will change to
10:16
input type
10:26
password so you will see you can receive
10:30
any user input based upon your
10:32
application so in this way this is the
10:36
input alert box last but not least we do
10:39
have the confirm alert boxes so if you
10:43
want to perform any operation related to
10:45
your application and then show this EV
10:49
alert
10:52
box so this will be useful in those
10:55
situations let's suppose the user want
10:57
to delete something and just before that
11:00
you want to ask the user that do you
11:02
want to confirm this operation then in
11:04
that case you can show this input field
11:07
and uh are you
11:09
sure this will be the title and the
11:12
actual text will
11:14
be you won't be able to recover this
11:17
so that question you can
11:22
ask the properties will be the same the
11:25
questions will change depending upon the
11:27
icon property here you can show this
11:30
warning
11:31
icon and some more options you can
11:34
customize show cancel button if you want
11:37
do want to show the cancel button you
11:39
will set this Boolean parameter true
11:42
confirm button text you can
11:46
show yes delete
11:51
it and reverse button if you want to
11:55
show the reverse buttons you will set it
11:57
to true
11:59
so if you now refresh you will see this
12:02
warning icon appearing and it is asking
12:05
you are you sure you won't be able to
12:06
rever this and two buttons are showing
12:08
cancel button and yes delete it if you
12:11
press the cancel button this will close
12:14
and the operation will not be performed
12:16
but if you click the yes deleted button
12:19
then again this will return a promise we
12:21
can handle this using dot then
12:25
so again this will be present in the
12:27
result variable
12:29
and if the user has pressed the delete
12:31
button in that case we can show a
12:34
message to the user that deleted your
12:37
file has been
12:38
deleted and then the third argument you
12:41
can show the icon which is Success icon
12:44
so if you now click yes deleted so you
12:47
can see
12:50
that so for every situation there is a
12:54
alert Box available to you so you
12:57
can based on on your application you can
13:00
show the alert box and uh you can check
13:04
out their documentation there are more
13:07
alert Box available you can just click
13:10
the
13:11
examples section right here and uh you
13:14
can try out each
13:17
example you can even show images in
13:19
these alert boxes as
13:23
well so you can
13:25
even add custom animations as well if
13:29
the alert boxes May fade it may come
13:32
from the top bottom left right position
13:41
all so this was a tutorial on sweet
13:44
Alert 2 which is a alert and dialog
13:46
based library
13:48
in browser and the main thing is that it
13:52
has zero dependencies so it is built in
13:55
entirely in JavaScript
13:59
so it's very popular Library you will
14:01
see the GitHub stars and the number of
14:06
downloads so thank you very much for
14:08
watching this video and I will be seeing
14:10
you in the next video and do check out
14:12
my website freem mediat tools.com which
14:15
contain thousands of free open source
14:17
tools related to audio video and
14:20
image and I will be seeing you in the
14:22
next video