neoG Camp 2023 waitlist is open

Need Help?

lessonOne: your first program

Namaste!

Welcome to this guide which will be a companion in this workshop where you'll learn about programming. This guide needs to be used alongside the video.


repl.it

Use repl.it to run these programs. You need to sign up and then click on create new repl. Choose JS or NodeJS to create a javascript repl. And from there you can follow on.

what's CLI?

Well! If you are from a non-programming background, there are chances you have never interacted with a CLI app. Those are pretty obsolete now from the end user scene. But programmers use them all the time.

Most of the tools in a programmer's toolkit is CLI: github, shell, programming language repls, etc. are all CLIs. In strictest terms, if you are interacting with a program via command line (that black thing with text on it which hackers use in movies) then it's a CLI (Command Line INTERFACE).

Think of it as texting with a program instead of you know the usual clicking of buttons.

In the video, before the beginning of the exercises, I showed how to use the browser console to run JS programs.

ex01: output your name

challenge

Write a program to console your name on the output.

understand

That it's a thing to show output.

The thing you just logged is called a string. It's one type of data that your language understands.

Solution

ex02: read the name of your user

challenge

A program to read input from your user. Output this name. Use readlineSync() for this.

  • add readlineSync() as a dependency
  • import it in your index.js
  • know how to read docs and use it. In programming, it is extremely important to read docs.
  • use a variable to store this name.
  • output this name.

understand

readlineSync() is a package. In programming, you can use code written by others via this system.

People share their code out in the open to help others. Using this we write bigger programs. This is called standing on the shoulder of giants. Think of this as someone who discovered fire and wheel and now we don't have to rediscover it every other generation.

Concept of variable: Think of it as keeping a placeholder in your room. Now in that place, you can keep a bat, a ball, or anything. Variables are placeholders inside the computer and nothing else.

Solution

ex03: welcome your user

challenge

A program to take a string. And add "Welcome" to it. Then console it.

understand

  • manipulating a string,
  • using + to concatenate

Solution

ex04: do it all together

challenge

A program to take your user's name. Then welcome them.

understand

  • that programming is nothing but Input >> Proccessing >> Output

Solution

ex05: print right/wrong if greater than 25

challenge

Ask your user if your age is greater than 25 (or any number) and console right/wrong based on the answer.

understand

  • branching of code, i.e. only one branch runs based on a CONDITION

Solution

ex06: increment score if the right answer

challenge

Ask your user if your hometown is Bokaro (or your city) and this time increment a variable based on the right answer.

Also, console the score this time.

Solution

ex07: function to add two numbers

challenge

Take two numbers and add them. Put this entire thing in a function add() and return the result

syntax

function functionName(parameterOne, parameterTwo) {
  // processing
  return outputValue;
}

understand

  • a function is a repeating piece of the PROCESSING while INPUT and OUTPUT changes
  • Note the difference between parameters and arguments:
    • Function parameters are the names listed in the function's definition.
    • Function arguments are the real values passed to the function.

Solution

ex08: function to check the answer

challenge

  • Your function should take a question and the right answer.
  • Ask your user to answer the question.
  • check the answer and increment score (global variable)
  • tell your user whether the answer was correct or not

understand

  • A function can do multiple things
  • sometimes, the output can be a change in the global variable

looking back

Up until now, we have a function() which is kind of a mini-program to do everything which we need to do.

If you look back now, console.log()readlineSync() are all just functions isn't it?

What we need now is a way to run this mini-program again and again. And each time with a different question/answer pair.

To do this we need to understand a few things.

Solution

ex09: print your name 5 times

exercise

  • print your name 5 times by calling console.log()
  • use for loop to do this
  • BONUS (optional): Print the number with your name

syntax

for (intial CONDITION; exit CONDITION; change CONDITION) {
  // code block to be executed
}

understanding

  • anatomy of for loop
  • calling a function from the loop is running the mini-program multiple times

Solution

homework: star pattern

challenge

a program to take input number from user and print stars like this. The below pattern will be printed when the user enters 5.

*
**
***
****
*****

BONUS (optional): Can you print this inverted? Like 5 stars > 4 stars > 3...?

understanding

  • double loop: HINT
  • struggling to form programs when you don't know-how
  • looking around the internet to understand the logic

ex10: list grocery items to buy

challenge

  • prepare a list of grocery items to buy.
  • add 5 items
  • print the first item on the list.
  • print the third item on the list.
  • print the last item on the list.

syntax

var arrayName = [valueOne, valueTwo, valueThree];

understanding

  • what is a data structure? It's just a way of organizing data in a particular way. In the case of an array, data is arranged sequentially and thus can be accessed using index numbers.
  • what is an easy way to think of array? Think of the array like contents of a book. You can see what's there in each chapter from the top and directly go to a chapter when you know the page number. All chapters are in a sequence.
  • index-based access, the index starts at 0
  • accessing the last element and length property of an array

Solution

ex11: print every item on the list

Take the list you made in the last exercise. Now, use a for loop to print every item.

understanding

  • using the loop variable i.e. i to access the index
  • using length property to terminate the loop
  • using console.log() function call with different arguments from array!

Solution

ex12: club info about a superhero together

exercise

Create two objects and put information about two superheros: superman and batman. Get familiarity with the syntax. Read and understand what's written in understanding section.

syntax

{
  // notice the opening bracket
  key: value;
} // notice the closing bracket

understanding

  • how objects work
  • the fact that objects mimic real life objects in programming and thus group properties of one object in one. Think of defining a car in programming language, what would be the properties of a car?
  • accessing values using keys
  • the values inside an object are called object's properties
  • notice the dot . notation used to access the properties? One thing to notice here is that console is an object on which log() is a property. And yes, functions too can be a property of object.
  • another fact, when functions are properties of an object, they are called methods in programming.

Solution

ex13: put a list of questions together

// hint: there's an error in these objects
// if you copy/paste blindly it won't work
questionOne = {
  question: "Who is my favorite superhero?"
  answer: "Dhruv"
}

questionTwo = {
  question: "Which is my favorite sad song?"
  answer: "Channa Meraya"
}

ex14: club everything to make the game

challenge

  • use question list
  • and function to put together a quiz

understand

  • all programs are made up of mini functions and data structures
  • learning to break a program into parts and then sewing them together is the real learning

Solution

ex15: print the final score to the user

challenge

  • In your program, create a data structure to hold high scores.
  • Show the user his score and high scores.
  • Ask the user to send a screenshot if he has beaten the score.

understanding

  • you can use data structures to hold data
  • when you start writing this data structure to files it becomes a database
  • we will learn about writing to DB later.

assignments for markOne and markTwo

We just made a quiz app that tests whether your friends know you. Use the same skills to create a quiz app about something famous and generic that anyone can play. Keep the features the same and it would be good enough for levelOne qualifier.

If you want to do something extra, introduce levels: answer 5 right you go to level 2, then 10 right you go to level 3. Use your imagination and make something that your circle would love.


share this with your friends

To share use ?embed=1&output=1 at the end of the URL of your app as shown in the video.

Share this assignment quiz with your friends and family. There are two benefits of it.

  1. You will get motivated by showing off your work. Learn to celebrate your wins. It will help you in your career long term. Tell them you learned this on Diwali and it would mean a lot if they play.
  2. You will get feedback. There's nothing like getting some early user feedback on something you created. They might ask for more features and it will motivate you to explore more. I am counting on it!

bonus (optional) homework

Below is bonus homework. Try to do it. Feel free to experiment with your app. If you don't do it it's okay. There's no penalty. However, in programming the more you tinker with things without anyone looking over your shoulder the more you learn and thus rewarded in life.

bonus (optional) homework: explore readlineSync

There are different kinds of input that you can take using this library. Check them out. Use it in your apps. You can ask for a simple YES/NO or do multi-option like Kaun Banega Crorepati.

what do I want you to learn here? Honestly, I am trying to instill good habits early on, two habits:

  1. Exploring documentation is really important and the early you learn this the more you are set up for success in life.
  2. User-friendly apps are the best. And the way to make CLI apps user-friendly is by making users type less number of keys. Use the docs to do that.

bonus (optional) homework: use chalk

CHALK is an amazing library. You will be amazed to know that I use it in Microsoft for CLI apps too. I want you to play with it. Use it in your current app, use it in your assignment app.

You can use it in more apps later. I would also advise you to read more about writing CLI apps. These apps are used extensively in the industry. Knowing it and creating some impressive projects down the line can boost your resume.

bonus (optional) homework: have the user beaten a high score?

challenge

You have a data structure created in ex15 which shows high scores by players to the current user. Write a piece of function that will check this high score data structure and see if the current user's score is a high score or not. if a current user has made a high score then congratulate him/her and ask them to send a screenshot so that you can update the high score data structure.

By using the same principles we learned in this class you can do it. We did this in exercise 12 where we were comparing superhero powers. This is somewhat similar.

Remember

You don't need to update the array there. Ask the user to send a screenshot to you. You can then update it in the code itself.

We will learn about updating the database later.

hint

  • you need to access one entry at once
  • check whether the score is < less than or not
  • if not, then the user has broke records

understanding

  • looping to check for an entry in the database/data structure

practice exercises (optional)

Not required to go for levelOne

Note: To go to levelOne you need to do all things mentioned in the point system.

There are two exercises which you can try to practice more programming.

were you born on a leap year?

were you born on a leap year?

create a CLI app to check whether user was born in a leap year.
  • Ask user her name
  • Ask her Date of Birth (give her a format prompt)
  • Calculate and show her whether it’s a leap year or not.
  • If yes, ask her to share this on social media

use

  • Chalk to make it beautiful
  • Bonus (Optional) : check the input type and show an error if user entered “potato” instead of a date format

more

  • In upcoming lessons we’ll learn how to make GUI apps, first using vanillaJS, then using ReactJS. You can make this app as a practice in both ways once more. This way, you’ll appreciate how easy React makes your life.
is your birth day a prime number?

is your birth day a prime number?

create a CLI app to check whether user’s birthday is a prime number.
  • Ask user her name
  • Ask her Date of Birth
  • This time ask only DD/MM and don’t take year
  • Calculate and show her whether it’s a prime number or not.
  • If yes, ask her to share this on social media

use

  • Chalk to make it beautiful
  • Bonus (Optional): check the input type and show an error if user entered “potato” instead of a DD/MM format
  • give an error if DD is more than 31 or MM is more than 12
  • take it further and check the entire date for validity like 30/02 can never happen.

more

  • In upcoming lessons we’ll learn how to make GUI apps, first using vanillaJS, then using ReactJS. You can make this app as a practice in both ways once more. This way, you’ll appreciate how easy React makes your life.

stuck? need help?

If you have doubts anywhere during levelZero, we have a 21k+ strong developer community on Discord.

Go to Discord Server and ask doubts in the general-coding channel.