# Session Plan

* Intro JavaScript
  * What is it, what can you use it for
* Setup js either via browser or via node.
  * Mentors decision.
* Console.log
  * Depending on node or browser explain where the logs can be found.
* Variable declaration and assignment
  * `var`
  * `let`
  * `const` - Always use `const` until it won't `let` you
* Variable types
  * Typeof
  * `String`
    * Indexes - low priority
    * `.length` - low priority
    * `.toLowerCase` - low priority
  * `Number`
    * Show float and int is just a number in js
  * `Array`
    * Creation
    * Indexing
    * Items
    * No map, filter, push etc!
  * `Boolean` - Trainees investigate `boolean` and explain for fellow trainees
  * [Code inspiration](#inspiration-variable-types)
  * [Exercises](#exercise-variable-types)
* Comparison operators
  * Equality operators
    * Equality `==`
    * Inequality `!=`
    * Identity / strict equality `===`
    * Non-identity / strict inequality `!==`
    * Why does `7 == '7'` returns true and `9 === '9'` returns false?
  * Relational operators
    * Greater than operator `>`
    * Greater than or equal operator `>=`
    * Less than operator `<`
    * Less than or equal operator `<=`
  * [Code inspiration](#equality)
* Arithmetic operators
  * Addition `+` - also for strings
  * Subtraction `-`
  * Multiplication `*`
  * Division `/`
  * Remainder (sometimes called modulo) `%` - Trainees investigate how modulo works
  * [Code inspiration](#arithmetic-operators)
  * [Exercise](#follow-up-exercises)
* Errors
  * How to read and fix errors. Show some practical examples.
  * [Exercise](#fix-the-errors)
* [Last exercise, pizza project](#pizza-project)

Here is a Notion Zoey Zou made: <https://www.notion.so/JS1-Week1-2fdc88fdd4344c958091346efe3ba48b>

## Flipped classroom videos

[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript1/week1/preparation.md#flipped-classroom-videos)

## Code inspiration

### Inspiration: Variable types

```js
console.log("Hello world");

var x;
x = 22;

x = 33;
var x = 22;

const test = 1;
// Bad, we get an error!
test = 2;

let letTest = 4;
console.log(letTest);
letTest = 20;
console.log(letTest);

// types:
// Number
let numberConst = 2;
console.log(numberConst);
console.log(typeof numberConst);
// BAD BAD BAD NAMING!!!!
numberConst = "hello";
console.log(typeof numberConst);

// String
const stringConst = "Write some text";
console.log(stringConst);

// Boolean
const booleanConst = false;
console.log(booleanConst);
console.log(typeof booleanConst);

// Array
const arrayConst = [];
const shoppingList = ["egg", "apples", "flour", 3, false];
console.log(shoppingList);
const shoppingListType = typeof shoppingList;
console.log(typeof shoppingListType);

console.log(shoppingList[1]);
console.log(typeof shoppingList[4]);

const shoppingListApples = shoppingList[1];
const lastItemShoppingList = shoppingList[4];
console.log(lastItemShoppingList);
console.log(typeof lastItemShoppingList);

// undefined
const undefinedExample = shoppingList[5];

let undefined1;
console.log(undefined1);
console.log(typeof undefined1);

console.log(typeof "0");
const stringConst2 = " asd";
console.log(stringConst2);

console.log(stringConst2[0]);
console.log(shoppingList.length);
console.log(stringConst2.length);
```

### Equality

```js
console.log(1 == 1);
console.log(1 == 2);

console.log(1 != 2);

console.log("HELLO" == 2);

console.log("1" == 1);
// both value and type should be true
console.log("1" !== 1);

console.log(1 > 8);

console.log(1 < 8);

console.log(1 <= 1);

console.log(1 === 1 && 3 === 4);
console.log((1 !== 1 || 3 === 4) && true);
```

### Arithmetic operators

```js
console.log(1 + 2);

console.log(1 - 2);

console.log(10 / 5);

console.log(10 * 5);
console.log(21 / 5);
console.log(21 % 5);

console.log("hello " + 23);
console.log("hello " + "23");
```

## Exercises

## Exercise: Variable types

With pen and paper write down what is logged out:

```js
// Types
console.log(typeof 3);
console.log(typeof -33);
console.log(typeof "3");
const threeConst = 3;
console.log(threeConst);
let threeLet = 3;
console.log(threeLet);
console.log(typeof 'console.log("console.log(console.log(""))")');
console.log(typeof typeof 45);
const names = ["benjamin", "Christopher"];
console.log(typeof names[0]);
console.log(typeof [3][0]);
console.log(typeof true);
```

### Follow up exercises

1. Create a variable that is 24 times 55
2. Create a const and set it to be equal to your name
3. With javascript `console.log` the first character in your name
4. Create an array with 3 strings, three numbers and three booleans
5. `console.log` the 4. element in the array made above
6. *Optional* with javascript `console.log` the last character in your name.

### Fix the errors

Fix the errors in this script:

```js
const name = "benjamin";
name = "benjamin-better";

const pizzaPrice = 78;
const pizzaPriceDiscounted = pizzaprice - 10;

const users = ["peter", "Johnny", "Børge"];

const lastUser = users[3];
console.log(lastUser);
```

### Pizza project

#### Part 1

1. Create a special new folder called "pizza-exercise"
2. Inside the folder create a new html file called "index.html"
3. Also inside the folder create a new JavaScript file called "pizza.js"
4. Remember to Include the pizza.js script in the html file
5. Write a log statement, so you know that your javascript code is running:

   `console.log("I love pizza");`
6. Create a variable to store the name of your favourite pizza
7. Create a variable to store the price of the pizza
8. Now log a statement to the console that will show the chef the entire pizza order in a language they understand, e.g. like this:

   `New pizza order: <name of pizza>. The price of the pizza is: <price of pizza>`

#### Part 2

Now we will modify the program so you can order multiple pizzas and decide whether the order is takeaway.

1. Create a new variable to store the amount of pizzas you would like to order
2. Create a new variable to store whether or not the order is for takeaway
3. Now write a formula to calculate the total price of your pizza order, and save it in a variable called totalPrice
4. Modify the log statement for the chef so it includes whether or not the order is for takeaway, and now show the total price of the order:

   `New pizza order (takeaway: <takeaway or not?>): <amount of pizzas> <name of pizza>. Total cost for the order is: <total price>`
5. Try to change the price of the pizza and then check if the total price is calculated correctly