day1.md

https://codesandbox.io/dashboard/home

Modern JavaScript ES6

Video Course: https://www.tocode.co.il/bundles/es6

Intro - 1 hour

• JavaScript: The Last 10 Years

• New Project Structure - Vanilla

• New Project Structure - Vite

• Project Bundlers

• Coffee

New Syntax - 2 hours

• const and let
• destructuring
• classes (brief)
• arrow functions
• function parameters

Lab 2

-- Lunch Break --

New Concepts - 2 Hours

• Modules
• Promises
• packages (yarn add)

Lab 3

lab2.js

[ ] Write a program that shows a button on screen. Each time someone clicks the button the page's background color should change. Use let and const.

[ ] Write a class called Summer to make the following code work:

```
const x = new Summer();
const y = new Summer();

x.add(10);
x.add(20);
x.add(5, 5);

y.add(100);

// prints: 40
console.log(x.result);

// prints: 100
console.log(y.result);
```


[ ] Write the classes Car and Race so the following code will print "green"

```
const c1 = new Car('blue', 20);
const c2 = new Car('green', 30);
const c3 = new Car('red', 24);

const race = new Race(c1, c2);
race.add(c3);

// prints: And the winner is... green
console.log(race.getWinner());
```

[ ] Fix the code in the following link:
https://codepen.io/ynonp/pen/yLoEGWW

## Destructuring

[ ] The following function takes a parameters object. Fill in the missing line so that the function prints the correct output:

```
function printTimes(options) {
  // TODO - fill code (1 line) here

  for (let i=0; i < times; i++) {
    console.log(`${String(i + 1).padStart(2, '0')} ${text}`);
  }
}

// print 'hello world' ten times:
printTimes({ text: 'hello world', times: 10 });
```


[ ] Now modify the function so the following code will use a default value of 5:

```
// print 'hello world' five times:
printTimes({ text: 'hello world' });
```

- [ ] The following two code snippets will add an item to an array:

```
let arr1 = [10, 20, 30, 40];
let arr2 = [10, 20, 30, 40];

arr1.push(50);
arr2 = [...arr2, 50];

console.log(arr1);
console.log(arr2);
```

Both the console.log calls now print the same thing.

What is the difference between the two methods? And how can you change the program to make the difference more visible?

  
  
  
[ ] (Bonus if time permits)
Create a class called EventBus that manages custom events in a system. The class provides two methods:

1. `on` - takes an event name and a function, and "registers" the function to handle the event later
2. `emit` - takes an event name and triggers all the functions that should handle the event

The following code snippet should work:

```
const bus = new EventBus();

function one() { console.log('one'); }
function two() { console.log('two'); }
function three(x) { console.log(x); }

bus.on('start', one);
bus.on('start', two);
bus.on('go', three);

bus.emit('start');
// this will call "one" and "two" and print the messages in console

bus.emit('go', 10);
// this will call "three" passing 10 as the value for "x"
```

lab3.md

Modules

[ ] Create a new Vite project and add to it a JavaScript file that defines a single function:

export function plus2(x) {
  return x + 2;
}

Import this file from main.js and use the function

[ ] In the same vite project, create another JavaScript file that exports a random value:

export default Math.random();

Import this file from main.js AND from one more file. Does it provide the same value?

[ ] Create a new JavaScript file in the project named utils.js so main.js will be able to use it like this:

import * as Utils from './utils';

// prints 20
console.log(Utils.twice(10));

modules.js

// export (utils.js)

export function twice(x) { return x * 2}

export function thrice(x) { return x * 3 }

export const applicationName = 'myapp';

export class Summer { }

// import
import { twice, thrice } from './utils.js';
import { applicationName } from './globals.js';
import { Summer } from './summer.js';
import * as Utils from './utils.js';
console.log(Utils.twice(10));

---------------------


// export a single value from another file
export default class Summer { ... }

// import that value (Summer is a name we select)
import Summer from './twice.js';

promises.js

## Promises

[ ] Write a function named "sleep" that takes a number of seconds and returns a promise that resolves AFTER this number of seconds has passed. Example usage:

```
async function main() {
    console.log('start');
    await sleep(10);
    console.log('10 seconds passed');
}
```


[ ] How long will the following code wait before printing "the end"?

```
async function main() {
  for (let i=0; i < 5; i++) {
    await sleep(10);
  }

  console.log('The end');
}
```

Can you modify the code so "sleep" function is still called 5 times, but the code only waits 10 seconds? That is, all "sleep" calls will wait simultaneously?