diff --git a/.markdownlint.yaml b/.markdownlint.yaml
index 647ea922..3e4dae52 100644
--- a/.markdownlint.yaml
+++ b/.markdownlint.yaml
@@ -1,8 +1,10 @@
---
$schema: https://raw.githubusercontent.com/DavidAnson/markdownlint/v0.37.4/schema/markdownlint-config-schema.json
extends: markdownlint/style/prettier
-MD046:
- style: fenced
+MD026:
+ punctuation: .,;:。,;:!
MD033:
allowed_elements:
- nobr
+MD046:
+ style: fenced
diff --git a/legacy/javascript/JS.gif b/legacy/javascript/JS.gif
new file mode 100644
index 00000000..11015827
Binary files /dev/null and b/legacy/javascript/JS.gif differ
diff --git a/legacy/javascript/README.md b/legacy/javascript/README.md
index 2e614fad..15309133 100644
--- a/legacy/javascript/README.md
+++ b/legacy/javascript/README.md
@@ -1,3 +1,34 @@
-# javascript
+# HackYourJavaScript
-TODO
+> Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a [Pull Request](https://github.com/HackYourFuture-CPH/JavaScript/pulls).
+
+
+
+## What is JavaScript?
+
+> JavaScript is a programming language that adds interactivity to your website (for example: games, responses when buttons are pressed or data entered in forms, dynamic styling, animation).
+
+Read this intro article on [JavaScript](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+
+This JavaScript course is divided in three modules. Starting from the simple uses and understanding the basics to the more complex features of the language.
+
+## Module goals
+
+### [JS1 Module:](./javascript1)
+
+A basic program with multiple functions (reacting to user input)
+
+### [JS2 Module:](./javascript2)
+
+A tool capable of loading a JSON file and representing it in the DOM
+
+### [JS3 Module:](./javascript3)
+
+A web app with external data source using at least one API
+
+### Overall
+
+A good understanding of all the above mentioned topics. Want to check your Knowledge?
+Go through the [JavaScript Fundamentals readme](./fundamentals) and research/ask for help [(Slack!)](https://hackyourfuture-cph.slack.com) with the concepts that are not entirely clear.
+
+Helpful resource: (here you can find tons of free JavaScript books online)
diff --git a/legacy/javascript/fundamentals/README.md b/legacy/javascript/fundamentals/README.md
new file mode 100644
index 00000000..bca11e39
--- /dev/null
+++ b/legacy/javascript/fundamentals/README.md
@@ -0,0 +1,268 @@
+# Understanding JavaScript fundamentals
+
+When talking about JavaScript, it is important that you use the correct terminology. This way, if you talk about code with others, they'll understand what you mean without any ambiguity.
+
+## Variables
+
+A "variable" is a place where you can store information, such as a string, or a number.
+
+### Variable declaration
+
+Variables are "declared" using the `var` keyword:
+
+```js
+var x = 5;
+```
+
+Here, we say: "declare variable x and initialize it with the number 5".
+
+### Variable types
+
+All variables have a type. In our example above, the variable `x` is a `number`. JavaScript supports the following types:
+
+- `string`, e.g. "HackYourFuture"
+- `number`, e.g. 5, or 10.6
+- `boolean`, e.g. `true` or `false`
+- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']`
+- `object`, e.g. `{name: 'John', age: 24}`, or the special object `null`
+- `function`, e.g. `function () { return 4; }`
+- `symbol`
+
+In addition, a variable may be `undefined`. This is also a special type.
+
+To get the type of a variable, use the following code:
+
+```js
+var x = 5;
+var typeOfX = typeof x; // -> "number"
+```
+
+Note that I've put an asterisk behind 'array'. That is because in JavaScript, array is a special kind of object:
+
+```js
+var arr = [1, 2, 3];
+var typeOfArr = typeof arr; // -> "object"
+```
+
+However, in our communication, we will call these variables arrays.
+
+### Null & undefined
+
+The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined".
+
+Whenever you declare a variable, but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it.
+
+```js
+var x;
+console.log(typeof x); // -> "undefined"
+```
+
+## Arrays
+
+Variables that are arrays contain a list of things, instead of just one thing. What's inside the array, we typically call "elements". So, the array `[1, 2, 3]` has three elements. The array `[]` has no elements and is therefore empty. The number of elements in an array is called its "length".
+
+When you want to access an element inside an array, you use an "index". This is the number that you put between brackets (`[]`).
+
+Given the following code:
+
+```js
+var arr = ["john", "jane", "jack"];
+console.log(arr[0]);
+```
+
+The number `0` is the "index of the first element of array `arr`". Conversely, the element "at index 0 in array `arr` is `'john'`".
+
+Instead of a number, you can also use a variable to access elements in an array, _as long as this variable is a number_:
+
+```js
+var arr = ["john", "jane", "jack"];
+var a = 1;
+console.log(arr[a]); // -> jane
+```
+
+If the index you use is not an integer (a whole number), or if it's less than `0` or if it's greater than or equal to the array's length, you will get back `undefined`.
+
+## Objects
+
+Variables that are objects also contain a list of things, but instead of them being in some specific order, they can be assigned to words, called "keys". Instead of "elements" the things that are inside objects are called "properties".
+
+```js
+var obj = { name: "John", age: 24 };
+```
+
+This object has two properties: `name` and `age`. The "value" of the property `name` is the string `'John'`. The "value" of the property `age` is the number `24`.
+
+When accessing object properties, you can use the dot-notation: `obj.name` or the bracket-notation: `obj["name"]`. Note that the latter looks a lot like the way to access array elements. However, here what's inside the bracket (called "key" for objects, instead of "index") must be a string.
+
+```js
+console.log(obj.name); // -> 'John'
+console.log(obj["name"]); // -> 'John'
+```
+
+Just like with arrays, you can also use a variable to access properties, as long as these variables are strings. In this case you cannot use the dot-notation!
+
+```js
+var ageKey = "age";
+console.log(obj[ageKey]); // -> 24
+```
+
+Remember that there is a very big difference between `obj[name]` and `obj["name"]`.
+
+> Note:
+>
+> Thinking back of arrays, the length of an array can be retrieved by `arr.length`. So as mentioned before, arrays are just like other JavaScript objects. You could even write `arr['length']` to access the `length` property of the array. JavaScript will look: is what we put between brackets a number? Then it is an index and we'll look up the correct array element. If it's a string, it's a key and we will look up the corresponding property.
+
+## Functions
+
+A function is a reusable piece of code. Functions are _very_ important in JavaScript, to the extent that some people call JavaScript a "function-oriented" language. As mentioned above, variables can be of type function. In fact, _every function is a variable_.
+
+The following two pieces of code have the exact same result:
+
+```js
+function sum(a, b) {
+ return a + b;
+}
+```
+
+and
+
+```js
+var sum = function (a, b) {
+ return a + b;
+};
+```
+
+> Note
+>
+> This is not entirely true, as in the second code, the function is "anonymous", i.e. it has no name. But in both cases, you can call the function like this: `sum(4, 5)`.
+
+### Parameters & arguments
+
+When writing `function sum(a, b)`, `a` and `b` are the "parameters" of the function. We say that this function has two parameters. (Sometimes, you'll see the word "arity": this function has "arity" 2, but that is something you don't have to use for now.)
+
+Now, when _calling_ function sum, e.g. `var s = sum(4, 5);`, we say that the numbers `4` and `5` are the "arguments" of the function. Arguments are "passed" to the function: "we pass `4` and `5` to the function `sum`".
+
+So remember the difference between the word "parameter" and "argument". Many people confuse them, and that's not a big problem, but understanding the difference is always nice:
+
+- A parameter is the name you want to give to the variable that is available inside of the function.
+- An argument is the actual value you want to assign to the parameters when you call the function.
+
+A function that "has two parameters" is also said to "take/accept two arguments". But, sometimes you'll hear people say: "the function has two arguments" or "the function takes two parameters". While formally incorrect, you'll know what they mean.
+
+### Calling a function on something
+
+In JavaScript, you can call functions _on_ something. By this, we mean that you use the dot to call the function. For instance, when we say "call method `trim` on string `s`", we mean:
+
+```js
+var s = " this is a string ";
+s.trim(); // -> "this is a string"
+```
+
+> Note
+>
+> Technically, this means that the string `s` will become the `this` special variable inside of the function.
+
+However, there are functions that you don't call on anything:
+
+```js
+function sum(a, b) {
+ return a + b;
+}
+sum(4, 5); // -> 9
+```
+
+Here, you call the function `sum` on nothing.
+
+Most built-in functions in JavaScript, like math functions or logging functions, also use the dot:
+
+```js
+Math.round(4.5);
+console.log("hello");
+Array.from([1, 2, 3]);
+```
+
+Indeed, these functions are also called "on" `Math`, `console`, `Array`, and so on. However, in this case, their purpose is more to group them logically, so here it's not very important to use that terminology. We'd rather say: "call the function `Math.round` with `4.5` as an argument", i.e. we include it in the full name of the methods.
+
+It's more when you think about which functions you can call "on" your own variables (strings, arrays, numbers, etc):
+
+```js
+myString.trim();
+myArray.slice();
+myNumber.toString();
+...
+```
+
+## Statements & expressions
+
+Most programming languages that you'll encounter in real life are called "imperative" programming languages. JavaScript is such an imperative programming language. Imperative is another word for command-like. That is, you give the computer a bunch of commands after each other. First do this, then do that, etc.
+
+These individual commands are called "statements" in imperative programming languages. You can compare them with sentences in the English language. They have a use by themselves, and do not need something else. "The man eats bread." is a full sentence, it conveys a meaning by itself. A sentence in English is always terminated by a period.
+
+Similarly, a statement in JavaScript should provide a command by itself. JavaScript-statements are (almost always) terminated by a semicolon.
+
+This is a complete statement:
+
+```js
+var s = "HackYourFuture";
+```
+
+It is a full command: declare a variable `s` and initialize it with `"HackYourFuture"`. JavaScript doesn't need any other information to know what we want. The statement is terminated with a semicolon.
+
+However, this is not a complete statement:
+
+```js
+4 + 5;
+```
+
+This equals `9`, but what is JavaScript to do with it? It doesn't provide a command. You'd need to do something with it, e.g. `var x = 4 + 5;` or `callFunction(4 + 5)`. We call these parts of statements "expressions". Expressions are not terminated by semicolons. Expressions always "evaluate into a value". In our example, the expression `4 + 5` "evaluates into `9`". If expressions cannot be evaluated into a value, they are invalid. For instance, `4 +` is not a valid expression, it is incomplete, because we need something else after the plus sign.
+
+So, statements can _contain_ expressions. Can expressions contain statements? No, they cannot. However, they can themselves contain expressions. Think about `4 + 5`: it contains the expressions `4` and `5`, as these both evaluate into a value: the expression `4` evaluates into the number `4`, it is a very simple expression. Similarly, `true`, `null`, `undefined` are all expressions.
+
+### Examples of expressions
+
+Here are some examples of expressions. Remember: expressions evaluate into a value, but do not provide a command:
+
+- `sum(a, b)`
+- `a`
+- `a > 4 ? "yes" : "no"`
+- `a + b`
+- `a && b || c`
+- `arr.length`
+- `obj["name"]`
+- `[1, 2, 3]`
+- `arr[1]`
+- `[1]` (this is an array with one element!)
+- `function a() { return 4; }`
+
+The last one requires a bit of explanation. If you write:
+
+```js
+function a() {
+ return 4;
+}
+```
+
+by itself, this is a _statement_ (a function declaration statement). However, if you write it as part of a statement, such as:
+
+```js
+var b = function a() {
+ return 4;
+};
+```
+
+now it is an expression. This is an exceptional situation where something can be a statement or an expression.
+
+### Examples of not-expressions
+
+The following are not expressions:
+
+- `var` -> this is a keyword, see below
+- `var x;` -> this is a statement
+- `+` -> this is only an operator
+- `if (a > 4) { return "yes"; } else { return "no"; }`
+
+`if` is also a statement. However, it is quite a complex statement. It is also referred to as a "construct", just like `for`, `while`, `try`, etc.
+
+### Keywords
+
+Some words in JavaScript are special, e.g. `var`, `if`, `while`, `return`. These are called "keywords". You typically cannot use these words as names for your variables, functions.
diff --git a/legacy/javascript/fundamentals/bug-challenge-es6/.babelrc b/legacy/javascript/fundamentals/bug-challenge-es6/.babelrc
new file mode 100644
index 00000000..d8add2df
--- /dev/null
+++ b/legacy/javascript/fundamentals/bug-challenge-es6/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["es2015", "stage-1"],
+ "compact": true
+}
diff --git a/legacy/javascript/fundamentals/bug-challenge-es6/.gitignore b/legacy/javascript/fundamentals/bug-challenge-es6/.gitignore
new file mode 100644
index 00000000..3c3629e6
--- /dev/null
+++ b/legacy/javascript/fundamentals/bug-challenge-es6/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/legacy/javascript/fundamentals/bug-challenge-es6/__tests__/bug-challenge-tests.js b/legacy/javascript/fundamentals/bug-challenge-es6/__tests__/bug-challenge-tests.js
new file mode 100644
index 00000000..1f62ff07
--- /dev/null
+++ b/legacy/javascript/fundamentals/bug-challenge-es6/__tests__/bug-challenge-tests.js
@@ -0,0 +1,176 @@
+import BugChallenge from "../bug-challenge";
+import "../jest-helpers";
+
+describe("Bug challenge ES6", () => {
+ let challenge;
+ beforeEach(() => {
+ console.clear();
+ challenge = new BugChallenge();
+ });
+
+ describe("bug1", () => {
+ it("should list the names and ages of people", () => {
+ challenge.bug1();
+
+ expect(console.logs).toEqual([
+ "Alice is 25",
+ "Bob is 27",
+ "Charlie is 40",
+ ]);
+ });
+ });
+
+ describe("bug2", () => {
+ it("should list all items in the array in reverse order", () => {
+ challenge.bug2();
+
+ expect(console.logs).toEqual(["4", "3", "2", "1"]);
+ });
+ });
+
+ describe("bug3", () => {
+ it("should output the total of the indices (0 + 1 + 2 = 3)", () => {
+ challenge.bug3();
+
+ expect(console.logs).toEqual(["3"]);
+ });
+ });
+
+ describe("bug4", () => {
+ it("should list all movies and actors, except the top 3", () => {
+ challenge.bug4();
+
+ expect(console.logs).toEqual([
+ "movie: Pulp Fiction",
+ "movie: Fight club",
+ "movie: Forrest Gump",
+ "movie: Inception",
+ "movie: Goodfellas",
+ "movie: The Matrix",
+ "movie: Interstellar",
+ "actor: Al Pacino",
+ "actor: Daniel Day-Lewis",
+ "actor: Duston Hoffman",
+ "actor: Tom Hanks",
+ "actor: Anthony Hopkins",
+ "actor: Paul Newman",
+ "actor: Denzel Washington",
+ ]);
+ });
+ });
+
+ describe("bug5", () => {
+ it("should fetch with caching disabled", () => {
+ challenge.bug5();
+
+ expect(console.logs).toEqual([
+ "fetch: GET http://www.example.com (useCaching=false)",
+ ]);
+ });
+ });
+
+ describe("bug6", () => {
+ it("should run main.js", () => {
+ challenge.bug6();
+
+ expect(console.logs).toEqual(["run: script=main.js"]);
+ });
+ });
+
+ describe("bug7", () => {
+ it("should first run with stopOnError=all and then with stopOnError=null", () => {
+ challenge.bug7();
+
+ expect(console.logs).toEqual([
+ "run: stopOnError=all",
+ "run: stopOnError=null",
+ ]);
+ });
+ });
+
+ describe("bug8", () => {
+ it("should lists numbers 1 through 6", () => {
+ challenge.bug8();
+ jest.runAllTimers();
+
+ expect(console.logs).toEqual(["1", "2", "3", "4", "5"]);
+ });
+ });
+
+ describe("bug9", () => {
+ it("should list only BMWs", () => {
+ challenge.bug9();
+
+ expect(console.logs).toEqual(["BMW i8", "BMW M3"]);
+ });
+ });
+
+ describe("bug10", () => {
+ it("should print 'Help'", () => {
+ challenge.bug10();
+
+ expect(console.logs).toEqual(["Help"]);
+ });
+ });
+
+ describe("bug11", () => {
+ it("should correctly add players Alice & Bob", () => {
+ challenge.bug11();
+
+ expect(console.logs).toEqual([
+ "Player Alice has 0 points",
+ "Player Bob has 0 points",
+ ]);
+ });
+ });
+
+ describe("bug12", () => {
+ it("should not change the value of the outer y", () => {
+ challenge.bug12();
+
+ expect(console.logs).toEqual(["Printing vector at (6, 7)", "y=5"]);
+ });
+ });
+ describe("bug13", () => {
+ it("should return that AI, Godfather and Inception are in the top10 movie list", () => {
+ challenge.bug13();
+ jest.runAllTimers();
+
+ expect(console.logs).toEqual([
+ "Independence Day is not in the top 10!",
+ "AI is in the top 10!",
+ "Godfather is in the top 10!",
+ "Inception is in the top 10!",
+ ]);
+ });
+ });
+ describe("bug14", () => {
+ it("should return that AI is best movie ever", () => {
+ challenge.bug14();
+ jest.runAllTimers();
+
+ expect(console.logs).toEqual([
+ "AI is best movie ever",
+ "Godfather is not best movie ever",
+ ]);
+ });
+ });
+ describe("bug15", () => {
+ it("should return Al Pacino as first actor after sorting alphabetically", () => {
+ challenge.bug15();
+ jest.runAllTimers();
+
+ expect(console.logs).toEqual([
+ "The first actor when sorted alphabetically is Al Pacino",
+ ]);
+ });
+ });
+ describe("bug16", () => {
+ it("should return that Al Pacino is ranked 4th among all actors", () => {
+ challenge.bug16();
+ jest.runAllTimers();
+
+ expect(console.logs).toEqual(["Al Pacino is ranked 4"]);
+ });
+ });
+});
diff --git a/legacy/javascript/fundamentals/bug-challenge-es6/bug-challenge.js b/legacy/javascript/fundamentals/bug-challenge-es6/bug-challenge.js
new file mode 100644
index 00000000..32d405db
--- /dev/null
+++ b/legacy/javascript/fundamentals/bug-challenge-es6/bug-challenge.js
@@ -0,0 +1,263 @@
+export default class BugChallenge {
+ //Do NOT change the top10Movies and top10Actors variables to fix your tests
+ //believe me: the problem is in bug() functions, not in these arrays ;)
+ top10Movies = [
+ "AI",
+ "Shawshank Redemption",
+ "Godfather",
+ "Pulp Fiction",
+ "Fight club",
+ "Forrest Gump",
+ "Inception",
+ "Goodfellas",
+ "The Matrix",
+ "Interstellar",
+ ];
+ top10Actors = [
+ "Marlon Brando",
+ "Jack Nickolson",
+ "Robert De Niro",
+ "Al Pacino",
+ "Daniel Day-Lewis",
+ "Duston Hoffman",
+ "Tom Hanks",
+ "Anthony Hopkins",
+ "Paul Newman",
+ "Denzel Washington",
+ ];
+ //------
+ // Bugs
+
+ bug1() {
+ const people = [
+ {
+ name: "Alice",
+ age: 25,
+ },
+ {
+ name: "Bob",
+ age: 27,
+ },
+ {
+ name: "Charlie",
+ age: 40,
+ },
+ ];
+
+ for (let person in people) {
+ console.log(`${person.name} is ${person.age}`);
+ }
+ }
+
+ bug2() {
+ const array = [1, 2, 3, 4];
+
+ for (let i = 0; i < array.length; i++) {
+ console.log(array.pop());
+ }
+ }
+
+ bug3() {
+ const array = {};
+ array[0] = "a";
+ array[1] = "b";
+ array[2] = "c";
+
+ let total = 0;
+ for (let key in obj) {
+ total += key;
+ }
+
+ console.log(total);
+ }
+
+ bug4() {
+ // We list all movies, except the top 3.
+ var index = 3;
+ for (index; index < this.top10Movies.length; index++) {
+ console.log(`movie: ${this.top10Movies[index]}`);
+ }
+
+ // We also list all actors, except the top 3.
+ for (index; index < top10Actors.length; index++) {
+ console.log(`actor: ${this.top10Actors[index]}`);
+ }
+ }
+
+ bug5() {
+ const defaultMethod = "GET";
+ const defaultUseCaching = true;
+
+ function fetch(options) {
+ const url = options.url;
+ const method = options.method || defaultMethod;
+ const useCaching = options.useCaching || defaultUseCaching;
+
+ console.log(`fetch: ${method} ${url} (useCaching=${useCaching})`);
+ }
+
+ fetch({
+ url: "http://www.example.com",
+ useCaching: false,
+ });
+ }
+
+ bug6() {
+ function run(options) {
+ if (options.script == undefined) {
+ options.script = "main.js";
+ }
+
+ console.log(`run: script=${options.script}`);
+ }
+
+ run();
+ }
+
+ bug7() {
+ function run(options = {}) {
+ if (options.stopOnError == undefined) {
+ options.stopOnError = "all";
+ }
+
+ console.log(`run: stopOnError=${options.stopOnError}`);
+ }
+
+ run();
+ run({ stopOnError: null });
+ }
+
+ bug8() {
+ for (var i = 0; i < 5; i++) {
+ setTimeout(function () {
+ console.log(i + 1);
+ }, 100 * i);
+ }
+ }
+
+ bug9() {
+ const cars = [
+ {
+ make: "Volvo",
+ type: "S90",
+ },
+ {
+ make: "BMW",
+ type: "i8",
+ },
+ {
+ make: "BMW",
+ type: "M3",
+ },
+ {
+ make: "Audi",
+ type: "A6",
+ },
+ ];
+
+ function findCars(make) {
+ return cars.filter((car) => (car.make = make));
+ }
+
+ for (let bmw of findCars("BMW")) {
+ console.log(`${bmw.make} ${bmw.type}`);
+ }
+ }
+
+ bug10() {
+ const command = "printHelp";
+
+ switch (command) {
+ case "printMath":
+ console.log(`√9=${Math.sqrt(9)}`);
+ case "printHelp":
+ console.log("Help");
+ case "quit":
+ console.log("Quitting");
+ }
+ }
+
+ bug11() {
+ class Game {
+ constructor() {
+ this.players = [];
+ }
+
+ addPlayers(names) {
+ names.forEach(function (name) {
+ this.players.push({ name, points: 0 });
+ });
+ }
+ }
+
+ const game = new Game();
+ game.addPlayers(["Alice", "Bob"]);
+
+ for (let player of game.players) {
+ console.log(`Player ${player.name} has ${player.points} points`);
+ }
+ }
+
+ bug12() {
+ let y = 5;
+
+ function printVector() {
+ let x = 6;
+ y = 7;
+
+ console.log(`Printing vector at (${x}, ${y})`);
+ }
+
+ printVector();
+ console.log(`y=${y}`);
+ }
+
+ bug13() {
+ var notInTop10 = (movieName) => {
+ return !this.top10Movies.indexOf(movieName);
+ };
+ console.log(
+ "Independence Day is " +
+ (notInTop10("Independence Day") ? "not " : "") +
+ "in the top 10!",
+ );
+ console.log("AI is " + (notInTop10("AI") ? "not " : "") + "in the top 10!");
+ console.log(
+ "Godfather is " +
+ (notInTop10("Godfather") ? "not " : "") +
+ "in the top 10!",
+ );
+ console.log(
+ "Inception is " +
+ (notInTop10("Inception") ? "not " : "") +
+ "in the top 10!",
+ );
+ }
+ bug14() {
+ console.log(
+ "AI is " + (isInFirstPlace("AI") ? "" : "not ") + "best movie ever",
+ );
+ console.log(
+ "Godfather is " +
+ (isInFirstPlace("Godfather") ? "" : "not ") +
+ "best movie ever",
+ );
+ var isInFirstPlace = (movieName) => {
+ return this.top10Movies[0] === movieName;
+ };
+ }
+ bug15() {
+ var getAlphabeticalFirst = function () {
+ return this.top10Actors.sort()[0];
+ };
+
+ console.log(
+ `The first actor when sorted alphabetically is ${getAlphabeticalFirst()}`,
+ );
+ }
+ bug16() {
+ const ranking = this.top10Actors.indexOf("Al Pacino");
+ // var thirdRankedActor = this.top10Actors['2'];
+ console.log(`Al Pacino is ranked ${ranking + "1"}`);
+ }
+}
diff --git a/legacy/javascript/fundamentals/bug-challenge-es6/jest-helpers.js b/legacy/javascript/fundamentals/bug-challenge-es6/jest-helpers.js
new file mode 100644
index 00000000..d8900a00
--- /dev/null
+++ b/legacy/javascript/fundamentals/bug-challenge-es6/jest-helpers.js
@@ -0,0 +1,10 @@
+jest.useFakeTimers();
+
+console.logs = [];
+
+console.clear = function () {
+ console.logs = [];
+};
+console.log = function (message) {
+ console.logs.push(message.toString());
+};
diff --git a/legacy/javascript/fundamentals/bug-challenge-es6/package.json b/legacy/javascript/fundamentals/bug-challenge-es6/package.json
new file mode 100644
index 00000000..4368d879
--- /dev/null
+++ b/legacy/javascript/fundamentals/bug-challenge-es6/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "bug-challenge-es6",
+ "jest": {
+ "automock": false,
+ "testPathIgnorePatterns": [
+ "/node_modules/"
+ ]
+ },
+ "scripts": {
+ "test": "jest"
+ },
+ "devDependencies": {
+ "babel-core": "^6.18.2",
+ "babel-jest": "^17.0.2",
+ "babel-preset-es2015": "^6.18.0",
+ "babel-preset-stage-1": "^6.16.0",
+ "jest": "^17.0.3",
+ "jest-cli": "^17.0.3"
+ }
+}
diff --git a/legacy/javascript/fundamentals/exercises.md b/legacy/javascript/fundamentals/exercises.md
new file mode 100644
index 00000000..fbab7c4e
--- /dev/null
+++ b/legacy/javascript/fundamentals/exercises.md
@@ -0,0 +1,215 @@
+# JavaScript fundamentals - exercises
+
+## Q1
+
+Given the following code:
+
+```js
+var s = "Hello";
+var x = s.toLowerCase();
+var l = s.length;
+```
+
+What are the types of the following?
+
+1. `s`
+2. `x`
+3. `s.toLowerCase()`
+4. `s.toLowerCase`
+5. `s.length`
+6. `l`
+
+## Q2
+
+In `var x = 5 + 6;`, what is `+`?
+
+1. Function
+2. Operator
+3. Number
+4. Aggregator
+
+## Q3
+
+In `var x = 5 + 6;`, what is `var`?
+
+1. Variable
+2. Keyword
+3. Operator
+4. Constant
+
+## Q4
+
+Given the following code:
+
+```js
+var x = z[y];
+```
+
+What is `y`?
+
+1. Index
+2. Key
+3. Index or key
+4. Array
+
+## Q5
+
+Given the following code:
+
+```js
+var y = 1;
+var x = [1, 2, 3];
+var z = x[y];
+```
+
+What is `y`?
+
+1. Index
+2. Key
+3. Index or key
+4. Array
+
+## Q6
+
+Given the following code:
+
+```js
+var joe = {
+ name: "Joe",
+ age: 24,
+};
+var joesName = joe.name;
+var joesAge = joe["age"];
+```
+
+- What is `'age'` in the last line?
+ 1. Index
+ 2. Key
+ 3. Array
+ 4. Object
+- What are `name` and `age` of the object `joe`?
+ 1. Index
+ 2. Key
+ 3. Object
+ 4. Property
+
+## Q7
+
+Given the following code:
+
+```js
+var y = "length";
+var x = [1, 2, 3];
+var z = x[y];
+```
+
+What is `y`?
+
+1. Index
+2. Key
+3. Index or key
+4. Array
+
+## Q8
+
+What is the element for index `1` in array `x`?
+
+## Q9
+
+Fill in: "The value of the (...) `length` of `x` is (...)"
+
+## Q10
+
+What is the name of these functions?
+
+1. `function a() { return true; }`
+2. `var a = function b() { return true; }`
+3. `var c = function () { return true; }`
+
+## Q11
+
+Write a function that has two parameters, called `first` and `second`.
+
+## Q12
+
+Write a function call that passes three arguments.
+
+## Q13
+
+Write code for the following:
+
+1. Declare a variable called `x` and initialize it with the string "Hello".
+2. Declare a variable called `y` and initialize it with the property `length` of `x`.
+3. Declare a variable called `z` and initialize it with the result of calling the method `toUpperCase` on `x`
+4. Declare a function called `myFunction`. This function should take two arguments, and should call the second argument with the first argument as its argument. Then, declare a variable called `f` and initialize it with an empty anonymous function, and call `myFunction` with the arguments `10` and `f`.
+
+## Q14
+
+Explain as precisely as possible (in English) what the following code does, line by line.
+
+(Tip: it should look like the items in the previous question!)
+
+```js
+var s = "HackYourFuture";
+var i = s.indexOf("Your");
+function sum(a, b) {
+ return a + b;
+}
+var s = sum(4, 5);
+var r = Math.sqrt(s);
+```
+
+## Q15
+
+For each of these, indicate whether it is an expression or a statement:
+
+1. `l`
+1. `l = 4;`
+1. `l == 4`
+1. `if (l == 4) { console.log("yes"); }`
+1. `console.log("yes");`
+1. `"yes"`
+1. `console.log(l == 4 ? "yes" : "no")`
+1. `function a() { return 4; }`
+1. `var a = function () { return 4; }`
+
+## Q16
+
+How can you tell whether something is a statement?
+
+## Q17
+
+How can you tell whether something is an expression?
+
+## Q18
+
+Given the following code:
+
+```js
+var s = "Hello".toLowerCase();
+var l = s.length;
+
+function sum(a, b) {
+ return a + b;
+}
+var max = function (a, b) {
+ return a > b ? a : b;
+};
+
+var s1 = sum(4, 5);
+var s2 = 4 + 5;
+
+if (s2 == s1) {
+ console.log("same");
+} else {
+ console.log("not same");
+}
+```
+
+List all 11 _statements_ in the code above.
+
+## Q19
+
+Bonus question!
+
+List all 28 _expressions_ in the code from Q18.
diff --git a/legacy/javascript/homework-projects/README.md b/legacy/javascript/homework-projects/README.md
new file mode 100644
index 00000000..694424ec
--- /dev/null
+++ b/legacy/javascript/homework-projects/README.md
@@ -0,0 +1,47 @@
+# Homework projects
+
+## WHAT
+
+During the JS2 and JS3 modules, you will be working on a project instead of the usual weekly homework assignments (which you can still do, as optional practice). Each week, you will be required to add new features to your project. By the end of JS3, you will have built an actual app using your newly gained knowledge and coding skills!
+
+
+
+## WHY
+
+We're doing this for four main reasons:
+
+- You will gain experience and an understanding of what it's like to work on **one continuous project**, instead of switching contexts with each new homework assignment.
+- You will apply what you learned every week and understand how each new method can be implemented into an actual product.
+- You will build a solid project for your portfolio that you can showcase on your CV and in future tech interviews!
+- You will gain experience presenting your project and code in a 'mini-tech interview' at the end of JS3.
+
+## PROJECT IDEAS
+
+[Currency Converter](projects/currency-converter/currency-converter.md)
+[Memory Game](projects/memory-game/memory-game.md)
+[Movie App](projects/movie-app/movie-app.md)
+[Quiz App](projects/quiz-app/quiz-app.md)
+[Recipe App](projects/recipe-app/recipe-app.md)
+
+> [!NOTE]
+> New projects are welcome to be added by mentors. Just follow a similar structure to the existing ones, and submit it as a PR for review by staff and other mentors.
+
+## HOW
+
+The projects will either be worked on individually, in a pair or as a group. You may also be set up to peer review another's project. This is up to the staff and mentors running the module.
+
+First, you will pick a project idea from above. Each week, you will have specific tasks that you have to deliver. Those tasks are provided in your chosen project description. The tasks are designed to help you practice the main learning points throughout the JS2 and JS3 modules.
+
+You will work in your project repository for JS2 and JS3 (not the central homework repository!), and you will submit the weekly task in the usual way by creating a Pull Request.
+
+During JS2 and JS3, refer to the relevant [homework submission guide](guides/weekly-submission-guide.md).
+
+The main difference is that you will be on a different repository and that you will merge the PR after implementing the review-based improvements, while all the technical steps are the same as always.
+
+## DEPLOYMENT
+
+So you can demo your project easily both at the end of the project, but also to future employers, it is a requirement that you deploy the project. You can use the [HackYourFuture project template](https://github.com/HackYourFuture-CPH/hyf-project-template) as a starting point, or an otherwise agreed upon process by the staff and mentors.
+
+## CONCLUSION
+
+When you wrap up your project in JS3 week3, you will get a chance to present your project either as a video recording or on a demo day. If your team is hosting a demo day, then check out [this guide](guides/demo-day-presentation.md) for how to prepare for the presentation.
diff --git a/legacy/javascript/homework-projects/assets/API-guide-1.png b/legacy/javascript/homework-projects/assets/API-guide-1.png
new file mode 100644
index 00000000..958df4fc
Binary files /dev/null and b/legacy/javascript/homework-projects/assets/API-guide-1.png differ
diff --git a/legacy/javascript/homework-projects/assets/API-guide-2.png b/legacy/javascript/homework-projects/assets/API-guide-2.png
new file mode 100644
index 00000000..ceadfbe7
Binary files /dev/null and b/legacy/javascript/homework-projects/assets/API-guide-2.png differ
diff --git a/legacy/javascript/homework-projects/assets/API-guide-3.png b/legacy/javascript/homework-projects/assets/API-guide-3.png
new file mode 100644
index 00000000..08937a17
Binary files /dev/null and b/legacy/javascript/homework-projects/assets/API-guide-3.png differ
diff --git a/legacy/javascript/homework-projects/assets/API-guide-4.png b/legacy/javascript/homework-projects/assets/API-guide-4.png
new file mode 100644
index 00000000..6176f249
Binary files /dev/null and b/legacy/javascript/homework-projects/assets/API-guide-4.png differ
diff --git a/legacy/javascript/homework-projects/assets/memory-game-card-flip.gif b/legacy/javascript/homework-projects/assets/memory-game-card-flip.gif
new file mode 100644
index 00000000..df22983d
Binary files /dev/null and b/legacy/javascript/homework-projects/assets/memory-game-card-flip.gif differ
diff --git a/legacy/javascript/homework-projects/assets/memory-game-grid.png b/legacy/javascript/homework-projects/assets/memory-game-grid.png
new file mode 100644
index 00000000..236b0f3f
Binary files /dev/null and b/legacy/javascript/homework-projects/assets/memory-game-grid.png differ
diff --git a/legacy/javascript/homework-projects/assets/memory-game-pattern.png b/legacy/javascript/homework-projects/assets/memory-game-pattern.png
new file mode 100644
index 00000000..de65a79c
Binary files /dev/null and b/legacy/javascript/homework-projects/assets/memory-game-pattern.png differ
diff --git a/legacy/javascript/homework-projects/assets/movie-app-star-rating.gif b/legacy/javascript/homework-projects/assets/movie-app-star-rating.gif
new file mode 100644
index 00000000..09602c4a
Binary files /dev/null and b/legacy/javascript/homework-projects/assets/movie-app-star-rating.gif differ
diff --git a/legacy/javascript/homework-projects/assets/project-flow.png b/legacy/javascript/homework-projects/assets/project-flow.png
new file mode 100644
index 00000000..9739dff2
Binary files /dev/null and b/legacy/javascript/homework-projects/assets/project-flow.png differ
diff --git a/legacy/javascript/homework-projects/guides/demo-day-presentation.md b/legacy/javascript/homework-projects/guides/demo-day-presentation.md
new file mode 100644
index 00000000..d27fbf4d
--- /dev/null
+++ b/legacy/javascript/homework-projects/guides/demo-day-presentation.md
@@ -0,0 +1,33 @@
+# Demo Day Presentation
+
+Your team may choose to run a demo day to present your project and get feedback. If so, here's a brief to guide you through your 15-minute presentation. Each individual will have 40-minutes in total, broken down into 15-minutes for presenting and 25-minutes for discussions. Your presentation will be an opportunity to showcase your project, detail your weekly progress, and share your challenges and learnings.
+
+## Presentation Structure (15 minutes)
+
+### Introduction (2 minutes)
+
+Briefly introduce your chosen project. (Refer to the "projects" folder for details.)
+
+### Weekly Task Breakdown (10 minutes)
+
+For each week of the JS2 and JS3 modules, highlight:
+
+- Your understanding and implementation of their concepts.
+- Specific challenges you faced and how you overcame them.
+- Any particular successes or insights you gained.
+
+### Project Summary (3 minutes)
+
+Summarize what you learned from this project and how it ties together the concepts learned over JS2 and JS3.
+
+### Feedback and Discussion Session (25 minutes)
+
+After your presentation, there will be an open session for feedback and discussion. This is a valuable time to gain insights from your mentors and peers.
+
+Tips for a Successful Presentation:
+
+- Be Clear and Concise: Focus on the key points and challenges of your project while being mindful of time.
+- Reflect on Your Learning Journey: Share how your understanding evolved over the weeks.
+- Be Open to Feedback: This is a learning opportunity – embrace the insights and suggestions from mentors and peers.
+
+This is a suggested guideline for you to follow. We look forward to seeing your projects and hearing about your journey through the JS2 and JS3 modules in a way that works for you and your project. Good luck!
diff --git a/legacy/javascript/homework-projects/guides/making-your-API-guide.md b/legacy/javascript/homework-projects/guides/making-your-API-guide.md
new file mode 100644
index 00000000..c34b716f
--- /dev/null
+++ b/legacy/javascript/homework-projects/guides/making-your-API-guide.md
@@ -0,0 +1,68 @@
+# Build your own API
+
+[GitHub Pages](https://pages.github.com/) is a good place to host a site for your portfolio or a project, but another excellent use for it is to host your own JSON API data!
+
+All you would need to do, in short, is create a GitHub Pages repository, put a JSON file in there, and your custom URL will have all of that data from the JSON file. See below for more detailed instructions and some screenshots to help you get around!
+
+## Instructions
+
+### Creating the repository
+
+The first thing you’ll need to do is create a GitHub Pages repository.
+
+Head on over to your GitHub account and create a repository called *`username`*.github.io, where *`username`* is your GitHub username.
+
+If you already have such a repository, just go on to the next step.
+
+
+
+❗Make sure that it matches your username or it won’t work!
+
+❗It seems like the repository can be private if you will just use it for the API, but has to be public if you also want to use it to [create a site](https://pages.github.com/). ([see here](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site#:~:text=GitHub%20Pages%20is%20available%20in%20public%20repositories%20with%20GitHub%20Free%20and%20GitHub%20Free%20for%20organizations%2C%20and%20in%20public%20and%20private%20repositories%20with%20GitHub%20Pro%2C%20GitHub%20Team%2C%20GitHub%20Enterprise%20Cloud%2C%20and%20GitHub%20Enterprise%20Server.%20For%20more%20information%2C%20see%20%22GitHub%E2%80%99s%20plans.%22) for more information)
+
+### Adding the JSON file
+
+1. Once the repository has been made, head over to your terminal and clone that repository into a directory of your choosing.
+2. Once the repository been cloned to your computer, open the project folder in VS Code.
+3. Create a folder for your APIs or just create a file in the root of the repository. You might want to organize it into a folder (fx. “data”) if you plan to create more APIs in the future and/or if you plan to also host your site on Github Pages. In the case of your JS project, you would just copy and paste the array of objects that you have been using so far and perhaps add more objects to it, if needed.
+4. Once you are ready with your JSON file, add, commit and push the changes to `main` so that you have the file on your repository.
+5. Head over to the repo on GitHub and verify that your file is there and that all is good.
+
+
+
+❗Be mindful about your data format. Note wether you should use an object or an array of objects and form your file accordingly.
+
+### Using the API
+
+Now comes the fun part! You can use the JSON file in a FETCH to get and use the data dynamically.
+
+Your URL for FETCH will be the raw content of the JSON file that you added. Head on to the `raw` version of your file:
+
+
+
+Copy the URL and use it for fetching the data.
+
+
+
+Now you have a publicly hosted API! To access this information, all you need to do is make an API call like you normally would (FETCH), parse that data (iterate through an array of objects), and then use the data in whatever way you need for your project!
+
+❗Note that in Vanilla JS (which is what you are learning now), you cannot access the fetched data outside of your fetch function. So you will most probably need to move your whole code from before into the function or call the necessary functions from within the FETCH function, something like this:
+
+```jsx
+async function getData() {
+ const response = await fetch(
+ "https://raw.githubusercontent.com/shpomp/shpomp.github.io/main/test.json?token=<>",
+ );
+ const myData = await response.json();
+
+ theFunctionThatUsesYourData(myData);
+}
+
+const theFunctionThatUsesYourData = (data) => {
+ for (const item of data) {
+ // your code ....
+ }
+};
+
+// other code ...
+```
diff --git a/legacy/javascript/homework-projects/guides/weekly-submission-guide.md b/legacy/javascript/homework-projects/guides/weekly-submission-guide.md
new file mode 100644
index 00000000..15e9e0dd
--- /dev/null
+++ b/legacy/javascript/homework-projects/guides/weekly-submission-guide.md
@@ -0,0 +1,67 @@
+# HOMEWORK SUBMISSION
+
+## TL;DR
+
+- [ ] start any coding session from `main`.
+- [ ] periodically keep your local `main` up to date with changes in the remote `main` (for example, when you merge a PR on GitHub, your remote `main` gets the new code added, but your local `main` does not).
+- [ ] periodically merge the up-to-date local `main` into your new homework branch.
+- [ ] always checkout to a new homework branch from `main`.
+- [ ] write meaningful commit messages.
+- [ ] before pushing, double check that your branch name is correct.
+- [ ] if the branch name is not correct, you can checkout to a new, correct branch from the current branch - you will carry all the commits with you.
+- [ ] stay patient. Slack, Google and ChatGPT are your best friends now.
+- [ ] make the changes as per PR review in the appropriate branch, push the changes to the appropriate branch and merge the PR.
+
+## Before you start the project
+
+- Create a public project repository in your GitHub account (choose the option to add README.md).
+- Clone the repository locally and open it in VS code.
+
+## Before you start your homework
+
+1. You are probably opening your project repo on the last weeks branch - make sure that any changes you have there are either committed and pushed, or stashed, or discarded - whatever you prefer. The point is to be mindful that:
+
+ - you are most probably starting on a branch you last worked with, that is how VS Code works,
+ - and there might be changes that you have not handled last time.
+ - if you are about to start a new homework, you need to go to `main` first.
+
+2. Checkout to `main` and pull the latest changes from it. If you skip this step, you will get in trouble sooner or later.
+
+3. Checkout to your new homework branch, following the branch naming convention of `module-week/yourname`.
+ See [allowed branch name prefixes](#allowed-branch-name-prefixes).
+
+❗ Always firstly checkout to the new homework branch from an updated `main`. Always.
+
+### Allowed branch name prefixes
+
+| | | |
+| ----------------- | ----------------- | ----------------- |
+| javascript2-week1 | javascript2-week2 | javascript2-week3 |
+| javascript3-week1 | javascript3-week2 | javascript3-week3 |
+
+### Examples
+
+- ❌ javascript3/maria
+- ❌ javascript2-week1-homework
+- ❌ javascript3-week2
+- ✅ javascript3-week3/maria
+
+## Completing and submitting your homework
+
+1. Implement your homework. Be mindful of structuring and naming. Make sure you complete all the tasks listed for that week in your project description.
+
+2. Verify that your branch name is right. Commit and push your homework to the repository. If the branch name is not right, you can commit and checkout to a new, correct branch from the current branch - you will carry all the commits with you. Then you can push.
+
+3. Go to your project repository and create a Pull Request from your weekly homework branch to `main`.
+
+4. Post the link to the PR to your class channel and celebrate with your classmates! 🎉 💃🏽 🕺🏾 🥳
+
+## After submitting your homework
+
+1. Follow the PR to see the review and interact with the reviewer as well as make the suggested changes.
+
+2. When you have made changes to the code since the homework submission and review, push the changes and merge the PR.
+
+3. Update your local `main` with the merged changes in the remote `main`.
+
+4. Take a moment to celebrate your progress and be proud of your learning!
diff --git a/legacy/javascript/homework-projects/projects/currency-converter/currency-converter.md b/legacy/javascript/homework-projects/projects/currency-converter/currency-converter.md
new file mode 100644
index 00000000..ff04e8cf
--- /dev/null
+++ b/legacy/javascript/homework-projects/projects/currency-converter/currency-converter.md
@@ -0,0 +1,101 @@
+# CURRENCY CONVERTER
+
+
+
+You started working in a new cool fintech startup, and your first task is to build a simple currency converter app.
+It is expected that your app will have at least these features and functionality:
+
+- Insert a new currency rate
+- List currencies and rates
+- Search currencies
+- Set a rate to be alerted when a currency reaches that rate
+- The ‘most moving’ currency rate
+- Timeout for the market open/close
+- Call the currency API to receive the rates dynamically
+
+> [!NOTE]
+> Take some time to research online for similar apps and how they look and work to gain inspiration. This is an important skill to practice as a developer because you won't always know (or be told) how to approach the design.
+
+## Weekly specs
+
+### `JS2 week1` - Browser environment, DOM manipulation, DOM event listeners
+
+- [ ] Create a form to insert a brand new currency rate from `a` to `b`.
+- [ ] Create a form to covert an amount of money from `x` currency to `y` based on the rates provided.
+- [ ] optional bonus: create a form to update existing currency conversion with a new rate.
+
+Your currency rate object format could be something like this:
+
+```js
+{
+ "timestamp": 1519296206,
+ "base": "EUR",
+ "date": "2021-03-17",
+ "rates": {
+ "USD": 1.23396,
+ [...]
+ }
+}
+```
+
+The above would be how a brand new currency rate could look like (the first task).
+Then, after an update (the bonus task) it could look something like this:
+
+```js
+{
+ "timestamp": 1519296206,
+ "base": "EUR",
+ "date": "2021-03-17",
+ "rates": {
+ "USD": 1.23396,
+ "GBP": 0.882047,
+ [...]
+ }
+}
+```
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of currency rate objects. Even a small one is perfectly enough, but go as big as you want!
+Continue with the format of the object you used last week or improve it and refactor!
+
+- [ ] List: Traverse through your array of the currency rate objects, and display them in a grid of items containing all the relevant details.
+- [ ] Implement a function to find a specific currency rate, searching by the currency `from` or `to`.
+ Basically, it is just a search function! With a twist, though, because you have both the `from` and the `to` fields.
+ As a user, I want to find a specific rate, but I am too lazy to scan through all the rates with my eyes, I want to be able to type in and search!
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+- [ ] Implement a timeout to show an announcement when the market open or/and close. The market opens at 9AM and closes at 5PM local time.
+
+- [ ] optional bonus:
+ a. Implement a watcher to periodically check a specific currency conversion and alert the user when the value reaches a speicfic point. Let's say the user is interested in converting USD to Danish kroner but the rate today is very bad, 1 USD is 5 DKK. We wan to alert the user when 1 USD is 7 DKK so the user can convert with maximum gain
+ b. Watch currency updates and show a banner with the hotest currency exchange rate. I.e., currency conversion reaching the double value.
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] Follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] Refactor your code so that you use the currency rates dynamically from your API instead of the static array of objects.
+- [ ] Implement functionality to search for a specific currency.
+- [ ] Ensure all the functionality is working smoothly after refactoring.
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] You used promise chaining last week - now rewrite the fetch in the "async await" approach.
+- [ ] Testing. Implement a test to ensure that the application will work as expected after the refactoring.
+
+### `JS3 week3` - Classes, Revision and Presentation of projects
+
+- [ ] Rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] Make improvements to the style or functionality or add additional functionality.
+- [ ] Prepare to showcase your project to external people, talk through your code and explain what you have implemented.
+
+## Project completion checklist ✅
+
+- [ ] I can insert a new currency rate
+- [ ] I can see a list of all currencies and rates
+- [ ] I can use the coverter to convert a currency and see the result
+- [ ] I can search currencies to find a specific one
+- [ ] I can set a rate to be alerted when a currency reaches that rate
+- [ ] I can see an indicator for the market open/close
+- [ ] I am using the currency API to receive the rates dynamically
diff --git a/legacy/javascript/homework-projects/projects/memory-game/card-backside.jpg b/legacy/javascript/homework-projects/projects/memory-game/card-backside.jpg
new file mode 100644
index 00000000..3c61a6c6
Binary files /dev/null and b/legacy/javascript/homework-projects/projects/memory-game/card-backside.jpg differ
diff --git a/legacy/javascript/homework-projects/projects/memory-game/card-picture.jpg b/legacy/javascript/homework-projects/projects/memory-game/card-picture.jpg
new file mode 100644
index 00000000..a5fe247d
Binary files /dev/null and b/legacy/javascript/homework-projects/projects/memory-game/card-picture.jpg differ
diff --git a/legacy/javascript/homework-projects/projects/memory-game/memory-game.md b/legacy/javascript/homework-projects/projects/memory-game/memory-game.md
new file mode 100644
index 00000000..8bd51357
--- /dev/null
+++ b/legacy/javascript/homework-projects/projects/memory-game/memory-game.md
@@ -0,0 +1,77 @@
+# MEMORY GAME
+
+
+
+You joined an online game platform startup and your task is to build one of the small classic games.
+
+You will build a Memory Game, where a user needs to flip all the cards in a game in pairs until they find all the matching pairs. You aspire to make the game smooth and pleasant, so the user is compelled to spend more time playing it.
+
+> [!NOTE]
+> Take some time to research online for similar apps and how they look and work to gain inspiration. This is an important skill to practice as a developer because you won't always know (or be told) how to approach the design.
+
+## Weekly specs
+
+### `JS2 week1` - Browser environment, DOM manipulation, DOM event listeners
+
+You are provided with a picture and a card backside pattern picture (or pick your own).
+
+- [ ] display a single card on the page using DOM manipulation.
+- [ ] implement the functionality of flipping the card: on click, the card flips from showing the backside pattern to the picture and vice versa. Visual animation is optional and the exact look of it is up to you!
+
+
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of picture objects. Even a small one is perfectly enough, but go as big as you want! A picture object should ideally have at least an id, a name and a picture url.
+Continue with the format of the picture object you used last week or improve it and refactor!
+
+- [ ] generate a new array where each card object is added to it twice, but in a random order. Think about _doubling_ and _shuffling_ an array when you research how to complete this task.
+- [ ] traverse through the new array of picture objects and display all the cards in a grid.
+- [ ] include the functionality from the previous week so that each card will flip from the picture to the backside pattern and back when it is clicked.
+
+
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+- [ ] implement a counter for how many times in total you have flipped a card (one counter for all the cards). Note that you are not supposed to count clicks! The purpose is to count how many times you have _revealed_ the card picture - in other words, you are couunting player moves.
+- [ ] implement a timer for how much time has passed since you first clicked on a card.
+- [ ] adjust the functionality so that once 2 cards are flipped, they stay flipped for X seconds, after which they flip back down automatically.
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] refactor your code so that you ditch the static array of objects and instead fetch the cards data from your API.
+- [ ] ensure all the functionality is working smoothly after refactoring.
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] you used promise chaining last week - now rewrite the fetch in the "async await" approach.
+- [ ] implement the functionality for it to work like and actual memory game:
+
+At least:
+
+- You can only flip 2 cards at a time.
+- If the cards match, they are removed from the DOM.
+- The game reloads once all cards are removed.
+
+At most:
+
+- Implement the tasks listed under "At least".
+- Use the counter and timer that you implemented before and stop the game when a certain count or time is reached. The time or count can be hardcoded or user-submitted via an input.
+
+### `JS3 week3` - Classes, Revision and Presentation of projects
+
+- [ ] rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] make improvements to the style or functionality or add additional functionality.
+- [ ] Prepare to showcase your project to external people, talk through your code and explain what you have implemented.
+
+## Project completion checklist ✅
+
+- [ ] at first, I can see a square grid of cards "flipped down" - seeing their backside pattern;
+- [ ] I can click on a card, which makes the card "flip" and reveal the picture/gif;
+- [ ] I can only reaveal 2 cards at a time;
+- [ ] the 2 revealed cards stay flipped for X seconds, after which they flip down again;
+- [ ] if I reveal 2 matching cards, they are removed from the page;
+- [ ] I can see a timer that starts once I flip the very first card in a new game;
+- [ ] I can see a counter that counts how many times I have flipped a card;
+- [ ] once all cards are removed, the game reloads.
diff --git a/legacy/javascript/homework-projects/projects/movie-app/movie-app.md b/legacy/javascript/homework-projects/projects/movie-app/movie-app.md
new file mode 100644
index 00000000..adc63176
--- /dev/null
+++ b/legacy/javascript/homework-projects/projects/movie-app/movie-app.md
@@ -0,0 +1,92 @@
+# MOVIE APP
+
+
+
+You joined a startup that has the ambition to build the best new movie streaming platform!
+
+Your taks will be to build a simple prototype to showcase the look of the platform and some simple functionality.
+
+Your way to impress is to not only build a nice-looking main movie list page, but to also include some interesting features that the competitors do not have!
+
+> [!NOTE]
+> Take some time to research online for similar apps and how they look and work to gain inspiration. This is an important skill to practice as a developer because you won't always know (or be told) how to approach the design.
+
+## Weekly specs
+
+### `JS2 week1` - Browser environment, DOM manipulation, DOM event listeners
+
+Use a movie object with details such as id, title, description, year, main actors, etc.
+
+It could be something like this:
+
+```js
+ {
+ id: 1,
+ title: 'Interstellar',
+ description:
+ 'The adventures of a group of explorers who make use of a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.',
+ movie_year: 2014,
+ director: "Christopher Nolan",
+ actors: ["Matthew McConaughey", "Anne Hathaway", "Jessica Chastain", "Michael Caine", "Casey Affleck", "Mackenzie Foy", "John Lithgow", "Ellen Burstyn", "Matt Damon"],
+ poster_url:
+ 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg',
+ price: '120.00',
+ },
+```
+
+Add whatever properties you think are relevant and that you want to display as the information on your future movie website!
+
+- [ ] design and implement the layout of the movie card via DOM manipulation.
+
+- [ ] via DOM manipulation, implement one of the two (or both!):
+ - submitting and displaying a comment about the movie. Implement an imput under the movie and a functionality to display the submitted comment;
+ - rating the movie in a star-rating format and displaying the submitted rating.
+
+
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of movie objects. Even a small one is perfectly enough, but go as big as you want!
+Continue with the format of the movie object you used last week or improve it and refactor!
+
+- [ ] traverse the movie array and display all the movies on the page in a grid via DOM manipulation.
+- [ ] manipulate the movie array, implementing these functions:
+- a function for searching for a provided keyword in the movie title;
+- a function for sorting the movie array by one or a few selected properties.
+- [ ] optional: as you might guess, you will later use these functions to implement searching and sorting functionality, so feel free to add any other array-manipulation functions of your choice!
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+Here you will develop some features that will differentiate your movie platform from the competition!
+
+- [ ] implement a timer where you can set a time for how much time you give yourself to pick a movie to watch, the timer alerts or rings when then time is over.
+- [ ] implement a timer to show how long you have spent on the page.
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] refactor your code so that you ditch the static array of objects and instead fetch the movies data from your API.
+- [ ] ensure all the functionality is working smoothly after refactoring.
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] you used promise chaining last week - now rewrite the fetch in the "async await" approach
+- [ ] fit and apply one (or all) of your functions from JS2 week2 to manipulate the displayed movies:
+
+- a function to search a movie by title that a user submits via an input, displaying only the matching movies.
+- a function to sort the movies by a property selected via a dropdown.
+- a function to filter the movies by a specific constraint submitted by the user via an input (or hardcoded), only displaying the relevant movies.
+
+### `JS3 week3` - Classes, Promises advanced
+
+- [ ] rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] make improvements to the style or functionality or add additional functionality.
+
+## Project completion checklist ✅
+
+- [ ] I can see a page with a list of movies displayed in a grid;
+- [ ] I can see the most important details about a movie displayed in a nice and readable way;
+- [ ] I can either submit a comment to a movie or a star rating or both;
+- [ ] I can search for movies by titling, typing in a search keyword;
+- [ ] I can sort the movies by at least one specific property;
+- [ ] I can filter the movies by at least one user-submitted or hardcoded constraint (f.x. movies older than year X).
diff --git a/legacy/javascript/homework-projects/projects/quiz-app/quiz-app.md b/legacy/javascript/homework-projects/projects/quiz-app/quiz-app.md
new file mode 100644
index 00000000..5fb53069
--- /dev/null
+++ b/legacy/javascript/homework-projects/projects/quiz-app/quiz-app.md
@@ -0,0 +1,94 @@
+# QUIZ APP
+
+
+
+The most popular quiz app has become very expensive... so there came a startup that aspires to build a new one that will be better, cheaper to use and more fun!
+You join the startup as a developer and your task is to build a nice prototype of the product while the rest of the product team works to define what the final version will be.
+
+> [!NOTE]
+> Take some time to research online for similar apps and how they look and work to gain inspiration. This is an important skill to practice as a developer because you won't always know (or be told) how to approach the design.
+
+## Weekly specs
+
+### `JS2 week1` - Browser environment, DOM manipulation, DOM event listeners
+
+- [ ] create a form to insert a quiz question. It should take a question and 4 options for answers. There should be a way to mark which answer is correct in the form, but you should only be able to select one correct answer.
+
+- [ ] implement one of the two (or both!):
+
+a. add a button that randomizes the order of the 4 option inputs once they have been filled in.
+
+b. color the input for the "correct" answer option in green and the "wrong" ones in red. Make sure it's still readable.
+
+- [ ] optional bonus: make sure the question is not longer than 140 characters.
+
+The format of the object of the quiz question, for example, could be something like this:
+
+```js
+const quizQuestion = {
+ id: 1,
+ question: "What is the capital of Denmark?",
+ options: [
+ { text: "Berlin", isCorrect: false },
+ { text: "Copenhagen", isCorrect: true },
+ { text: "Madrid", isCorrect: false },
+ { text: "Rome", isCorrect: false },
+ ],
+ explanation: "Copenhagen is the capital of Denmark.",
+};
+```
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of quiz question objects. Even a small one is perfectly enough, but go as big as you want!
+Continue with the format of the question object you used last week or improve it and refactor!
+
+- [ ] save the quiz question into an array when the form is submitted.
+
+- [ ] show a list of all quiz questions added to the array below the form. It should show the questions, the 4 options but not which one is correct. Add a button with the functionality to reveal which is the correct answer for each question.
+
+- [ ] build a function to filter the questions by searching the content of the question.
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+- [ ] add inputs for 2 player names and a button to start a quiz. When the quiz starts, player names are displayed with their collected points (0 to begin with).
+
+- [ ] implement one of the two (or both!):
+
+a. next to each player's name, add two buttons [correct] and [wrong]. When the "correct" button for a player is pressed, they score 1 point, when the wrong button is pressed, the _other_ player scores one point.
+
+b. add number inputs for the player points and use the browser's arrow buttons on the input fields to increase/decrease the points.
+
+- [ ] optional bonus: play a sound and end the quiz game when one of the players has reached 10 points.
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+
+- [ ] refactor your code so that you ditch the static array of objects and instead fetch the initial questions data from your API.
+
+- [ ] ensure all the functionality is working smoothly after refactoring.
+
+- [ ] add alphabetical sorting of the questions and random sorting of the questions and let the user choose.
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] you used promise chaining last week - now rewrite the fetch in the "async await" approach.
+
+- [ ] add a search input to filter the questions by searching the content of the question - use the function that you have build before. When you click the search button, display only the questions where the search input is included in the question text.
+
+### `JS3 week3` - Classes, Revision and Presentation of projects
+
+- [ ] rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] make improvements to the style or functionality or add additional functionality.
+- [ ] Prepare to showcase your project to external people, talk through your code and explain what you have implemented.
+
+## Project completion checklist ✅
+
+- [ ] I can see a form to submit a question at the top of the page and a list of questions bellow it;
+- [ ] when submitting a new question, I can see an indication where to submit the correct answer;
+- [ ] the questions are displayed in a nice and readable way, and I can see a button to reveal the right answer for each question;
+- [ ] I can sort the questions alphabetically;
+- [ ] I can use search and get the questions wher my search keyword is included in the question text;
+- [ ] there is a functionality to submit two player names;
+- [ ] it is possible to interact with player scores.
diff --git a/legacy/javascript/homework-projects/projects/recipe-app/recipe-app.md b/legacy/javascript/homework-projects/projects/recipe-app/recipe-app.md
new file mode 100644
index 00000000..8b646be5
--- /dev/null
+++ b/legacy/javascript/homework-projects/projects/recipe-app/recipe-app.md
@@ -0,0 +1,85 @@
+# RECIPE APP
+
+
+
+You are a foood lover, a cooking enthusiast and you want to share your passion with the web. You aspire to build a cool recipe website as a hobby project and eventually earn a little bit on the side from it.
+
+> [!NOTE]
+> Take some time to research online for similar apps and how they look and work to gain inspiration. This is an important skill to practice as a developer because you won't always know (or be told) how to approach the design.
+
+## Weekly specs
+
+### `JS2 week1` - Browser environment, DOM manipulation, DOM event listeners
+
+Create a recipe object that has at least the id, name, description, a list of ingredients and a picture url.
+Or just use the below!
+
+```js
+const recipeObject = {
+ id: 1,
+ title: "Gløgg",
+ picture_url:
+ "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Gl%C3%B6gg_kastrull.JPG/800px-Gl%C3%B6gg_kastrull.JPG",
+ ingredients: [
+ { NAME: "Orange zest", AMOUNT: "0.5" },
+ { NAME: "Water", AMOUNT: "200 ml" },
+ { NAME: "Sugar", AMOUNT: "275 g" },
+ { NAME: "Whole cloves", AMOUNT: "5" },
+ { NAME: "Cinnamon sticks", AMOUNT: "2" },
+ { NAME: "Spice", AMOUNT: undefined },
+ { NAME: "Bottle of red wine", AMOUNT: "1" },
+ { NAME: "Raisins", AMOUNT: "100 g" },
+ { NAME: "Slipped Almonds", AMOUNT: "50 g" },
+ ],
+ description: "Mix everything, heat it, and you are good to go!",
+};
+```
+
+- [ ] Display a single recipe on the page using DOM manipulation.
+- [ ] Implement a form to add a new recipe with a minimum of 5 ingredients.
+- [ ] Optional: implement functionality to add a new ingredient to a recipe.
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of recipe objects. Even a small one is perfectly enough, but go as big as you want!
+Continue with the format of the recipe object you used last week or improve it and refactor!
+
+- [ ] Traverse through the array of recipe objects and display all the recipe cards in a grid.
+- [ ] Implement functions to manipulate the array:
+- find a recipe by a provided search word to check in the recipe title.
+- sort the recipe array by the amount of ingredients needed.
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+- [ ] Implement a cooking timer where the time is user-picked via an input or hard-coded. The timer should alert and/or ring once the time is up.
+- [ ] Implement a timer for how much time you have spent on the page.
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] Follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] Refactor your code so that you ditch the static array of objects and instead fetch the recipes data from your API.
+- [ ] Implement functionality to search for an ingredient, fetch and display the relevant ingredient prices for a recipe
+- [ ] Ensure all the functionality is working smoothly after refactoring.
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] You used promise chaining last week - now rewrite the fetch in the "async await" approach.
+- [ ] Use the fuunctions created in preivous week and build functionality to:
+- [ ] Find a recipe by a provided search word to check in the recipe title.
+- [ ] Sort the recipe array by the amount of ingredients needed.
+
+### `JS3 week3` - Classes, Revision and Presentation of projects
+
+- [ ] Rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] Make improvements to the style or functionality or add additional functionality.
+- [ ] Prepare to showcase your project to external people, talk through your code and explain what you have implemented.
+
+## Project completion checklist ✅
+
+- [ ] I can see a page with a list of recipes displayed in a grid;
+- [ ] I can see the most important details about a recipe displayed in a nice and readable way;
+- [ ] I can search for recipes by title, typing in a search keyword;
+- [ ] I can sort the recipe array by the amount of ingredients needed;
+- [ ] I can search for an ingredient, fetch and display the relevant ingredient prices for a recipe;
+- [ ] I can use a cooking timer that alerts and/or rings once the time is up;
+- [ ] I can see a timer for how much time I have spent on the page.
diff --git a/legacy/javascript/javascript1/README.md b/legacy/javascript/javascript1/README.md
new file mode 100644
index 00000000..41973cd4
--- /dev/null
+++ b/legacy/javascript/javascript1/README.md
@@ -0,0 +1,13 @@
+# JavaScript 1
+
+Here you can find course content and homework for the JavaScript 1 module.
+
+| Week | Topic | Preparation | Homework | Lesson plan |
+| ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------------------------- | ----------------------------------- |
+| 1. | Intro JavaScript (What is it, what can you use it for); Setup js either via browser or via node; [Variables: var, let, const](week1/readme.md#variables); Console.log; [Types](week1/readme.md#Types): [String](week1/readme.md#String), [number](week1/readme.md#Number), boolean, [null, undefined](week1/readme.md#Null--undefined), [array](week1/readme.md#Array); [Operators](week1/readme.md#comparison-operators) | [Preparation](week1/preparation.md) | [Homework](week1/homework.md) | [Lesson plan](week1/lesson-plan.md) |
+| 2. | Conditions; [Functions](week2/readme.md#Functions); Global vs local scope; For loop | [Preparation](week2/preparation.md) | [Homework](week2/homework.md) | [Lesson plan](week2/lesson-plan.md) |
+| 3. | Array's continued; [Objects](week3/readme.md#Objects); [Call stack](week3/readme.md#Call-stack) | [Preparation](week3/preparation.md) | [Homework](week3/homework.md) | [Lesson plan](week3/lesson-plan.md) |
+| 4. | Recap of js basics; Solving problems | [Preparation](week4/preparation.md) | [Homework](week4/homework.md) | [Lesson plan](week4/lesson-plan.md) |
+
+> **Kind note:**
+> The JavaScript modules are tough. Very tough! We expect you to **always** come prepared to the class on Sunday.
diff --git a/legacy/javascript/javascript1/week1/README.md b/legacy/javascript/javascript1/week1/README.md
new file mode 100644
index 00000000..ffdd46d6
--- /dev/null
+++ b/legacy/javascript/javascript1/week1/README.md
@@ -0,0 +1,231 @@
+# JavaScript 1, Week 1
+
+## Learning goals
+
+- [ ] Intro JavaScript (What is it, what can you use it for)
+- [ ] Setup js either via browser or via node
+- [ ] Console.log
+- [ ] [Variables: var, let, const](#variables)
+- [ ] [Types](#types): [String](#string), [number](#number), boolean, [null, undefined](#null--undefined), [array](#array)
+- [ ] [Operators](#comparison-operators): Comparision, addition, subtraction, multiplication, division, modulus, increment, decrement
+- [ ] Errors: How to read and fix errors
+
+Focus on how to read documentation, google answers and google errors
+
+## Relevant links
+
+- [Preparation](preparation.md)
+- [Homework](homework.md)
+- [Lesson plan](lesson-plan.md)
+
+## Variables
+
+A "variable" is a place where you can store information, such as a string, or a number. New variables in JavaScript are declared using one of three keywords: let, const, or var.
+
+> Think of variables names like **labels** on boxes, while the value of the variable are the **contents** of the box - you could change the contents of a box and leave the label intact, the contents of the boxes can have different types, the boxes should have good labels (a box of books being labeled pens would be very confusing),
+>
+> 
+> Photo from [Khan Academy](http://cs-blog.khanacademy.org/2013/09/teaching-variables-analogies-and.html)
+
+### Variable declaration
+
+Variables are "declared" using the `var`, `let` or `const` keyword:
+
+```js
+var x;
+let foo;
+const bar;
+```
+
+### let and const
+
+- read about [let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
+- read about [const](https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/const)
+- [let vs const](http://wesbos.com/let-vs-const/)
+
+Here, we say: "declare variable x and initialize it with the integer (number) 5".
+
+```js
+let foo; // declare variable `foo`
+```
+
+```js
+let foo = 6; // declare and assign a variable at the same time
+```
+
+You can also assign a value to an existing variable:
+
+```js
+foo = 4; // change variable `foo`
+```
+
+## Types
+
+All variables have a type. In our example above, the variable `x` is a `number`. JavaScript supports the following types:
+
+- `String`, e.g. "HackYourFuture"
+- `Number`, e.g. 5
+- `Float`, e.g. 10.6
+- `Boolean`, e.g. `true` or `false`
+- `Array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']`
+- `Object`, e.g. `{name: 'John', age: 24}`, or the special object `null`
+- `Function`, e.g. `function () { return 4; }`
+
+In addition, a variable may be `undefined`. This is also a special type.
+
+To get the type of a variable, use the following code:
+
+```js
+let x = 5;
+let typeOfX = typeof x; // -> 'number'
+```
+
+Note that I've put an asterisk behind 'array'. That is because in JavaScript, array is a special kind of object:
+
+```js
+let arr = [1, 2, 3];
+let typeOfArr = typeof arr; // -> 'object'
+```
+
+However, in our communication, we will call these variables arrays.
+
+### Null & undefined
+
+The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined".
+
+Whenever you declare a variable, but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it - it represents the intentional absence of any object value (read [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/null) for more context).
+
+```js
+let x;
+console.log(typeof x); // -> 'undefined'
+```
+
+### Typeof
+
+You can use `typeof` to get the type of a certain variable as you have seen in the above section 'Variable types'. As you can see in the following examples it returns the type of data that you have stored in your variable.
+
+## String
+
+In JavaScript you can store a series of characters inside a variable, you then call this a string. You can store all sorts of characters (text/numbers, spaces or phrases) in strings. By using the `''` you define that something is a string. You can also use `""` to create a string. Both are fine as long as you are consistent (just make a choice on which one you prefer and stick to it).
+
+```js
+let foo = "42";
+typeof foo; //-> 'string'
+```
+
+### String indexes and string properties
+
+The index of a string always starts at 0.
+Strings also have properties, for example `.length` you can use this to find the length of a string.
+
+So for example:
+
+```js
+let baz = "Hello World";
+baz[0]; //-> "H"
+baz.length; //-> 11
+```
+
+### String methods
+
+More about [string methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String).
+
+## Number
+
+All numbers in JavaScript are considered numbers with or without decimal
+
+```js
+let foo = 42;
+typeof foo; //-> 'number'
+
+let bar = 3.3333;
+typeof bar; //-> 'number'
+```
+
+## Array
+
+Variables that are arrays contain a list of things, instead of just one thing. What's inside the array, we typically call "elements". So, the array `[1, 2, 3]` has three elements. The array `[]` has no elements and is therefore empty. The number of elements in an array is called its "length".
+
+When you want to access an element inside an array, you use an "index". This is the number that you put between brackets (`[]`).
+
+Given the following code:
+
+```js
+var arr = ["john", "jane", "jack"];
+console.log(arr[0]);
+```
+
+The number `0` is the "index of the first element of array `arr`". Conversely, the element "at index 0 in array `arr` is `'john'`".
+
+Instead of a number, you can also use a variable to access elements in an array, _as long as this variable is a number_:
+
+```js
+let arr = ["john", "jane", "jack"];
+let a = 1;
+console.log(arr[a]); // -> jane
+```
+
+If the index you use is not an integer (a whole number), or if it's less than `0` or if it's greater than or equal to the array's length, you will get back `undefined`.
+
+More about [arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+
+### Comparison operators
+
+> Note the two different uses of the equals sign:
+> A single equals sign (=) is used to assign a value to a variable.
+> A triple equals sign (===) is used to compare two values (see Equality Operators).
+
+#### Equality operators
+
+- Equality `==`
+- Inequality `!=`
+- Identity / strict equality `===`
+- Non-identity / strict inequality `!==`
+
+How does this work in practice?
+
+```js
+1 == 1; // -> true
+7 == "7"; // -> true
+1 != 2; // -> true
+5 === 5; // -> true
+9 === "9"; // -> false
+3 !== 3; // -> false
+3 !== "3"; // -> true
+```
+
+> 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 `<=`
+
+```js
+4 > 3; // -> true
+3 >= 3; // -> true
+13 < 12; // -> false
+3 <= 4; // -> true
+```
+
+More about [comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
+
+### Arithmetic operators
+
+- Addition `+`
+- Subtraction `-`
+- Multiplication `*`
+- Division `/`
+- Remainder (sometimes called modulo) `%`. This returns the remainder left over after you've shared the left number out into a number of integer portions equal to the right number.
+
+```js
+8 + 9; // -> 17, adds two numbers together.
+20 - 12; // -> 8, subtracts the right number from the left.
+3 * 4; // -> 12, multiplies two numbers together.
+10 / 5; // -> 2, divides the left number by the right.
+8 % 3; /// -> 2, as three goes into 8 twice, leaving 2 left over.
+```
+
+More about [Arithmetic_Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#.25_.28Modulus.29)
diff --git a/legacy/javascript/javascript1/week1/assets/ASmarterWaytoLearnJavaScript.pdf b/legacy/javascript/javascript1/week1/assets/ASmarterWaytoLearnJavaScript.pdf
new file mode 100644
index 00000000..d5f3554f
Binary files /dev/null and b/legacy/javascript/javascript1/week1/assets/ASmarterWaytoLearnJavaScript.pdf differ
diff --git a/legacy/javascript/javascript1/week1/assets/box.png b/legacy/javascript/javascript1/week1/assets/box.png
new file mode 100644
index 00000000..872c8022
Binary files /dev/null and b/legacy/javascript/javascript1/week1/assets/box.png differ
diff --git a/legacy/javascript/javascript1/week1/assets/create-new-pull-request.png b/legacy/javascript/javascript1/week1/assets/create-new-pull-request.png
new file mode 100644
index 00000000..8531ae73
Binary files /dev/null and b/legacy/javascript/javascript1/week1/assets/create-new-pull-request.png differ
diff --git a/legacy/javascript/javascript1/week1/assets/merge-pull-request.png b/legacy/javascript/javascript1/week1/assets/merge-pull-request.png
new file mode 100644
index 00000000..a94d07fc
Binary files /dev/null and b/legacy/javascript/javascript1/week1/assets/merge-pull-request.png differ
diff --git a/legacy/javascript/javascript1/week1/assets/open-a-pull-request.png b/legacy/javascript/javascript1/week1/assets/open-a-pull-request.png
new file mode 100644
index 00000000..29cce5df
Binary files /dev/null and b/legacy/javascript/javascript1/week1/assets/open-a-pull-request.png differ
diff --git a/legacy/javascript/javascript1/week1/assets/pull-request-comment.png b/legacy/javascript/javascript1/week1/assets/pull-request-comment.png
new file mode 100644
index 00000000..b94414d0
Binary files /dev/null and b/legacy/javascript/javascript1/week1/assets/pull-request-comment.png differ
diff --git a/legacy/javascript/javascript1/week1/assets/pull-request-done.png b/legacy/javascript/javascript1/week1/assets/pull-request-done.png
new file mode 100644
index 00000000..f00c34cb
Binary files /dev/null and b/legacy/javascript/javascript1/week1/assets/pull-request-done.png differ
diff --git a/legacy/javascript/javascript1/week1/homework.md b/legacy/javascript/javascript1/week1/homework.md
new file mode 100644
index 00000000..e2417592
--- /dev/null
+++ b/legacy/javascript/javascript1/week1/homework.md
@@ -0,0 +1,191 @@
+# Homework
+
+
+
+## Step 1: Before you start with the homework
+
+1. Watch: [What is programming?](https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro). Just watch the 2 min video, you do not have to do the entire JavaScript course (It could be useful later on though).
+
+### Get git ready to work on homework
+
+Using the `your hyf-homework` repo. In the terminal run `git status`
+
+If there are changes that have not been committed, figure out what to do with those changes
+
+- Should they be committed to another branch?
+- Should they be committed to `main`?
+- Should they be discarded?
+
+When you have figured out what to do with the changes and fixed those. Write `git status` again. If it says `nothing to commit, working tree clean`. Then you are ready to create the branch for this weeks homework.
+
+#### Creating the branch
+
+Using the `your hyf-homework` repo write this command
+
+`git checkout main` - You are now on the `main` branch
+
+`git checkout -b javascript-javascript1-week1`
+
+This will create and checkout the branch so you are ready make commits to it
+
+[This video](https://www.youtube.com/watch?v=JcT4wmK1VcA) can help. On slack use the #git-support channel to ask questions about git
+
+## Why should I do this homework?
+
+> One must be able to crawl before understanding the true nature of Javascript - Albert Einstein
+
+This homework will get you started developing in javascript. What you learn the first 3 modules of javascript will be building blocks for creating great javascript web applications.
+
+If you struggle to do this weeks homework there are a couple of things to do:
+
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=uhTRC33cpp0), [part 2](https://www.youtube.com/watch?v=mVgyjr9MV5U)
+- Read up on javascript basics [here](readme.md#variables)
+
+## Step 2: Javascript warm up part one
+
+Lets get started with some warm up exercises: On freeCodeCamp.com do the [Basic JavaScript](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript) exercises up and until the **"Manipulate Arrays With push()"** exercise (there are some topics we did not cover but you can do it).
+
+Please add your freecodecamp username as answer for this exercise!
+
+You have finished the warmup exercises, well done!
+
+## Step 3: Smart-ease - We help where we can
+
+Enough warm up, lets get to the real problems! We will assume a real world business case where you (the developer) needs to help a business that is starting up (a startup) with solving some of their problems related to JavaScript! Here we go:
+
+---
+
+Lets imagine that we have just started a cool new tech startup called **Smart-ease**. And lets imagine we even have this cool website url: `smart-ease.io` Now we are in business!
+
+At **Smart-ease** we focus on solving real world problems. We venture into the world to help people, and by helping people, we create a sustainable business.
+
+Cool now lets venture into the world and see which problems we can solve with some of these cool products that Smart-ease will develop with your help:
+
+
+
+### Age-ify (A future age calculator)
+
+> You are talking to a friend who suddently looks at you and asks: "How old will you be in 2045?" Hmm you remember the year you were born and try to do some calculation: Born in 1987 + 3 that's 1990. 90 - 40 is 50 + 5 thats 58. I will be 58! Wow that was painful! Let's fix that by making some code that automatically does this!
+
+Create two variables called `yearOfBirth` and `yearFuture`. Assign these your birth year and a future year.
+What type will these two variables be? Using `yearOfBirth` and `yearFuture` calculate the age and store that in a variable called `age`.
+
+Log out this string: "You will be 40 years old in 2027". With 40 being the result of the `age` variable and 2027 being the `yearFuture` variable. (Hint use string concatenation)
+
+### Goodboy-Oldboy (A dog age calculator)
+
+> The same friend (who by the way loves dogs) asks how old his dog will be in 2045. Hmm you think, lets make this into a product as well!
+> Dogs age can either be measured in dog years or in human years, this we want to take into consideration!
+
+Like before lets create three variables but this time we call them `dogYearOfBirth`, `dogYearFuture` and `dogYear`. We add an extra variable called `shouldShowResultInDogYears`. If it is `true` we should show the result in dog years, if it is false we should show it in human years. What do we call this type of variable? Now dependent on `shouldShowResultInDogYears` log this string out:
+"Your dog will be 10 human years old in 2027"
+or
+"Your dog will be 70 dog years old in 2027"
+
+### Housey pricey (A house price estimator)
+
+> Two of your friends are considering buying a house, but cannot figure out what the right price should be. Your friends know the width, the height and the depth of the house and the garden size. Lets help them figure out if they paid too much:
+
+We have made our own formula for calculating the price of a house. This formula is VERY simplified and not at all close to the real calculation which can get [quite complicated](https://www.kaggle.com/erick5/predicting-house-prices-with-machine-learning):
+
+```js
+housePrice = volumeInMeters * 2.5 * 1000 + gardenSizeInM2 * 300;
+```
+
+Your friend Peter is considering a house that is 8m wide, 10m deep and 10m high. The garden size is 100m2. The house costs 2.500.000.
+Your friend Julia is considering a house that is 5m wide, 11m deep and 8m high. The garden size is 70m2. This house costs 1.000.000.
+
+Figure out if Peter and Julia are paying too much or too little using Javascript and the formula specified above.
+
+### Ez Namey (Startup name generator) _Optional_
+
+> At a meetup you overhear a conversation between two developers. It went something like this: "Man i wish picking a startup name was easier! You need to be creative, funny and interesting, its nearly impossible!" Another problem to solve, awesome!
+
+Lets help people who struggle finding a startup name by creating some code!
+
+Create two arrays called `firstWords`, `secondWords`. The arrays should have 10 elements containing strings of possible startup names. Some examples could be: "Easy", "Awesome", "Corporate".
+
+Create a variable called `startupName` that will contain the created startup name.
+
+Using a random index (you choose) of the arrays and concatenation of strings, create and log the new startup name and the number of characters in it.
+An example could be: "The startup: "Easy Corporation" contains 16 characters"
+
+Hint: you can use this code to generate a random number from 0-9, if you dont want to specify the indexes yourself.
+
+```js
+const randomNumber = Math.floor(Math.random() * 10);
+```
+
+---
+
+4 projects from one startup, thats incredible! Lets hope one or more of these projects actually becomes popular!
+
+To be continued...
+
+## Step 4: Hand in Homework
+
+We are going to be handing in homework using something called a **pull request (now PR)**. The reason for that is that **most companies use PR's** when they work with code. So you might aswell get used to it!
+
+Watch [this video](https://www.youtube.com/watch?v=JcT4wmK1VcA) to go through the same process as is documented here
+
+**Okay, lets go!**
+
+---
+
+Use the `hyf-homework` repo and find the folder on your computer that contains this repo
+
+---
+
+Using the branch called `javascript-javascript1-week1`
+
+---
+
+To add your files go to the folder `javascript/javascript1/week1`. Here you **add all the files relevant for the homework**. Remember to **seperate the code into meaningful commits**. You can now push the commits
+
+```shell
+git add
+git commit -m "Implemented task 1"
+git push origin javascript-javascript1-week1
+```
+
+---
+
+Go into the `your hyf-homework` repo on click on the `Pull requests` tab and then click the `New pull request` button
+
+
+
+Where it says compare, choose the `javascript-javascript1-week1` branch. Just keep the PR title as it is (javascript-javascript1-week1). You can leave a comment if you want. Now click `Create pull request`.
+
+
+
+You have now handed in homework, but you are not quite done yet
+
+---
+
+A mentor will look through your code and give you some feedback.
+
+
+
+Based on the feedback, implement improvements to the homework. Then add, commit and push these improvements.
+
+```shell
+git add
+git commit -m "Implemented feedback"
+git push origin javascript-javascript1-week1
+```
+
+---
+
+Now you can merge the changes. Congrats, you are completely done with the homework 🎉🎉🎉
+
+
+
+Now it should look like this:
+
+
+
+When merged you can **share the github link** to your classes slack channel if you are **proud of what you did** 💪
+
+---
+
+And that's it, you are done 🎉
diff --git a/legacy/javascript/javascript1/week1/lesson-plan.md b/legacy/javascript/javascript1/week1/lesson-plan.md
new file mode 100644
index 00000000..db7d6594
--- /dev/null
+++ b/legacy/javascript/javascript1/week1/lesson-plan.md
@@ -0,0 +1,262 @@
+# Lesson plan
+
+- Focus on having lots of in class exercises.
+- DONT teach everything, let the students investigate topics on their own aswell!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below!
+
+To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+---
+
+- 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` - Students investigate `boolean` and explain for fellow students
+ - [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) `%` - Students 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:
+
+## 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];
+```
+
+### 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 at statement to the console that will show the pizza man the entire pizza order in a language he understands, eg. like this:
+ `New pizza order: . The price of the pizza is: `
+
+#### Part 2
+
+Now we will modify the program so that you can order multiple pizzas and also decide if the pizzas should be family size
+
+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 you would to order a family size pizza.
+
+3. Now write a formula to calculate the total price of your pizza order, and save it in a variable called totalPrice (if the pizza is family size the prize of the pizza is doubled.
+
+4. Modify the log statement for the pizza man so it includes wether or not the pizza is family size, and now show the total price of the order
+ `New pizza order: . Total cost for the order is: `
+
+5. Try to change the price of the pizza and if the pizza should be family size, and then check if the total price is calculated correctly.
diff --git a/legacy/javascript/javascript1/week1/preparation.md b/legacy/javascript/javascript1/week1/preparation.md
new file mode 100644
index 00000000..936382e1
--- /dev/null
+++ b/legacy/javascript/javascript1/week1/preparation.md
@@ -0,0 +1,17 @@
+# Preparation
+
+
+
+- [ ] [Read this](https://exploringjs.com/es5/ch01.html) up to and including the _Strings_ chapter (it’s okay if you don’t understand all of it yet, we will cover these concepts in class as well. Do make sure to write or document the questions you have so we can discuss them in class) (15 min)
+
+- [ ] [JavaScript Introduction at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction) (10 min)
+
+_Please go through the material and come to class prepared!_
+
+## Flipped classroom videos
+
+- [Javascript - data type](https://www.youtube.com/watch?v=tQByWsZeYrM)
+- [Javascript - variables](https://www.youtube.com/watch?v=sfqt3ZotOhw)
+- [Javascript - make variable names descriptive](https://www.youtube.com/watch?v=0bgIUXj5BF8)
+- [Javascript - the subtle difference between let and var](https://www.youtube.com/watch?v=9yFx81K9b4k)
+- [Javascript - operators and errors](https://www.youtube.com/watch?v=wVs6rzTReD8)
diff --git a/legacy/javascript/javascript1/week2/README.md b/legacy/javascript/javascript1/week2/README.md
new file mode 100644
index 00000000..95b6ac99
--- /dev/null
+++ b/legacy/javascript/javascript1/week2/README.md
@@ -0,0 +1,182 @@
+# JavaScript 1, Week 2
+
+## Learning goals
+
+- [ ] Conditions: if, elseif, else. Negated.
+- [ ] [Functions](#functions): [Calling](#calling-a-function-on-something), defining, [parameters, arguments](#parameters-and-arguments)
+- [ ] Global vs local scope
+- [ ] For loop
+
+Teaching note. Start off explaining functions with how to use a function fx explain why the Math.random function is smart, or Math.max.
+
+## Relevant links
+
+- [Preparation](preparation.md)
+- [Homework](homework.md)
+- [Lesson plan](lesson-plan.md)
+
+### Recap Logical operators
+
+```js
+0 = false
+1 = true
+```
+
+#### AND `&&`
+
+| `&&` | 0 | 1 |
+| ---- | --- | --- |
+| 0 | 0 | 0 |
+| 1 | 0 | 1 |
+
+#### OR `||`
+
+| `\|\|` | 0 | 1 |
+| ------ | --- | --- |
+| 0 | 0 | 1 |
+| 1 | 1 | 1 |
+
+So you can say that false in combination with `&&` always returns false
+
+```js
+true && false; //-> false
+false && true; //-> false
+false || true; //-> true
+true || false; //-> true
+```
+
+### Typeof
+
+`typeof` always returns the data type in a string.
+
+So for example:
+
+```js
+let bar = 42;
+typeof bar; //-> 'number'
+typeof typeof bar; //-> 'string'
+```
+
+So the data type of what `typeof` returns is always a string, bar on the other hand is still a number.
+
+## Functions
+
+A function is a reusable piece of code. It is used to hide away abstraction! Functions are _very_ important in JavaScript, to the extent that some people call JavaScript a "function-oriented" language.
+
+### Two sides of a function
+
+There are two sides to using function, using a function (calling a function) and creating a function.
+
+#### Function usage
+
+When you call a function some javascript code is run. Here's a simple example:
+
+```js
+const randomNumber = Math.random();
+console.log(randomNumber); // logs out some number between 0 and 1
+```
+
+Here `Math.random` is a function. To activate the function we call it using paranthesis `()`. When calling it we get a randomNumber! We now dont need to think about all the code it takes to create a random number in javascript, we simply call the function and get a random number. Code has been abstracted away for us!
+
+Some functions is called with arguments fx:
+
+```js
+const maxNumber = Math.max(3, 5); // 3 and 5 are arguments
+console.log(maxNumber); // logs out 5
+```
+
+Arguments are used to control the code inside a function.
+
+#### Function creation
+
+When we create a function we use the function keyword:
+
+```js
+let todoItem = "Buy Groceries";
+console.log(todoItem);
+
+// Create the function
+function checkItem() {
+ todoItem = todoItem + " - done";
+}
+
+// use the function by calling it using ()
+// If we dont call the function that code will NEVER EVER IN A MILLION YEARS run!
+checkItem();
+console.log(todoItem);
+```
+
+#### Parameters and arguments
+
+```js
+// a and b are called parameters. This function has two parameters
+function sum(a, b) {
+ return a + b;
+}
+```
+
+```js
+// 5 and 10 are called arguments now when called in a function
+// Arguments are "passed" to the function: "we pass `4` and `5` to the function sum
+const returnedSum = sum(5, 10);
+console.log(returnedSum); // logs 15
+```
+
+So remember the difference between the word "parameter" and "argument". Many people confuse them, and that's not a big problem, but understanding the difference is always nice:
+
+- A parameter is the name you want to give to the variable that is available inside of the function.
+- An argument is the actual value you want to assign to the parameters when you call the function.
+
+Parameters acts as a placeholder for the arguments. The value of the parameter will get substituted with the value of the argument.
+
+```js
+function multiply(a, b) {
+ // the value of a will be substituted with the value of 10!
+ // the value of b will be substituted with the value of 4!
+ console.log(a, b); // logs out 10 4
+ return a * b;
+}
+
+multiply(10 * 4);
+```
+
+##### Return value
+
+Sometimes we want to get a value back when calling a function. Fx in the sum example. We want to call the function and get the sum back!
+
+```js
+function sum(a, b) {
+ return a + b;
+}
+const returnedSum = sum(5, 10); // the variable returnedSum captures the return value from calling the function!
+console.log(returnedSum); // logs 15
+
+// If we dont return, we cannot capture the returned value!
+function sumNoReturn(a, b) {
+ a + b; // no return!
+}
+const returnedSum = sum(5, 10);
+console.log(returnedSum); // logs undefined
+```
+
+If we dont return anything from the function, it will automatically return `undefined`. This is the functions way of saying that nothing was returned.
+
+### Calling a function on something
+
+In JavaScript, you can call functions _on_ something. By this, we mean that you use the dot to call the function. For instance, when we say "call method `trim` on string `s`", we mean:
+
+```js
+let s = " this is a string ";
+s.trim(); // -> "this is a string"
+```
+
+However, there are functions that you don't call on anything:
+
+```js
+function sum(a, b) {
+ return a + b;
+}
+sum(4, 5); // -> 9
+```
+
+Here, you call the function `sum` on nothing.
diff --git a/legacy/javascript/javascript1/week2/homework.md b/legacy/javascript/javascript1/week2/homework.md
new file mode 100644
index 00000000..76dce13e
--- /dev/null
+++ b/legacy/javascript/javascript1/week2/homework.md
@@ -0,0 +1,228 @@
+# Homework
+
+## Get git ready to work on homework
+
+Using the `hyf-homework` repo. In the terminal run `git status`
+
+If there are changes that have not been committed, figure out what to do with those changes
+
+- Should they be committed to another branch?
+- Should they be committed to `main`?
+- Should they be discarded?
+
+When you have figured out what to do with the changes and fixed those. Write `git status` again. If it says `nothing to commit, working tree clean`. Then you are ready to create the branch for this weeks homework.
+
+### Creating the branch
+
+Using the `hyf-homework` repo write this command
+
+`git checkout main` - You are now on the `main` branch
+
+`git checkout -b javascript-javascript1-week2`
+
+This will create and checkout the branch so you are ready make commits to it
+
+[This video](https://www.youtube.com/watch?v=JcT4wmK1VcA) can help. On slack use the #git-support channel to ask questions about git
+
+## Why should I even do this homework?
+
+Functions and conditions are some of the basic building blocks of javascript. Functions ensure that we dont repeat ourselves when writing code. Conditions ensures that we can handle different cases when programming.
+
+If you struggle to do this weeks homework there are a couple of things to do:
+
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=P9BQLgRm7zs), [part 2](https://www.youtube.com/watch?v=qFI5QnjN2GQ)
+- Read up on javascript basics [here](readme.md#recap-logical-operators)
+
+## Javascript warmup
+
+Just like last homework, lets **warmup our brain**!
+
+Do these freecodecamp challenges. We know this seems like a lot, but the tasks are not so big, so hang in there! If you get stuck on one of the tasks, just go to the next and then return to the difficult task later on.
+
+- [ ] [Passing values to functions with arguments](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments/)
+- [ ] [Return a value from a function with return](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return/)
+- [ ] [Assignment with a returned value](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value/)
+- [ ] [Local scope and functions](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions/)
+- [ ] [Global vs local scope in functions](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/global-vs--local-scope-in-functions/)
+- [ ] [Introducing else if statements](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements/)
+- [ ] [Logical order in if else statements](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements/)
+- [ ] [Iterate with javascript for loops](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops/)
+- [ ] [Iterate through an array with a for loop](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop/)
+
+Please add your freecodecamp username as answer for this exercise!
+
+## Step 3: Smart-ease - Goes Global!
+
+Following the massive success of Smart-ease's first couple of products things have been quite hectic at Smart-ease's shared office space. The phone is constantly ringing from journalists wanting to interview the genius behind the success and the greatest developers want to work for you. [Wired](https://www.wired.com) wrote an article with the headline "Smart-ease as good as Smarties"
+
+BUT people are asking: What will be the next product that truly defines Smart-ease as the startup of the century?
+
+### Flight booking fullname function
+
+Even for a startup as successful as Smart-ease there needs to be money in the bank. A customer from a flight booking website has asked for our help creating a specific part of their application:
+
+When a user books a flight they **write their firstname and surname**, but when the ticket is printed a **fullname should be displayed**. It is our responsibility to create that.
+
+Create a function called `getFullname` that returns a fullname.
+It should have two parameters: `firstname` and `surname`.
+
+```js
+getFullname("Benjamin", "Hughes"); // returns "Benjamin Hughes"
+```
+
+Now try to create two variables `fullname1` and `fullname2` these two variables should be assigned to calling the `getFullname` function.
+
+Log out the two fullname variables.
+
+#### Formal fullname
+
+On the flight website the user has the possibility to **check a checkbox** that **indicates** if the user wants to be **adressed formally**. Lets also change `getFullname` to include support for formal name.
+
+Create an extra parameter `useFormalName` that is a boolean. If it is true the function should add a `Lord` in front of the name.
+
+```js
+getFullname("Benjamin", "Hughes", true); // returns "Lord Benjamin Hughes"`
+getFullname("Benjamin", "Hughes", false); // returns "Benjamin Hughes"
+```
+
+What do we do if `useFormalName` is not given as an argument?
+
+Remember to consider someone calling the function with an empty string as firstname and lastname.
+
+Try out your code by pasting your `getFullname` function in the javascript part of this codepen:
+
+But what if the person is a woman? Describe how you would fix the `getFullname` so it also works for women
+
+### Event application
+
+Another customer has contacted us. He works for a secret company that rimes with foogle. The customer works on their calendar application. They need some functionality to help with writing what weekday an event is held.
+
+You specify how many days from today an event is being held. The function then figures out what weekday the event is being held. Here is an example:
+
+Today is Sunday and the event is in 5 days. Therefore the event will be held on a friday.
+
+```js
+// With todays weekday a tuesday
+console.log(getEventWeekday(9)); // Logs out "Thursday"
+
+// With todays weekday a Friday
+console.log(getEventWeekday(2)); // Logs out "Sunday"
+```
+
+You should get the today's day from the system.
+
+Hint: use remainder operator, array indexes and investigate `new Date` in js.
+
+### Weather wear
+
+Create a function (that you have to name) that has temperature as parameter. Based on the temperature it should return a string with what the user should wear. You decide what the user should wear based on the temperature.
+
+An example is:
+
+```js
+const clothesToWear = youCreateThisFunctionName(18);
+console.log(clothesToWear); // Logs out: "shorts and a t-shirt"
+```
+
+
+
+### Student manager
+
+A coding school have contacted us to make some functionality for managing their classes. We will create functionality for adding students to a class.
+
+For this exercise you need to figure out how `Array.push` works. Learn about the concept by researching about it.
+
+Copy the following code into your homework js file
+
+```js
+const class07Students = [];
+function addStudentToClass(studentName) {
+ // You write code here
+}
+
+function getNumberOfStudents() {
+ // You write code here
+}
+```
+
+#### addStudentToClass function
+
+The `addStudentToClass` should add the `studentName` to the `class07Students` array.
+
+But there are some other requirements:
+
+- There can be only 6 students in a class. If more students are tried to be added, log out the following: "Cannot add more students to class 07".
+- The same person cannot be added to the class. If the same person is added to the class, log out the following: 'Student Benjamin is already in the class' where Benjamin is substituted for the `studentName`.
+- We are very fond of our Queen in Denmark, so if the Queen is added to the class she should always get a space. Even if the class has been filled out.
+- You cannot add an empty string to a class
+
+#### getNumberOfStudents function
+
+`getNumberOfStudents` should simply return the number of students in the class.
+
+#### Now lets try and use the functions!
+
+Try out all the cases:
+
+- Add some students to the class.
+- Add more students than there is space for
+- Add a student that is already in the class
+- Add the Queen to a full class
+- Call the `getNumberOfStudents` to log out the number of students.
+
+To see your code applied on a webapp, go here: and paste your javascript code.
+
+### Candy helper _optional_
+
+> We are at the candystore. We have taken some shovels of the **caramel-strawberry-cola-lemon-gravy winegums**, a few of the **banana chocolate diesel-motors** and a handful of the **salmon-potato covered toffee encrusted pizzas**. But what is all this worth? And can you even afford it?
+
+Let's solve this problem with some functions.
+
+#### addCandy function
+
+Create a function called `addCandy`. It has two parameters:
+
+- `candyType` - specifies the candy type. Could be 'sweet, chocolate, toffee or chewing-gum'
+- `weight` - specifies the weigth of the candy in grams
+
+The function should **add the price of the candy** to an array called `boughtCandyPrices` using [push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push)
+
+Here is an example of the usage:
+
+```js
+addCandy("sweet", 20); // Adds the price of 20 grams of sweets to the array boughtCandyPrices
+```
+
+Candy table prices
+
+| Candy type | Price per gram |
+| ----------- | -------------- |
+| Sweet | 0.5 |
+| Chocolate | 0.7 |
+| Toffee | 1.1 |
+| Chewing-gum | 0.03 |
+
+#### Can i buy more?
+
+Now create a variable called `amountToSpend` and assign it to `Math.random() * 100`. You can read about `Math.random` [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
+
+Create a new function called `canBuyMoreCandy`. This function returns a boolean indicating if the user can buy more candy using the `boughtCandy` array.
+
+Try use the function by adding some pieces of candy and checking if you can buy more. If the user can buy more candy the `console.log` the following: "You can buy more, so please do!". If the user cant buy more `console.log` the following: "Enough candy for you!"
+
+Hint: Use a for loop to calculate the total price of the candy pieces.
+
+_Optional_ Use a [while loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while) instead of a for loop.
+
+## Step 4: Hand in Homework
+
+Watch [this video](https://www.youtube.com/watch?v=JcT4wmK1VcA) for a more detailed go-through of how to hand in homework!
+
+- Use the branch called `javascript-javascript1-week2`
+- Add all your changes to this branch in the `javascript-javascript1-week2` folder.
+- Create a pull request using the `javascript-javascript1-week2` branch and give your PR the same name `javascript-javascript1-week2`
+- Wait for mentor feedback
+- Implement feedback, `add`, `commit` and `push` the changes
+- Now you can merge the changes into `main`
+- When merged you can **share the github link** to your classes slack channel if you are **proud of what you did** 💪
+- Now celebrate 🎉🎉🎉
diff --git a/legacy/javascript/javascript1/week2/lesson-plan.md b/legacy/javascript/javascript1/week2/lesson-plan.md
new file mode 100644
index 00000000..bf18fe3f
--- /dev/null
+++ b/legacy/javascript/javascript1/week2/lesson-plan.md
@@ -0,0 +1,322 @@
+# Lesson plan
+
+- Focus on having lots of in class exercises.
+- DONT teach everything, let the students investigate topics on their own aswell!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below!
+
+To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+---
+
+- Conditions
+ - [Code inspiration](#if-sentences)
+ - [Exercises](#if-sentences-1)
+- Functions ()
+ - General description - A function is a reusable piece of code.
+ - Function usage
+ - Arguments
+ - Function creation
+ - Parameters - Acts as placeholders
+ - Parameters vs arguments
+ - Return value - Variable can capture return value.
+ - Calling a function on something `Math.random` - calling the function random on Math
+ - [Code inspiration](#functions)
+ - [Code inspiration 2](#if-and-function)
+ - [Exercise](#function)
+- Global vs local scope
+ - Lexical scope - inner functions contain the scope of parent functions even if the parent function has returned.
+ - [Code inspiration](#scope)
+ - [Exercise](#exercise-scope)
+- For loop
+ - Try start off with giving the students the [Exercise string logger](#for-loop-1) and not explain for loop. Let them figure it out through the exercise (problem based learning)
+ - [Code inspiration](#for-loop)
+ - [Exercise string logger](#for-loop-1)
+ - [Exercise send emails](#send-emails)
+
+The students really struggle with the **return** value. What it means, how it is captured. What happens when nothing is returned etc. Try really hammering in this concept with lots of simple examples and exercises! Fx if a function is called get something. That means that something is returned from that function.
+
+Zoey Zou made a nice Notion lesson plan here:
+
+## Flipped classroom videos
+
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript1/week2/preparation.md#flipped-classroom-videos)
+
+## Code inspiration
+
+### If sentences
+
+```js
+const age = 14;
+
+// if-else statement, `age > 18` is called an expression
+// `age > 18` is called a boolean expression
+if (age > 18) {
+ console.log("Allowed");
+} else {
+ console.log("Denied");
+}
+
+if (age < 18) console.log("You're not old enough");
+
+// Boolean operators
+// && is called AND
+// || is called OR
+// ! is called NOT
+
+// Chained if statement
+if (age > 0 && age < 13) {
+ console.log("You are a child");
+} else if (age >= 13 && age < 20) {
+ console.log("You are a teenager");
+} else if (age <= 0) {
+ console.log("You are an infant");
+} else {
+ console.log("You are an adult");
+}
+
+if (age < 18 || age === 18) {
+ // same as saying `age <= 18`
+ console.log("You are almost there");
+}
+
+// New example
+const userRole = "guest";
+const isAdmin = userRole === "admin";
+const isLoggedIn = userRole !== "guest";
+
+if (isAdmin) {
+ console.log("You are in charge");
+} else if (isLoggedIn) {
+ console.log("Welcome user");
+} else {
+ console.log("Welcome guest");
+}
+```
+
+### Functions
+
+```js
+// usage
+const randomNumber = Math.random();
+console.log(randomNumber); // logs out some number between 0 and 1
+
+const maxNumber = Math.max(3, 5); // 3 and 5 are arguments
+console.log(maxNumber); // logs out 5
+
+// Creation
+let todoItem = "Buy Groceries";
+console.log(todoItem);
+
+// Create the function
+function checkItem() {
+ todoItem = todoItem + " - done";
+}
+
+// use the function by calling it using ()
+// If we dont call the function that code will NEVER EVER IN A MILLION YEARS run!
+checkItem();
+console.log(todoItem);
+
+// a and b are called parameters. This function has two parameters
+function sum(a, b) {
+ return a + b;
+}
+
+// 5 and 10 are called arguments now when called in a function
+// Arguments are "passed" to the function: "we pass `4` and `5` to the function sum
+const returnedSum = sum(5, 10);
+console.log(returnedSum); // logs 15
+
+function multiply(a, b) {
+ // the value of a will be substituted with the value of 10!
+ // the value of b will be substituted with the value of 4!
+ console.log(a, b); // logs out 10 4
+ return a * b;
+}
+
+multiply(10, 4);
+
+// Return value
+function sum(a, b) {
+ return a + b;
+}
+const returnedSum = sum(5, 10); // the variable returnedSum captures the return value from calling the function!
+console.log(returnedSum); // logs 15
+
+// If we dont return, we cannot capture the returned value!
+function sumNoReturn(a, b) {
+ a + b; // no return!
+}
+const returnedSum = sum(5, 10);
+console.log(returnedSum); // logs undefined
+
+// Calling a method on something
+let s = " this is a string ";
+// calling a function (trim) on the string s
+s.trim(); // -> "this is a string"
+```
+
+### If and function
+
+```js
+function isAuthenticated(userRole) {
+ // userRole here is different from `var userRole`
+ const isAdmin = userRole === "admin";
+ const isLoggedIn = userRole !== "guest";
+
+ if (isAdmin) {
+ return true; // if this is run, all other code after is ignored inside the function
+ } else if (isLoggedIn) {
+ return true;
+ }
+
+ return false;
+}
+
+console.log(userRole);
+console.log(isAuthenticated(userRole));
+console.log(isAuthenticated("admin"));
+```
+
+### Scope
+
+```js
+// Global scope
+const globalScopeVariable = "globalScopeVariable";
+function outerFunction() {
+ // function scope A
+ console.log(globalScopeVariable);
+ const outerFunctionScope = "outerFunctionScope";
+
+ function innerFunction() {
+ // Function scope B
+ console.log(globalScopeVariable);
+ console.log(outerFunctionScope);
+
+ const innerFunctionScope = "innerFunctionScope";
+ }
+
+ console.log(innerFunctionScope);
+
+ innerFunction();
+}
+
+outerFunction();
+
+if (true) {
+ const blockScope = "blockScope";
+}
+
+console.log(blockScope);
+```
+
+### For loop
+
+```js
+function spam(number) {
+ let repeated = ""; // Define the simplest case
+
+ // Think about the condition. How many times do we want to repeat
+ for (let i = 0; i < number; i++) {
+ repeated = repeated + "hue"; // What is our update rule
+ }
+
+ return repeated; // Return in the end
+}
+
+console.log(spam(1));
+
+// Test cases. I always do "empty" (here zero), once, and then a bunch of times
+console.log(spam(0) === "");
+console.log(spam(1) === "hue");
+console.log(spam(6) === "huehuehuehuehuehue");
+console.log(spam(14) === "huehuehuehuehuehuehuehuehuehuehuehuehuehue");
+```
+
+## Exercises
+
+### `if` sentences
+
+Create an `if` sentence that will give a user a message based on his bank account balance. Use the `balance` variable and change that.
+
+- If a user has 0 or less balance log out 'Please deposit some money!'
+- If a user has more than 0 and at most 1000 log out 'Your balance is looking okay'
+- If a user has more than 1000 and at most 3000 log out 'Your balance is looking good'
+- If a user has more than 3000 and at most 10000 log out 'Your balance is fantastic'
+- If a user has more than 10000 log out 'Your balance is AMAZING!'
+
+```js
+const balance = 1000;
+```
+
+### Function
+
+Create a function called `getCircleArea`. It should have the `radius` of the circle as parameter and return the circle area. What happens if we dont return anything in the function?
+
+Create a function called `celciusToFahreneit` it should have a parameter called `celcius`. It should return the temperature in fahrenheit.
+
+Try call the function and check with google if the function returns the right value.
+
+### Exercise: Scope
+
+With pen and paper write what is logged out.
+
+```js
+const global = "global";
+function scopeTest() {
+ console.log(functionScope);
+ console.log(global);
+ const functionScope = "functionScope";
+
+ function tester() {
+ console.log(global);
+
+ const testerVariable = "testerVariable";
+ }
+
+ tester();
+ console.log(testerVariable);
+}
+
+scopeTest();
+```
+
+### `for` loop
+
+#### Simple `for` loop
+
+Create a for loop that logs out the numbers from 74 - 98
+
+#### `for` loop in a function
+
+Create a function that has two parameters: `stringToLog` and `numberOfTimesToLog`
+
+When calling the function it should log out the `stringToLog` the amount of times specified in `numberOfTimesToLog`. Use a for loop.
+
+```js
+logString("hello", 3);
+// hello
+// hello
+// hello
+```
+
+### Send emails
+
+Imagine we work at a company. Peter from the HR department wants us to send out a couple of emails to some recepients. The only problem is that he sent us the email in a weird format: `benjamin@gmail.com|peter@gmail.com|hans@gmail.com|ahmad@gmail.com|sana@gmail.com|virgeen@gmail.com|mohammed@gmail.com`
+
+Use the `sendEmailTo` function to send an email to all the recepients that we got from Peter.
+
+_Hint_ use the `.split` method and look up `iterating an array js for loop` on google.
+
+```js
+// This function emulates sending emails to receipients
+function sendEmailTo(recepient) {
+ // But really it only logs out a string
+ console.log("email sent to " + recepient);
+}
+```
diff --git a/legacy/javascript/javascript1/week2/preparation.md b/legacy/javascript/javascript1/week2/preparation.md
new file mode 100644
index 00000000..2cc91fcc
--- /dev/null
+++ b/legacy/javascript/javascript1/week2/preparation.md
@@ -0,0 +1,16 @@
+# Preparation for the second lecture
+
+- [Functions](http://javascript.info/function-basics) (15 min)
+- [Conditions](http://javascript.info/ifelse) (10 min)
+- Read from [For loops](http://javascript.info/while-for#the-for-loop) to and with [for loops continue](http://javascript.info/while-for#continue) (10 min)
+
+
+
+_Please go through the material and come to class prepared!_
+
+## Flipped classroom videos
+
+- [Javascript conditions](https://www.loom.com/share/6affdcf03b4f43ceac56424ff04975e5)
+- [Javascript loops](https://www.loom.com/share/4663f4fa5c784fff9ab67f2b91166c9b)
+- [Javascript function](https://www.loom.com/share/61fadf80906d481497e3b40273897d20)
+- [Javascript scope](https://www.loom.com/share/b8874230724040598860e8f059d8e369)
diff --git a/legacy/javascript/javascript1/week3/README.md b/legacy/javascript/javascript1/week3/README.md
new file mode 100644
index 00000000..c1cad0cd
--- /dev/null
+++ b/legacy/javascript/javascript1/week3/README.md
@@ -0,0 +1,77 @@
+# JavaScript 1, Week 3
+
+## Learning goals
+
+- [ ] Arrays continued: pop, push, shift, unshift, length, indexOf. No map, filter or reduce
+- [ ] [Objects](#objects): Access properties two ways, key value. Array of objects. Use real world examples (users, products, houselistings)
+- [ ] [Call stack](#call-stack)
+
+## Relevant links
+
+- [Preparation](preparation.md)
+- [Homework](homework.md)
+- [Lesson plan](lesson-plan.md)
+
+## Objects
+
+Variables that are objects also contain a list of things, but instead of them being in some specific order, they can be assigned to words, called "keys". Instead of "elements" the things that are inside objects are called "properties".
+
+```js
+let obj = { name: "John", age: 24 };
+```
+
+This object has two properties: `name` and `age`. The "value" of the property `name` is the string `'John'`. The "value" of the property `age` is the number `24`.
+
+When accessing object properties, you can use the dot-notation: `obj.name` or the bracket-notation: `obj["name"]`. Note that the latter looks a lot like the way to access array elements. However, here what's inside the bracket (called "key" for objects, instead of "index") must be a string.
+
+```js
+console.log(obj.name); // -> 'John'
+console.log(obj["name"]); // -> 'John'
+```
+
+Just like with arrays, you can also use a variable to access properties, as long as these variables are strings. In this case you cannot use the dot-notation!
+
+```js
+var ageKey = "age";
+console.log(obj[ageKey]); // -> 24
+```
+
+Remember that there is a very big difference between `obj[name]` and `obj["name"]`.
+
+> Note:
+>
+> Thinking back of arrays, the length of an array can be retrieved by `arr.length`. So as mentioned before, arrays are just like other JavaScript objects. You could even write `arr['length']` to access the `length` property of the array. JavaScript will look: is what we put between brackets a number? Then it is an index and we'll look up the correct array element. If it's a string, it's a key and we will look up the corresponding property.
+
+## Call stack
+
+When a function is called it is pushed to the call stack.
+When a function is finished the function gets shifted from the call stack.
+
+Visualize here:
+
+```js
+function pickUpKids() {
+ // pickUpKids function gets pushed to call stack WHEN CALLED!
+ console.log("Kids picked up");
+ // pickUpKids function now gets shifted from the call stack!
+}
+
+function buyCarrots() {}
+
+function buyVegetables() {
+ buyCarrots();
+}
+
+function getGroceries() {
+ // buyVegetables pushed to call stack
+ buyVegetables();
+ // buyVegetables shifted from call stack
+}
+
+function doWork() {}
+
+pickUpKids();
+// getGroceries pushed to call stack
+getGroceries();
+doWork();
+```
diff --git a/legacy/javascript/javascript1/week3/homework.md b/legacy/javascript/javascript1/week3/homework.md
new file mode 100644
index 00000000..676f5f1b
--- /dev/null
+++ b/legacy/javascript/javascript1/week3/homework.md
@@ -0,0 +1,257 @@
+# Homework
+
+## Why should I even do this homework?
+
+Array's has lots of helper functions, that is used all the time when developing js applications. It is super helpful to be able to **manipulate an array** like **removing elements** or **adding elements** at specific indexes. Another helpful function of arrays is to know **where a specific item is** in the array.
+
+Objects can be used for **representing data** and it can **help structure your code**. An object can fx represent a user that has a firstname, surname, profile picture and a list of friends. It is constantly used in javascript and **essential to learning the language**.
+
+If you struggle to do this weeks homework there are a couple of things to do:
+
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=idfGCqAItGI), [part 2](https://www.youtube.com/watch?v=cNRFY0RW5L8)
+- Read up on objects and arrays [here](readme.md#objects)
+
+## Javascript warmup
+
+Its warmup time!
+
+
+
+### Item array removal
+
+Remove the item in `names` that is equal to `nameToRemove`
+
+Copy the code below to your homework
+
+```js
+const names = [
+ "Peter",
+ "Ahmad",
+ "Yana",
+ "kristina",
+ "Rasmus",
+ "Samuel",
+ "katrine",
+ "Tala",
+];
+const nameToRemove = "Ahmad";
+
+// Write some code here
+
+// Code done
+
+console.log(names); // ['Peter', 'Yana', 'kristina', 'Rasmus', 'Samuel', 'katrine', 'Tala']
+```
+
+### When will we be there??
+
+Write a function where you speficy your speed in `km/h` and how far you have to go in `km`. The function has to return the time it will take to arrive at your destination. The time should be formatted like this: `3 hours and 34 minutes`.
+
+_Hint:_ For formatting your best friend is Google!
+
+```js
+const travelInformation = {
+ speed: 50,
+ destinationDistance: 432,
+};
+
+const travelTime = notThisFunctionName(travelInformation);
+console.log(travelTime); // 8 hours and 38 minutes
+```
+
+### Series duration of my life
+
+```js
+const seriesDurations = [
+ {
+ title: "Game of thrones",
+ days: 3,
+ hours: 1,
+ minutes: 0,
+ },
+ {
+ title: "Sopranos",
+ days: 3,
+ hours: 14,
+ minutes: 0,
+ },
+ {
+ title: "The Wire",
+ days: 2,
+ hours: 12,
+ minutes: 0,
+ },
+];
+```
+
+How much time of my life have i been watching series on tv? Lets find out! Calculate **how much time a tv series** have taken as a **percentage of an average lifespan** of 80 years.
+
+Firstly change the `seriesDurations` array found above to include your favorite series. Find the duration of a series here:
+
+Create a function that logs out the following text using the `seriesDurations` array:
+
+```text
+Game of thrones took 0.01% of my life
+Sopranos took 0.012% of my life
+The Wire took 0.007% of my life
+
+In total that is 0.2% of my life
+```
+
+Here is an example:
+
+```js
+const seriesDurations = [
+ {
+ title: "Game of thrones",
+ days: 3,
+ hours: 1,
+ minutes: 0,
+ },
+];
+
+function logOutSeriesText() {
+ // write code here
+}
+
+logOutSeriesText(); // logs out the text found above
+```
+
+## Smart-ease - Back to the basics!
+
+Smart-ease is going back to the basics. As always Smart-ease starts by helping people fix their problems. So lets venture out into the real world and see what we find:
+
+### NOnoN0nOYes (Note taking app)
+
+> You are sitting at a meeting. A person is presenting some interesting thought that you want to write down. You check your bag, but realise that you forgot to bring your notepad. Hmm you check the internet for an online solution. But you need to signup for them all, too bad... Maybe this could be a worthwhile problem so solve. Lets create a simple and easy to use notepad 📝
+
+#### Save a note
+
+The first thing we will create is the functionality to **save a note**:
+Create a variable called `notes` and assign it to an empty array.
+Create a function called `saveNote`. The `saveNote` has two parameters:
+
+- `content` parameter is a string.
+- `id` is a number.
+
+The `saveNote` function should push an object to the `notes` array with the keys `content` and `id`. Here is an example
+
+```js
+const notes = [];
+
+function saveNote(content, id) {
+ // write some code here
+}
+
+saveNote("Pick up groceries", 1);
+saveNote("Do laundry", 2);
+
+console.log(notes); // [{content: 'Pick up groceries', id: 1}, {content: 'Do laundry', id: 2}]
+```
+
+#### Get a note
+
+**Now a user can save a note**, but what if a user wants to **see a specific note**, but only remembers the id? Lets create that functionality for him:
+Create a function called `getNote`. The function has one parameter called `id`. When calling this function with an id it should return the relevant note object that corresponds to the id. If no id is specified or if the id is not a number, log out an error string.
+Hint: Use a for loop.
+
+```js
+function getNote(id) {
+ // your code here
+}
+
+const firstNote = getNote(1);
+console.log(firstNote); // {content: 'Pick up groceries', id: 1}
+```
+
+#### Log out notes
+
+Now a user can both save and get a note. What if the user just wants to **read all his notes?** Lets also create that functionality:
+Create a function `logOutNotesFormatted`. When calling the function it should log this string out for every note:
+"The note with id: 1, has the following note text: "some example note"."
+
+```js
+function logOutNotesFormatted() {
+ // your code here
+}
+
+logOutNotesFormatted(); // should log out the text below
+
+// The note with id: 1, has the following note text: Pick up groceries
+// The note with id: 2, has the following note text: Do laundry
+```
+
+#### Unique feature
+
+Suddenly you get this great idea for making the note app even better!
+
+Come up with a unique feature **you think would make this app better.** Write down the idea and see if you can implement it. If not dont worry :) If it is too hard to implement try and ask in the slack channel :)
+
+Try an **interactive version 💻 of your code** [here](https://codepen.io/dalsHughes/pen/poJGejX). Remember to insert your code in the top of the codepen :)
+
+### CactusIO-interactive (Smart phone usage app) _optional_
+
+> After a long day you come home to relax. The first thing you do is find your phone and start watching some youtube. Then check facebook, and then reading some news. Suddently a hour has passed. What happened to all that time you think to yourself. Maybe we can create some program to help with this problem! What if we could help users manage their smart phone usage?
+
+Its going to work like this: A user can add smartphone activities. Then he can see a status on how his smartphone usage is going.
+
+#### Adding an activity
+
+Lets create the first part of the functionality that is **adding activities.**
+
+Create a variable called `activities` that stores all activities of the day. What type of variable would you think would make sense?
+Create a function called `addActivity`. It should have three parameters: `date`, `activity` and `duration`. The `date` should be a string, the `activity` a string and the `duration` a number. To save the activity push an object that contains the date, the activity and the duration to the activities variable.
+
+Now a user can add an activity by writing:
+
+```js
+addActivity("23/7-18", "Youtube", 30);
+
+/*
+activities should now look like this
+[{
+ date: '23/7-18',
+ activity: 'Youtube',
+ duration: 30,
+}]
+*/
+```
+
+Just adding activities wont help the user very much, we need to **add some functionality** to show the user how **his smart phone usage is going.**
+
+#### Show my status
+
+Create a function called `showStatus`. This function should use the activities variable and return a string saying the following:
+"You have added 3 activities. They amount to 78 min. of usage"
+
+```js
+showStatus(activities); // will log out this "You have added 3 activities. They amount to 78 min. of usage"
+```
+
+Now what happens if we call `showStatus` and `activities` is empty? We need to take that into consideration: If `activities` is empty log out a string that says: "Add some activities before calling showStatus"
+
+#### Usage limit
+
+A user asks us if it is possible to **set a limit for his smartphone usage.** "Off course it is" we promptly reply!
+We need to store that limit somewhere, but where and what type should this be?
+So how should it work? When `showStatus` is called and the users usage is above the limit he set. Log out the following string: "You have reached your limit, no more smartphoning for you!"
+
+Try and add some activities and call `showStatus`
+
+#### Extra feature
+
+Come up with one feature you think would be helpful for this program.
+
+Optional
+
+- Lets improve the `addActivity`, so that we dont need to specify the date, but the function automatically figures out what the date is. Check out this link:
+- Improve the `showStatus` function by only showing the number of actitivies for that specific day.
+- Create a function for calculating the activity a user has spent the most time on.
+
+## Bonus homework
+
+The bonus homework for this week (for those of you want an extra challenge) do the following:
+
+-
+-
+-
diff --git a/legacy/javascript/javascript1/week3/lesson-plan.md b/legacy/javascript/javascript1/week3/lesson-plan.md
new file mode 100644
index 00000000..48574893
--- /dev/null
+++ b/legacy/javascript/javascript1/week3/lesson-plan.md
@@ -0,0 +1,225 @@
+# Lesson plan
+
+- Focus on having lots of in class exercises.
+- DONT teach everything, let the students investigate topics on their own aswell!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below!
+
+To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+---
+
+- Objects
+ - Access properties two ways: .keyname and [keyname]
+ - Key - value
+ - Array of objects
+ - Let the students explain iterating an array of objects
+ - Use real world examples (users, products, houselistings)
+ - [Code inspiration](#inspiration-objects)
+- Arrays continued
+ - `Pop`, `push`, `shift`, `unshift`
+ - Let students investigate `shift` and `unshift`
+ - The longest of the word pairs unshift, push makes the array longer!
+ - `includes` - Let the students investigate this
+ - Looping through an array
+ - No `forEach`, `map`, `filter` or `reduce`
+ - [Code inspiration](#inspiration-arrays)
+- [Codewar exercises](#codewar-exercises)
+- Call stack
+ - Used for figuring code flow in js! Where does my function go when it is done here.
+ -
+ - [Code inspiration](#inspiration-call-stack)
+ - [Exercise](#exercise-call-stack)
+
+Zoey Zou has created a nice lesson plan here:
+
+## Flipped classroom videos
+
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript1/week3/preparation.md#flipped-classroom-videos)
+
+## Code inspiration
+
+### Inspiration: Objects
+
+```js
+const user = {
+ name: "Emil",
+ age: 25,
+ role: "Teacher",
+ classes: ["Javascript 1", "Javascript 2"],
+ hobbies: {
+ favourite: "computers",
+ sports: "running to class",
+ },
+};
+
+console.log(user);
+
+// Add new property
+user.lastname = "Bay";
+
+console.log(user);
+
+delete user.lastname;
+
+console.log(user);
+
+console.log(user.hobbies.favourite);
+console.log({ favourite: "computers", sports: "running to class" }.favourite);
+
+function graduatedClass(student, className) {
+ if (student.classes.includes(className)) return "Error";
+
+ student.classes.push(className);
+}
+
+console.log(user);
+graduatedClass(user, "HTML");
+console.log(user);
+graduatedClass(user, "HTML");
+
+const newUser = {
+ name: "",
+ age: "",
+};
+
+var students = [];
+function addStudent(student) {
+ if (student.name == null && typeof student.name === "string") return "Error";
+ if (student.age == null) return "Error";
+
+ students.push(student);
+}
+
+addStudent({ name: "Rahim" });
+console.log(students);
+
+// ways to access properties
+
+user.name;
+user["name"];
+
+const prop = "name";
+user[prop];
+
+user["name"] = "Maria";
+user[0] = "Hello world";
+
+console.log(user);
+```
+
+### Inspiration: Arrays
+
+```js
+// one way to have multiple data about a student is with an array
+// for each piece of data
+const studentNames = ["Fowad", "Emil", "Zoey"];
+
+const studentAges = [32, 25, 28];
+
+console.log(studentNames);
+console.log(studentAges);
+
+// Another, more ergonomic way is with objects
+const students = [
+ { name: "Fowad", age: 32 },
+ { name: "Emil", age: 25, teacher: true },
+ { name: "Zoey", age: 28 },
+];
+
+console.log(students);
+// We can access properties with `.`
+console.log(students[0].name);
+
+for (let i = 0; i < students.length; i++) {
+ const currentStudent = students[i];
+ console.log(typeof currentStudent);
+ console.log(currentStudent.name);
+}
+
+students.push({ name: "Ahmad", age: 27 });
+
+// One object that we have seen before
+const Math = {
+ random: function () {
+ return 42;
+ },
+ round: function (x) {},
+};
+```
+
+### Inspiration: Call stack
+
+```js
+function a() {
+ // add to call stack
+ b();
+
+ return "a";
+ // remove from call stack
+}
+
+function b() {
+ //throw 'hello';
+ return "b";
+}
+
+a();
+```
+
+## Exercises
+
+## Exercise: Call stack
+
+Draw the call stack array at every draw point
+
+```js
+function bookPlaneTickets() {
+ // draw
+ console.log("Plane tickets booked");
+ requestVacationDays();
+ // draw
+}
+
+function bookHotel() {
+ console.log("Hotel booked");
+ // draw
+ planItinerary();
+ // draw
+}
+
+function requestVacationDays() {
+ // draw
+ console.log("Vacation days requested");
+ // draw
+}
+
+function planItinerary() {
+ console.log("Itinerary done");
+ // draw
+}
+
+function planTrip() {
+ bookPlaneTickets();
+ // draw
+ bookHotel();
+ // draw
+ console.log("Trip planned");
+}
+// draw
+planTrip();
+// draw
+```
+
+### Codewar exercises
+
+- [CodeWars - Add property to every object](https://www.codewars.com/kata/add-property-to-every-object-in-array/train/javascript)
+- [CodeWars - Color Association](https://www.codewars.com/kata/colour-association/train/javascript)
+- [CodeWars - Unfinished loop](https://www.codewars.com/kata/unfinished-loop-bug-fixing-number-1/train/javascript)
+- [CodeWars - Is this my tail](https://www.codewars.com/kata/is-this-my-tail/train/javascript)
+- [CodeWars - Longest word](https://www.codewars.com/kata/squash-the-bugs/train/javascript)
+- [CodeWars - Who's Online](https://www.codewars.com/kata/whos-online/train/javascript)
diff --git a/legacy/javascript/javascript1/week3/preparation.md b/legacy/javascript/javascript1/week3/preparation.md
new file mode 100644
index 00000000..fe659f19
--- /dev/null
+++ b/legacy/javascript/javascript1/week3/preparation.md
@@ -0,0 +1,12 @@
+# Preparation
+
+- [Array](http://javascript.info/array) up until and with [internals](http://javascript.info/array#internals) (10 min)
+- [Objects](http://javascript.info/object) (15 min)
+
+_Please go through the material and come to class prepared!_
+
+## Flipped classroom videos
+
+- [Javascript callstack](https://www.loom.com/share/d09d10ea84da45e2bddd9ffa05396ed3)
+- [Javascript objects](https://www.loom.com/share/312a9ec3e2ed42beb6017f4a4167bd46)
+- [Javascript array](https://www.loom.com/share/06cdd6a4a3834cb696db8dd941ea6550)
diff --git a/legacy/javascript/javascript1/week4/README.md b/legacy/javascript/javascript1/week4/README.md
new file mode 100644
index 00000000..7f98ae87
--- /dev/null
+++ b/legacy/javascript/javascript1/week4/README.md
@@ -0,0 +1,20 @@
+# JavaScript 1, Week 4
+
+## Learning goals
+
+- [ ] Recap of js basics
+ - [ ] Variables
+ - [ ] Types
+ - [ ] Conditionals
+ - [ ] Functions
+ - [ ] For loop
+ - [ ] scope
+ - [ ] Arrays
+ - [ ] Objects
+- [ ] Solving problems
+
+## Relevant links
+
+- [Preparation](preparation.md)
+- [Homework](homework.md)
+- [Lesson plan](lesson-plan.md)
diff --git a/legacy/javascript/javascript1/week4/assets/credit-card-formatter.gif b/legacy/javascript/javascript1/week4/assets/credit-card-formatter.gif
new file mode 100644
index 00000000..9a481ce1
Binary files /dev/null and b/legacy/javascript/javascript1/week4/assets/credit-card-formatter.gif differ
diff --git a/legacy/javascript/javascript1/week4/homework.md b/legacy/javascript/javascript1/week4/homework.md
new file mode 100644
index 00000000..3cba2c4c
--- /dev/null
+++ b/legacy/javascript/javascript1/week4/homework.md
@@ -0,0 +1,64 @@
+# Homework
+
+## Why should I even do this homework?
+
+Understanding the basics of Javascript is SUPER important. Therefore this homework focuses on repeating the basics to really have a solid understanding of this.
+
+If you struggle to do this weeks homework there are a couple of things to do:
+
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=Mo54btMPN7Q), [part 2](https://www.youtube.com/watch?v=mSUAoual5sE), [part 3](https://www.youtube.com/watch?v=uq3NnTtXqsU)
+- Go through the last 3 weeks readme files. [Week 1](../week1/readme.md#variables), [week 2](../week2/readme.md#recap-logical-operators), [week 3](../week3/readme.md#objects)
+
+## Finishing class exercises
+
+Finish the exercises from the class!
+
+## Codewars
+
+Complete these Katas in codewars:
+
+- [7kyu Vowel Count](https://www.codewars.com/kata/54ff3102c1bad923760001f3)
+- [7kyu Digit\*Digit](https://www.codewars.com/kata/546e2562b03326a88e000020)
+- [7kyu Highest and Lowest](https://www.codewars.com/kata/554b4ac871d6813a03000035)
+
+Post a link to your codewars profile when you sumbmit the homework!
+
+## Voice assistant
+
+You will be building a voice assistant 🤖! Is that even possible in javascript, YES! EVERYTHING is possible in javascript 💪 (nearly)
+
+Create a function called `getReply(command)`. The function should return a response that corresponds to the command!
+
+These are the commands you should be able to give the voice assistant:
+
+- `Hello my name is Benjamin` - Should save the name benjamin. and respond with "nice to meet you Benjamin". What if someone writes this twice?
+- `What is my name` - should respond with the name of the person. What if the name has not yet been mentioned?
+- `Add fishing to my todo` - Should respond with "fishing added to your todo". Should add fishing to a list of todos
+- `Add singing in the shower to my todo` - Should add singing in the shower to a list of todos
+- `Remove fishing from my todo` - Should respond with "Removed fishing from your todo"
+- `What is on my todo?` - should respond with the todos. Fx you have 2 todos - fishing and singing in the shower
+- `What day is it today?` - Should respond with the date in a human readable format. E.g. if today is 30/8/2019 then it should respond with 30. of August 2019
+- Should be able to do simple math. fx `what is 3 + 3` should respond with 6. Or `what is 4 * 12` should respond with 48
+- `Set a timer for 4 minutes` - Should respond with "Timer set for 4 minutes". When 4 minutes is up: "Timer done". How do we set a timer in js? Google is your friend here!
+- Add one or more command to your voice assistant
+
+Here is an example of usage:
+
+```js
+console.log(getReply("Hello my name is Benjamin")); // "Nice to meet you benjamin"
+console.log(getReply("What is my name?")); // "Your name is Benjamin"
+console.log(getReply("Add fishing to my todo")); // "fishing added to your todo"
+```
+
+When you are done, add your `getReply` function and global variables to this CodeSandbox and try the voice command out with both commands and speech!
+
+---> <## Homework checklist
+
+Go over your homework one last time:
+
+- [ ] Does every file run without errors and with the correct results?
+- [ ] Have you used `const` and `let` and avoided `var`?
+- [ ] Do the variable, function and argument names you created follow the [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md)?
+- [ ] Is your code well-formatted (see [Code Formatting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/code_formatting.md))?
+
+Please, fill out the [survey](https://forms.gle/QKTWFbUTkzgdcKiMA) about the module to give feedback to the staff, teachers and homework helpers.
diff --git a/legacy/javascript/javascript1/week4/lesson-plan.md b/legacy/javascript/javascript1/week4/lesson-plan.md
new file mode 100644
index 00000000..c725edb5
--- /dev/null
+++ b/legacy/javascript/javascript1/week4/lesson-plan.md
@@ -0,0 +1,241 @@
+# Lesson plan
+
+- Focus on having lots of in class exercises.
+- DONT teach everything, let the students investigate topics on their own aswell!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below!
+
+To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+---
+
+- Recap of js basics
+ - Variables
+ - Types
+ - Conditionals
+ - Functions
+ - For loop
+ - scope
+ - Arrays
+ - Objects
+ - Ask the students what they need to get repeated. Or figure it out by doing some code example.
+- Solving problems
+ -
+- [Code inspiration](#fibonacci-sequence)
+- [Exercises](#exercises)
+
+This class is about getting the basics hammered down. We have had a lot of students who think the js module is too difficult. That is why this class is here, too ease the steepness of the js learning curve.
+
+Focus on
+
+- Recapping what the students struggle with
+- Letting the students learn a framework for solving problems
+- Lots and lost of exercises 💪
+
+## Typical misconceptions
+
+- Difference between return and console.log
+- What console.log does and what it is made for
+
+## Code inspiration
+
+### Fibonacci Sequence
+
+Given a specific number in the fibonacci sequence return the fibonachi number.
+
+```js
+// 0, 1, 1, 2, 3, 5, 8, 13, 21, 34
+
+fib(5); // 3
+fib(10); // 34
+```
+
+Try not to just solve the problem, but explain what you are doing and thinking!
+
+Try using this as a framework for solving the problem:
+
+## Exercises
+
+### Fizz buzz
+
+This is a classic programming task.
+
+Create a function that prints the numbers from 1 to 100. But for multiples of three print `Fizz` instead of the number and for the multiples of five print `Buzz`. For numbers which are multiples of both three and five print `FizzBuzz`.
+
+When that works. Make the two number for multiples into parameters. So it can be called like this:
+
+`fizzBuzz(4, 12);`
+
+### Build a sentiment analyzer
+
+A sentiment analyzer is some functionality that figures out how positive/negative a sentence is.
+
+Fx the sentence `I am mega super awesome happy" Should have a high score
+The sentence "I hate doing boring stuff" should have a low score.
+
+Create a function that takes a string as a parameter. calling the function will return an object with `score`, `positiveWords` and `negativeWords`. You decide how the score should be implemented and what words are negative and positive.
+
+Here is an example of using the function:
+
+```js
+const sentimentScoreObject = getSentimentScore("I am mega super awesome happy");
+
+console.log(sentimentScoreObject);
+/*
+{
+ score: 3,
+ positiveWords: ['happy', 'awesome', 'super'],
+ negativeWords: [],
+}
+*/
+```
+
+### Credit card number formatter
+
+This is a very real world example of a problem i got at my previous work. I was tasked to implement one of the smart credit card input fields, where the credit card numbers are seperated with a space. Fx inputting 123456789 would show 1234 5678 9.
+
+
+
+Create a function that takes a number as parameter. The function should return the following object:
+
+```js
+const formattedCreditCardObject = formatCreditCardNumber(123456789);
+console.log(formattedCreditCardObject);
+/*
+{
+ original: 123456789,
+ formatted: "1234 5678 9",
+}
+*/
+```
+
+Thins to consider:
+
+- What should happen if the function is called with an argument that is not a number?
+
+### Character frequencies
+
+Write a function that counts the frequency of characters in a string:
+
+```js
+console.log(getCharacterFrequencies("happy"));
+/*
+{
+ characters: [
+ {
+ character: 'a',
+ count: 1
+ },
+ {
+ character: 'h',
+ count: 1
+ },
+ {
+ character: 'p',
+ count: 2
+ },
+ {
+ character: 'y',
+ count: 1
+ }
+ ], length: 5
+}
+*/
+```
+
+### Palindromic substring
+
+Write a function that finds the longest palindromic substring of a given string.
+
+### Credit card info
+
+Similar to the format credit card number, now we need to identify the credit card type.
+
+```js
+console.log(getCardInfo(4781321334789876)); // 'visa'
+```
+
+How can we find out what rules there are for credit cards? Programmers best friend is always available :)
+
+### Tic Tac Toe
+
+Draw a tic tac toe game.
+
+Write a function called `getRenderedGame(position)` that takes `position` as parameter. `position` is a two dimensional array that shows the position of a game.
+
+Here is an example:
+
+With the following two dimensional array
+
+```js
+const position = [
+ ["x", "o", " "],
+ [" ", "o", " "],
+ [" ", "o", "x"],
+];
+
+const renderedGame = getRenderedGame(position);
+console.log(renderedGame);
+
+/*
+ *******
+ *x*o* *
+ * *o* *
+ * *o*x*
+ *******
+ */
+```
+
+Create a new function called `getGameinfo(position)`. Calling the function should return an object with `winner` key, `loser` key, `hasEnded` and `nextPlayer`.
+
+EXAMPLES!!!!
+
+```js
+const position = [
+ ["x", "o", " "],
+ [" ", "o", " "],
+ [" ", "o", "x"],
+];
+
+const gameInfo = getGameinfo(position);
+console.log(gameInfo);
+
+/*
+{
+ winner: 'o',
+ loser: 'x',
+ hasEnded: true
+}
+*/
+```
+
+```js
+const position = [
+ ["x", "o", " "],
+ [" ", " ", " "],
+ [" ", "o", "x"],
+];
+
+const gameInfo = getGameinfo(position);
+console.log(gameInfo);
+
+/*
+{
+ winner: undefined,
+ loser: undefined,
+ hasEnded: false
+}
+*/
+```
+
+Try and make the game playable! _optional_
+
+### Conway's game of life _optional_
+
+
+
+And finally, feel free to fill out the form to help us improve the module and the exercises. The [survey](https://forms.gle/irckYkBdvSb6Tdz57) here is addressed to the teacher and teacher assistant, while this [survey](https://forms.gle/ttdDLcSJ88ksz6xe7) is for homework helpers.
diff --git a/legacy/javascript/javascript1/week4/preparation.md b/legacy/javascript/javascript1/week4/preparation.md
new file mode 100644
index 00000000..ea08b1b4
--- /dev/null
+++ b/legacy/javascript/javascript1/week4/preparation.md
@@ -0,0 +1,9 @@
+# Preparation
+
+Go through the learning goals of week 1, week 2 and week 3 of javascript. Make sure you understand the concepts!
+
+- [Week 1 learning goals](../week1/readme.md)
+- [Week 2 learning goals](../week2/readme.md)
+- [Week 3 learning goals](../week3/readme.md)
+
+_Please go through the material and come to class prepared!_
diff --git a/legacy/javascript/javascript2/README.md b/legacy/javascript/javascript2/README.md
new file mode 100644
index 00000000..ae293401
--- /dev/null
+++ b/legacy/javascript/javascript2/README.md
@@ -0,0 +1,9 @@
+# JavaScript 2
+
+Here you can find course content and homework for the JavaScript 2 module.
+
+| Week | Topic | Preparation | Homework | Lesson plan |
+| ---- | ----------------------------------------------------------------- | ----------------------------------- | ---------------------------------------- | ----------------------------------- |
+| 1. | Browser environment; DOM manipulation; DOM event listeners | [Preparation](week1/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week1/lesson-plan.md) |
+| 2. | Array functions; [Arrow function](week2/readme.md#arrow-function) | [Preparation](week2/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week2/lesson-plan.md) |
+| 3. | Callback function; Asyncronicity; Scope | [Preparation](week3/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week3/lesson-plan.md) |
diff --git a/legacy/javascript/javascript2/week1/README.md b/legacy/javascript/javascript2/week1/README.md
new file mode 100644
index 00000000..0fe88bc5
--- /dev/null
+++ b/legacy/javascript/javascript2/week1/README.md
@@ -0,0 +1,167 @@
+# JavaScript 2, Week 1
+
+## Learning goals
+
+Browser environment
+
+- [ ] HTML vs CSS vs JS
+- [ ] Client vs server
+- [ ] Where is the script tag being loaded
+
+DOM
+
+- [ ] What is it and what do developers use the DOM for?
+- [ ] DOM manipulation
+ - [ ] Get elements
+ - [ ] Insert elements
+ - [ ] Element manipulation (style, innerHTML, text)
+ - [ ] Window object
+ - [ ] Document object
+
+Event listeners
+
+- [ ] Document onload
+- [ ] Click, submit, change, input - Focus on usage
+
+## Relevant links
+
+- [Preparation](preparation.md)
+- [Homework](/homework-projects/readme.md)
+- [Lesson plan](lesson-plan.md)
+
+## HTML interaction
+
+Interacting with the HTML DOM is done through the document object in the browser. With the document object we can get html elements and change them.
+
+For the next js part we use this html.
+
+```html
+
+
+
Javascript week 3
+
+
+
+
+
+```
+
+```js
+// use the querySelector to select elements just like in css
+const testIdElement = document.querySelector("#test-id");
+console.log(testIdElement); // logs the html element with id "test-id"
+
+// Change the inner html of the test-id element
+testIdElement.innerHTML = "test";
+// Change the background-color of the test-id element. Inline css changes is done via the style attribute on the element
+testIdElement.style.backgroundColor = "blue";
+
+// It is also possible to create html elements
+// Create a div element
+const div = document.createElement("div");
+// Change its inner html
+div.innerHTML = "We created this div!!!";
+
+// Lest append it to the div with the class queue
+const queueDiv = document.querySelector(".queue");
+queueDiv.appendChild(div);
+```
+
+## Code Commenting
+
+First the straightforward part: how do we place comments in our code?
+
+### HTML
+
+[W3Schools](https://www.w3schools.com/html/html_comments.asp)
+Comments
+
+```html
+
+
+
+```
+
+### CSS
+
+[MDN on CSS comments](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments)
+
+```css
+/* Comment */
+
+/*
+A comment
+which stretches
+over several
+lines
+*/
+```
+
+### JavaScript
+
+Single line comments
+
+```js
+// Change heading:
+document.getElementById("myH").innerHTML = "My First Page";
+```
+
+Single line comments at end of the line:
+
+```js
+const x = 5; // Declare x, give it the value of 5
+```
+
+Writing js documentation: [JSDoc](http://usejsdoc.org/)
+
+### When to comment?
+
+Now for the hard part: when to comment? When you work for different companies, you will see different styles. Embrace something you like, and then learn to let go. Google on "when to comment code?" and you'll find a big bunch of different opinions.
+
+The general concept is, however, that it is there to help make the code more easy to understand. Note, however, that comments can also make code more difficult to understand when not applied properly.
+
+## Events
+
+Events in JavaScript are things like:
+A timer has just finished, a user clicked a button, our page has loaded,
+someone types into an input element or we have just gotten some data from a server.
+When these events happen, we usually want to add some functionality.
+Fx when a user clicks the like button (event), we want to increment the like counter and color the like button blue.
+Or when someone clicks "Close cookies" (event) we want to remove the cookie div.
+
+Lets first try to create some js that waits for 2 seconds and the console.logs out "2 seconds has elapsed!"
+
+In JavaScript we use the word eventlistener to listen
+
+```javascript
+setTimeout(function () {
+ console.log("2 seconds has elapsed!");
+}, 2000);
+
+// Cool, now lets make a function as a variable:
+const fourSecondLog = function () {
+ console.log("4 seconds has elapsed!");
+};
+
+setTimeout(fourSecondLog, 4000);
+```
+
+Now lets try and log out "button clicked!" when a button is clicked.
+
+To check if a button gets clicked we use a what is called an eventlistener.
+
+Imagine a person listening to the click of a button and everytime he hears a click he yells out "CLICKED".
+
+```javascript
+const buttonElement = document.querySelector("button");
+buttonElement.addEventListener("click", function () {
+ console.log("Button clicked!");
+});
+
+const buttonClicked = function () {
+ console.log("Button clicked as a variable!");
+};
+// Cool man! Lets try and add that function as a variable.
+buttonElement.addEventListener("click", buttonClicked);
+```
diff --git a/legacy/javascript/javascript2/week1/assets/carGenerator.js b/legacy/javascript/javascript2/week1/assets/carGenerator.js
new file mode 100644
index 00000000..d2c613ef
--- /dev/null
+++ b/legacy/javascript/javascript2/week1/assets/carGenerator.js
@@ -0,0 +1,42 @@
+/**
+ * Get random integer between two numbers, found here: https://stackoverflow.com/a/7228322
+ * @param {integer} min - The min number
+ * @param {integer} max - The max number
+ * @returns {Number} Random number between min and max
+ */
+function randomIntFromInterval(min, max) {
+ return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+/**
+ * Get an array with car objects with random color and speed
+ * @param {integer} numberOfCars - The number of cars
+ * @returns {array} Array containing the car objects
+ */
+function generateCars(numberOfCars) {
+ const cars = [];
+
+ const carMakes = ["Honda", "BMW", "Fiat", "Skoda", "Volvo"];
+ const carColors = [
+ "lightgrey",
+ "lightcyan",
+ "lightyellow",
+ "lightgreen",
+ "lightcoral",
+ "lightpink",
+ ];
+
+ for (let i = 0; i < numberOfCars; i++) {
+ const car = {};
+ const randomMakeIndex = randomIntFromInterval(0, carMakes.length - 1);
+ const randomColorIndex = randomIntFromInterval(0, carColors.length - 1);
+
+ car.make = carMakes[randomMakeIndex];
+ car.color = carColors[randomColorIndex];
+ car.speed = randomIntFromInterval(0, 100);
+
+ cars.push(car);
+ }
+
+ return cars;
+}
diff --git a/legacy/javascript/javascript2/week1/assets/jsonformatter.PNG b/legacy/javascript/javascript2/week1/assets/jsonformatter.PNG
new file mode 100644
index 00000000..28ae35c7
Binary files /dev/null and b/legacy/javascript/javascript2/week1/assets/jsonformatter.PNG differ
diff --git a/legacy/javascript/javascript2/week1/lesson-plan.md b/legacy/javascript/javascript2/week1/lesson-plan.md
new file mode 100644
index 00000000..33019c0c
--- /dev/null
+++ b/legacy/javascript/javascript2/week1/lesson-plan.md
@@ -0,0 +1,160 @@
+# Lesson plan
+
+- Focus on having lots of in class exercises.
+- DONT teach everything, let the students investigate topics on their own aswell!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below!
+
+To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+---
+
+- Browser environment
+
+ - HTML vs CSS vs JS
+ - Client vs server
+ - Where is the script tag being loaded
+ - Code debugging
+
+- DOM
+
+ - What is it and what do developers use the DOM for?
+ - DOM manipulation
+ - Get elements
+ - Create elements
+ - Insert elements - let students investigate `appendChild`, `insertBefore`
+ - Element manipulation (`style`, `innerHTML`, `text`)
+ - Document object
+ - [Code inspiration simple](#dom)
+ - [Code inspiration change logo](#change-logo)
+ - Exercises: [Favorite dishes](#favorite-dishes), [podcasts](#podcast), [image inserter](#image-inserter)
+
+- Event listeners - Focus on usage, no explanation of callback
+ - Click, mouseover, etc. Explain one and let students investigate another, like mouseover or mousemove
+ - Input Change, input
+ - Event parameter
+ - [Code inspiration](#eventlistener)
+ - [Exercise simple](#simple-eventlistener)
+ - [Exercise dark mode light mode](#light-mode-dark-mode)
+
+Really try in this class to do short teaching and lots of exercises!
+
+## Flipped classroom videos
+
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week1/preparation.md#flipped-classroom-videos)
+
+## Code inspiration
+
+### DOM
+
+```js
+const eventElement = document.querySelector(".events");
+eventElement.innerHTML = "Soccer training Wednesday";
+eventElement.style.backgroundColor = "blue";
+console.log(eventElement);
+
+const div = document.createElement("div");
+div.innerHTML = "new div";
+
+const body = document.querySelector("body");
+body.appendChild(div);
+```
+
+### Change logo
+
+```js
+function changeLogo() {
+ let logo = document.getElementById("logo");
+ logo.src =
+ "https://assets.fontsinuse.com/static/use-media-items/15/14246/full-2048x768/56fc6e1d/Yahoo_Logo.png?resolution=0";
+
+ let newTitle = document.createElement("h1");
+ newTitle.innerHTML = "My new title"; //
My new title
+
+ document.body.appendChild(newTitle);
+}
+
+changeLogo();
+```
+
+### Eventlistener
+
+```js
+// change the event type
+document.querySelector("button").addEventListener("click", function (event) {
+ // what does the event do?
+ console.log(event);
+ body.style.backgroundColor = "red";
+});
+```
+
+## Exercises
+
+### Favorite dishes
+
+Create an array of strings with your favorite dishes.
+
+With js select a `ul` in the DOM. You add the `ul` to the html file.
+
+Now loop through each element of the favorite dishes array, you create an `li` element and set the text to the favorite dish.
+
+Then append the `li` element to the `ul` element.
+
+### Podcast
+
+```js
+const podcasts = [
+ {
+ name: "The mystery om of Johan Klausen Varbourg",
+ imageUrl: "https://picsum.photos/536/354",
+ },
+ {
+ name: "Tips about dogs with small legs",
+ imageUrl: "https://picsum.photos/536/354",
+ },
+ {
+ name: "You, me, we and us",
+ imageUrl: "https://picsum.photos/536/354",
+ },
+ {
+ name: "Breakfast news - Dinner edition",
+ },
+];
+```
+
+1. Create a `ul`
+2. Loop through the podcasts
+3. For every podast:
+ 1. Creat an `li`
+ 2. Create an `h1` element
+ 3. Change the innerHTML of the `h1` to equal the name of the current podcast
+ 4. Append the `h1` to the `li`
+ 5. Now add an image to the `li` with the `src` set to the `imageUrl`. But only if the `imageUrl` key exists on the object!
+4. Append the `li` to the `ul`
+
+### Image inserter
+
+Create a function that has two parameters: `imageUrl` and `elementToAppendImageTo`. The function should create an img tag and set the `src` attribute of the img to the `imageUrl` parameter. The function should then append the `img` to the `elementToAppendImageTo` - html element.
+
+```js
+// Should append a img tag to the body with the picture from 'https://picsum.photos/536/354'
+notThisFunctionName(
+ "https://picsum.photos/536/354",
+ document.querySelector("body"),
+);
+```
+
+### Simple eventlistener
+
+When clicking a button, change the text on the button to say "Button clicked"
+
+### Light mode dark mode
+
+Clicking a button should toggle the background color of the body and the text color in the page.
+If the background is white and the text is black, then clicking the button will make the background dark and the text white and vice versa
+
+_Optional_ also make the text on the button change.
diff --git a/legacy/javascript/javascript2/week1/optional-homework.md b/legacy/javascript/javascript2/week1/optional-homework.md
new file mode 100644
index 00000000..5ecff9ad
--- /dev/null
+++ b/legacy/javascript/javascript2/week1/optional-homework.md
@@ -0,0 +1,114 @@
+# Optional Homework
+
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
+
+## So why this homework?
+
+**Interacting with the DOM is a crucial part** of building a website. If we cannot interact with the DOM then the javascript we write cannot change what we see in the browser. **Connecting javascript to the browser opens up a new world of possibilities** where only the imagination is the limiting factor.
+
+## Overview of homework
+
+## 1. Problem solving cardio
+
+Lets exercise our problem solving abilities!
+
+
+
+### 1.1. codewars!
+
+Complete these Katas:
+
+- [8kyu Remove First and Last Character](https://www.codewars.com/kata/56bc28ad5bdaeb48760009b0)
+- [8kyu Counting sheep...](https://www.codewars.com/kata/54edbc7200b811e956000556)
+- [7kyu String ends with?](https://www.codewars.com/kata/51f2d1cafc9c0f745c00037d)
+- [7kyu Odd or Even?](https://www.codewars.com/kata/5949481f86420f59480000e7)
+
+### 1.2. Find and count the Danish letters
+
+Find the individual number and the total number of Danish letters in a string.
+
+```js
+const danishString = "Jeg har en blå bil";
+notThisFunctionName(danishString); // returns {total: 1, å: 1}
+
+const danishString2 = "Blå grød med røde bær";
+notThisFunctionName(danishString2); // returns {total: 4, æ: 1, ø: 2, å: 1}
+```
+
+## 2. Spirit animal name generator
+
+Let's create a page where **a user writes his name** in an input element. The user then clicks a button. The user will now **receive a spirit animal name**, fx Benjamin - The fullmoon wolf.
+
+### 2.1. Markup time!
+
+Create an input element, a button and a tag to display the spirit animal into.
+
+### 2.2. Setting up the events
+
+When the user clicks the button, get the name the user wrote in the input field.
+
+### 2.3. Spirit animal part
+
+Now we can get the users name, next step is to **add the spirit animal string** and display that the users name, a dash and then the spirit animal. Fx Name: Peter: Peter - The crying butterfly
+For creating the spirit animal create an array with 10 string representing spirit animals. Now get a random item in the array that will represent the spirit animal.
+
+### 2.4. New spirit animal
+
+Now a user tells us that he wants a new spirit animal. No problem we say. Let's create functionality where a user can press a button and then get a new spirit animal.
+
+### 2.5. No input
+
+What if the user clicks the generate new spirit animal and there is no text in the input?
+
+### 2.6. Event types - _Optional and a little tricky_
+
+Give the user the possibility to select **when the spirit animal should be created**. Should it be when the user clicks the button or when the user hovers the input field or when text is written in the input field?
+
+How can we give a user multiple options to select from in html? Maybe time for google!
+
+An example is: A user select that she only wants to generate a spirit animal when the input is hovered. That means that if the user writes her name in the input and clicks the button nothing happens. BUT when she hovers the input, NOW a new spirit animal is generated.
+
+
+
+## 3. hyfBay - get the okay'est products here
+
+We have been **hired for a company** to do a SPA - Single Page App for them. It is a website where a user can search for products. The products can also be **filtered and sorted** based on what products the user wants to see.
+
+We are going to be building this website step by step, so have patience :)
+
+### 3.1. Lets get started!
+
+In the [homework/hyf-bay folder](homework/hyf-bay) there is a project template you should continue working on. So copy all the files into your `hyf-homework/javascript/javascript2/week1` folder.
+
+The `index.html` is very basic. It simply loads two javascript files and include some css. The two javascript files are `hyfBayHelpers.js` and the `main.js`. `hyfBayHelpers.js` contains a function (`getAvailableProducts`) that we can use to get an array of products. In the `main.js` we will be writing all our code!
+
+### 3.2. Requirements
+
+- Using the `getAvailableProducts` array we will render an html list of products
+- The list should contain `title`, `price` and `rating`
+- The list of products should be generated through calling a function called `renderProducts(products)`
+
+#### Example
+
+```js
+const products = getAvailableProducts();
+
+function renderProducts(products) {
+ // your code here
+}
+
+renderProducts(products); // This should create the ul and the li's with the individual products details
+```
+
+So after calling the `renderProducts` function, the output should be like the output you can see here:
+
+#### So how can I do that?
+
+Here is a possible way to render the products
+
+1. In the html create a `ul` that will contain all the products. Select that `ul` using `document.querySelector`
+2. For each `product` in the `products` array:
+ 1. [create an `li`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
+ 2. Set the innerHTML of that `li` to the contain the title, price and rating
+ 3. [Append the `li`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) to the `ul`
diff --git a/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/hyfBayHelpers.js b/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/hyfBayHelpers.js
new file mode 100644
index 00000000..fd04c7b8
--- /dev/null
+++ b/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/hyfBayHelpers.js
@@ -0,0 +1,72 @@
+/* DONT MODIFY ANY OF THIS CODE!!!*/
+
+window.getAvailableProducts = function () {
+ function getRandomInt(min, max) {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ function getRandomItem(availableProductNames) {
+ return availableProductNames[
+ getRandomInt(0, availableProductNames.length - 1)
+ ];
+ }
+
+ function getRandomProductname() {
+ const preWords = [
+ "Used",
+ "Fantastic",
+ '"Used"',
+ "Broken",
+ "Beautiful",
+ "Wet",
+ "Green",
+ "Sloppy",
+ "Dirty",
+ ];
+ const productNames = [
+ "Carrot",
+ "Drone",
+ "Giftcard",
+ "Puppy",
+ "Car",
+ "Shirt",
+ "Milk",
+ "Chalk",
+ "Fish fingers",
+ "Socks",
+ "Chocolate",
+ "Toothbrush",
+ "Computer",
+ "Nokia",
+ "Cologne",
+ ];
+
+ let chosenProductName = getRandomItem(productNames);
+ const shouldHavePreWord = getRandomInt(0, 10) > 6;
+
+ if (shouldHavePreWord) {
+ const preWord = preWords[getRandomInt(0, preWords.length - 1)];
+ chosenProductName = `${preWord} ${chosenProductName}`;
+ }
+
+ return chosenProductName;
+ }
+
+ const numberOfAvailableProducts = getRandomInt(0, 30);
+ const availableProducts = Array.apply(
+ null,
+ Array(numberOfAvailableProducts),
+ ).map(() => {
+ const name = getRandomProductname();
+ return {
+ id: `${name}${getRandomInt(0, 100000)}`,
+ name,
+ price: getRandomInt(0, 10000),
+ rating: getRandomInt(1, 10),
+ };
+ });
+
+ return availableProducts;
+};
diff --git a/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/index.html b/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/index.html
new file mode 100644
index 00000000..07f60fe4
--- /dev/null
+++ b/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/index.html
@@ -0,0 +1,14 @@
+
+ HyfBay
+
+
+
+
+
+
+
+
+
diff --git a/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/main.css b/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/main.css
new file mode 100644
index 00000000..9f6b12f1
--- /dev/null
+++ b/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/main.css
@@ -0,0 +1,20 @@
+body {
+ font-family: "Open Sans", sans-serif;
+ background-color: #f9fbfd;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body,
+h1,
+h2 {
+ margin: 0;
+}
+
+ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
diff --git a/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/main.js b/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/main.js
new file mode 100644
index 00000000..e584d34c
--- /dev/null
+++ b/legacy/javascript/javascript2/week1/optional-homework/hyf-bay/main.js
@@ -0,0 +1,4 @@
+console.log("Script loaded");
+
+const products = getAvailableProducts();
+console.log(products);
diff --git a/legacy/javascript/javascript2/week1/preparation.md b/legacy/javascript/javascript2/week1/preparation.md
new file mode 100644
index 00000000..0634cdec
--- /dev/null
+++ b/legacy/javascript/javascript2/week1/preparation.md
@@ -0,0 +1,14 @@
+# Preparation
+
+- [Basic DOM manipulations (img src, innerHTML)](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/DOM_manipulation.md) (5 min)
+- [Code Degugging Using the Browser](http://javascript.info/debugging-chrome) (5 min)
+- [Code commenting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/code_commenting.md) (2 min)
+- [Attaching an event](https://www.w3schools.com/jsref/met_element_addeventlistener.asp) (5 min)
+
+_Please go through the material and come to class prepared!_
+
+## Flipped classroom videos
+
+- [Executing Javascript in the browser environment](https://youtu.be/k8PEyCe3vK0)
+- [Interacting with the DOM using Javascript](https://youtu.be/YvHQIaKtOl8)
+- [DOM event listeners using Javascript](https://youtu.be/DwzApTvTngI)
diff --git a/legacy/javascript/javascript2/week2/README.md b/legacy/javascript/javascript2/week2/README.md
new file mode 100644
index 00000000..2a4ee734
--- /dev/null
+++ b/legacy/javascript/javascript2/week2/README.md
@@ -0,0 +1,168 @@
+# JavaScript 2, Week 2
+
+## Learning goals
+
+- [ ] Array functions
+ - [ ] ForEach
+ - [ ] [Map](#map)
+ - [ ] [Filter](#filter)
+- [ ] [Arrow function](#arrow-functions)
+
+
+## Relevant links
+
+- [Preparation](preparation.md)
+- [Homework](/homework-projects/readme.md)
+- [Lesson plan](lesson-plan.md)
+
+## Array methods map, filter and sort
+
+### Map
+
+The map function works on arrays. It maps (think transform) the elements of an array. Or from MDN: "The map() method creates a new array with the results of calling a provided function on every element in the calling array."
+
+```js
+// lets first create an array of three cars
+
+const cars = [
+ {
+ make: "Volvo",
+ speed: 45,
+ color: "lightYellow",
+ },
+ {
+ make: "BMW",
+ speed: 87,
+ color: "lightBlue",
+ },
+ {
+ make: "Fiat",
+ speed: 78,
+ color: "lightCyan",
+ },
+];
+
+// lets use the same cars array
+
+// Lets transfrom it from an array of car objects to an array of car colors
+const carColors = cars.map(function (car) {
+ return car.color;
+});
+
+console.log(carColors); // ['lightYellow', 'lightBlue', 'lightCyan']
+
+const carSpeeds = cars.map(function (car) {
+ return car.speed;
+});
+
+console.log(carSpeeds); // [45, 87, 78]
+```
+
+### Filter
+
+The filter function works on arrays and it filters out elements in our array.
+It takes a function as input. This function is called on every element in the array. Just like forEach. If this function we create returns true the element is saved in the, if we return false the element is filtered out.
+
+```js
+// Lets get only cars with a speed larger than 60
+const fastCars = cars.filter(function (car) {
+ // This function is called for every car in the cars array
+ if (car.speed > 60) {
+ // save the car
+ return true;
+ } else if (car.speed <= 60) {
+ // filter out the cars that are slower than 60
+ return false;
+ }
+});
+
+console.log(fastCars); // logs the BMW and the Fiat
+```
+
+### Sort
+
+The sort function works on arrays. It sorts the elements of the array.
+To see details see here:
+
+```js
+// lets use the same cars array
+
+// Lets sort the cars after speed ascending
+const sortedCars = cars.sort(function (a, b) {
+ return a.speed - b.speed;
+});
+
+console.log(sortedCars); // it will return an array with the BMW object first, then the fiat and then the volvo
+```
+
+### Arrow functions
+
+Functions can be written as arrow functions, it looks like this:
+
+```js
+// This function
+function getTimesTen(a) {
+ return a * 10;
+}
+
+// Can be written like this:
+const getTimesTenArrowFunction = (a) => {
+ return a * 10;
+};
+
+// If there is only one parameter, we can remove the paranthesis:
+const getTimesTenArrowFunction = (a) => {
+ return a * 10;
+};
+
+// If the function is returning a single line of code, you can shorten it even further:
+const getTimesTenArrowFunction = (a) => a * 10;
+```
+
+Here is how you **convert a function into an arrow function:**
+
+1. Remove the keyword function
+2. Add an arrow after the parameter
+3. If there is only one parameter, we can remove the paranthesis around the parameter
+4. If the function is returning a single line of code, we can remove the return keyword and the curly braces.
+
+### Chaining
+
+We can chain array methods after each other.
+
+So if we wanted an array of fast cars brands we could do this:
+
+```js
+// Broken down
+const fastCars = cars.filter((car) => car.speed > 60);
+
+const fastCarBrands = fastCars.map((car) => car.brand);
+
+// But we can do those two operations in one go
+const fastCarBrands = cars
+ .filter((car) => car.speed > 60)
+ .map((car) => car.brand);
+```
+
+```js
+const fastCars = cars.filter((car) => car.speed > 60);
+
+// fastCars is an array! Arrays we can call .map on, so why not do it in one go!?
+```
+
+Calling the `filter` function, returns an array (in our case an array of objects, that represent fast cars). We know that we can call `.map` on an array, doing that we get the chaining of methods.
+
+The principal behind is exactly the same as in this example:
+
+```js
+const doesBenjaminEndWithN = "BENJAMIN".toLowerCase().endsWith("n");
+
+// We can also write that as:
+doesBenjaminEndWithNFormatted = "BENJAMIN"
+ .toLowerCase() // <-- toLowerCase returns a string!
+ .endsWith("n"); // <-- That we can call .endsWith on!
+```
+
+We are chaining methods on the return of the previous function's return value!
diff --git a/legacy/javascript/javascript2/week2/lesson-plan.md b/legacy/javascript/javascript2/week2/lesson-plan.md
new file mode 100644
index 00000000..f18e391f
--- /dev/null
+++ b/legacy/javascript/javascript2/week2/lesson-plan.md
@@ -0,0 +1,387 @@
+# Lesson plan
+
+- Focus on having lots of in class exercises.
+- DONT teach everything, let the students investigate topics on their own aswell!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+## Lesson materials
+
+These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.
+
+- [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-2-Week-2-cd0c1163d0264215824dc17580c97825?pvs=4) (by [Thomas](https://github.com/te-online))
+
+Remember to add the code you wrote in the class to the relevant class's work folder on a branch. If the branch has not been created just create and push it :) If you don't have access, write to someone from the core team. You can see an example below!
+
+To find examples of what teachers have taught before, go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved, please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+---
+
+- Array functions - code with traditional function expression, no arrow keys yet!
+ - Try write your own `forEach`, `map` and `filter` with the students. Shows very precisely how it works!
+ - ForEach - Executes function for each item in the array, NO RETURN!
+ - [Code inspiration](#foreach)
+ - [Foreach homemade](#foreach-homemade)
+ - [Exercises](#foreach-1)
+ - Map - Changes/transforms the items in the array
+ - [Code inspiration](#map)
+ - [Foreach homemade](#map-homemade)
+ - [Exercises](#map-1)
+ - Filter - Changes the number of items in the array. Let the students investigate `filter`
+ - [Code inspiration](#filter)
+ - [Foreach homemade](#filter-homemade) - Get help from students to write this
+ - [Exercises](#filter-1)
+ - [Other example](#other-example)
+- Arrow function
+ - [Code inspiration](#arrow-function)
+ - [Exercises](#arrow-functions)
+
+
+
+[Listing project](#listing-project)
+
+## Flipped classroom videos
+
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week2/preparation.md#flipped-classroom-videos)
+
+## Code inspiration
+
+### Mentors
+
+```js
+const mentors = [
+ {
+ name: "Abed Sujan",
+ subjects: ["JS", "HTML", "CSS", "NODEJS"],
+ yearOfExperience: 4,
+ },
+ {
+ name: "Ahmed Magdy",
+ subjects: ["JS", "Database", "CSS"],
+ yearOfExperience: 1,
+ },
+ {
+ name: "Alicia Gonzales",
+ subjects: ["DB", "HTML", "NODEJS"],
+ yearOfExperience: 8,
+ },
+ {
+ name: "allan Thraen",
+ subjects: ["REACT", "HTML", "CSS"],
+ yearOfExperience: 3,
+ },
+ {
+ name: "Anders Ravn",
+ subjects: ["JS", "HTML", "NODEJS"],
+ yearOfExperience: 2,
+ },
+ {
+ name: "Daniel Fernandes",
+ subjects: ["Database", "HTML", "CSS"],
+ yearOfExperience: 9,
+ },
+];
+
+console.log(mentors);
+```
+
+### ForEach
+
+```js
+mentors.forEach(function (mentor) {
+ console.log(mentor);
+ console.log(mentor.name);
+
+ mentor.subjects.forEach(function (subject) {
+ console.log(subject);
+ });
+});
+```
+
+### ForEach homemade
+
+```js
+function forEachHomemade(array, functionToExecute) {
+ for (let i = 0; i < array.length; i++) {
+ const currentItem = array[i];
+ functionToExecute(currentItem, i);
+ }
+}
+```
+
+### Map
+
+```js
+// We are mapping/transforming the mentors array. Same size, different items.
+const mentorNames = mentors.map(function (mentor) {
+ return mentor.name;
+});
+
+const mentorNamesFormatted = mentors.map(function (mentor) {
+ return "Mentors name is: " + mentor.name;
+});
+
+const mentorSummary = mentors.map(function (mentor) {
+ return `Mentors name is: ${mentor.name}. He has ${mentor.yearsOfExperience} years of experience`;
+});
+```
+
+### Map homemade
+
+```js
+function mapHomemade(array, functionToExecute) {
+ const mappedArray = [];
+ for (let i = 0; i < array.length; i++) {
+ const currentItem = array[i];
+ const newItem = functionToExecute(currentItem, i);
+ // This is where the magic happens!!!
+ mappedArray.push(newItem);
+ }
+
+ return mappedArray;
+}
+```
+
+### Filter
+
+```js
+// We are mapping/transforming the mentors array. Same size, different items.
+const experiencedMentors = mentors.filter(function (mentor) {
+ if (mentor.yearsOfExperience > 7) {
+ return true;
+ } else {
+ return false;
+ }
+
+ // can also be written as
+ // reuturn mentor.yearsOfExperience > 7
+ // Explain why!
+});
+
+// Get help from students to write this
+const mentorsThatStartWithA = mentors.filter(function (mentor) {
+ return mentor.name[0] == "A"; // Missing Allan, why?? lowercase
+});
+```
+
+### Filter homemade
+
+```js
+function FilterHomemade(array, functionToExecute) {
+ const filteredArray = [];
+ for (let i = 0; i < array.length; i++) {
+ const currentItem = array[i];
+ const shouldKeepItemInNewArray = functionToExecute(currentItem, i);
+ // This is where the magic happens!!!
+ if (shouldKeepItemInNewArray) {
+ filteredArray.push(currentItem);
+ }
+ }
+
+ return filteredArray;
+}
+```
+
+### Arrow function
+
+```js
+function circleArea(radius) {
+ return radius * 2 * Math.pi;
+}
+
+// Remove the function keyword add in arrow
+const circleArea1 = (radius) => {
+ return radius * 2 * Math.pi;
+};
+
+// If there is only one parameter, we can remove the paranthesis
+const circleArea2 = (radius) => {
+ return radius * 2 * Math.pi;
+};
+
+// If there is only one line in the function we can remove the curly braces and the return statement
+// radius * 2 * Math.pi is AUTOMATICALLY being returned
+const circleArea3 = (radius) => radius * 2 * Math.pi;
+```
+
+### Other example
+
+```js
+function filterMentorList(courseID) {
+ const resultHtml = document.getElementById("result");
+
+ let listHtml = "";
+ listHtml += "
`;
+ });
+
+ resultHtml.innerHTML = listHtml;
+}
+
+function filterMentorListUsingFor(courseID) {
+ const resultHtml = document.getElementById("result");
+ let listHtml = "";
+ for (let i = 0; i < mentors.length; i++) {
+ listHtml += `
${mentors[i].name}
`;
+ }
+ resultHtml.innerHTML = listHtml;
+ console.log("courseID", courseID);
+}
+```
+
+## Exercises
+
+Use this function to generate random listings
+
+```js
+/**
+ * Get random integer between two numbers, found here: https://stackoverflow.com/a/7228322
+ * @param {integer} min - The min number
+ * @param {integer} max - The max number
+ * @returns {Number} Random number between min and max
+ */
+function randomIntFromInterval(min, max) {
+ return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+/**
+ * Get an array with listing objects with random color and speed
+ * @param {integer} numberOfListings - The number of listings
+ * @returns {array} Array containing the listing objects
+ */
+function generateListings(numberOfListings) {
+ const listings = [];
+
+ const listingType = ["House", "Apartment", "Shed", "Dorm", "Farm"];
+ const listingFacilities = [
+ "Parkering",
+ "Elevator",
+ "Altan",
+ "Have",
+ "Husdyr",
+ ];
+
+ for (let i = 0; i < numberOfListings; i++) {
+ const listing = {};
+ const randomTypeIndex = randomIntFromInterval(0, listingType.length - 1);
+ const numberOfFacilities = randomIntFromInterval(
+ 1,
+ listingFacilities.length - 1,
+ );
+ const facilities = [];
+ for (let i = 0; i < numberOfFacilities; i++) {
+ const randomIndexFacilities = randomIntFromInterval(
+ 0,
+ listingFacilities.length - 1,
+ );
+ const randomFacility = listingFacilities[randomIndexFacilities];
+
+ if (!facilities.includes(randomFacility)) {
+ facilities.push(randomFacility);
+ }
+ }
+
+ listing.type = listingType[randomTypeIndex];
+ listing.facilities = facilities;
+ listing.price = randomIntFromInterval(1, 10000);
+ listing.hasGarden = Boolean(randomIntFromInterval(0, 1));
+ listing.size = randomIntFromInterval(12, 1000);
+ listing.img = `https://loremflickr.com/200/200/${listing.type}`;
+
+ listings.push(listing);
+ }
+
+ return listings;
+}
+
+generateListings(20);
+```
+
+### `forEach`
+
+- Create 37 listings and log out every listings size
+
+### `map`
+
+- Create an array that contains all the 37 listing prices.
+
+### `filter`
+
+Using the 37 listings from the previous tasks
+
+- Create an array of cheap listings. You define what cheap means. Each item in this array should be of type object
+- Create an array of expensive listings prices. Each item in this array should be of type number
+- Create an array of listings that have parking. Each item in this array should be of type object
+
+### Arrow functions
+
+Rewrite the code above (`forEach`, `map` and `filter`) to arrow functions.
+
+### Listing project
+
+Imagine we have a website like where a user can search for different parameters. Fx What type the listing should be, the price, size, location etc etc.
+
+#### Filter listings
+
+If a user fx click on a button indicating that the user only wants listings that are of the type farm. Lets try and imagine how we would use a function to create this functionality:
+
+```js
+const listings = generateListings(20);
+
+const filter = {
+ type: "farm",
+};
+
+const farmListings = filterListings(listings, filter);
+```
+
+Okay, so the `filterListings` function takes a filter which is an `object`. Say the user wants farm listings that cost more than 1.500.000.
+
+```js
+const filter2 = {
+ type: "farm",
+ minPrize: 1500000,
+};
+
+const cheapFarmListings = filterListings(listings, filter2);
+```
+
+Your job is to create the `filterListings` function. The function should support these filters: type, facilities, price , hasGarden and size. Use arrow functions!
+
+#### Render listings
+
+Now create a function called `renderListings`. It should have one parameter: `listings`. When called the function should render the listings in an html list. How it should be rendered is up to you, but you could take inspiration from
diff --git a/legacy/javascript/javascript2/week2/optional-homework.md b/legacy/javascript/javascript2/week2/optional-homework.md
new file mode 100644
index 00000000..b30f0528
--- /dev/null
+++ b/legacy/javascript/javascript2/week2/optional-homework.md
@@ -0,0 +1,133 @@
+# Optional Homework
+
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
+
+## Why should I even do this homework?
+
+Working with arrays is an essential part of being a javascript developer. A lot of the time js developers have an array of some objects. That could be **users, products, posts, jobs** etc. Working with these arrays, js developers so often need to filter the arrays, change the structure of the array, sort them or loop through them.
+
+On top of that combining these array function with each other will show the functional side to javascript in a nice way.
+
+The warmup exercises will be a bit abstract. But the in the **hyfBay exercise** the task will be a lot closer to a **real world task**.
+
+## Appreciate how far you have come
+
+Javascript is getting difficult now and we are aware of that! Take some time to appreciate how far you have come that last 6 weeks. Instead of comparing yourself to others, compare yourself to where you were a some time ago. If you are seeing progress then you are doing it right 💪
+
+## Overview of homework
+
+1. **[Warmup array exercises:](#1-warmup-array-exercises)** Warmup exercise that includes
+
+ - Doubling the number
+ - ⭐ Working with movies
+
+2. 🌟 **[hyfBay](#2-hyfbay---get-the-okayest-products-here---continued):** It's a single-page app where users can search for products.
+
+## 1. Warmup array exercises
+
+If you struggle to do this weeks homework there are a couple of things to do:
+
+- Try watch this video:
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=AJt_O0EFDC8), [part 2](https://www.youtube.com/watch?v=4tj7CvD7ka8), [part 3](https://www.youtube.com/watch?v=CO40FG6pK2k) [part 4](https://www.youtube.com/watch?v=eA2tCs0AaaM)
+- Read up on array functions [here](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week2/readme.md#array-methods-map-filter-and-sort)
+
+### 1.1. Doubling of number
+
+Say you would like to write a program that **doubles the odd numbers** in an array and **throws away the even number**.
+
+Your solution could be something like this:
+
+```js
+let numbers = [1, 2, 3, 4];
+let newNumbers = [];
+
+for (let i = 0; i < numbers.length; i++) {
+ if (numbers[i] % 2 !== 0) {
+ newNumbers[i] = numbers[i] * 2;
+ }
+}
+
+console.log("The doubled numbers are", newNumbers); // [2, 6]
+```
+
+Rewrite the above program using `map` and `filter` don't forget to use arrow functions.
+
+### 1.2. codewars!
+
+Complete these Katas:
+
+- [8 kyu To square(root) or not to square(root)](https://www.codewars.com/kata/57f6ad55cca6e045d2000627)
+- [8 kyu Removing Elements](https://www.codewars.com/kata/5769b3802ae6f8e4890009d2)
+
+### 1.3. Working with movies
+
+
+
+Copy the movies array in the [movies](homework/movies.js) file. Use this array to do the following tasks:
+
+1. Create an array of movies containing the **movies with a short title** (you define what short means)
+2. Create an array of movie titles with **long movie titles**
+3. Count the **number of movies** made between 1980-1989 (including both the years)
+4. Create a new array that has an **extra key called tag**. The tag is based on the rating: Good (>= 7), Average (>= 4 and < 7), Bad (< 4)
+5. **Using [chaining](readme.md#chaining)**, first filter the movies array to only contain the movies rated higher than 6. Now map the movies array to only the rating of the movies.
+6. **Count the total number of movies** containing any of following keywords: `Surfer`, `Alien` or `Benjamin`. So if there were 3 movies that contained `Surfer`, 1 with `Alien` and 2 with `Benjamin`, you would return 6. Can you make sure the search is case insensitive?
+7. Create an array of movies where a **word in the title is duplicated**. Fx "Star **Wars**: The Clone **Wars**" the word **Wars** is duplicated. Here are some madeup examples of movies with duplicated words in the title: "**The** three men and **the** pistol", "**Chase** three - The final **chase**"
+8. Calculate the **average rating** of all the movies using [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce). _Optional_
+9. **Count the total number** of Good, Average and Bad movies using [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce). A return could fx be `{goodMovies: 33, averageMovies: 45, goodMovies: 123}` _Optional_
+
+## 2. hyfBay - get the okay'est products here - continued
+
+**Continue work on your homework regarding the Hyfbay** from previous week. Please copy the files from last week into this weeks `hyf-homework` folder and continue working there. If you have not made last weeks homework the solution for it is included in [this weeks homework folder](homework/hyf-bay) in the `main.js` file.
+
+### 2.1. Filter products
+
+A very normal usecase for a product site is that a **user wants to search for some product** or find products that are cheaper than a set price. Lets implement that functionality for a user!
+
+BUT first lets figure out what happens on a conceptual level, when a user filters some products:
+
+1. Some kind of **event happens**, fx a user searches for a product, we need to listen for that event
+2. When that event happens we need to **filter the products** the user wants
+3. Then we should **render those products**
+
+Lets get a little closer to javacript:
+
+1. `.addEventListener` on an element
+2. `.filter` on the products array
+3. `renderProducts` with the filtered array
+
+### 2.2 Searching for products
+
+A user needs to search for products. That means that we need to add an input element to the html.
+
+When the user writes something in the search input field. The products should be updated to only include the products that match the name.
+
+So what event should we listen for in the `addEventListener` method? And what element should we listen on?
+
+Use the overview shown above and the `renderProducts` function.
+
+
+
+### 2.3. Filter products based on max price
+
+Lets help a user to find cheap products! When the **user writes a maximum price** the products should be filtered to match that maximum price
+
+_Hint: Break this task into smaller tasks!_
+
+
+
+### 2.4. Make the website look nicer!
+
+The website looks awful now, **but** luckily you have had css and html and know exactly what it takes to make this website shine!
+
+Improve it how you see fit. Maybe add a footer, header, logo, title, styling, responsivity. Whatever you feel like would improve the site!
+
+### 2.5. Create some extra feature
+
+No matter how small or how big. Create some feature that would be **cool/helpful/quirky/funny**.
+
+### 2.6 Sort the products - _optional_
+
+This task is more open ended! So you need to come up with fx how the user should interact with the functionality.
+
+Give the user the possibility to sort the products. That could fx be on price, name, rating or all of the above!
diff --git a/legacy/javascript/javascript2/week2/optional-homework/hyf-bay-price.gif b/legacy/javascript/javascript2/week2/optional-homework/hyf-bay-price.gif
new file mode 100644
index 00000000..177f5299
Binary files /dev/null and b/legacy/javascript/javascript2/week2/optional-homework/hyf-bay-price.gif differ
diff --git a/legacy/javascript/javascript2/week2/optional-homework/hyf-bay-searching.gif b/legacy/javascript/javascript2/week2/optional-homework/hyf-bay-searching.gif
new file mode 100644
index 00000000..03bb772f
Binary files /dev/null and b/legacy/javascript/javascript2/week2/optional-homework/hyf-bay-searching.gif differ
diff --git a/legacy/javascript/javascript2/week2/optional-homework/hyf-bay/hyfBayHelpers.js b/legacy/javascript/javascript2/week2/optional-homework/hyf-bay/hyfBayHelpers.js
new file mode 100644
index 00000000..faca5476
--- /dev/null
+++ b/legacy/javascript/javascript2/week2/optional-homework/hyf-bay/hyfBayHelpers.js
@@ -0,0 +1,98 @@
+/* DONT MODIFY ANY OF THIS CODE!!!*/
+
+window.availableCountries = [
+ "Denmark",
+ "Sweden",
+ "Norway",
+ "Germany",
+ "Iceland",
+ "England",
+];
+
+window.getAvailableProducts = function () {
+ function getRandomInt(min, max) {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ function getRandomItem(availableProductNames) {
+ return availableProductNames[
+ getRandomInt(0, availableProductNames.length - 1)
+ ];
+ }
+
+ function getRandomProductname() {
+ const preWords = [
+ "Used",
+ "Fantastic",
+ '"Used"',
+ "Broken",
+ "Beautiful",
+ "Wet",
+ "Green",
+ "Sloppy",
+ "Dirty",
+ ];
+ const productNames = [
+ "Carrot",
+ "Drone",
+ "Giftcard",
+ "Puppy",
+ "Car",
+ "Shirt",
+ "Milk",
+ "Chalk",
+ "Fish fingers",
+ "Socks",
+ "Chocolate",
+ "Toothbrush",
+ "Computer",
+ "Nokia",
+ "Cologne",
+ ];
+
+ let chosenProductName = getRandomItem(productNames);
+ const shouldHavePreWord = getRandomInt(0, 10) > 6;
+
+ if (shouldHavePreWord) {
+ const preWord = preWords[getRandomInt(0, preWords.length - 1)];
+ chosenProductName = `${preWord} ${chosenProductName}`;
+ }
+
+ return chosenProductName;
+ }
+
+ /* DONT MODIFY ANY OF THIS CODE!!!*/
+ function getRandomCountries() {
+ const numberOfCountries = getRandomInt(1, 3);
+
+ const randomCountries = [];
+ while (randomCountries.length < numberOfCountries) {
+ const randomIndex = getRandomInt(0, window.availableCountries.length - 1);
+ const randomCountry = window.availableCountries[randomIndex];
+ if (!randomCountries.includes(randomCountry)) {
+ randomCountries.push(randomCountry);
+ }
+ }
+
+ return randomCountries;
+ }
+
+ const numberOfAvailableProducts = getRandomInt(0, 30);
+ const availableProducts = Array.apply(
+ null,
+ Array(numberOfAvailableProducts),
+ ).map(() => {
+ const name = getRandomProductname();
+ return {
+ id: `${name}${getRandomInt(0, 100000)}`,
+ name,
+ price: getRandomInt(0, 10000),
+ rating: getRandomInt(1, 10),
+ shipsTo: getRandomCountries(),
+ };
+ });
+
+ return availableProducts;
+};
diff --git a/legacy/javascript/javascript2/week2/optional-homework/hyf-bay/index.html b/legacy/javascript/javascript2/week2/optional-homework/hyf-bay/index.html
new file mode 100644
index 00000000..a0e33056
--- /dev/null
+++ b/legacy/javascript/javascript2/week2/optional-homework/hyf-bay/index.html
@@ -0,0 +1,62 @@
+
+ HyfBay
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/legacy/javascript/javascript2/week3/assets/run-after-delay.png b/legacy/javascript/javascript2/week3/assets/run-after-delay.png
new file mode 100644
index 00000000..3e107e2c
Binary files /dev/null and b/legacy/javascript/javascript2/week3/assets/run-after-delay.png differ
diff --git a/legacy/javascript/javascript2/week3/assets/run-after-delay.svg b/legacy/javascript/javascript2/week3/assets/run-after-delay.svg
new file mode 100644
index 00000000..17f75908
--- /dev/null
+++ b/legacy/javascript/javascript2/week3/assets/run-after-delay.svg
@@ -0,0 +1,22 @@
+
x
functionrunFunctionAfterDelay(delay, callback) {
// YOUR CODE HERE
}
runFunctionAfterDelay(4, function() {
console.log('Should be logged after 4 seconds');
});
\ No newline at end of file
diff --git a/legacy/javascript/javascript2/week3/lesson-plan.md b/legacy/javascript/javascript2/week3/lesson-plan.md
new file mode 100644
index 00000000..ca3858df
--- /dev/null
+++ b/legacy/javascript/javascript2/week3/lesson-plan.md
@@ -0,0 +1,186 @@
+# Lesson plan
+
+## Lesson materials
+
+These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.
+
+- [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-2-Week-3-6bce73b3a0bf47a3ad32ed12ee4d0519?pvs=4) (by [Thomas](https://github.com/te-online))
+
+- Focus on having lots of in class exercises.
+- DONT teach everything, let the students investigate topics on their own aswell!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below!
+
+To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+- Function as a variable - function can be called inside another function, like we saw with the homemade `forEach`
+ - [Code inspiration](#calling-a-function-within-a-function)
+- Callback function and asyncronicity - shows a practical example of function that gets called by another function (fx `setTimeout` or `addEventListener`)
+ - [Code inspiration](#callback-functions)
+- Anonomyous function vs named function
+ - [Code inspiration](#anonymous-vs-named-function)
+- [Exercise 1](#click-counter), [exercises 2](#delay-clicker), [exercise 3](#page-onload), [exercises 4](#mouse-position)
+- Scope - Only if the students needs this! Ask to their abilities!
+
+The students should after the class **feel comfortable with callback functions** and the fact that a **function works just like a variable** that can be passed around. Also asynchronicity is important, when is a function called and where does it stop.
+
+Also hammer in the point of the difference between:
+
+```js
+document.querySelector("button").addEventListner("click", logOuttext);
+document.querySelector("button").addEventListner("click", logOuttext());
+```
+
+Good example of practical example of callbacks:
+
+At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/main/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
+
+This is super good at explaining function logic
+
+
+## Flipped classroom videos
+
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week3/preparation.md#flipped-classroom-videos)
+
+## Code inspiration
+
+### Calling a function within a function
+
+```js
+// Here we create a funtion that as a parameter takes a function!! Super weird right!?
+// Functions works just like any other type in js.
+function functionRunner(functionToRun) {
+ console.log(typeof functionToRun);
+ // Here we are calling the function that is provided as an argument when calling functionRunner
+ functionToRun();
+}
+
+functionRunner(function () {
+ console.log("hello");
+});
+
+// We dont see anything, why??
+functionRunner(Math.random);
+
+// Lets rewrite functionRunner to log out the return of a function
+function functionRunnerImproved(functionToRun) {
+ console.log(typeof functionToRun);
+ // Here we are calling the function that is provided as an argument when calling functionRunner
+ const capturedReturnValue = functionToRun();
+ console.log(capturedReturnValue);
+}
+
+functionRunnerImproved(Math.random);
+```
+
+### Callback functions
+
+```js
+/*
+Events
+Events in javascript are thing like:
+A timer has just finished, a user clicked a button, our page has loaded,
+someone types into an input element or we have just gotten some data from a server.
+When these events happen, we usually want to add some functionality.
+Fx when a user clicks the like button (event), we want to increment the like counter and color the like button blue.
+Or when someone clicks "Close cookies" (event) we want to remove the cookie div.
+Lets first try to create some js that waits for 2 seconds and the console.logs out "2 seconds has elapsed!"
+In javascript we use the word eventlistener to listen
+*/
+
+// Tried to find actual webkit implementation, but failed. To show that the setTimeout implementation is just calling the provided function after a given time
+setTimeout(function () {
+ console.log("2 seconds has elapsed!");
+}, 2000);
+
+// Cool, now lets make a function as a variable:
+const fourSecondLog = function () {
+ console.log("4 seconds has elapsed!");
+};
+
+setTimeout(fourSecondLog, 4000);
+
+// Now lets try and log out "button clicked!" when a button is clicked.
+// To check if a button gets clicked we use a what is called an eventlistener.
+// Imagine a person listening to the click of a button and everytime he hears a click he yells out "CLICKED".
+const buttonElement = document.querySelector("button");
+buttonElement.addEventListener("click", function () {
+ console.log("Button clicked!");
+});
+
+const buttonClicked = function () {
+ console.log("Button clicked as a variable!");
+};
+// Cool man! Lets try and add that function as a variable.
+buttonElement.addEventListener("click", buttonClicked);
+
+//Callbacks
+// Now lets learn about callbacks!
+// Well actually you have already made callbacks!
+// When you give a function to an event listener or a timer or when fetching data you are using a callback function
+
+// Lets create a callback function when someone writes in a input element
+const callback = function () {
+ console.log("Someone is writing!!");
+};
+
+document.querySelector("input").addEventListener("input", callback);
+```
+
+### Anonymous vs named function
+
+```js
+// Named function
+function myFunction() {
+ console.log("myFunction");
+}
+
+// Anonymous function, assigned to a variable
+const myFunctionAsVar = function () {
+ console.log("myFunctionAsVar");
+};
+
+document.body.addEventListener("click", myFunctionAsVar);
+document.body.addEventListener("click", myFunction);
+```
+
+## Exercises
+
+These could be more real world examples. Any ideas? Make a PR :)
+
+### Click counter
+
+Create an `index.html` file with two buttons:
+
+- When the button first is clicked it should first log out 0. The next time it is clicked it should log out 1, etc.
+- Clicking the second button should also count up and logout the same variable.
+
+### Delay clicker
+
+Create a button in html with the text "Log in 3 seconds"
+
+- When the button is clicked it should wait 3 seconds and then log the text "This text was delayed by 3 seconds".
+
+### Page onload
+
+First create a callback function as a variable that logs this out: "DOM fully loaded and parsed"
+This callback function should be called when the DOM is fully loaded.
+To find what this function is called go to google! What should we search for???
+
+### Mouse position
+
+Create a handler, that prints the x,y coordinate of the mouse event.
+
+#### Mouse position online tool
+
+Say we want to create an online tool where businesses can see where their users' mouse is most of the time. Businesses can now figure out if they have designed their website correctly.
+
+Lets create some js that will get the average `x` and `y` position of a user after 30 seconds.
+
+Before starting with this exercise, create a plan for how you will implement this! Maybe together with your mentor.
+
+Thank you for teaching Javascript 2. To make sure we keep improving, we are seeking your feedback on the module. For homework helpers, please click [here](https://forms.gle/pQQGWPAebVmbSDq49) to give us feedback. For teachers, your survey is available [here](https://forms.gle/ATsPi9zdFkd8tvHh7).
diff --git a/legacy/javascript/javascript2/week3/optional-homework.md b/legacy/javascript/javascript2/week3/optional-homework.md
new file mode 100644
index 00000000..d93d1ebc
--- /dev/null
+++ b/legacy/javascript/javascript2/week3/optional-homework.md
@@ -0,0 +1,109 @@
+# Optional Homework
+
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
+
+## So why this homework?
+
+Working with functions in javascript is such an essential part of working with javascript.
+
+We want you to realise that **functions are just variables** in javascript. It is exactly the same as string or a number. This homework forces you into using functions in weird ways that forces you to think differently about functions.
+
+## 1. Warmup
+
+### 1.1 codewars!
+
+- [7 kyu Product Array (Array Series #5)](https://www.codewars.com/kata/5a905c2157c562994900009d/javascript)
+
+### 1.2 functions!
+
+If you struggle to do this weeks homework there are a couple of things to do:
+
+- Try watch this video:
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=57bGm2wa2JM), [part 2](https://www.youtube.com/watch?v=Rpvuz2ywiQM), [part 3](https://www.youtube.com/watch?v=bjvplXwTsyo) [part 4](https://www.youtube.com/watch?v=YE_off9euAc)
+- Read up on functions, callback async and synchronous functions [here](readme.md#callbacks)
+
+The warmup is a **little abstract**, it will get more concrete later on!
+
+1. Log out the text `Called after 2.5 seconds` 2.5 seconds after the script is loaded.
+
+2. Create a function that takes 2 parameters: `delay` and `stringToLog`. Calling this function should log out the `stringToLog` after `delay` seconds. Call the function you have created with some different arguments.
+ 
+
+3. Create a button in html. When clicking this button, use the function you created in the previous task to log out the text: `Called after 5 seconds` 5 seconds after the button is clicked.
+
+
+
+4. Create two functions and assign them to two different variables. One function logs out `Earth`, the other function logs out `Saturn`. Now create a new third function that has one parameter: `planetLogFunction`. The only thing the third function should do is call the provided parameter function. Try call the third function once with the `Earth` function and once with the `Saturn` function.
+
+
+
+5. Create a button with the text called "Log location". When this button is clicked the location (latitude, longitude) of the user should be logged out using this [browser api](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
+
+
+
+6. _Optional_ Now show that location on a map using fx the [Google maps api](https://developers.google.com/maps/documentation/javascript/tutorial)
+
+7. Create a function called `runAfterDelay`. It has two parameters: `delay` and `callback`. When called the function should wait `delay` seconds and then call the provided callback function. Try and call this function with different delays and different callback functions
+
+
+
+8. Check if we have double clicked on the page. A double click is defined by two clicks within 0.5 seconds. If a double click has been detected, log out the text: "double click!"
+
+9. Create a function called `jokeCreator` that has three parameters: `shouldTellFunnyJoke` - boolean, `logFunnyJoke` - function and `logBadJoke` - function. If you set `shouldTellFunnyJoke` to `true` it should call the `logFunnyJoke` function that should log out a funny joke. And vice versa.
+
+## 2. Function as a variable
+
+Create funtions that are used in these different ways:
+
+- Create an array with 3 items. All items should be functions. Iterate through the array and call all the functions.
+- Create a function as a const and try creating a function normally. Call both functions. Read up on this if you are interested:
+- Create an object that has a key whose value is a function. Try calling this function.
+
+Yes i know that was a little tough, now on to the fun part 🎉
+
+
+
+## 3. The fastest presser in this realm
+
+Lets create a fun simple game :)
+
+Here is the setup of the game: **Two users compete** about who can **press a key the most times** within a set time!
+
+A user specifies how long time the game should be, and presses **"start game!"**. When the button is pressed it is about pressing either `l` or `s` on the keyboard. The user that has the highest number of keypresses after the time is up, wins 🎉
+
+Here is a gif of how the site should work:
+
+
+
+You can implement it exactly like you want to, but here is my recommended order:
+
+1. **Create an input and a button in html**. When the button is clicked, get the value of the input. This value will be the amount of time the game should run.
+2. **Set a timeout for the time specified by the user.** After that time has run out just log out a simple string.
+3. **Create an event listener** so you can call a function **when any key is pressed**. Now grap the actual key that was pressed. Fx was it a `j` or an `i`. We are interested in `s` and `l`. Here google is your friend!
+4. **Keep a counter** for how many times `l` and `s` was pressed.
+5. **Now put it all together!** After the timeout is done figure out which of the counters is largest. Give some kind of feedback to the users indicating who won.
+
+### 2.1 Extra features
+
+1. **Start a new game** functionality. Create some functionality so that the users can restart a game.
+2. Try and give the site some **styling so it looks nice** :)
+3. **Custom feature**. Add something unique to the game! If you dont know how to implement it, just describe what it should do!
+4. **Countdown to end of game** - _optional_. Have a countdown that simply counts down until the game is done.
+
+Here are some general things to consider:
+
+- What if a user starts pressing a key before the game is started, what should happen?
+- What if the game is a draw? Are both winners? None winners? Maybe indicate to the user that is was a draw.
+- What if no time was specified for the game?
+- What if there were no key presses before the game ends?
+
+### 3.3 Confetti
+
+If you wanna give the game some confetti like in the gif, check out [this library](https://www.npmjs.com/package/confetti-js)
+
+Use the library in your page by adding this line before you load your main.js:
+
+```html
+
+```
diff --git a/legacy/javascript/javascript2/week3/optional-homework/fastest-clicker.gif b/legacy/javascript/javascript2/week3/optional-homework/fastest-clicker.gif
new file mode 100644
index 00000000..72226655
Binary files /dev/null and b/legacy/javascript/javascript2/week3/optional-homework/fastest-clicker.gif differ
diff --git a/legacy/javascript/javascript2/week3/preparation.md b/legacy/javascript/javascript2/week3/preparation.md
new file mode 100644
index 00000000..0f7ffd31
--- /dev/null
+++ b/legacy/javascript/javascript2/week3/preparation.md
@@ -0,0 +1,11 @@
+# Preparation
+
+- Callback functions: (15 min)
+- Read about Asynchronous vs. Synchronous programming: (10 min)
+
+_Please go through the material and come to class prepared!_
+
+## Flipped classroom videos
+
+- [Javascript callbacks](https://youtu.be/hjgunSqSPaA)
+- [Working with asynchronous code in Javascript](https://youtu.be/RTrua6CRNEM)
diff --git a/legacy/javascript/javascript3/README.md b/legacy/javascript/javascript3/README.md
new file mode 100644
index 00000000..ccc771e1
--- /dev/null
+++ b/legacy/javascript/javascript3/README.md
@@ -0,0 +1,9 @@
+# JavaScript 3
+
+Here you can find course content and homework for the JavaScript 3 module.
+
+| Week | Topic | Preparation | Homework | Lesson plan |
+| ---- | ---------------------------- | ----------------------------------- | ---------------------------------------- | ----------------------------------- |
+| 7. | JSON; APIs; `fetch` | [Preparation](week1/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week1/lesson-plan.md) |
+| 8. | Promises; `async`/`await` | [Preparation](week2/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week2/lesson-plan.md) |
+| 9. | Classes; Promises (advanced) | [Preparation](week3/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week3/lesson-plan.md) |
diff --git a/legacy/javascript/javascript3/week1/README.md b/legacy/javascript/javascript3/week1/README.md
new file mode 100644
index 00000000..e6a12f6b
--- /dev/null
+++ b/legacy/javascript/javascript3/week1/README.md
@@ -0,0 +1,13 @@
+# JavaScript 3, Week 1
+
+## Learning Goals
+
+- [ ] Json
+- [ ] Apis
+- [ ] Fetch (No promise explanation! Focus on usage)
+
+## Relevant links
+
+- [Preparation](preparation.md)
+- [Homework](/homework-projects/readme.md)
+- [Lesson plan](lesson-plan.md)
diff --git a/legacy/javascript/javascript3/week1/assets/giphy-search.gif b/legacy/javascript/javascript3/week1/assets/giphy-search.gif
new file mode 100644
index 00000000..e61311cd
Binary files /dev/null and b/legacy/javascript/javascript3/week1/assets/giphy-search.gif differ
diff --git a/legacy/javascript/javascript3/week1/lesson-plan.md b/legacy/javascript/javascript3/week1/lesson-plan.md
new file mode 100644
index 00000000..bb0a440d
--- /dev/null
+++ b/legacy/javascript/javascript3/week1/lesson-plan.md
@@ -0,0 +1,180 @@
+# Lesson plan
+
+- Focus on having lots of in class exercises.
+- DONT teach everything, let the students investigate topics on their own aswell!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+## Lesson materials
+
+These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.
+
+- [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-3-Week-1-c6fd6d7243454ac0b519c17829bf8761?pvs=4) (by [Thomas](https://github.com/te-online))
+
+Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below!
+
+To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+---
+
+- Json
+ - Start of with letting the students investigate what JSON is. Pick a group and let them explain to class what JSON is.
+ - Types (string, number, object, array, boolean, null)
+ - Validation
+ - Rules: JSON names require double quotes, no trailing commas
+ - `.parse` and `.stringify` - Let students investigate what these functions do
+ - Difference between js object and json file
+ - [Code inspiration](#json)
+ - [Exercise](#meal-ordering-website)
+- Apis
+ - The focus should be on consuming api's with `get` method.
+ - Give an example of an api (preferably one with an accesstoken, showing that part aswell)
+ - Explain conceptually what an api is (interface that hides abstraction). Explain how paths and query parameters work. Do not show how an api is implemented. We show that in the node class. Good analogy [here](https://www.reddit.com/r/webdev/comments/en04ct/i_created_a_word_suggestions_api_to_use_on_a/fdtmj60/)
+ - [Code inspiration](#apis)
+- Fetch (No promise explanation! Focus on usage)
+ - Focus on usage let the students copy the fetch script and use it from there. Next week promises will be explained!
+ - [Code inspiration](#fetch)
+ - [Exercise 1](#astronauts-in-space), [exercise 2](#dog-fan-website)
+
+At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/main/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
+
+## Flipped classroom videos
+
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript3/week1/preparation.md#flipped-classroom-videos)
+
+## Code inspiration
+
+### JSON
+
+```js
+/*
+JSON
+JSON stands for JavaScript Object Notation
+JSON is a lightweight format for storing and transporting data
+JSON is often used when data is sent from a server to a web page
+Typical example of json:
+https://jsonplaceholder.typicode.com/users
+For validating your JSON
+https://jsonlint.com/
+The most important rules:
+JSON names require double quotes.
+No trailing commas
+In JSON, values must be one of the following data types:
+a string
+a number
+an object (JSON object)
+an array
+a boolean
+null
+*/
+
+// A string formatted like a JSON file
+const jsonExample = '{"name": "Benjamin", "age": 23}';
+// This is just a string!
+console.log(jsonExample);
+// Cannot access a the key name of a string
+console.log(jsonExample.name);
+
+// Now we parse (convert) the string (that we know is valid JSON) into a workable javascript object
+const parsedJavascriptObject = JSON.parse(jsonExample);
+// yeah we now have a js object
+console.log(parsedJavascriptObject);
+// where we can access the name key
+console.log(parsedJavascriptObject.name);
+
+// We can also go the other way! Here we have an object
+const javascriptObject = {
+ name: "TwentyThree",
+ age: 23,
+};
+console.log(javascriptObject);
+
+// Now we convert the object back into a string
+console.log(JSON.stringify(javascriptObject));
+
+// JSON does not have to be an object, it can also be an array
+console.log(JSON.parse("[1,2,3]"));
+
+// create json using JSON.stringify
+```
+
+### Apis
+
+API - Application Programming Interface
+What is an interface?
+
+Programmers can use an api to access complex functionality in a simple way.
+Electricity socket. You just plug your appliance into the wall and it works.
+We dont have to worry about the wiring or anything. The complex functionality has been abstracted away.
+Web API's are like that, but just for getting data from a server.
+
+There are some funny apis to play with:
+
+-
+-
+
+This incredibly unique service generates true random numbers by measuring quantum fluctuations of a vacuum in real-time!
+
+
+
+### Fetch
+
+```js
+fetch("https://yesno.wtf/api/")
+ .then((response) => response.json())
+ .then((yesOrNoData) => {
+ console.log(yesOrNoData);
+ // HERE IS WHERE YOU WRITE YOUR CODE!!!!!!!!
+ });
+```
+
+## Exercises
+
+## Meal ordering website
+
+Imagine your are running a meal ordering website.
+Orders come in from the web and we need to store them in a json file.
+Create a json file with two orders that contain at least these things:
+
+- Order name
+- Order id
+- Price
+- List of drinks
+- Order extras (fx cheese, lettuce etc.)
+
+Think about what what type the data should be saved as!
+
+## Astronauts in space
+
+Use [this api](http://api.open-notify.org/astros.json) to fetch how many astronauts are currently in spaces.
+
+Add the following text to the DOM, using the data about astronauts:
+
+```text
+There are NUMBER_OF_ASTRONAUTS astronauts in space, they are:
+ASTRONAUT_NAME1
+ASTRONAUT_NAME2
+ASTRONAUT_NAME3
+ASTRONAUT_NAME4
+ASTRONAUT_NAME5
+```
+
+An example with 2 astronauts could be:
+
+```text
+There are 2 astronauts in space, they are:
+Benjamin Hughes
+Jørgen Pedersen
+```
+
+## Dog fan website
+
+Let's create a site for dog lovers using this API:
+
+1. Get a random dog image and display it in the browser
+2. Get a new image every 2 sec.
+3. Get the list of all breeds from
+4. Display a random image of a breed from the list
+5. Display the name of the breed under the image
diff --git a/legacy/javascript/javascript3/week1/optional-homework.md b/legacy/javascript/javascript3/week1/optional-homework.md
new file mode 100644
index 00000000..a25f1b22
--- /dev/null
+++ b/legacy/javascript/javascript3/week1/optional-homework.md
@@ -0,0 +1,100 @@
+# Optional Homework
+
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
+
+## Why should I even do this homework?
+
+Working with json and api's is the way modern **javascript application's communicate with servers**. That can be either getting some data but also updating or creating new data.
+
+It is how autocomplete can receive suggestions for a search query and how infinite scroll can keep loading new posts.
+
+If you struggle to do this weeks homework there are a couple of things to do:
+
+- Try watch these two videos: ,
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=0piVFh9S0Kc), [part 2](https://www.youtube.com/watch?v=DjdFsV1X9-o), [part 3](https://www.youtube.com/watch?v=5uN00cZzUKM), [part 4](https://www.youtube.com/watch?v=GB1N8XxFP7I)
+- Read up on [fetch](https://javascript.info/fetch), [JSON](https://javascript.info/json). The articles are a little tricky
+
+## Create your own json file
+
+Create your own json file with something that **interests you**. Maybe that could be computers, pets, music etc.
+
+Remember to validate the json using a tool like fx this:
+
+## Find a cool api
+
+Find a cool api and **explain how it works** and what kind of **json data** the api responds with. Is it an array, an object, a string. How is the data structure. Is it fx an array of objects or how is it structured.
+
+There are a few examples of apis here:
+
+
+## Weather app
+
+Lets create a **weather app** that based on a **users location** can find the relevant weather for that user.
+
+### Sign up for api key
+
+Go to and **sign up for an api key**. This key we will use for getting access to the weather api.
+
+### First call to the weather api
+
+We are going to be using the current weather api:
+
+To get some data from the api go to , where `YOUR_APP_ID` is substituted with the key you signed up for in the first step.
+
+If you go to the [above url](https://api.openweathermap.org/data/2.5/weather?q=copenhagen&appid=YOUR_APP_ID) and see some weather json data then congrats 🎉.
+
+If not, try and **read the error 💻** and see if you can figure out what went wrong. Or ask in the slack group :)
+
+### Fetch weather data from a city
+
+Create a javascript file and an html file and import the javascript file in the html file.
+
+**Fetch weather json data** from the api using a city a user has specified: Add an **input element** and **a button** to the html. When the button is clicked, get the text from the input (which should be a city name) and fetch the relevant weather data from that city.
+
+Remember to show some **loading text**. What if a user **writes nothing in the input?**
+
+### Display the data
+
+This data should be showed in your app:
+
+- The chosen city
+- Temperature
+- Icon for the weather type
+- Wind speed
+- How clowdy it is
+- When sunrise and sunset is
+- _Optional_ a map showing where the city is located
+
+You decide how the data should be displayed. You could maybe be inspired by googling for "weather app ui".
+
+### Your feature here
+
+Now its your time to **come up with a feature**. No matter how big or small.
+
+### Use my current position _optional_
+
+Investigate the [geo location api](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API). Add a button to your page, clicking this button will **get the users current position**. Use that position to fetch weather data from that position.
+
+Hint: We have to change the weather api url, so we are not using city but position. Look into the documentation!
+
+### Save my location _optional_
+
+Imagine if a user did not have to either write a city or click the get my position button, but could just save the location. Lets do that!
+
+When a user has gotten a location through either the input element or the geo location api, save that location using [localstorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Localstorage is a **way to save data** even when you close the browser.
+
+Now when loading the page and there is a city in the localstorage, use that to get the current weather.
+
+
+
+## Giphy api
+
+Create a site where a **user can search for any word**. When searching a word the application will **find a gif** using the **searched word** using the giphy api:
+Here is how it is going to work: The user can write some text indicating the gif he is looking for, click a button and then a gif will be found (using the searched word) and the gif will be displayed to the user.
+
+Add an input element, where the user can specify how many gif results the user wants.
+
+Try break this problem into **smaller problems** and write down how you are going to solve the problem **BEFORE you start coding.**
+
+
diff --git a/legacy/javascript/javascript3/week1/preparation.md b/legacy/javascript/javascript3/week1/preparation.md
new file mode 100644
index 00000000..141ba377
--- /dev/null
+++ b/legacy/javascript/javascript3/week1/preparation.md
@@ -0,0 +1,19 @@
+# Preparation
+
+- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (5 min)
+
+- Read about APIs! The resources keep changing, but the core concepts are everlasting, so we think it is best if you search `"what are APIs"` and watch/listen/read around until you get a good basic idea! 👀 👂🏽 🧐
+ Tip: try searching `"API waiter example"` - it is a good classic analogy explaining how APIs work!
+
+- A recap of higher order functions & arrays: [video](https://www.youtube.com/watch?v=rRgD1yVwIvE&t=1s&ab_channel=TraversyMedia) (~35 mins)
+
+- JSON Crash Course: [video](https://www.youtube.com/watch?v=wI1CWzNtE-M&t=1311s&ab_channel=TraversyMedia) (~25 mins)
+
+
+
+_Please go through the material and come to class prepared!_
+
+## Flipped classroom videos
+
+- [Working with JSON using Javascript](https://youtu.be/ghMR-k5pKjg)
+- [Fetching data from API using fetch - Javascript](https://youtu.be/pL_zEzunBKU)
diff --git a/legacy/javascript/javascript3/week2/README.md b/legacy/javascript/javascript3/week2/README.md
new file mode 100644
index 00000000..6ba6f17a
--- /dev/null
+++ b/legacy/javascript/javascript3/week2/README.md
@@ -0,0 +1,44 @@
+# Learning Goals
+
+- [ ] Async/await
+- [ ] Promises
+
+## Relevant links
+
+- [Preparation](preparation.md)
+- [Homework](/homework-projects/readme.md)
+- [Lesson plan](lesson-plan.md)
+
+## Promise chaining
+
+Just like we can chain array functions like this:
+
+```js
+const fastCarBrands = cars
+ .filter((car) => car.speed > 60)
+ .map((car) => car.brand);
+```
+
+We can chain promise function aswell, and it works exactly like with chaining array methods or chaining anything in js. We use the return of calling the previous function:
+
+```js
+doesBenjaminEndWithN = "BENJAMIN"
+ .toLowerCase() // <-- toLowerCase returns a string!
+ .endsWith("n"); // <-- That string we can call .endsWith on!
+```
+
+When we deal with promises the chaining part comes because calling the `.then` function [returns a promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then)!
+
+We know that when we have a promise, we can call `.then` on that promise
+
+```js
+fetch("http://api.open-notify.org/astros.json")
+ .then(function (response) {
+ // <-- .then returns a promise!
+ // The returned promise (from calling .then) resolves when response.json() resolves!
+ return response.json();
+ })
+ .then(function (astronautData) {
+ // because the previous .then function returns a promise, we can call .then on that!
+ });
+```
diff --git a/legacy/javascript/javascript3/week2/assets/all-at-once.gif b/legacy/javascript/javascript3/week2/assets/all-at-once.gif
new file mode 100644
index 00000000..307bf361
Binary files /dev/null and b/legacy/javascript/javascript3/week2/assets/all-at-once.gif differ
diff --git a/legacy/javascript/javascript3/week2/assets/one-by-one.gif b/legacy/javascript/javascript3/week2/assets/one-by-one.gif
new file mode 100644
index 00000000..42860a2c
Binary files /dev/null and b/legacy/javascript/javascript3/week2/assets/one-by-one.gif differ
diff --git a/legacy/javascript/javascript3/week2/exercise.html b/legacy/javascript/javascript3/week2/exercise.html
new file mode 100644
index 00000000..85efc587
--- /dev/null
+++ b/legacy/javascript/javascript3/week2/exercise.html
@@ -0,0 +1,15 @@
+
+
diff --git a/legacy/javascript/javascript3/week2/lesson-plan.md b/legacy/javascript/javascript3/week2/lesson-plan.md
new file mode 100644
index 00000000..397fae8e
--- /dev/null
+++ b/legacy/javascript/javascript3/week2/lesson-plan.md
@@ -0,0 +1,294 @@
+# Lesson plan
+
+- Focus on having lots of in class exercises.
+- DONT teach everything, let the students investigate topics on their own aswell!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+## Lesson materials
+
+These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.
+
+- [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-3-Week-2-0287dd1293df4a0a92171e62ce12f5c8?pvs=4) (by [Thomas](https://github.com/te-online))
+
+Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below!
+
+To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+---
+
+Promises is notoriously difficult to teach! I teach **consumption and creation of promises totally separate!** And show them that its just like with functions. There is a creation part and a comsumption part.
+
+First when they fully understand one part of promises, i move on! Don't overcomplicate things. Only mention the resolve function to begin with. When they get that, say that there also is a reject function. **Take as many babysteps as is possible!** Dont mention that resolve and reject can take an argument to begin with, first later explain that.
+
+This class is a little poor on real world examples. Make a PR if you have any good ideas!
+
+- Async/await - simple introduction focused on usage
+ - Quickly recap asynchronicity
+ - Ask the students what it means that some code is asynchronous
+ - Practical example of async/await
+ - [Exercises 1](#exercise-1)
+- Promise
+ - Why do we use promises?
+ - So important to explain this, the students always ask this!
+ -
+ - Consumption
+ - [Code inspiration](#promise-comsumption)
+ - Example, call some function that returns a promise (like fetch)
+ - [Exercises 2](#exercise-2)
+ - Creation
+ - [Code inspiration](#promise-creation---a-recipe-for-creating-your-own-promise)
+ - [Exercises 3](#exercise-3) and then [Exercises 4](#exercise-4)
+ - Async await
+ - [Exercises 5](#exercise-5)
+ - `Promise.all` - Let students investigate
+ - Optional - Chaining. Calling `.then` returns a promise. Only get to here when they understand async/await and promise consumption and creation.
+ - ?Code inspiration?
+ - Reason for promise:
+ - [Exercises 5](#exercise-5) and [Exercises 6](#exercise-6)
+
+At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/main/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
+
+## Flipped classroom videos
+
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript3/week2/preparation.md#flipped-classroom-videos)
+
+## Code inspiration
+
+### Async/await - simple usage
+
+```js
+// Warm up exercise. The students has to say everything they can about a variable, ONLY from the variable name. Fx the type, what it returns, what object we could expect etc.
+// cars, car, title, getTitle, addTitle, isTitle, hasTitle, hasItem, users, year, yearIndex, user, review.
+```
+
+```js
+// DONT EXPLAIN WHAT ASYNC OR AWAIT DOES YET! Explain on a higher level:
+// You have to write async before a function for await to work. No details for now
+// await waits until we have fetched the data from the api. Or said in another way await waits until fetch has resolved with the data from the api
+
+// write async before a function for await to work. What does it mean that something is asynchronous?
+async function getAstronauts() {
+ // await waits until we have data from fetch before it runs the next line. No need for callbacks 🤯
+ console.log("Before we fetch data");
+ const astronautsResponse = await fetch(
+ "http://api.open-notify.org/astros.json",
+ );
+ console.log(
+ "This is logged out after some time, even though the code looks synchronous! 🤯",
+ );
+ const astronauts = await astronautsResponse.json();
+ console.log("This is logged out after some time! 🤯");
+ console.log(astronauts);
+ return astronauts;
+}
+
+getAstronauts();
+```
+
+### Promise comsumption
+
+So how did the async/await example above actually work? Lets get into promises!
+
+If you have a promise, you can call two functions on that promise. '.then' and '.catch'. When are these functions called? What does it mean that a promise is resolved or rejected?
+
+The students should be able to answer these questions:
+// Question 1: What does it mean that a promise is resolved? Which method on a promise get called?
+// Question 2: What does it mean that a promise is rejected? Which method on a promise get called?
+// How would you explain your mom what resolved and rejected means?
+
+```js
+fetch("http://api.open-notify.org/astros.json")
+ .then((astronautsResponse) => astronautsResponse.json())
+ .then((astronauts) => {
+ console.log(astronauts);
+ })
+ .catch((error) => console.log(error));
+
+// https://codesandbox.io/s/scrollto-promise-example-0gjp6
+// If not working try chrome
+scrollTo("section.features")
+ .then(() => console.log("scrolling done"))
+ .catch((error) => console.log(error));
+
+// HAMMER in this point:
+// When you have a promise you can call two functions on that promise (.then and .catch). '.then' is called when the promise is resolved. '.catch' is called when the promise is rejected.
+```
+
+### Promise creation - A recipe for creating your own promise
+
+When you create a new promise you give it a function that has two functions as parameters (resolve and reject). Resolve is called when everything in a promise goes well. Reject is called when something goes wrong.
+
+```js
+// Start as simple as possible, no reject, just resolve!
+const oneSecondTimeoutPromise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve();
+ }, 1000);
+});
+
+// You can pass data in the resolve
+const oneSecondTimeoutPromise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve("1 second has passed");
+ }, 1000);
+});
+
+oneSecondTimeoutPromise.then((timeoutData) => {
+ console.log(timeoutData); // '1 second has passed'
+});
+
+const orderPizzaPromise = new Promise((resolve, reject) => {
+ const pizzaMakingTime = 10000;
+ const didPizzaBakingSucceed = true;
+ const pizza = "Macaroni pizza";
+ setTimeout(() => {
+ if (didPizzaBakingSucceed) {
+ resolve(pizza);
+ } else {
+ reject("The pizza was a mess");
+ }
+ }, pizzaMakingTime);
+});
+
+orderPizzaPromise
+ .then((pizza) => {
+ console.log(`Lets eat the ${pizza}`);
+ })
+ .catch((error) => {
+ console.log(`Lets eat the nothing`);
+ });
+
+// HAMMER in this point:
+// When you create a new promise you give it a function that has two functions as parameters (resolve and reject). Resolve is called when everything in a promise goes well. Reject is called when something goes wrong.
+
+// Compare function creation and consumption to promise creation and consumption
+// function creation
+function test() {}
+
+// function usage
+console.log(test());
+```
+
+### Back to async/await
+
+So writing `async` in front of a function makes it return a promise! The keyword `await` makes JavaScript wait until that promise resolved and returns its result.
+
+```js
+async function getAstronauts() {
+ try {
+ const astronautsResponse = await fetch(
+ "http://api.open-notify.org/astros.json",
+ );
+ const astronauts = await astronautsResponse.json();
+ return astronauts;
+ } catch (err) {
+ throw "Fetchin the astronauts went wrong";
+ }
+}
+
+const astronauts = getAstronauts();
+```
+
+### Function that returns a promise
+
+```js
+// This example could definitely be more real world! Any ideas, make a pull request!
+const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ const tea = {
+ color: "green",
+ taste: "Bitter",
+ };
+
+ resolve(tea);
+ }, 3000);
+});
+
+const isThereMoreTea = false;
+
+// This example could definitely be more real world! Any ideas, make a pull request!
+function makeTea() {
+ console.log("Start making tea");
+
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ const tea = {
+ color: "green",
+ taste: "Bitter",
+ };
+
+ if (isThereMoreTea) {
+ resolve(tea);
+ } else {
+ reject("We dont have more TEA!!");
+ }
+ }, 3000);
+ });
+}
+
+console.log(makeTea());
+
+makeTea()
+ .then((returnedTeaObject) => {
+ console.log(returnedTeaObject);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+```
+
+## Exercises
+
+## Exercise 1
+
+Using async await
+
+1. `fetch` yes or no from this api: `https://yesno.wtf/api`. log out the answer
+
+## Exercise 2
+
+Using promises
+
+1. `fetch` yes or no from this api: `https://yesno.wtf/api`. log out the answer
+2. Try fetching a url that rejects fx `https://knajskdskj.jasdk`. Log out the error message
+
+## Exercise 3
+
+1. Create a promise that resolves after 4 seconds. Use this promise to log out the text 'hello' after 4 seconds.
+2. Now make the promise fail by rejecting it with an error message instead of resolving it, and log the error message to the console.
+
+## Exercise 4
+
+Create a function that returns a promise, that you can use like this:
+
+```js
+// YesNoFail4Seconds should wait 4 seconds before it does one of the following 3 things:
+// resolves with a yes
+// resolves with a no
+// or rejects
+// Look into Math.random()
+YesNoFail4Seconds()
+ .then((data) => {
+ console.log(`The answer is ${data}`);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+```
+
+The above example show how to consume the promise using promises. Now try consume the `YesNoFail4Seconds` using async/await
+
+## Exercise 5
+
+Using async await
+
+1. Fetch the astronauts
+2. After the astronauts has been fetched, fetch movies using [this api](https://gist.githubusercontent.com/pankaj28843/08f397fcea7c760a99206bcb0ae8d0a4/raw/02d8bc9ec9a73e463b13c44df77a87255def5ab9/movies.json)
+3. Log out the movies
+
+## Exercise 6
+
+Get the astronauts and the movies at the same time. Log out the movies and the battery status when both promises has been resolved.
diff --git a/legacy/javascript/javascript3/week2/optional-homework.md b/legacy/javascript/javascript3/week2/optional-homework.md
new file mode 100644
index 00000000..da7cd5e4
--- /dev/null
+++ b/legacy/javascript/javascript3/week2/optional-homework.md
@@ -0,0 +1,28 @@
+# Optional Homework
+
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
+
+## Why should I even do this homework?
+
+Promises creates a **pleasant way of working with asynchronous code**. It will make your asynchronous code nearly look synchronous. It is possible to compose promises further developing the function part of javascript.
+
+Since promises is becoming standard in javascript, new browser api's use promises for interacting with them. `getUserMedia` for accessing webcam, `Navigator.getBattery()` for getting battery level, `Bluetooth.requestDevice()`, `serviceWorker` or `USB.requestDevice()`
+
+If you struggle to do this weeks homework there are a couple of things to do:
+
+- Try watch these two videos: ,
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=SDr1FCqqjAs), [part 2](https://www.youtube.com/watch?v=V82nhqIYWP0), [part 3](https://www.youtube.com/watch?v=iQgYX5tB7gs) [part 4](https://www.youtube.com/watch?v=RYdLBdHZMCU) [part 5](https://www.youtube.com/watch?v=A41NxevmHwI)
+- Read up on [promises](https://javascript.info/promise-basics), [async await](https://javascript.info/async-await)
+
+### Currency calculator
+
+The homework for this week is to build a currency calculator using this API:
+
+## Technical specifications
+
+1. Make a request to the API and store the Exchange rates as well as a list of currencies for the dropdowns.
+2. User can enter an amount
+3. User can choose a currency to convert from(default should be EUR)
+4. User can choose a currency to convert to(Default should be DKK)
+5. Whenever amount, currency from or currency to changes we show what the amount translates to in the to currency
diff --git a/legacy/javascript/javascript3/week2/optional-homework/promise-visual/index.html b/legacy/javascript/javascript3/week2/optional-homework/promise-visual/index.html
new file mode 100644
index 00000000..babb7afb
--- /dev/null
+++ b/legacy/javascript/javascript3/week2/optional-homework/promise-visual/index.html
@@ -0,0 +1,26 @@
+
+ HyfBay
+
+
+
+
+
+
+
+
+
+
+
+
+
Red target
+
Blue target
+
Green target
+
+ 👍
+
+
+
+
diff --git a/legacy/javascript/javascript3/week2/optional-homework/promise-visual/main.css b/legacy/javascript/javascript3/week2/optional-homework/promise-visual/main.css
new file mode 100644
index 00000000..0b542efe
--- /dev/null
+++ b/legacy/javascript/javascript3/week2/optional-homework/promise-visual/main.css
@@ -0,0 +1,114 @@
+body {
+ font-family: "Open Sans", sans-serif;
+ background-color: #f9fbfd;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body,
+h1,
+h2 {
+ margin: 0;
+ overflow: hidden;
+}
+
+ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+ul.marks li {
+ width: 100px;
+ height: 100px;
+ position: absolute;
+ transition: transform 2s;
+ border-radius: 100%;
+}
+ul.marks li:nth-child(1) {
+ background-color: red;
+}
+ul.marks li:nth-child(2) {
+ background-color: blue;
+}
+ul.marks li:nth-child(3) {
+ background-color: green;
+}
+ul.targets li {
+ border-radius: 100%;
+ width: 100px;
+ height: 100px;
+ border: solid 1px;
+ position: absolute;
+ transition: box-shadow 0.3s;
+ text-align: center;
+ line-height: 100px;
+}
+ul.targets li.fulfilled {
+ box-shadow: green 0px 0px 25px;
+}
+ul.targets li:nth-child(1) {
+ top: 300px;
+ left: 20px;
+}
+ul.targets li:nth-child(2) {
+ top: 300px;
+ left: 400px;
+}
+ul.targets li:nth-child(3) {
+ top: 20px;
+ left: 400px;
+}
+span {
+ display: none;
+}
+
+@keyframes bounceIn {
+ from,
+ 20%,
+ 40%,
+ 60%,
+ 80%,
+ to {
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ 0% {
+ opacity: 0;
+ transform: translate(-50%, -50%) scale3d(0.3, 0.3, 0.3);
+ }
+
+ 20% {
+ transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1.1);
+ }
+
+ 40% {
+ transform: translate(-50%, -50%) scale3d(0.9, 0.9, 0.9);
+ }
+
+ 60% {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale3d(1.03, 1.03, 1.03);
+ }
+
+ 80% {
+ transform: translate(-50%, -50%) scale3d(0.97, 0.97, 0.97);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale3d(1, 1, 1);
+ }
+}
+
+span.shown {
+ display: block;
+ animation-duration: 0.75s;
+ animation-name: bounceIn;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 5rem;
+}
diff --git a/legacy/javascript/javascript3/week2/optional-homework/promise-visual/main.js b/legacy/javascript/javascript3/week2/optional-homework/promise-visual/main.js
new file mode 100644
index 00000000..e69de29b
diff --git a/legacy/javascript/javascript3/week2/optional-homework/promise-visual/move-element.js b/legacy/javascript/javascript3/week2/optional-homework/promise-visual/move-element.js
new file mode 100644
index 00000000..1ce9e89e
--- /dev/null
+++ b/legacy/javascript/javascript3/week2/optional-homework/promise-visual/move-element.js
@@ -0,0 +1,68 @@
+// Creating new scope
+{
+ const redBox = document.querySelector("ul.marks li:nth-child(1)");
+ const blueBox = document.querySelector("ul.marks li:nth-child(2)");
+ const greenBox = document.querySelector("ul.marks li:nth-child(3)");
+ const boxes = [redBox, blueBox, greenBox];
+
+ const span = document.querySelector("span");
+
+ function getRandomInt(min, max) {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ function randomizeStartPosition() {
+ boxes.forEach((box) => {
+ const x = getRandomInt(-20, 20);
+ const y = getRandomInt(-20, 20);
+
+ box.style.left = x;
+ box.style.top = y;
+ });
+ }
+
+ randomizeStartPosition();
+
+ const targets = document.querySelectorAll("ul.targets li");
+ // continously check if circles has been added to the right targets
+ setInterval(() => {
+ setTargetFulfilled(redBox, targets[0], { x: 20, y: 300 });
+ setTargetFulfilled(blueBox, targets[1], { x: 400, y: 300 });
+ setTargetFulfilled(greenBox, targets[2], { x: 400, y: 20 });
+
+ const allTargetsFulfilled = [...targets].every((target) =>
+ target.classList.contains("fulfilled"),
+ );
+ if (allTargetsFulfilled) {
+ setTimeout(() => span.classList.add("shown"), 300);
+ }
+ }, 10);
+
+ function setTargetFulfilled(box, targetBox, fulfilledPosition) {
+ const renderedClientBox = box.getBoundingClientRect();
+
+ if (
+ renderedClientBox.left === fulfilledPosition.x &&
+ renderedClientBox.top === fulfilledPosition.y
+ ) {
+ targetBox.classList.add("fulfilled");
+ }
+ }
+
+ /**
+ * @param {DOMelement} boxToMove - A DOM element of the box to move
+ * @param {Position} newPosition - An object specifying how much to move the box in the x and y directions.
+ * @return {Promise}
+ */
+
+ function moveElement(boxToMove, newPosition) {
+ return new Promise((resolve) => {
+ boxToMove.style.transform = `translate(${newPosition.x}px, ${newPosition.y}px)`;
+ boxToMove.addEventListener("transitionend", resolve);
+ });
+ }
+
+ window.moveElement = moveElement;
+}
diff --git a/legacy/javascript/javascript3/week2/preparation.md b/legacy/javascript/javascript3/week2/preparation.md
new file mode 100644
index 00000000..83d0dc82
--- /dev/null
+++ b/legacy/javascript/javascript3/week2/preparation.md
@@ -0,0 +1,23 @@
+# Preparation
+
+## Promises
+
+- [A cartoon explaining promises](https://fullstackjournal.wordpress.com/2018/07/06/the-promise-js-explained-i-burger-party/) (10 min)
+- [A nice article about promises from David Walsh](https://davidwalsh.name/promises) (15 min)
+- Async JavaScript [tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jx2TTZk3IGWKSbtugYdrlu) (11 videos, about 1 hour in total)
+- Async [crash course](https://www.youtube.com/watch?v=PoRJizFvM7s&t=1088s&ab_channel=TraversyMedia) (~25 mins)
+- Everything you want to know about [JavaScript scope](https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/) (20 min)
+
+### Extra
+
+- (15 min)
+- An article explaining promises
+- An article explaining promises step by step ::
+ 
+
+## Flipped classroom videos
+
+- [Promises practical examples using Javascript](https://youtu.be/o_m4clbtzeI)
+- [Creating a promise using Javascript](https://youtu.be/qapwmq5UA6Y)
+- [Consuming/using promises using Javascript](https://youtu.be/G4YSi6VA2gw)
+- [Working with async/await using Javascript](https://youtu.be/6Hq6AywZ7FY)
diff --git a/legacy/javascript/javascript3/week3/README.md b/legacy/javascript/javascript3/week3/README.md
new file mode 100644
index 00000000..54483a16
--- /dev/null
+++ b/legacy/javascript/javascript3/week3/README.md
@@ -0,0 +1,15 @@
+# Learning goals
+
+- [ ] Classes
+
+## Relevant links
+
+- [Preparation](preparation.md)
+- [Homework](/homework-projects/readme.md)
+- [Lesson plan](lesson-plan.md)
+
+## So what now?
+
+Your next class will be database, starting your descend into the backend.
+
+For the frontend you have learned javascript, but not so much about the modern development workflow. We will be learning this when you get to node, react and final project. But if you are interested you can read more about it here:
diff --git a/legacy/javascript/javascript3/week3/lesson-plan.md b/legacy/javascript/javascript3/week3/lesson-plan.md
new file mode 100644
index 00000000..b4b71ac0
--- /dev/null
+++ b/legacy/javascript/javascript3/week3/lesson-plan.md
@@ -0,0 +1,240 @@
+# Lesson plan
+
+- Focus on having lots of in class exercises.
+- DONT teach everything, let the students investigate topics on their own aswell!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+## Lesson materials
+
+These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.
+
+- [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-3-Week-3-09fd374036c440ebb6a0a9cc355b248c?pvs=4) (by [Thomas](https://github.com/te-online))
+
+Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below!
+
+To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+---
+
+Start VERY simple. Just a class that has few fields, no methods. Explain the diff from object to class. Explain instance etc. When they get that move on to class methods. **Only teach extends if they really are on top of things** otherwise just get them comfortable with classes :) if you can repeat a bit of promise, maybe when working with class that would be great.
+
+- Classes
+ - Constructor
+ - [Code inspiration](#constructor)
+ - [Exercise](#1-create-a-user-class)
+ - Instance
+ - [Code inspiration](#instance)
+ - [Exercise](#2-create-an-instance-of-the-class)
+ - Methods
+ - [Code inspiration](#methods)
+ - [Exercise](#3-create-a-class-method)
+ - `this`
+ - Refers to the instance of the class. Do go into too much detail and edge cases. Avoid mentioning `bind`, `apply`, etc unless you find it super important, the students will just forget it anyway!
+ - [Exercise](#3-creating-a-cv-class)
+ - Extend (Only if time!)
+
+At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/main/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
+
+## Code inspiration
+
+### Constructor
+
+```js
+class Comment {
+ constructor(username, content, time) {
+ this.username = username;
+ this.content = content;
+ this.time = time;
+ }
+}
+```
+
+### Instance
+
+```js
+const comment1 = new Comment("test", "post", new Date());
+```
+
+### Methods
+
+```js
+class Comment {
+ constructor(username, content, time) {
+ this.username = username;
+ this.content = content;
+ this.time = time;
+ }
+
+ // Get help from students to write this method!
+ getTimeSincePost() {
+ return new Date().getTime() - this.time.getTime();
+ }
+
+ // Get help from students to write this method!
+ hasSwearWord() {
+ const swearWords = ["crap", "damn"];
+ const postWords = this.content.split(" ");
+ const hasSwearWord = swearWords.find((swearWord) =>
+ postWords.includes(swearWord),
+ );
+
+ return Boolean(hasSwearWord);
+ }
+}
+
+const comment1 = new Comment("test", "post", new Date());
+
+console.log(comment1.hasSwearWord());
+comment1.content = "shit crap";
+console.log(comment1.hasSwearWord());
+setTimeout(() => {
+ console.log(comment1.getTimeSincePost());
+}, 1000);
+
+// data
+// username, content, time
+
+// functionality
+// getTimeSincePost, hasSwearWord
+```
+
+### Class post
+
+```js
+class Post {
+ // setup
+ constructor(username, content, postTime, likes, comments, shares) {
+ this.username = username;
+ this.content = content;
+ this.postTime = postTime;
+ this.likes = likes;
+ this.comments = comments;
+ this.shares = shares;
+ }
+
+ addLike(username, time) {
+ const like = {
+ username: username,
+ time: time,
+ };
+
+ this.likes.push(like);
+ }
+
+ addComment(username, content, time) {
+ this.comments.push(new Comment(username, content, time));
+ }
+
+ doShare() {}
+
+ save() {}
+
+ logThis() {
+ console.log(this.username);
+ }
+}
+
+const post1 = new Post("benna100", "asd", "10/02/1019", [], [], []);
+const post2 = new Post("habsdhjd", "asdajhdb", "10/02/1019", [], [], []);
+
+post1.addLike("bennaasdasd", "14:07");
+console.log(post1.likes);
+
+post1.addComment("ugg", "Great post", "14:16");
+console.log(post1.comments);
+
+post1.logThis();
+post2.logThis();
+```
+
+## Exercises
+
+### 1. Create a user class
+
+The class should have 2 properties: firstName and lastName. Hint: Use `this` and `constructor`.
+
+### 2. Create an instance of the class
+
+Use the `new` keyword and assign the instance in a variable.
+
+- Try to log out the instance of the `User` to the console.
+- Try to log out the users `firstName`
+
+### 3. Create a class method
+
+The method should be called `getFullName`, and should return the combined first name and last name of the user. Use string concatenation or template literals. Remember to use the `this` keyword to access the attributes on the class instance.
+
+Call the `getFullName` method and log the result to the console.
+
+### 3. Creating a CV class
+
+The CV that we will be making uses three classes: `Job`, `Education` and
+`CV`. The `CV` class we have made for you (with some missing functionality). The `Job` and `Education` classes you need to create.
+
+#### Part 1
+
+Create the classes `Job` and `Education`.
+
+- `Job` has five properties: `id`, `title`, `description`, `startDate` and `endDate` (the dates can be strings or actual `Date` objects).
+- `Education` has six properties: `id`, `title`, `school`, `address`, `startDate` and `endDate`.
+
+```js
+class Job {
+ ///...
+}
+
+class Education {
+ ///...
+}
+```
+
+#### Part 2
+
+Now add the functionality for the methods in the `CV` class.
+
+_Remember_: jobs and educations are just arrays of class instances. So use your array manipulation knowledge for the add and remove methods.
+
+```js
+class CV {
+ constructor(email) {
+ this.jobs = [];
+ this.educations = [];
+ //this.email = ?
+ }
+
+ addJob(job) {
+ // add functionality here
+ }
+
+ removeJob(job) {
+ // add functionality here
+ }
+
+ addEducation(education) {
+ // add functionality here
+ }
+
+ removeEducation(education) {
+ // add functionality here
+ }
+}
+```
+
+#### Part 3
+
+1. Create a new `CV` instance using the `new` keyword, and save it in a variable called `myCV`.
+
+2. Apply the methods you have created on the `myCV` object. Create a few `Job` and `Education` objects and add them to your CV.
+
+3. Remove a job and an education from `myCV`.
+
+4. Log `myCV` to the console, again, and check that the objects were removed correctly.
+
+#### Part 4
+
+Add a method to the `CV` class called `renderCV()`. This method should render out the CV using HTML. Use `document.getElementById("")` and `document.createElement("")`, as well as `element.appendChild()` to build your HTML using JavaScript.
+
+Thank you very much for teaching Javascript 3, we hope you enjoyed it ! Now it is your time to give feedback about the module. For homework helpers, please click [here](https://forms.gle/4ZA1cnFg7nEjtjYR6) to give us feedback. For teachers, your survey is available [here](https://forms.gle/9nDL7KzZ6p6i6mTL8).
diff --git a/legacy/javascript/javascript3/week3/optional-homework.md b/legacy/javascript/javascript3/week3/optional-homework.md
new file mode 100644
index 00000000..eeae3432
--- /dev/null
+++ b/legacy/javascript/javascript3/week3/optional-homework.md
@@ -0,0 +1,32 @@
+# Optional Homework
+
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
+
+For this weeks homework we will create a web applications that generates a screenshot of a website based on a url. We will combine two API's one to generate the screenshot and one to allow the user to save the screenshot.
+
+API to generate screenshot:
+
+API to save screenshot:
+
+Technical spesifications.
+
+1. User can enter a URL for a website and it will send back a screenshot of the website using the website-screenshot API
+2. User can hit a button to save the screenshot. It will then save the screenshot and the URL as a resource on crudcrud
+3. User can get a list of all screenshots he has saved
+4. User can delete a screenshot he has saved
+
+Extra
+
+1. Create another resource called users which takes in an email and password. Create one user.
+2. Get back a list of users
+3. First show a login form
+4. If the email and password matches the one user we created we show the applications else we show an error message.
+
+Extra Extra
+
+1. Create another user
+2. When saving a screenshot also save the user email(or another unique identifer)
+3. Make sure we are only showing screenshots that the user that is logged in has uploaded
+
+Keep in mind the API key for the website-screenshot and the uuid for crudcrud should be in a secret.js file which is not comitted to git
diff --git a/legacy/javascript/javascript3/week3/optional-homework/github-repos.html b/legacy/javascript/javascript3/week3/optional-homework/github-repos.html
new file mode 100644
index 00000000..2763d6d6
--- /dev/null
+++ b/legacy/javascript/javascript3/week3/optional-homework/github-repos.html
@@ -0,0 +1,21 @@
+