 Hey what is going on everybody my name is Roddy and you're watching my channel Roddy and the Brands if you're new here welcome I do website design and development videos just like this so there we're going to explore the chowk npm package which essentially can help us emphasize terminal output or just make our terminal look better it's very easy to get started and if this is something that you are interested in learning stick around and before we begin if you find this video useful consider liking this video subscribing to my channel for more content like this and now and also if you have any questions please comment below and now let's jump on the computer and get started hello and welcome everybody let's get started by creating a brand new hello world app and if you are new to Node.js I'm going to be doing everything step by step but feel free to skip to the next section if you're already familiar with Node.js and you know how to initialize a new project so first of all I'm going to create a new folder on my desktop right click new folder I'm just going to call this one chowk and then maybe dash node.js and then this is going to be our project folder so enter the folder and let's initialize a new project in here to do this add more windows so I can do left shift right click open power share window here but if you're mac or linux you're just going to have to cd to your project folder and do the following command so to initialize a new project we have to do npm init and this is going to basically initialize a new project you can give your project a package name a version description and so on but I'm just going to save a little time by pressing enter and this is going to initialize the project for us as you can see we have this package.json file in here now we need to open our project folder in our favorites uh code editor and for me this visus td code so I can do code dot and as you can see this opens visus td code for me but if that doesn't work for you you can simply open visus td code go to file and then just open folder that should be absolutely fine or if you're using another code editor that's also fine just open go to file open folder and continue from here as you can see what I have is my project folder in here and that's it let's open the package.json file and have a look quickly everything seems to be looking good very simple package.json file and now we need to add the dependencies that we need for this project so obviously today we're going to be exploring chowk and we need to install this first so let's go back to the power shell or actually we can use the terminal inside here as well if you wish let's do that because I feel like the terminal actually shows some of the features a little bit better so there will be a little bit of a difference between the terminal power shell and the terminal inside here the way chowk is displaying things I believe that this one here is probably kind of the nicest but we'll see we'll see how it goes all right if we open a new terminal but as I said feel free to use whatever you have available even command line will be probably fine let's open the terminal here and all I need to do is install chowk to do this I can do npm install and then chowk like so and press enter this is going to take a second and as you can see in my package.json file we have now the dependency chowk which is 4.1.1 as of recording this video obviously if you're watching this in the future the vision might be a little bit different I guess the next thing that I want to do is install nodmon and the reason for this is just because I want every time I make a change on my document the project to restart just to save us a little time so nodmon is a development package and we have to do npm you can put install as i for short and then you can do nodmon and then dash dash save dash dev and this will install nodmon for us within a few seconds as you can see this added dev dependency nodmon in here and if you want or project to be using nodmon what we have to do is inside package.json we have to go in the scripts and just add another line here so comma and then we do start we want our project to start with nodmon so that's why we're doing this and we can do nodmon and we want to specify the file that we want to start which we haven't yet created but this is going to be app.js and we can now save this if we save this we now need to create this app.js file and we can create our first hello world app so inside here inside of folder let's create a new file call it app.js and we can start writing our hello world app first of all we need to require the chowk npm package to do this we can simply do a const we can give it a name of chowk and then we can do equals require nm we can require chowk like so and now we can just start using chowk by grabbing this name from here and literally displaying like hello world let me show you let's do a very simple console log hello world so let's do console.log and for example if you wanted to console hello world in blue what we'll have to do let's do hello world like so and if we save this nothing is happening and this is because we haven't run our project yet so what we have to do is inside the terminal we can do npm start and this should start our application as you can see we're getting a few things in yellow and green which means that our project started and we're getting hello world which is what we want now if you want to make this hello world a colorful a little bit more colorful with chowk we can simply inside here we can bring the chowk constant so we can do chowk.blue for example and then we can wrap the hello world in brackets like so and save as you can see the color has changed it's supposed to be blue but for some reason it's very purple on mine but let's change it to maybe red like so save it and as you can see hello world is now red let's see if it can zoom in a little more okay this isn't too bad so you can see a little bit better but as you can see this is how you change the color i've actually started writing a blog post on this so let me show you super quickly some of the options so if i bring my browser you will see that by the way if you go to the blog post after the video you will see the all the links will be available here to the npm package and so on and then if we go down now these are the kilometers that we can use we can use all of them here we have black red green yellow blue magenta cn white and so on so this can be all used and i've given you a few examples here so we might as well just copy this and i'll show you quickly so if you go back to vjstdco let me paste some of this so we have chalk dot red blue green magenta and obviously we can add a lot more so if i save this you see that we have red blue green and magenta here looking really nice in power shell they might not look exactly the same but they do work i think that they do work in power shell some of the text styling doesn't seem to work properly in power shell but i'll get to that in a second this is how you do the text color but if you want to actually add a background to them we can do something different we can actually add bg as background in front of those colors so for example inside here i have another example these are the background methods so we have bg as background and then black red green and so on and i have a few examples on here let me copy this super quickly so basically what we have to do is add a bg and then tamu case b for black half red and so on that's how it goes and then if i save this super quickly you will see that this kind of like highlights the text which is pretty cool i mean some of it's super hard to see like the yellow the green it's very hard to see but as you can see this is how you do it again use the child constant from here and then you just put the method which is bg black bg red and so on super easy to do but let me see what else do we have we have some of the text modifiers which is like talic bold underline and so on let me let me show you a few quick examples so i'm going to remove this and write a few examples so we can literally do chowk and then dot for example let's do bold and then so here we can do bold let me do let me do a few more so let's do bold let's do dim like so dim let's copy and underline and by the way i'm duplicating the line with alt shift and down arrow let's do another famous one which is italic and i can copy this and paste it let's do one more let's do underline as it's kind of like quite popular so let's do that save this and let's see what we get as you can see we get bold text dim italic and an underline text which is pretty cool so this is how you use the text modifiers and also you can use hex colors so for example let me show you a very quick example for how you can use hex so for hex it's going to be you probably guessed there chowk dot hex like so and then you can put the color of the hex value you can put a hex value which is uh color that you want to use so that's usually with the hashtag and then we can do let's do something like uh zero uh and then b b five f f and then you can just put your word in here so this will be police throw blue uh if i save this you will see that we're getting police throw blue in this nice blue color and this is how you use the hex uh you can do exactly the same thing with rgb so we can do rgb instead and obviously we need to put the rgb value in here but without the quotes and let's do something like zero comma 191 255 oops i didn't put zero zero and then this is going to be a blue color so we can do i am blue the d the die okay so if i save this i'm blue the die it's uh here it's pretty cool so this is how you use rgb you can also make custom styles so for example you might want to put like a variable name of custom style and this can be equal shark dot uh i don't know let's say bold dot red that would work quite well and then we can use the custom style now and do put in here console like custom style and now we can put custom bold red save this and as you can see this is custom bold red which is pretty cool so that's how you define custom styles and that's pretty much it for more you can always go and explore the official npm package the link will be in the description below and that's pretty much everything from this tutorial i hope you enjoyed it i hope that you learned something new for more videos just like this consider subscribing to my channel my name is ready and you're watching my channel rider brand and i will see you in the next one thank you very much for watching and see you next time