Merge branch 'master' into improving-hyf-bay

benna100 · benna100 · commit a32cc013ed43 · 2020-04-06T14:21:57.000+02:00
diff --git a/javascript1/week1/homework.md b/javascript1/week1/homework.md
@@ -9,6 +9,11 @@
 
 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 <a href="https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript" target="_blank">Basic JavaScript</a> exercises up and until the **"Manipulate Arrays With push()"** exercise (there are some topics we did not cover but you can do it).
 
@@ -40,7 +45,7 @@ What type will these two variables be? Now calculate the age and store that in a
 > 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 log this string out:
+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 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"
diff --git a/javascript1/week2/homework.md b/javascript1/week2/homework.md
@@ -3,6 +3,11 @@
 ## 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**!
 
@@ -56,7 +61,7 @@ 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: https://codepen.io/hackyourfuture-cph/pen/jJWwbN
+Try out your code by pasting your `getFullname` function in the javascript part of this codepen: https://codepen.io/hackyourfuture-cph/pen/jJWwbN
 
 ### 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. 
diff --git a/javascript1/week3/homework.md b/javascript1/week3/homework.md
@@ -5,6 +5,10 @@ Array's has lots of helper functions, that is used all the time when developing
 
 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!
diff --git a/javascript1/week4/homework.md b/javascript1/week4/homework.md
@@ -3,6 +3,10 @@
 ## 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
 
diff --git a/javascript2/week2/homework.md b/javascript2/week2/homework.md
@@ -7,8 +7,16 @@ On top of that combining these array function with each other will show the func
 
 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 💪
+
 ## Warmup array exercises
 
+If you struggle to do this weeks homework there are a couple of things to do:
+- Try watch this video: https://www.youtube.com/watch?v=Urwzk6ILvPQ
+- 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/master/javascript2/week2/readme.md#array-methods-map-filter-and-sort)
+
 ### 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**.
 
@@ -38,10 +46,9 @@ Copy the movies array in the [movies](homework/movies.js) file. Use this array t
 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. 
-8. Find the word that is **mostly duplicated** using [sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) *Optional*
-9. 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*
-10. **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). *Optional*
+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*
 
 
 ## hyfBay - get the okay'est products here - continued
diff --git a/javascript2/week3/assets/function-graphic.jpg b/javascript2/week3/assets/function-graphic.jpg
diff --git a/javascript2/week3/homework.md b/javascript2/week3/homework.md
@@ -7,13 +7,15 @@ We want you to realise that **functions are just variables** in javascript. It i
 
 ## Warmup
 
-If you feel like you struggle with these exercises, try wathing this video: https://www.youtube.com/watch?v=Nau-iEEgEoM or watch the class recording from the class
+If you struggle to do this weeks homework there are a couple of things to do:
+- Try watch this video: https://www.youtube.com/watch?v=Nau-iEEgEoM
+- 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. 
 ![second task](assets/carbon.png)
 
@@ -29,7 +31,6 @@ The warmup is a **little abstract**, it will get more concrete later on!
 
 ![second task](assets/log-location.gif)
 
-
 6. *Optional* Now show that location on a map using fx the [Google maps api]( https://developers.google.com/maps/documentation/javascript/tutorial)
 
 
@@ -39,14 +40,12 @@ The warmup is a **little abstract**, it will get more concrete later on!
 
 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 `tellFunnyJoke` to `true` it should call the `logFunnyJoke` function that should log out a funny joke. And vice versa.
 
 ### 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.
+- Create a function as a const and try creating a function normally. Call both functions. Read up on this if you are interested: https://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip
 - 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 🎉
diff --git a/javascript2/week3/lesson-plan.md b/javascript2/week3/lesson-plan.md
@@ -37,6 +37,9 @@ Good example of practical example of callbacks: https://github.com/HackYourFutur
 
 At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/master/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
 
+This is super good at explaining function logic
+![Function graphic](assest/../assets/function-graphic.jpg)
+
 ## Code inspiration
 
 ### Calling a function within a function
diff --git a/javascript3/week1/homework.md b/javascript3/week1/homework.md
@@ -5,6 +5,11 @@ Working with json and api's is the way modern **javascript application's communi
 
 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: https://www.youtube.com/watch?v=uxf0--uiX0I, https://www.youtube.com/watch?v=tc8DU14qX6I
+- 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.
 
diff --git a/javascript3/week2/homework.md b/javascript3/week2/homework.md
@@ -5,9 +5,13 @@ Promises creates a **pleasant way of working with asynchronous code**. It will m
 
 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: https://www.youtube.com/watch?v=XO77Fib9tSI, https://www.youtube.com/watch?v=QO4NXhWo_NM
+- 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)
 
 ### Movies exercise
-This exercise is repetition of array functions. Dont use cahining or anything fancy. Just fetch the movies and use the correct array function to get the following movies:
+This exercise is repetition of array functions. you dont have to use chaining or anything fancy. Just fetch the movies and use the correct array function to get the following movies:
 
 Fetch movies from [this api](https://gist.githubusercontent.com/pankaj28843/08f397fcea7c760a99206bcb0ae8d0a4/raw/02d8bc9ec9a73e463b13c44df77a87255def5ab9/movies.json): 
 
@@ -68,7 +72,7 @@ This task is about visually understanding the difference between Promise.all and
 
 If you go into the [promise-visual homework folder](homework/promise-visual) there is some html, css and some js. If you clone down the javascript repo, then you can simply copy the files into your hyf-homework js3 week 2 folder. Dont modify move-element.js, only work in main.js!
 
-There is a function available to you called `moveElement`. It moves an element to a new position and returns a promise. `moveElement` takes a `DOM element` and an `object` specifying the `x` and `y` of the new position. It then returns a `promise` that resolves after the `DOM element` has been moved.
+There is a function available to you called `moveElement`. calling that function moves an element to a new position and returns a promise. `moveElement` takes a `DOM element` and an `object` specifying the `x` and `y` of the new position. It then returns a `promise` that resolves after the `DOM element` has been moved.
 
 ```js
 // This code will move the li to the position 100, 100. Calling moveElement will return a promise that resolves after the li element has been moved. 
@@ -78,13 +82,13 @@ moveElement(document.querySelector('li'), {x: 100, y: 100})
     });
 ```
 
-
-
 Your task is to create two functions. 
-- `translateOneByOne` - Should translate the circles one at a time from their **random start position** to their **target**. Log something out **after each element has been moved**
+- `translateOneByOne` - Should translate the circles one at a time from their **random start position** to their **target** see the target positions below. Log something out **after each element has been moved**
 - `translateAllAtOnce` - Should translate all the circles at the same time from their **random start position** to their **target**. Log out something **after all elements have been moved**
 
-Test that the functions works as intended before submitting homework. 
+Test that the functions works as intended before submitting homework. You decide if you want to do it the promise way or the async/await way
+
+### Target positions:
 
 ```
 Red circle target: x: 20px, y: 300px;
diff --git a/javascript3/week3/homework.md b/javascript3/week3/homework.md
@@ -3,7 +3,15 @@
 ## So why should i do this homework?
 Using classes help with structuring code. It is one of many **design patterns**.  Second it **connects everything** you have learned in js: functions, properties, methods, keys, arrays.
 
+If you struggle to do this weeks homework there are a couple of things to do:
+- Try watch this: https://www.youtube.com/watch?v=T-HGdc8L-7w&t=565s
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=KfEeUcT0PWY), [part 2](https://www.youtube.com/watch?v=jbnKWe92uv4), [part 3](https://www.youtube.com/watch?v=-lqbVK12lWM) [part 4](https://www.youtube.com/watch?v=E3Stsveg4rg)
+- Read up on [classes](https://javascript.info/class)
+
 ## Lets make some art using classes
+
+Lets create lots of circles in different sizes and colors on a webpage!
+
 In HTML5 there is an elements called canvas. It **works just like a real canvas.** You can paint elements like lines, circles and much more to the canvas.
 
 ### Paint a circle to a canvas element
@@ -25,7 +33,7 @@ The circle should have one method: `draw` that **draws the circle to the canvas*
 Test if the new class works by creating a circle and drawing it to the canvas. Try some different radiuses, positions and fill colors. 
 
 ### Now lets make art!
-Every half second create a new circle class and draw that to the canvas.
+Every 100ms create a new circle class and draw that to the canvas.
 
 The circle should have random `x`, `y`, `radius` and `color`. For giving the `circle` a random color what should we do?? We should google off course!
 
