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 youtube class

who am I?

I am Tanay Pratap. I work as an Engineer at Microsoft. I teach students online and get them job ready. If you're a beginner and need a job, I am putting together a bootcamp, a path to become full stack developer in 6 months. Check out neog.camp

To know more about me Google "tanay pratap".

who is this for?

A beginner. If you know how to program already, you might learn something, you might not. This goes slow and basic, and might feel like a waste of time. I have warned you!

But, if you have never programmed before, or if you have tried but you feel it's difficult to put together an app, then this is definitely for you.

Send me suggestions or feedbacks on how to improve this futher on Twitter

how this works?

I want you to write every line, every piece of code yourself. The problem for first-timers is that they don't know how to piece logic together. So, this companion guide will give you exercises, one by one, you do all of it and voila at the end of it you'll have a working application.

Give this method honest 5 hours of your life and you'll be on the right path to becoming a programmer.

rules

• watch the youtube video live, take notes on how I am solving the exercises
• after the video is done, close it.
• now use this guide to solve exercises all on your own.
• don't look into the live recording unless you're stuck for more than 10 minutes on something.
• you win if you do all the exercises without looking at the video for help, or keep it minimal.

what if I cheat?

A lot of people try learning to program but they don't succeed. Why? Coz they want to stay in the comfort zone of copy-pasting code from the tutorial. So, the moment they get out of tutorial life, they don't know how to think for themselves.

Programming is not about copy-pasting code from a youtube video. It's about structural thinking.

Remember, no pain no gain!

With the rules clear, take notes on the logic building while I am solving the exercises, ask relevant questions during live.

We will do more theory, but let's do few exercises first

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 backgroud, 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 programmers 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 exercises, I showed how to use browser console to run JS programs. If you missed some details, look at this tutorial

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 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 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.

assignment for levelOne

We just made a quiz app which tests whether your friends know you. Use the same skills to create a quiz app about something famous and generic which anyone can play. Keep the features 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 which 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 and 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) homeworks

Below are bonus homeworks. 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 you shoulder the more you learn and thus rewarded in life.

bonus (optional) homework: explore readlineSync

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

what 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 user 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 industry. Knowing it and creating some impressive projects down the line can boost your resume.

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

challenge

You have a data structure created in ex15 which shows high score by players to the current user. Write a piece of function which will check this high score data structure and see if current user's score is a high score or not. if current user has made a high score then congratulate him/her and ask them to send 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 udpate the array there. Ask 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 database/data structure

bonus (optional) exercises

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.

a) leap year? b) prime number?