JavaScript Course | JavaScript Prompt Example

Previous Topic: JavaScript Course | Conditional Operator in JavaScript
Now we know about how we can interact with the user through the prompt, alert and confirm. Let’s built 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

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 file

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> <!-- character encoding -->
   <!-- setting the deafult width to devices width -->
  <meta name="viewport" content="width=device-width">
   <!-- optional -->  
  <meta name="author" content="Mukul-Latiyan">
  <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>

chevron_right


Explaination: Though there’s not much going on in the above 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 as 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 file:

filter_none

edit
close

play_arrow

link
brightness_4
code

  // 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",
     });
}

chevron_right


Explaination: We know how if-else condition works, and in this small application of ours which ask 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’s 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 ‘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.
Next Topic: JavaScript Course | Practice Quiz-2



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.