From 91f46866760c3852a72daffea424ac9b2e4fe991 Mon Sep 17 00:00:00 2001 From: Andrej Date: Sat, 14 Dec 2019 10:25:10 +0100 Subject: [PATCH 01/33] Update README.md --- Week1/README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Week1/README.md b/Week1/README.md index 659fdabda..b23e92069 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -23,7 +23,7 @@ A web browser is software that allows you to access websites. ### How a browser works -In your journey into becomeing a web developer it's important to know the tools you'll be using intimately. One such is the browser, which will be used to display your websites. In the following resources you'll learn about the many parts any web browser consists of and what their use is: +In your journey into becoming a web developer it's important to know the tools you'll be using intimately. One such is the browser, which will be used to display your websites. In the following resources you'll learn about the many parts any web browser consists of and what their use is: - [How a web browser functions](https://www.youtube.com/watch?v=z0HN-fG6oT4) - [How do web browsers work?](https://medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509) @@ -110,13 +110,13 @@ body.appendChild(newParagraph); In this example we're executing the following steps: -1. We're first selecting the body: this is always necessary, as we can only add or remove elements from the body of the document -2. Secondly, we're creating a new DOM element: a

element -3. Thirdly, we're injecting content into the element -4. Fourthly, we give our element a background color -5. Finally, we add the

element in the body +1. Selecting the body: this is always necessary, as we can only add or remove elements from the body of the document +2. Creating a new DOM element: a paragraph i.e. a `

` element +3. Injecting content into the newly create paragraph element +4. Setting the background color for the newly create paragraph element +5. Adding the newly create paragraph element element to the body -Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return key you will find your new

at the end of the page! +Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return key you will find your new `

` at the end of the page! Learning how to write JavaScript that targets the DOM is an essential part of being a web developer. In the following resources you'll more about how to do that: From 5bde536d9efa898685ec7fec97ff6956b423c1f7 Mon Sep 17 00:00:00 2001 From: Tjebbee <33282467+Tjebbee@users.noreply.github.com> Date: Sun, 23 Feb 2020 15:50:41 +0100 Subject: [PATCH 02/33] Update LESSONPLAN.md --- Week2/LESSONPLAN.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Week2/LESSONPLAN.md b/Week2/LESSONPLAN.md index bdafc5991..6e0a218c9 100644 --- a/Week2/LESSONPLAN.md +++ b/Week2/LESSONPLAN.md @@ -125,6 +125,8 @@ Call stack ### Exercise +> [Visualisation of an eventloop] (http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D) + ### Essence ## 5. filter, reduce, map From 037771057963bd80d5288df6f033da367818ce91 Mon Sep 17 00:00:00 2001 From: Tjebbee <33282467+Tjebbee@users.noreply.github.com> Date: Sun, 23 Feb 2020 15:51:17 +0100 Subject: [PATCH 03/33] Update LESSONPLAN.md --- Week2/LESSONPLAN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week2/LESSONPLAN.md b/Week2/LESSONPLAN.md index 6e0a218c9..638b04ac5 100644 --- a/Week2/LESSONPLAN.md +++ b/Week2/LESSONPLAN.md @@ -125,7 +125,7 @@ Call stack ### Exercise -> [Visualisation of an eventloop] (http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D) +> [Visualisation of an eventloop](http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D) ### Essence From a814e358972c85751b58c108d905aeb1c868a777 Mon Sep 17 00:00:00 2001 From: Tjebbee <33282467+Tjebbee@users.noreply.github.com> Date: Mon, 24 Feb 2020 15:48:57 +0100 Subject: [PATCH 04/33] Update README.md --- test/README.md | 65 +++++++++++++++++++++++++++++++------------------- 1 file changed, 40 insertions(+), 25 deletions(-) diff --git a/test/README.md b/test/README.md index b31ef68aa..16101cbe5 100644 --- a/test/README.md +++ b/test/README.md @@ -1,47 +1,62 @@ # JavaScript1 and JavaScript2 Test -At the end of this module you’ll be doing a comprehension test on paper. Why on paper? Fundamental understanding should become intuitive. Only after having learned and mastered a concept deeply will you be able to use it creatively. If you rely too much on others, on Google or your code editor to do your thinking you'll make it very hard to cultivate the habit to think for yourself. +You’ll be doing a comprehension test on paper. It will be about the most important JavaScript concepts you’ve learned about so far (JavaScript1 and JavaScript2). -### Concepts +## Practical information +- It will be done on paper so please bring a pencil and eraser. +- There will be 5 questions -It will be about the most important JavaScript concepts you’ve learned about so far (JavaScript1 and JavaScript2). Here’s a list of all of them: +## Purpose of the test +The purpose of this exam is to test your comprehension of JavaScript 1 and JavaScript 2 concepts. +- The goal for us is to know how solid your knowledge is and if you need any extra assistance throughout the program. +- The goal for you is to test how well enough you master the material so far. +Like the homework you will get feedback and are expected to improve upon your weak points. -- Variables (const and let) +## Test material +These are the most important concepts that will be tested: +- Variables - Data types (strings, numbers, arrays, objects, booleans) - Conditional statements (if/switch statement) - Loops - Regular and arrow functions - How to use JavaScript to do basic DOM manipulations (add, modify and remove DOM elements) - Code commenting -- Scope - Array functions (map and filter) - Callbacks -- Hoisting -### Purpose of the test +## Preparation +Advice on how to optimally prepare: +- Find out 2 things about each concepts listed above: (1) how does the basic structure look and (2) what is the most common use case. +- Ask questions through Slack to your teachers and/or your classmates +- Practice coding WITHOUT Google and on paper. + this is very important because the test will be on paper. You can practise this by making your old homework again; but than on paper. Make sure that you can write down functions and loops without syntax errors. +- Practice for understanding (why something is the case), NOT just for repetition’s sake (and hoping ‘you will understand it one day’). +- Make a summary of all the study material. +- After you prepared try to make the sample questions that are in this file. -The purpose of this exam is to test your comprehension of JavaScript1 and JavaScript2 concepts. +## During the test +Advise on how to make a test: +- Look for low hanging fruit. Which of the assignments is easiest for you to do? Tackle that one first. +- Make sure that all syntax is correct when writing code on paper. For instance: don’t forget brackets or semicolons. +- If you get stuck in an assignment, move on to the next one. You can always come back later if time permits. +- After finishing an assignment, read the question again to make sure you actually gave an answer to the question. +- Before handing in the test, read it all over again to pick out the small mistakes. -- The goal for us is to know how solid your knowledge is and if you need any extra assistance throughout the program. -- The goal for you is to test how well enough you master the material so far. - -Therefore, **you won’t be graded**. Like the homework you will get feedback and are expected to improve upon your weak points. +## Sample questions +1. Write and call a function that creates and appends a

tag to the of an HTML file. Make use of the already predefined DOM methods createElement() and appendChild(). The innerText of the

should be “hello HackYourFuture!”. -### Preparation +2. Correct the code to make it work, by filling in the grey boxes: +`…………… multiplyNumbers( …….. , …….. ) { + const …………… = …….. * …….. ; + return …………… ; + …. + multiplyNumbers( 6 , …………… +// Return value should be 30` -Here's general advice on how to optimally prepare: +3. Transform the given array of strings named letters into a new array with numbers (for example: `numbers = [0, 1, 2, 3 ]` ), by creating a new function called lettersToNumbers. Log the new array to the console. Return the new array. Make use of the map() array function. +`const letters = [ ‘a’ , ‘b’ , ‘c’ , ‘d’ ];` -- Make a list of every concept you currently don’t understand at all. -- Find out 2 things about each concept: (1) how does the basic structure look and (2) what is the most common use case. -- Ask questions through Slack to your teachers and/or your classmates -- Practice coding WITHOUT Google. -- Practice for understanding (why something is the case), NOT just for repetition’s sake (and hoping ‘you will understand it one day’). -- Stay calm, always -### Practical information -- The test will last about an hour -- It will be done on paper so please **bring a pencil and eraser**. -- There will be 4 questions, 2 for each module -Tip: if any of you need additional support, now is the moment to let us know as we can pair you up with someone to answer any questions you may have up until this point. +If there’s anything unclear please let us know. Also, if any of you need additional support, now is the moment to let us know as we could pair you up with someone to answer any questions you may have. From aa58add58c9a689059607f8a776c1c93a95c0189 Mon Sep 17 00:00:00 2001 From: Tjebbee <33282467+Tjebbee@users.noreply.github.com> Date: Mon, 24 Feb 2020 15:50:50 +0100 Subject: [PATCH 05/33] Update README.md --- test/README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/test/README.md b/test/README.md index 16101cbe5..237810f6a 100644 --- a/test/README.md +++ b/test/README.md @@ -46,13 +46,14 @@ Advise on how to make a test: 1. Write and call a function that creates and appends a

tag to the of an HTML file. Make use of the already predefined DOM methods createElement() and appendChild(). The innerText of the

should be “hello HackYourFuture!”. 2. Correct the code to make it work, by filling in the grey boxes: -`…………… multiplyNumbers( …….. , …….. ) { +``` +…………… multiplyNumbers( …….. , …….. ) { const …………… = …….. * …….. ; return …………… ; …. multiplyNumbers( 6 , …………… -// Return value should be 30` - +// Return value should be 30 +``` 3. Transform the given array of strings named letters into a new array with numbers (for example: `numbers = [0, 1, 2, 3 ]` ), by creating a new function called lettersToNumbers. Log the new array to the console. Return the new array. Make use of the map() array function. `const letters = [ ‘a’ , ‘b’ , ‘c’ , ‘d’ ];` From e2e658fe28103dbd23bc11e2dc55eb9c0e5d7997 Mon Sep 17 00:00:00 2001 From: Tjebbee <33282467+Tjebbee@users.noreply.github.com> Date: Mon, 24 Feb 2020 16:10:24 +0100 Subject: [PATCH 06/33] Update README.md --- test/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/test/README.md b/test/README.md index 237810f6a..237c38cde 100644 --- a/test/README.md +++ b/test/README.md @@ -3,6 +3,7 @@ You’ll be doing a comprehension test on paper. It will be about the most important JavaScript concepts you’ve learned about so far (JavaScript1 and JavaScript2). ## Practical information +- The test will start at **10.30 until 11.30**. The door will open at 10.15. **Be on time!** - It will be done on paper so please bring a pencil and eraser. - There will be 5 questions From eef2996ccf3a2f641a277e94e225b6a30042e5b0 Mon Sep 17 00:00:00 2001 From: gajduk-mansystems Date: Sat, 29 Feb 2020 14:20:29 +0100 Subject: [PATCH 07/33] week3 homework structure --- Week3/MAKEME.md | 8 ++-- Week3/js-exercises/ex1-AddSix.js | 20 ++++++++++ Week3/js-exercises/ex2-RemoveDuplicates.js | 21 ++++++++++ Week3/js-exercises/ex3-GuessTheOutput.js | 21 ++++++++++ Week3/js-exercises/ex4-GuessMore.js | 29 ++++++++++++++ Week3/js-exercises/ex5-LotteryMachine.js | 38 +++++++++++++++++++ Week3/{homework => old-homework}/step2-1.js | 0 Week3/{homework => old-homework}/step2-2.js | 0 Week3/{homework => old-homework}/step2-3.js | 0 Week3/{homework => old-homework}/step2-4.js | 0 Week3/{homework => old-homework}/step2-5.js | 0 Week3/{homework => old-homework}/step2-6.js | 0 Week3/{homework => old-homework}/step2-7.js | 0 .../{homework => old-homework}/step3-bonus.js | 0 Week3/{homework => old-homework}/step3.js | 0 Week3/project/index.html | 15 ++++++++ Week3/project/index.js | 3 ++ 17 files changed, 152 insertions(+), 3 deletions(-) create mode 100644 Week3/js-exercises/ex1-AddSix.js create mode 100644 Week3/js-exercises/ex2-RemoveDuplicates.js create mode 100644 Week3/js-exercises/ex3-GuessTheOutput.js create mode 100644 Week3/js-exercises/ex4-GuessMore.js create mode 100644 Week3/js-exercises/ex5-LotteryMachine.js rename Week3/{homework => old-homework}/step2-1.js (100%) rename Week3/{homework => old-homework}/step2-2.js (100%) rename Week3/{homework => old-homework}/step2-3.js (100%) rename Week3/{homework => old-homework}/step2-4.js (100%) rename Week3/{homework => old-homework}/step2-5.js (100%) rename Week3/{homework => old-homework}/step2-6.js (100%) rename Week3/{homework => old-homework}/step2-7.js (100%) rename Week3/{homework => old-homework}/step3-bonus.js (100%) rename Week3/{homework => old-homework}/step3.js (100%) create mode 100644 Week3/project/index.html create mode 100644 Week3/project/index.js diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 82369403c..20127f360 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -15,11 +15,11 @@ Let's get familiar with basic Javascript concepts, with interactive exercises! C ## **2. JavaScript exercises** -> Inside of your `JavaScript2` fork, create a folder called `week3`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `addSix.js`. +> Inside of your `JavaScript2` fork, navigate to the folder `Week3`. Then to the folder `js-exercises`. For all the following exercises create a new `.js` file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `addSix.js`. **Exercise 1: Add six** -Declare a function called `createBase`. It should return a closure, that adds a number to the base number argument. +Declare a function called `createBase`. The function takes a number as a parameter and return a closure, that adds a number to the base number argument. Call the function three times. The return values should be: @@ -142,7 +142,7 @@ Happy learning! > Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to. -> Before you start, create a new folder called `project` that includes the files for the following app you'll be building. +> Important! Place your code in the folder `Week3 \ project`. In this week's project you'll be making a Tip Calculator! A user can fill in 3 things: @@ -167,6 +167,8 @@ Here are the requirements: - If there's only 1 person who shares the bill, output only the tip amount (omit the "each") - If any of the input fields are empty when the button is clicked, call an alert that says: "You need to fill in all the fields!" +See it in action [here](https://tipcalculator-sandbox.mxapps.io/). + Good luck! ## **SUBMIT YOUR HOMEWORK!** diff --git a/Week3/js-exercises/ex1-AddSix.js b/Week3/js-exercises/ex1-AddSix.js new file mode 100644 index 000000000..a801a72fd --- /dev/null +++ b/Week3/js-exercises/ex1-AddSix.js @@ -0,0 +1,20 @@ +/** + + ** Exercise 1: Add Six ** + +Declare a function called `createBase`.The function takes a number as a parameter and +return a closure, that adds a number to the base number argument. + +Call the function three times. The return values should be: + 15, 24, 36 + + */ + +function createBase( /* ???? */ ) { + // Put here your logic... +} + +const addSix = createBase(6); + +// Put here your function calls... +console.log(addSix()); \ No newline at end of file diff --git a/Week3/js-exercises/ex2-RemoveDuplicates.js b/Week3/js-exercises/ex2-RemoveDuplicates.js new file mode 100644 index 000000000..aa9d0d7d0 --- /dev/null +++ b/Week3/js-exercises/ex2-RemoveDuplicates.js @@ -0,0 +1,21 @@ +/** + + ** Exercise 2: The lottery machine ** + +Write a function called removeDuplicates. This function accept an array as an argument +does not return anything but removes any duplicate elements from the array. + + The function should remove duplicate elements.So the result should be: + + + */ + + +// WRITE YOUR FUNCTION HERE + +const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b']; + +removeDuplicates(letter); + +if (letters === ['a', 'b', 'c', 'd', 'e', 'f']) + console.log("Hooray!") \ No newline at end of file diff --git a/Week3/js-exercises/ex3-GuessTheOutput.js b/Week3/js-exercises/ex3-GuessTheOutput.js new file mode 100644 index 000000000..7d783ceef --- /dev/null +++ b/Week3/js-exercises/ex3-GuessTheOutput.js @@ -0,0 +1,21 @@ +/** + +** Exercise 3: Guess the output ** + +Look at the bellow code snippet. +Can you guess the output? +Write out your reasoning in 50 words or less. + +*/ + + + +let a = 10; +const x = (function () { + a = 12; + return function () { + alert(a); + }; +})(); + +x(); \ No newline at end of file diff --git a/Week3/js-exercises/ex4-GuessMore.js b/Week3/js-exercises/ex4-GuessMore.js new file mode 100644 index 000000000..81a4ec273 --- /dev/null +++ b/Week3/js-exercises/ex4-GuessMore.js @@ -0,0 +1,29 @@ +/** + +** Exercise 4: Guess more ** + +Look at the bellow code snippet. +Can you guess the output? +Write out your reasoning in 50 words or less. + +*/ + +const x = 9; + +function f1(val) { + val = val + 1; + return val; +} +f1(x); +console.log(x); + +const y = { + x: 9 +}; + +function f2(val) { + val.x = val.x + 1; + return val; +} +f2(y); +console.log(y); \ No newline at end of file diff --git a/Week3/js-exercises/ex5-LotteryMachine.js b/Week3/js-exercises/ex5-LotteryMachine.js new file mode 100644 index 000000000..ad09b963c --- /dev/null +++ b/Week3/js-exercises/ex5-LotteryMachine.js @@ -0,0 +1,38 @@ +/** + + ** Exercise 5: The lottery machine ** + +Don't you just love the thrill of the lottery? What if I told you we can make our own lottery machine? Let' + s get started! + + Write a + function that takes 4 arguments. + + - A start value + - An end value + - A callback that executes if the number is divisible by 3 + - A callback that executes if the number is divisible by 5 + + The function should first generate an array containing values from start value to end value(inclusive). + + Then the function should take the newly created array and iterate over it, and calling the first callback + if the array value is divisible by 3. + + The function should call the second callback + if the array value is divisible by 5. + + Both functions should be called + if the array value is divisible by both 3 and 5. + +*/ + +function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { + const numbers = []; + // make array + // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next +} + +threeFive(10, 15, sayThree, sayFive); + +// Should create an array [10,11,12,13,14,15] +// and call sayFive, sayThree, sayThree, sayFive \ No newline at end of file diff --git a/Week3/homework/step2-1.js b/Week3/old-homework/step2-1.js similarity index 100% rename from Week3/homework/step2-1.js rename to Week3/old-homework/step2-1.js diff --git a/Week3/homework/step2-2.js b/Week3/old-homework/step2-2.js similarity index 100% rename from Week3/homework/step2-2.js rename to Week3/old-homework/step2-2.js diff --git a/Week3/homework/step2-3.js b/Week3/old-homework/step2-3.js similarity index 100% rename from Week3/homework/step2-3.js rename to Week3/old-homework/step2-3.js diff --git a/Week3/homework/step2-4.js b/Week3/old-homework/step2-4.js similarity index 100% rename from Week3/homework/step2-4.js rename to Week3/old-homework/step2-4.js diff --git a/Week3/homework/step2-5.js b/Week3/old-homework/step2-5.js similarity index 100% rename from Week3/homework/step2-5.js rename to Week3/old-homework/step2-5.js diff --git a/Week3/homework/step2-6.js b/Week3/old-homework/step2-6.js similarity index 100% rename from Week3/homework/step2-6.js rename to Week3/old-homework/step2-6.js diff --git a/Week3/homework/step2-7.js b/Week3/old-homework/step2-7.js similarity index 100% rename from Week3/homework/step2-7.js rename to Week3/old-homework/step2-7.js diff --git a/Week3/homework/step3-bonus.js b/Week3/old-homework/step3-bonus.js similarity index 100% rename from Week3/homework/step3-bonus.js rename to Week3/old-homework/step3-bonus.js diff --git a/Week3/homework/step3.js b/Week3/old-homework/step3.js similarity index 100% rename from Week3/homework/step3.js rename to Week3/old-homework/step3.js diff --git a/Week3/project/index.html b/Week3/project/index.html new file mode 100644 index 000000000..fac819b21 --- /dev/null +++ b/Week3/project/index.html @@ -0,0 +1,15 @@ + + + + + + + Codestin Search App + + + +

+ + + + \ No newline at end of file diff --git a/Week3/project/index.js b/Week3/project/index.js new file mode 100644 index 000000000..e12fb76ed --- /dev/null +++ b/Week3/project/index.js @@ -0,0 +1,3 @@ +// Your code goes in here + +document.querySelector("#app").innerText = "Tip Calculator"; \ No newline at end of file From 1ac29a7294e481b0cfa457ce56f9d57e78aea6df Mon Sep 17 00:00:00 2001 From: gajduk-mansystems Date: Sat, 29 Feb 2020 14:22:15 +0100 Subject: [PATCH 08/33] instructions --- Week3/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 20127f360..afc8f883f 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -15,7 +15,7 @@ Let's get familiar with basic Javascript concepts, with interactive exercises! C ## **2. JavaScript exercises** -> Inside of your `JavaScript2` fork, navigate to the folder `Week3`. Then to the folder `js-exercises`. For all the following exercises create a new `.js` file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `addSix.js`. +> Inside of your `JavaScript2` fork, navigate to the folder `Week3`. Then to the folder `js-exercises`. In this folder you will find separate files for each exercise. Please put your code in the correct file. **Exercise 1: Add six** From 96612e4e0b53b3af397974f0d255a3bd29d090dc Mon Sep 17 00:00:00 2001 From: gajduk-mansystems Date: Sat, 29 Feb 2020 15:57:54 +0100 Subject: [PATCH 09/33] week2 - demo for project --- Week2/MAKEME.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 0e30a020c..0ad6a8ed3 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -152,6 +152,8 @@ Here are the requirements: - Display minutes and seconds - If the timer finishes the timer should be replaced by the message: `Time's up!` +If you are having trouble understanding the functionality check this [demo](https://pomodoroclock-sandbox.mxapps.io). + Good luck! ## **SUBMIT YOUR HOMEWORK!** From 6a0512c2acafcea6e90e345651178d343721bd17 Mon Sep 17 00:00:00 2001 From: gajduk-mansystems Date: Sun, 1 Mar 2020 12:58:50 +0100 Subject: [PATCH 10/33] week2 structure --- Week2/MAKEME.md | 4 +- Week2/js-exercises/ex1-oddOnesOut.js | 21 ++++++++++ .../js-exercises/ex2-whatsYourMondayWorth.js | 38 +++++++++++++++++++ Week2/js-exercises/ex3-lemonAllergy.js | 21 ++++++++++ Week2/js-exercises/ex4-collectiveAge.js | 33 ++++++++++++++++ Week2/js-exercises/ex5-myFavoriteHobbies.html | 5 +++ Week2/js-exercises/ex5-myFavoriteHobbies.js | 21 ++++++++++ Week2/project/index.html | 17 +++++++++ Week2/project/index.js | 10 +++++ 9 files changed, 168 insertions(+), 2 deletions(-) create mode 100644 Week2/js-exercises/ex1-oddOnesOut.js create mode 100644 Week2/js-exercises/ex2-whatsYourMondayWorth.js create mode 100644 Week2/js-exercises/ex3-lemonAllergy.js create mode 100644 Week2/js-exercises/ex4-collectiveAge.js create mode 100644 Week2/js-exercises/ex5-myFavoriteHobbies.html create mode 100644 Week2/js-exercises/ex5-myFavoriteHobbies.js create mode 100644 Week2/project/index.html create mode 100644 Week2/project/index.js diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 0e30a020c..69d70c18b 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -15,7 +15,7 @@ Before we head into the exercises, it might be nice to do some interactive exerc ## **2. JavaScript exercises** -> Inside of your `JavaScript2` fork, create a folder called `week2`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `oddOnesOut.js`. +> Inside of your `JavaScript2` fork, find the folder called `Week2`. Inside of that folder, find the folder called `js-exercises`. In this folder you will find five `.js` files, one for each exercise where you need to write your code. Please use the correct file for the respective exercise. **Exercise 1: The odd ones out** @@ -137,7 +137,7 @@ Programming can be used to not only make websites, but also games! In the follow > Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to. -> Before you start, create a new folder called `project` that includes the files for the following app you'll be building. +> Write the project code in the folder `Week3 \ project`. In this week's project you'll be making a Pomodoro Clock! A user can specify how many minutes the timer should be set, and with a click on the play button it starts counting down! If the user wants to pause the timer, they can do so by clicking the pause button. diff --git a/Week2/js-exercises/ex1-oddOnesOut.js b/Week2/js-exercises/ex1-oddOnesOut.js new file mode 100644 index 000000000..4f42050ac --- /dev/null +++ b/Week2/js-exercises/ex1-oddOnesOut.js @@ -0,0 +1,21 @@ +/** + + ** Exercise 1: The odd ones out ** + + Rewrite the following function using map and filter. + Avoid using for loop or forEach. + The function should still behave the same. + + */ +function doubleEvenNumbers(numbers) { + const newNumbers = []; + for (let i = 0; i < numbers.length; i++) { + if (numbers[i] % 2 === 0) { + newNumbers.push(numbers[i] * 2); + } + } + return newNumbers; +} + +const myNumbers = [1, 2, 3, 4]; +console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console \ No newline at end of file diff --git a/Week2/js-exercises/ex2-whatsYourMondayWorth.js b/Week2/js-exercises/ex2-whatsYourMondayWorth.js new file mode 100644 index 000000000..47cea70ba --- /dev/null +++ b/Week2/js-exercises/ex2-whatsYourMondayWorth.js @@ -0,0 +1,38 @@ +/** + + ** Exercise 2: What 's your Monday worth? ** + + Write a function that finds out what your hourly rate on a Monday would be + Use the map array function to take out the duration time for each task. + Avoid using for loop or forEach. + Multiply each duration by a per - hour rate for billing and sum it all up. + Output a formatted Euro amount, rounded to Euro cents, e.g: €11.34. + Make sure the function can be used on any array of objects that contain a duration property with a number value + + */ + + +function dayWorth(tasks, hourlyRate) { + // put your code in here, the function does returns a euro formatted string +} + +const mondayTasks = [{ + name: 'Daily standup', + duration: 30, // specified in minutes + }, + { + name: 'Feature discussion', + duration: 120, + }, + { + name: 'Development time', + duration: 240, + }, + { + name: 'Talk to different members from the product team', + duration: 60, + }, +]; + +console.log(dayWorth(mondayTasks, 25)) +console.log(dayWorth(mondayTasks, 13.37)) \ No newline at end of file diff --git a/Week2/js-exercises/ex3-lemonAllergy.js b/Week2/js-exercises/ex3-lemonAllergy.js new file mode 100644 index 000000000..54ac8da04 --- /dev/null +++ b/Week2/js-exercises/ex3-lemonAllergy.js @@ -0,0 +1,21 @@ +/** + + ** Exercise 3: Lemon allergy ** + + Your mom bought you a basket of fruit, because you 're doing so well in HackYourFuture. How sweet of her! + However, she forgot that you are allergic to lemons!Let 's quickly dispose of them before you get an attack. + + Write a function that uses the filter array function to take out the lemons. + Avoid using for loop or forEach. + Output a string that says: "My mom bought me a fruit basket, containing [array of fruits] !" + + */ + + +function takeOutLemons(basket) { + // your code goes in here. The output is a string +} + +const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; + +console.log(takeOutLemons(fruitBasket)); \ No newline at end of file diff --git a/Week2/js-exercises/ex4-collectiveAge.js b/Week2/js-exercises/ex4-collectiveAge.js new file mode 100644 index 000000000..d17275cdc --- /dev/null +++ b/Week2/js-exercises/ex4-collectiveAge.js @@ -0,0 +1,33 @@ +/** + + ** Exercise 4: Collective age ** + + Have you ever wondered how old the HackYourFuture team members are ? Or better yet : what the collective age is ? Let 's find out! + + Write a function that calculates the combined age of every member + Avoid using for loop or forEach. + */ + +function collectiveAge(people) { + // return the sum of age for all the people +} + +const hackYourFutureMembers = [{ + name: 'Wouter', + age: 33 + }, + { + name: 'Federico', + age: 32 + }, + { + name: 'Noer', + age: 27 + }, + { + name: 'Tjebbe', + age: 22 + }, +]; + +console.log("The collective age of the HYF team is: " + collectiveMembers(hackYourFutureMembers)); \ No newline at end of file diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.html b/Week2/js-exercises/ex5-myFavoriteHobbies.html new file mode 100644 index 000000000..06ab17d45 --- /dev/null +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.html @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.js b/Week2/js-exercises/ex5-myFavoriteHobbies.js new file mode 100644 index 000000000..289c68380 --- /dev/null +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.js @@ -0,0 +1,21 @@ +/** + + ** Exercise 5: My favorite hobbies ** + + Write a program that outputs each of these inside an HTML file + Create an HTML and JavaScript file, link them together + Use the map and / or forEach function to put each hobby into a list item + Put the list items in an unordered list + */ + +function createHTMLList(arr) { + // your code goes in here +} + +const myHobbies = [ + 'Meditation', + 'Reading', + 'Programming', + 'Hanging out with friends', + 'Going to the gym', +]; \ No newline at end of file diff --git a/Week2/project/index.html b/Week2/project/index.html new file mode 100644 index 000000000..664b242d3 --- /dev/null +++ b/Week2/project/index.html @@ -0,0 +1,17 @@ + + + + + + + Codestin Search App + + + +
+ +
+ + + + \ No newline at end of file diff --git a/Week2/project/index.js b/Week2/project/index.js new file mode 100644 index 000000000..5b306f0f2 --- /dev/null +++ b/Week2/project/index.js @@ -0,0 +1,10 @@ +/** + In this week 's project you'll be making a Pomodoro Clock! + A user can specify how many minutes the timer should be set, and with a click on the play button it starts counting down!If the user wants to pause the timer, they can do so by clicking the pause button. + + If the timer is running, the user can 't change the session length anymore + Use at least 3 functions + Display minutes and seconds + If the timer finishes the timer should be replaced by the message: Time 's up! + * + */ \ No newline at end of file From 68d25e869e7536643c5b80f5340b4a6a4a6df259 Mon Sep 17 00:00:00 2001 From: gajduk-mansystems Date: Sun, 1 Mar 2020 13:28:59 +0100 Subject: [PATCH 11/33] week1-homework-structure --- Week1/MAKEME.md | 28 ++++++++-------- Week1/js-exercises/ex1-bookList.html | 17 ++++++++++ Week1/js-exercises/ex1-bookList.js | 42 ++++++++++++++++++++++++ Week1/js-exercises/ex2-aboutMe.html | 24 ++++++++++++++ Week1/js-exercises/ex2-aboutMe.js | 11 +++++++ Week1/js-exercises/ex3-hijackLogo.js | 19 +++++++++++ Week1/js-exercises/ex4-whatsTheTime.html | 4 +++ Week1/js-exercises/ex4-whatsTheTime.js | 18 ++++++++++ Week1/js-exercises/ex5-catWalk.html | 15 +++++++++ Week1/js-exercises/ex5-catWalk.js | 13 ++++++++ Week1/project/index.css | 0 Week1/project/index.html | 1 + Week1/project/index.js | 1 + 13 files changed, 178 insertions(+), 15 deletions(-) create mode 100644 Week1/js-exercises/ex1-bookList.html create mode 100644 Week1/js-exercises/ex1-bookList.js create mode 100644 Week1/js-exercises/ex2-aboutMe.html create mode 100644 Week1/js-exercises/ex2-aboutMe.js create mode 100644 Week1/js-exercises/ex3-hijackLogo.js create mode 100644 Week1/js-exercises/ex4-whatsTheTime.html create mode 100644 Week1/js-exercises/ex4-whatsTheTime.js create mode 100644 Week1/js-exercises/ex5-catWalk.html create mode 100644 Week1/js-exercises/ex5-catWalk.js create mode 100644 Week1/project/index.css create mode 100644 Week1/project/index.html create mode 100644 Week1/project/index.js diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 97fcb029f..9f6846072 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -15,7 +15,7 @@ Before we head into the exercises, it might be nice to do some interactive exerc ## **2. JavaScript exercises** -> Inside of your `JavaScript2` fork, create a folder called `week1`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `bookList.js`. +> Inside of your `JavaScript2` fork, find the folder called `Week1`. Inside of that folder, find the folder called `js-exercises`. In this folder you will find five `.js` files (sometimes with a matching `.html` file), one for each exercise where you need to write your code. Please use the correct file for the respective exercise. **Exercise 1: The book list** @@ -52,7 +52,7 @@ https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/ **Exercise 2: About me** -Start with this HTML and save it as "about_me.html": +Given this HTML: ```html @@ -86,16 +86,15 @@ No homepage is safe from the logo bandit! Everytime he sees a Google Logo he rep In this exercise you're expected to write a JavaScript function that can be executed in the console of the [Google website](https://www.google.com). -1. Inside a JavaScript file, called `hijackGoogleLogo.js`, create a function called hijackGoogleLogo -2. Find out how to select the element that contains the Google logo, and store it in a variable -3. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead +1. Find out how to select the element that contains the Google logo, and store it in a variable +2. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead **Exercise 4: What's the time?** Why wear a watch when you can check the time, live in your webpage? -1. Create an empty HTML file, called `time.html` -2. Create a JavaScript file called `showCurrentTime.js` and include it in the HTML file +1. Create a basic HTML file +2. Include a script tag and link the JavaScript file 3. Inside the JS file, write a function that adds the current time to the webpage. Make sure it's written in the HH:MM:SS notation (hour, minute, second). Hint: use `setInterval()` to make sure the time stays current 4. Have the function execute when it's loading in the browser @@ -116,13 +115,12 @@ Start with this webpage, which has a single img tag of an animated GIF of a cat ``` -1. Add a script tag at the bottom of the page, where you'll put all your code. -2. Create a variable to store a reference to the img. -3. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens. -4. Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property. -5. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah! -6. When the cat reaches the right-hand of the screen, restart them at the left hand side ("0px"). So they should keep walking from left to right across the screen, forever and ever. -7. When the cat reaches the middle of the screen, replace the img with an image of a cat dancing (use this URL: https://tenor.com/StFI.gif), keep it dancing for 5 seconds, and then replace the img with the original image and have it continue the walk. +1. Create a variable to store a reference to the img. +2. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens. +3. Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property. +4. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah! +5. When the cat reaches the right-hand of the screen, restart them at the left hand side ("0px"). So they should keep walking from left to right across the screen, forever and ever. +6. When the cat reaches the middle of the screen, replace the img with an image of a cat dancing (use this URL: https://tenor.com/StFI.gif), keep it dancing for 5 seconds, and then replace the img with the original image and have it continue the walk. ## **3. Code along** @@ -136,7 +134,7 @@ Enjoy! > Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to. -> Before you start, create a new folder called `project` that includes the files for the following app you'll be building. +> Write the project code in the folder `Week1 \ project`. In this week's project you'll be making a Random Quote Generator! It includes a text box and a simple button that, when clicked, take a random quote out of a set amount of quotes and show it in the page. Here's how it should look: diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html new file mode 100644 index 000000000..b3864ac18 --- /dev/null +++ b/Week1/js-exercises/ex1-bookList.html @@ -0,0 +1,17 @@ + + + + + + + Codestin Search App + + + +

My Book List

+
+ +
+ + + \ No newline at end of file diff --git a/Week1/js-exercises/ex1-bookList.js b/Week1/js-exercises/ex1-bookList.js new file mode 100644 index 000000000..2db54ba5e --- /dev/null +++ b/Week1/js-exercises/ex1-bookList.js @@ -0,0 +1,42 @@ +/** + + ** Exercise 1: The book list ** + + I 'd like to display my three favorite books inside a nice webpage! + + 1. Iterate through the array of books. + 2. For each book, create a `

` + element with the book title and author and append it to the page. + 3. Use a `