NodeJS | NPM | InquirerJS Beginner Tutorial

hello and welcome to more codex my name is mark and today we will talk about enquire.js now inquirer is an interactive command line user interface for node.js that was a mouthful you might have seen this package in an action if you ever installed a react app using command line or similarly for vue and many other applications that require an interactive cli prompt in this video i will cover how to install how to use the enquirer package and after that we will code together and build a simple bmi calculator if you want to skip any part of this video i have the timestamps in the description box below so you can easily jump to any section and now let's get into it so first of all we need to grab our command line and initialize a node application for this test i am already in a folder called code and i'll just create another folder and i'll call that test inquirer and i'll cd into that and then inside of here in order to create a nodejs you need to do a node.js application you need to do npm init you might use npm init dash y and dash y is a flag where you could answer all the questions um by the default answer but i'm gonna skip that for now and i'll just go ahead and do npm in it and hit enter so i can see those prompts and what do you know we have package name and it asks us what is the package name so i'll just go ahead and say hit enter testing choir is fine for me version 1.0 are we okay with that of course description testing inquirer npm package hit enter entry point index.js why not test command i don't have any get repository i don't have any keywords you don't have any author is mark license isc that's fine and it will show us the object that we just created and the json that we just created and is this okay i'll hit enter to confirm and now i'll bring the folder and the code editor to see what we have just created all these questions or these prompts that we just answered is similarly to inquirer so that well that's why like i'm going through over inquirer this is what it is it's basically asking the user a questions and the user will interact with those prompts answering it and then decide what is the outcome will be for now for this example we just created the package.json all i need is to add um just need to add a start script i'll do that right here which is going to be node and i'll say index.js great so we just created our start command and after that we need to now install inquirer and i honestly all to you need to install inquire is just to either copy this or just type it so it's just only npm i inquire assuming of course you have node installed there we go so while is this going to get installed well we need to go into the documentation and just grab the code that the developers at a at enquire just provide for us which basically all we need um and in here we need to go ahead and create index.js and i'll just paste whatever we just copied uh for now i don't think we need a catch well let me go ahead and explain what are these um sections of code so the first section is going to be where are you going to put your questions or where you're going to create your questions for the user and the answers will be in this promise section right here of the code so once the user finishes every single or answers every single question we will get a promise with the answers so for now i'm just gonna print out or console.log the answers so we could see what the user answers the catch error well just in case there is an error is going to happen um basically it's asking if there is a tty error which is basically like a flag that the mpm developers created um and it shows you here it says prompt couldn't be rendered in the current environment and if there's any other errors you could basically catch it here i'm not going to use this for now so just going to get rid of it i don't have to have a semicolon and inside the prompt as you can see we have an array so we pass an array of objects inside the prompt function it's this is how the developers have set it up but basically the object will be containing the all the arguments that needed for a question so if i go back to the documentation and i go down a little bit i could see the questions and i could see what arguments i could pass in um i'm gonna go over just those just to explain it but what i'm gonna usually use are these five for the sake of this video i'm just gonna use those five feel free to go and venture and learn by yourself and see to use how to use a filter transform when and page size they are all useful but for this video uh it will be long for me to go and go ahead and explain all those uh so i'm just gonna go ahead and explain the first five because we're gonna use it in this video so um all these arguments that we're gonna pass is basically gonna determine what the question type is name message and all that so what type is type is basically you gonna let inquirer understood what is the type of the question is it is it just an input from the user is it gonna be like a number from the user is it a confirmation message is it a list the name is to use when we are storing the answers um so basically this is going to be the identification or the key in the object in the answers from the user and we we get to see that in a second the message is basically the question itself if you don't provide this flag or argument the name will be the question itself and i can show you that in the code the default is going to be your default answer if in case your question could be answered with a default like for example when we saw in in creating the npm the node application we had to actually like for the version we just gave 1.0 you could just give it a head in the default um for choices choices um is an array or a function returning a choice array which means that usually choices go with the answer you basically give the user a couple of choices to give the answer for i usually it goes with the list the raw list the expand the checkbox i've honestly never tried it with input you could go ahead and try to do that and see what's going to happen and learn from that obviously and validate is basically just to validate the answer it will give you a boolean response either a true or a false so i'm not gonna go over these as i said um because it's gonna be a long and boring video i'm just gonna go ahead and create couple of questions using these types so let's go to the code all right so let's go ahead and start creating couple of questions to see all these types so i'm going to go ahead and create all these questions and the types of the questions at least and see what the answer will be so let's create a simple question type was which is going to be an input and we're going to say the name will be um input type now if we missed again as i mentioned before if we missed the message if i didn't write the message the name will be the question so pay attention to that you gotta add the message um and then the message will say yeah what is your name let's ask what is your name and question mark and then we will give a default value so we could see what is the default is and in default all right man great the second question let's do uh this time a list type of a question so let's do type and then let's do list and in the list as well we're going to do a name and then this question the message will be what programming language do you like now obviously for a list we're gonna have a couple of choices and if we go back to the questions um arguments we'll see that we need those choices so let's use that and let's go back to bring those spec and do choices and choices is going to be an array of answers so let's do one for javascript comma 1 4 c plus plus comma let's do java and then python so those are my choices and the default will be gonna piss a lot of people off but let's do javascript awesome so this is the default answer and what other types we have let me go back and check yeah let's do checkbox let's do checkbox so i'm just gonna copy this and check box and type of question i'm gonna say check box and in the check box let's do how many programming language do you speak and again i'll use the same answers and of course i'll do the default as that i think for now this like kind of cover most of the importance we could go ahead and and go we could you could go ahead and check the rest of these questions but they're gonna be similarly the same they're not gonna be like a lot different so i'm gonna go ahead and run our application make sure i saved my file and let's do npm start and let's see what's going to happen what is your name iron man so i could hit enter and the answer for the output will be iron man but for this time i'm just going to do a mark hit enter and now you could see i could with the arrow keys i could use an answer and now these choices are basically if i hit enter on a choice it will be selected but think about this for this one for the list the option is only you have to answer one question so i'm gonna go ahead with the javascript and hit enter however for the checkbox question um is going to be a multiple answer so that's why like i use the list and the checkbox question so i'm going to go ahead uh with the space pick which answer i want so i'm just going to go ahead um c plus plus java and python and there we go i have all my answers right here and this is a challenge for you figure out why input type went ahead and show like this without a quote while i did put it in a quote wrapped it in a quotes but these was wrapped in a single quote that's a challenge for you and comment down below let me know what is the answer is so that's basically cover it um this actually was the console log so once the user finished with all the answers the console log here showed the answers all right let's get into building our bmi calculator now the the bmi calculator formula is uh simply bmi equals to the the weight multiplied or sorry divided by the height squared and all that is multiplied by 703 because i'm going to be using the the u.s standards if you live in another country the formula is simply just by removing the 703 i guess living in the us has its perks um you multiply things with seven or three um but yeah you can simply try there's like a you could you could do like some other enhancement to this application uh you might have a confirmation question to uh basically to ask your users if they want to live or if they live into in another country other than the us so you could ask them about like the metric or u.s standard so for this uh tutorial i'm just going to be using this formula so when i get my answers i'm expecting to get the height and weight um from the user so let's get into getting this question in here i'm gonna also show you the usage of the validate so it's going to be pretty exciting so for the first one i'm just going to go do a type of an input i'm just going to keep those questions and just manipulate them and the name of this one is going to be name and i will ask the user what is their name i'm not going to have a default value but i'm just going to do a validate now in the validate what i can do when i i the validate passes a function and in that function you can check whether the input of the user immediately uh you could check if the um the input of the user or the answer is what is expected if it's not expected you could repeat the same question again or just prompt another um simply just another question or just like a just to let the user that hey um your input is wrong or false so let's do this so we got the input uh we pass in the input in that function or uh let's actually make it like as an answer just to make it more clear and we're gonna validate if um the answer is actually empty so if the user didn't give us anything um then we'll basically what we will do we'll break this and we'll return a string and the string will say for example please enter a valid name so and and if this if the answer is it does not equal to an empty string we could just return true and this is how validate works it passes a function and this function passes the answer and then inside you will validate to whatever your validation is going to be you could basically like check if this is a number or this is not a number if it's this a bullion or not a boolean if it's true if it's false but in order to go on and move on to the next question uh you gotta pass in or return true for this validate if it returns false which is basically in this case it will just return uh the the the string itself uh and we will see that in a second um because i will test it out for you so that's the first question it will ask them for a name actually let's pretty this out a little bit uh let's do like a console.log with a string that has like a couple of these and we could say like bmi calculator and we'll have actually let's uh let's be symmetric i guess and let's have bmi calculator as of like just like a as a a breaker and we're gonna use the inquirer uh and then like in here this is our first question let's get the second question typically what i actually love to do is uh grab this array and just create an array called question like this just to separate it from the function and then pass in questions um questions uh like this um this is what i like to do i like to separate them um you obviously you could do it either or um i just prefer kind of like this way it's way cleaner um so yeah so in our second question we'll basically gonna have also another input and this input will be our height and we're going to ask the user what is your height and i'll indicate to the user that this is in gonna be in inches so like they got a the user got a calculator or whoever is going to use this um program gotta calculate their height in inches and i'm not gonna use choices so i just need to um grab i'm just gonna get like a validation i don't need choices for that one and also i don't need a default because i honestly just wanted them to give me like a number and if they didn't provide me with a number basically i will say like hey please enter a valid number so let's see um so what i'm expecting is to get a number from the user so what i can do is that there's like a function in javascript called is um not a number and this one will actually validate for me if the answer is not a number so what i mean by that is if it's a string if it's a boolean if it's anything but a number it will just immediately will give me a true value or a true it will return true so this is basically my validation and i will say in here um i will return um i'll please enter a valid um number let's say number and again the same thing will return true the weight the question for the weight is going to be similar to the height so i'll say i'll name this as weight and what is your current weight and the weight will be in pounds um and i think i think that's it for the questions yeah i mean all i need is just like the um the height and the weight honestly um we don't want to make it like a two-hour tutorial so for now we prompt the questions i'll keep this formula in here and so what i need to do first is to initiate a variable and create the the height and the height will be answers oops dot height and then i'll say the weight will be answers dot weight and what else oh i grabbed the name as well well i mean i could i could definitely add it in a console log um yeah what i need i think now like what i need is like just to create the bmi variable and i just want to create the formula now so i'll multiply it by 703 and then just repeat whatever in here and maybe we'll do multiply it by height just to get the square answer so let's see so weight height and i guess that's it so now um in in the bmi table um basically like the index the the the uh body mass index is um if it's um if it's lower than 16 so if this bmi comes to a number uh lower than 16 uh that means you're really underweight um if it's between 16 and 18 it's underweight and so on and so forth so what i'm gonna do i'm just gonna do like an if statement just to validate or just to kind of like see which condition that applies so if bmi is less than 16 then i'll just simply console log and i'll do the back tick in here because i'm going to use a lot of variables so i will just use the name first and i'll do answers oops i'm yelling at it answers dot name um and then we need what do we need we need um just basically we yeah we're just gonna say like your bmi is just straight ahead i'm not trying to make it fancy if you want to do that please do and i'll say your bmi is and i'll say bmi the variable and then in there and it is considered to oops to be severely severely under weight um maybe we could say actually yeah let's do this it's to be severely underweight so now um sorry about that let's do this way so you can i'll see what i'm typing um and now like i'm just gonna do like else if for each single situation so we have um we basically have like this the the under 16 and the 18 25 so i'm going to speed this up to to write the whole thing um so bear with me until i finish all that so let me write that okay that that took a while so i think now we are ready to test our application just let me make sure everything is written correctly let's do um am i in there yes i am and let's do npm start and let's see what's going to happen so first of all we have like the beyond uh bmi calculator that that console log just like makes it a little bit prettier and then like it's asking me what is your name so i'm going to test the validation for you guys to see like what's going to happen so i'm just going to pass i'm going to hit enter which basically it should give me an error and ask me like to enter a valid name so i'm going to hit enter and there we go uh we just got um it's just asking me to enter a valid name so i'm just gonna write mark and what do you know it just passes um what is your height well um i'm six foot so um six foot multiplied by like 12 it's it's 72 inches so i'm gonna hit that 72 inches and above it is uh 175 so let's do that and let's see mark your bmi is 23.73 and that considered to be normal um this is like it did what i need but there is something that i didn't like um this number right here the float is actually like has a lot of decimals so um let's let's fix this let's fix that pretty quick so what i need to do after i get my bmi i need to actually check if it's if if the number if the bmi is a float just round it and if it is um if it is not just return as is so i'm just going to create a function and i'll call it is floats and this function will pass in a number and that number will do a validation for so i'll check basically any integer if you modulate with one it should give you zero okay but in this case i want to make sure it is a float number so what i will say it does not equal to zero and in that case now this number is actually a float so what i will do i'll just return num dot to fixed and to fix this uh just a function in javascript basically it will round it to the decimals two two to two um places i mean you could definitely have like two four and whatnot and you could just change that number in there and otherwise it's actually um it's gonna be an integer and if it is an integer which kind of like it's really an edge case to get an integer from that formula uh we're just gonna return the number so that's that's i guess that's it so what i need to do is to just only change this bmi and so i'm just going to select that and i'll just delete this bmi and i'll do i'll just say is float and i will pass in there bmi and that should fix it let's try that again npm start what is your name is mark oh i didn't test if if i pass the string in here what is the answer will be so let's let's test that out so i'm just gonna put some junk in there and there you go please enter a valid number uh let's put a junk again and please enter a valid number another junk unfortunately inquirer doesn't clear your answer just like overwrite it or just like append whatever you're gonna write again so you have to delete all all the thing in order just to submit a new answer so uh i'm just gonna put like 72 and i'll test out like another case i'll put like 245 on the other option so let's see and now boom we got like mark here bmi is 33.22 and it is considered to be moderately obese and that's it um we now finished this application and we have our um small bmi calculator that actually calculates and and gives you the result of your bmi using inquirer package challenge yourself in making couple of things you can basically ask the user if they want to use the metric system or the us standards you could also maybe at the end you could validate with the user and as them do you want it to input like a new input or you know create a new input for that thank you so much friends for watching i hope you enjoyed this video and found it useful and i hope to see you again in the next video [Music] [Music] you

Channel: Markodex

Views: 3,905

Keywords: inquirer.js, npm, npm package, nodejs, inquirer

Id: Qf5EXOyGRxw

Length: 31min 48sec (1908 seconds)

Published: Wed May 11 2022