Now we know how we can interact with the user through the prompt, alert and confirm. Let’s build a simple application written purely using plain Javascript where we ask the user about his/her name and age, and then make use of the operators and the conditional statements we have learned till now to check if he/she should be allowed to enter the ‘La La Land!’.
Tools Used:
- Visual Studio Code
- Mozilla Firefox
Note: Any Browser will do, though Google Chrome or Mozilla Firefox are recommended.
Project Structure:
prompt-example // name of the folder --index.html --app.js
Example:
The index.html file will contain the simple HTML content that we will render and the app.js file is the javascript file in which we will write the javascript code.
index.html:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- character encoding --> <!-- setting the default width to devices width --> <meta name="viewport" content="width=device-width"> <title>Prompt Example</title> <!-- external package --> </script> </head> <body> <!-- simple h1 heading --> <h1 style="text-align:center";>Prompt example!</h1> <!-- linking the javascript file --> <script src="app.js"></script> </body> </html> |
Explanation: There’s not much going on in the HTML file that might get your attention, except the external package which is a link to the ‘SweetAlert’ js library that provides beautiful alert boxes when compared to the native ones. By writing this link in the script tag we are making sure that when we write the ‘SweetAlert’ javascript code it works the way it is supposed to.
app.js:
Javascript
// getting the names and age from user with the // help of prompt let name = prompt('What is your name?'); let age = prompt('What is your age?'); let entryAge = 18; let seniorAge = 60; // printing the age to the console alert(`Your name is ${name} and you are ${age} years old.`); // using conditional if-else if( (age > entryAge) && (age <= seniorAge)){ // console.log('Welcome to La La Land!'); swal({ title: "Great!", text: "Welcome to La La Land!", icon: "success", }); }else if(age > seniorAge){ // console.log('Your ride is free..Have a good Day!'); swal({ title: "Awesome!", text: "Welcome Sir/Mam to La La Land!", icon: "info", }); }else{ //console.log('Sorry.. buddy.') swal({ title: "Oops!", text: "Sorry Buddy!", icon: "warning", }); } |
Explanation: We know how the if-else condition works, and in this small application of ours which asks you your page and tells you whether you are allowed or not to enter the ‘La La Land’, if-else seems to be the best option. We simply ask the user his/her name and age and then we have our own criteria that people below a certain age will not be allowed to enter and also people above a certain age should be greeted differently. So we wrote if-else and used comparison and logical operators to match our criteria. An interesting thing is a code inside the if or else blocks, we make use of ‘swal’ which is like ‘document.write’ in simple javascript as it renders whatever is inside it to the screen as an ‘Alert’.
Running the Code:
If you are using Visual Studio code then you can simply make use of the ‘live-server’ extension which updates the code in real-time. Try entering different details(ages):
Example:
Name: Mukul Age: 22
Output:
Example:
Name: Ram Age: 18
Output:
Example:
Name: Sneha Age: 61
Output:
The above example gives you an idea about how we can make use of prompt/alert/confirm. Though this example is simple, it can still be modified in many ways. I want you to try implementing your own example.
