Coding 101: Coding Quick Start

1.0 Intro

Coding 100 Level Courses: Full Stack Web Development & Deployment

What is full stack web development? It let’s you build and deploy websites!!

fullstack

101: Front end web development overview

Front End

  • HTML gives website basic skeletal structure, written text, pictures, and links (like your bones)
  • CSS makes site look good through formatting (like your skin and make-up)
  • JavaScript provides site with functionality and computation ability (like your muscles)

Coding 101 - Lesson 1 - Coding Quick Start

Lesson Overview
  1. Google Chrome inspector tool
  2. User input / output with alert() and prompt()
  3. Storing data in variables
  4. Strings vs. Numbers and the ParseInt() function
  5. If then else statements
  6. Comments
  7. Random number generators
  8. MS Visual Studio Code
  9. Running JS files locally
Project Overview
  1. Hello World – Learn the first program typically made in any new language that you are learning. Tell user hello world
  2. Greet User – Ask for the user’s name and then greet them.
  3. Tip Calculator – Ask user for bill amount and what percentage they would like to tip. Tell them the tip amount in dollars and the total bill.
  4. ID Checker – Ask for you users birth date and let them drink if they are over 21.
  5. Multiplication Quiz – Create a fun quiz to test your mental math skills.

Coding 101: Coding Quick Start

1.1 Google Inspector Tool

Download Google Chrome https://www.google.com/chrome/

Use insepctor tool

  1. Open any website page with Google Chrome
  2. Right click and press inspect
  3. Click on “Console”

Use inspector as a calculator

Type in any calculator function and then press return (e.g., 2*2 returns 4)

Note the arrows indicates code being run vs. output of code

You can also store data in variables with the equals sign and use it later (e.g., x * y returns 30)

calculator

Coding 101: Coding Quick Start

1.2 User input / output with alert() and prompt()

Now that you have Google Chrome Inspector Tool open and have clicked on the "Console", you are ready for your first project: 1.1 Hello World

Type the below code into the console and press enter

alert('hello world, I love Uprise University')

You should then see the below pop up alert!

hello


If you struggled to figure out what to do here, you can watch this video tutorial for a demo of how to do it:

If you figured out how to do this, then congrats! You just wrote your first line of JavaScript code!!!

If not, try watching the video again, google for help, or if you are still stuck, email us at questions@upriseuniversity.com


Coding 101: Coding Quick Start

1.3 Storing data in variables

JavaScript allows you to store data in variables and then use those variables to perform tasks or calculations.

JavaScript variables are similar to the concept of variables in Algebra, except it is more focused on storing and retreiving information

Try the below project to get a basic feel for using variables in JavaScript

Project 1.2: Greet User

This code prompts the user to fill in their name

Then it “declares” a variable called “name” and stores that user input into it

It then sends an alert message to the user using the information stored in the variable “name”

Type in the below code into your JavaScript console to try it out

Notes - Press shift and return at the same time to type in the second line of code without running the code; then press enter to run the code

alert

Congrats on finishing another project! You are getting good at this!!


Coding 101: Coding Quick Start

1.4 Strings vs. Numbers and the ParseInt() function

Definitions

“Strings” are words, letters, and characters that you would type into a keyboard

Numbers are the ten digits that you can type into a keyboard

If the number has decimals, then it is called a “Float”; if it doesn’t, then it is called an “Integer”

When you add two numbers together, you get the sum total of those two numbers, for example: 2 + 3 = 5

When you add two strings together, however, it “Concatenates” them; (i.e. puts them together) For example, ‘2’+’3’ = ’23’

parseInt()

To convert a string into a number, you must use the parseInt() method

For example, parseInt(‘2’) + parseInt(‘3’) = 5

Note that parseInt() is case sensitive!

parseInt() can be helpful when you want to convert user input into a number

Watch this video if you are still confused (or if you are just looking to pass a few minutes of time!)


Project 1.3: Tip Calculator

Try to create this program yourself first before looking at the answer

Create a program that calculates the tip you need to pay at a restaurant. First, ask user how much the bill was and how much they want to tip. Then tell the user how much to tip and what the total bill is going to be

Remember to use:

  • alert()
  • prompt()
  • parseInt()
  • var x = 2020 – age;
hint calc

Coding 101: Coding Quick Start

1.5 If then else statements

If then else statements create the basic logic in your program

It reads: if something is true then do some tasks, else, if it is not true, do some other tasks

ifthen

Note that each line that is doing something has a semicolon after it but not the lines with the if or else

One of the most annoying things about coding is that computers are very literal and programs don’t work if you are missing a semi-colon, a letter that is supposed to be lower case is uppercase, etc.!! This can cost you hours of time and lots of frustration so pay attention to the details and the “syntax” of the code!!

We will also show you how to use programs, like MS Visual Studio Code, that help you “debug” and avoid making these types of mistakes (because they can be REALLY annoying to find!)

Also note that you don’t actually have to write out “then”, you simply use the curly brackets before and after the block of code that you want to run when the statement is true


Project 1.4: ID Checker

Try to create this program yourself first before looking at the answer

Create a program that asks the user what year they were born. The program then checks to see if the user is 21. If they are 21 or older, the program tells the user that they can drink, otherwise it says that they can’t. For simplicity, just assume the current year is constant and disregard the month and day that they were born. For example, someone born in 1990 is 30 years old (i.e. 2020-1990)

Remember to use:

  • alert()
  • prompt()
  • parseInt()
  • if () { } else { }
  • var x = 2020 – age;
idchecker

Coding 101: Coding Quick Start

1.6 Comments

Comments are notes that you can use to help you (or other programmers looking at your code) remember what the code does. Note that JavaScript does does not run this code. As a result, it can also be helpful to "comment out" lines of your code when you are trying to debug it or to hide features without removing them.

comments

Coding 101: Coding Quick Start

1.7 Random number generators

It is often useful to generate random numbers. The function Math.random() returns a random number between 0 and 1. The function Math.floor() returns the largest integer less than or equal to a given number. Combining them and multiplying the random number by 10 will get you a random number between 0 and 9: Math.floor(Math.random()* 10)

You can multiply it by 10 and add 1 to get a random number between 1 and 10 or multiply it by 100 and add 1, to get a number between 1 and 100.

You can also multiply it by 10 and add 1 to get a random number between 1 and 10, and then multiply the result of Math.floor() by 10 again to get a random number between 10 and 100 that is a multiple of 10…tricky, we know!!!

Note: These types of tricks are very useful in coding because it safes you a lot of time and lines of code. Coding is all about efficiency and little tricks! So remember to look for them!


Project 1.5: Multiplication quiz

Create a math quiz that asks the user to multiply two random numbers together

If the user gets the right answer, then alert the user that they got it right, otherwise alert them that they got it wrong

To make the exercise a little trickier, make the first random number an integer between 1 and 100 and the second random number an integer between 10 and 100 that is a multiple of 10!

Remember to use:

  • alert()
  • prompt()
  • if () { } else { }
  • var x = 2020 – age;
  • Math.floor(Math.random())
mult quiz

Coding 101: Coding Quick Start

1.8 MS Visual Studio Code

Download and Use MS Visual Studio Code for previous exercises

This will allow you to store files of code easily. It is color coordinated so that it is easier to read your code. It is also free!

download code

There are lots of other code editors out there though so feel free to use whichever one you prefer

other

Download and use it for previous exercises

Set-up

Link to download Microsoft VS Code

https://code.visualstudio.com/download

Coding 101: Coding Quick Start

1.9 Running JS files locally

Step 1) Create 1 HTML file and 1 JavaScript file

  • index.js
  • playground.html

Step 2) Link your html file to your JavaScript file so that it runs when you open HTML file; Write this in your HTML code: script src=index.js> script>

Step 3) Write you code in JavaScript file: alert(‘Hello World’);

Step 4) Go to the html file and open it with Google chrome

Always make sure to save all files before running program. Note, to open file in Chrome, you should be able to just double click the file or right click the file and then click “open with” and then google chrome

Coding 101: Coding Quick Start

Recap and Homework

Recap

In this lesson, you learned about:

  • Full Stack Web Development
  • Front End Web Development
  • Google Inspector Tool & running JavaScript code in the console
  • alert()
  • prompt()
  • Declaring variables and assigning values to them
  • Data types: Strings, Integers, and Floats
  • Summing integers vs. concatenating strings that look like integers
  • parseInt()
  • if then else statements
  • Random numbers with Math.random() and Math.floor()
  • // comments
  • Using MS Visual Studio Code and running JS files locally

Homework

Create the following programs and submit it to coding101@upriseuniversity.com before moving to the next lesson:

  • Days alive: Ask a user how old they are and then tell them how many days they have lived
  • Temp converter: App converts temperature from Celsius to Fahrenheit or vice versa
  • Vowel? Ask user to enter a letter. Tell user if it is a vowel or not

Prior Lesson Next Lesson