Making your own Command Line Interface(CLI) App using Javascript [Part-1]

Hello World,

This blog is about how to make a CLI app using Javascript.

If you don't know what is CLI?

CLI is a command-line interface where the user interacts with the text-based window where they have to give the keyboard input based on the question that the command line asks us to do.

The difference between a CLI app and a modern web app is that in the web app, the user interacts with the web page where we are used to seeing all the multi-page animations and dynamic rendering of values using custom fancy animations. We usually use the web apps in our favorite web browsers like Chrome, Firefox, etc.

Whereas in the CLI app, the user interacts with the static text-based command-line where there won't be any fancy animations. Here, the user uses a command-line application such as Command Prompt, Windows PowerShell, or Terminal to interact with the CLI application.

The main difference between CLI and web app is that in the web app, it is a GUI (Graphical User Interface) based application and in CLI, it is not.

I hope by now, you understood the main difference between CLI and Web App.

Now, let's get started with an application that we are going to develop.

The CLI app that we are going to develop is a Quiz app in which the app asks the user some questions and the user has to enter the answer from the options.

We are going to do the following procedures in this app.

1. Importing the "readline-sync" package in the program.
2. Asking the user to enter their name.
3. After the user enters the name, greet the user with some nice greeting message with the name displayed
4. Display the rules of the quiz.
5. Display the questions and options to the user to answer the questions.
6. Declare a score variable to keep track of the total correct answer.
7. Creating a function to iterate through questions one by one.
8. Displaying the question and the following options of that question and check whether the particular answer the user selected is correct or not.
9. When the user is done playing with the quiz, the command line will display the total score with a message.

Part 1:- Importing readline-sync package in the program

In this part, we have to first take the name input from the user by asking What is his/her name?

But before proceeding with that, we need something to take the input from the user. For that, we need to import a package/library to allow the users to give input through the console.

and there are various ways to take user input in Javascript, but for console, we are going to use a library/package called readline-sync.

To use this package, we will import it using require() function by storing it in a variable.

var readlineSync = require('readline-sync')

In this code snippet, we are declaring a variable called "readlineSync" where we are using require() function to import the readline-sync package in our program. So that the user can give the input throughout the program.

Here, we have completed Part-1 of the app creation.

Part-2:- Asking the user to enter the name

After importing the package, the console will ask the user to enter the name.

var questionUserName = 'May I know your name? ';

var userName = readlineSync.question(chalk.green(questionUserName + '\n'));

We are storing the question in a variable called questionUserName.

and in the next line, we are using the .question() function of readline-sync to ask the user the question. When the question gets displayed, the user enters the name, and the name stores in a variable called userName.

Part-3:- Greet the user by giving a nice greeting message with the name displayed

var greetingMessage = 'Welcome to my quiz';

console.log(greetingMessage + ', '+ userName + ' 👋');

We are storing the greeting message in the variable called greetingMessage.

After that, the console will give output with the greeting message with the username displayed. It's being achieved using concatenation. It will help in joining the message together using the '+' operator.

Part 4:- Display the rules of the quiz

Now, we are going to display the rules of the quiz. You can set the rules based on the topic that you want to work on.

var instructions = `
---------------------------------------------------------------------- 
✨   ✨   ✨   ✨   ✨    INSTRUCTIONS  ✨   ✨   ✨   ✨   ✨   ✨   
----------------------------------------------------------------------                                                           
1) There are 5 questions in total.

2) If you select the correct option of the question then one point will
be awarded. ✔️                                                                                                                                                                                            

3) If you select the wrong option of the question then no points will be awarded. ❌                                                                                                                                                                                     

4) If you try to skip the question, then no point will be awarded. ❌   

9) Press '0' to stop the quiz 🛑                                        
---------------------------------------------------------------------- 
`;


console.log(instructions);

For the next parts, I am going to write a separate blog to cover all the parts which are remaining.

I hope this article has helped you understand the previous parts that I discussed till now.

See you in part-2 of this blog.