My tidbits of learning JavaScript : CHALK & readlineSync
Tags: javascript, npm, webdev, replit
Published: 2020-11-25 18:41:12

So, you finally landed on my first blog post. Welcome!🎉   

This tutorial is intended for beginners. 
_If you've got some experience, read this like you're doing code reviews and put your thoughts in the comments below._
Lets start, beast mode.
    

### **JavaScript**
JS is amazing, it's syntax is like C++ or Java. It can be used to write apps for web, desktop and android as well. Did I mention it's amazing?

I will be using `repl.it` with `node.js` runtime. 
Tip: Use `Ctrl + Enter` to run the program in `repl.it`.
     

### **Printing to the console**
To print to the console:
```
console.log("Hello world!");
```
Output:
![screenshot](https://iili.io/FVkJu2.png)


Print a variable:
```
var x = 2020;
console.log("The year is: " + x);
```
Output: 
![Screenshot](https://iili.io/FVk09R.png)

But it's very black and white. Lets style it with colors using a package called `chalk`.
    

### **Whats CHALK?**
   
It is:
> Terminal string styling done right
    
We can use it to color console outputs. But first we need to install it. Here, `repl.it` does a great job. It installs the required packages automatically for you.

Start with including the `chalk` package:
```
const chalk = require('chalk');
```

Now, to print in green:
```
console.log(chalk.green("Its green!"));
```
Output:
![Screenshot](https://iili.io/FVkEwN.png)


To underline text:
```
console.log(chalk.underline.blue("Its underlined and its blue!"));
```
Output:
![Screenshot](https://iili.io/FVkWMX.png)

And much more. Take a look at chalk's npm docs.
    
     
### **Accepting user input**

We know how to print to the console. What if we need some user input? `readlineSync` is a library made just for that.
   
Lets include the package:
```
var readlineSync = require('readline-sync');
```

Now we can take user inputs like:
```
var userName = readlineSync.question("Enter your name: ");
```
Output:
![Screenshot](https://iili.io/FVkjFs.png)

We got the input in the variable `userName`. Lets print it in color!
```
console.log("Welcome " + chalk.yellowBright(userName) + "!");
```
Output:
![Screenshot](https://iili.io/FVkwcG.png)
    
    
### **Arrays**
An array is a collection of variables which can be accessed by using the index. 
Simple list of song genres:
```
var songGenres = ["Blues", "RnB", "Pop", "Rock"];
```

Lets print the first and third genres:
```
//first genre
console.log(songGenres[0]);

//third genre
console.log(songGenres[2]);
```
Output:
![Screenshot](https://iili.io/FVke94.png)

The index numbering starts with 0. So, here we have 0, 1, 2, 3 as index numbers.

--- 
     
Now, lets put everything together and build a program to choose a song.

Include required packages:
```
var readlineSync = require('readline-sync');
const chalk = require('chalk');
```

Define an array to store songs as a list:
```
var songs = ["Skyfall", "Beautiful times", "Bailando", "Grenade"];
```
These are my favorites by the way.

Get the user's name as input:
```
var userName = readlineSync.question("Whats your name? ");
```

Now, we will be using a `readlineSync's` method called `keyInSelect` to select a song from the list.
```
var favSong = readlineSync.keyInSelect(songs, "Choose a song:");

console.log(chalk.red("You chose " + songs[favSong] + "!"));
console.log(chalk.green("The tutorial is over. Enjoy the song!"));
```
Output:
![Screenshot](https://iili.io/FVkgV9.md.png)


### **Thats all for now**
The best way to learn and retain information is to teach it to someone or document it. I have tried to keep this post just like that: simple, fun and exciting.

So, get on your keys...get set...and code!

I will be posting more about JavaScript. We haven't even scratched the surface yet. There's a lot to learn!

Please comment below your suggestions or doubts. I will try my best to answer the queries.

`P.S.:I can make emojis italic. `_👍🤘_