# Session III - 17. Nov. 2021, 14:00-17:00

## 14:00 , 10min : arrival / warm-up phase

Waiting for people to arrive at the class room and settle in

## 14:10 , 10min : Recap

## 14:20 , 30min : Input

Topics:
* ECMAScript and what's new with ES6 and later?
* Loops
- basic for and while loops (short refresher)
- foreach
- for ... in
- for ... of
* Function declarations
* Objects and classes

## 14:50 , 10min : Interim exercise

Create a function that contains a loop with a loop counter from 1 to 100.
In every loop iteration the current loop counter should be printed to the
console.

Also create a plain HTML page with a button called "debug", which calls the
function, when the user clicks on the button.

## 15:00 , 10min : B R E A K

## 15:10 , 30min : Input

Topics:
* Scope and Closures
* Maps and Sets
* Regular expressions
* Callbacks and Promises
* jQuery

## 15:40 , 10min : Open questions & discussion

## 15:50 , 10min : B R E A K

## 16:00 , 45min : Exercise and co-working

Write a function that takes a number as an argument.
The function then should either return the number itself, or one of the
following strings, depending on the input number:
* 'fizz' if the number is divisible by 3
* 'buzz' if the number is divisible by 5
* 'fizzbuzz!' if the number is divisible by 3 and 5

Now create another function that starts a loop from 1 to 100 and prints the
results of the fizzbuzz function for all numbers (from 1 to 100) to the console.
Note: There is no timer or delay involved, we just want to get the full results
of the fizz buzz algorithm in the console.

Create an HTML page that contains:
* 3 invisible images of your choice (representing fizz, buzz and fizzbuzz)
* a visible number 0 in the center of the page (style it to be not too small compared to the images)
* the following buttons (with labels and styles of your choice)
- a count button
- a start button
- a stop button
- a reset button
* somewhere at the bottom of the page a smaller debug button or link

Add the following functionality to the page:
* when the count button is pressed:
- the number displayed should be increased by 1
- if a fizz, buzz or fizzbuzz is produced with this number display the according image for a short amount of time (e.g. 1 second fade in and out, or any other animation you want to apply)
* when the start button is pressed:
- start an interval that increases the counter by 1 every second, and checks for the fizz buzz condition (similar to what happens when the debug button is pressed)
* when the stop button is pressed:
- stop the counter interval that was started by clicking on the start button
* when the reset button is pressed:
- reset the number displayed to 0
* when the debug button or link is pressed:
- call the function that prints out the fizz buzz numbers from 1 to 100 to the console

To submit your exercise, go to our shared base cloud folder into the "Session 3
- Advanced JS" folder. There you find an "Exercises" folder. Inside
of it create a folder with your student ID and name, where you can put your
solution (there is a placeholder folder there as an example reference). Put your
solution there until 1. Dec. 2021, 14:00, to get the full points.

## 16:45 , 15min : Review assignments

Everyone is tasked to do a short peer code review. We use those exercises that
are already submitted by now.

So go to our base cloud folder. There you will find a file `reviews-ex2.txt`
which contains the review assignments. Find your student ID and the
corresponding student ID for the solution you will review. The file also
contains notes on how to name your review file and where to put it.

Reviews don't have to be long. Try to provide at least one sentence for each of
the following aspects:
* How easy did you understand the code?
* Was there anything that was specifically interesting to you? E.g. a function
you did not know yet, or an unexpected feature that you liked.
* Is there something you would do differently? And if so, why?

BTW: the assignments are randomly generated with the code which resides in
the file `reviewer-assignments.js` in our base cloud course folder.

---
This page is part of the course website at https://tantemalkah.at/2021/artful-coding
All contents, where not otherwise noted, are licensed by [Andrea Ida Malkah Klaura](https://tantemalkah.at/) under a [CC-BY-SA 4.0 license](http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1).