diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 5008ddf..0000000 Binary files a/.DS_Store and /dev/null differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fa8981f --- /dev/null +++ b/.gitignore @@ -0,0 +1,138 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp +.cache + +# vitepress build output +**/.vitepress/dist + +# vitepress cache directory +**/.vitepress/cache + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +.DS_Store diff --git a/README.md b/README.md index 0b60105..a9a49e4 100644 --- a/README.md +++ b/README.md @@ -31,19 +31,7 @@ After you've installed it, go to your command line interface. Type in the follow node --version ``` -It should show you version `v12.16.1` or higher. - -### First 3 weeks - -The first three weeks of this module you will be moving at your own pace. That means that we have split up the material into three sections, but feel free to go faster or slower depending on if you feel comfortable you understood the material or not. These weeks are very important, so put in the time to practice as much as possible. The homework for week 3 covers all the material in the other weeks as by then you will know all the basic building blocks that JavaScript has to offer. - -After those weeks we will be going into the more tricky parts of JavaScript and start solving more complex and realistic problems that you will be facing as a developer. - -### New way of working! - -Starting from this module we will be using a class repository in GitHub to get used to some of the features of GitHub as well. When the first week starts you will be invited to a new GitHub repository and will be given a first issue there to enter your information. - -You will also be handing in your homework by creating issues there, starting from week 3. +It should show you the version you are working with. ## Learning goals @@ -53,6 +41,7 @@ In order to successfully complete this module you will need to master the follow - Know the basic building blocks of `JavaScript` - Correctly write and use `variables`, `functions` and `loops` - Understand the `control flow` +- Be able to solve worded problems using code ## How to use this repository @@ -60,38 +49,38 @@ In order to successfully complete this module you will need to master the follow This repository consists of 2 essential parts for each week: -1. `README`: this document contains all the required theory you need to understand **while** working on the homework. It contains the list of concepts that you will want to study this week and points you to your study book to read all about them. This is the **first thing** you should start with every week -2. `MAKEME`: this document contains the instructions for each week's practical tasks / homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier. In the first two weeks we do not expect you to hand in any homework as the online resources already check the code automatically, from week 3 our mentors will start giving you feedback on your homework. +1. `README`: this document contains all the required theory you need to understand **while** working on the weekly assignment. It contains the list of concepts that you will want to study this week and points you to your study book to read all about them. This is the **first thing** you should start with every week +2. `MAKEME`: this document contains the instructions for each week's practical tasks / assignment. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier. In the first two weeks we do not expect you to hand in any assignment as the online resources already check the code automatically, from week 3 our mentors will start giving you feedback on your assignments. ### How to study Let's say you are just starting out with the JavaScript module. This is what you do... 1. The week always starts on **Wednesday**. First thing you'll do is open the `README.md` for that week. For the first week of `JavaScript`, that would be [Week1 Reading](/Week1/README.md) -2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's homework (from the HTML-CSS module) -3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `JavaScript`, that would be [Week1 Homework](/Week1/MAKEME.md) -4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have -5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel -6. On **Sunday** you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others -7. You spend **Monday** and **Tuesday** finalizing your homework -8. **DEADLINE 2**: You submit your homework to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor +2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's assignment (from the HTML-CSS module) +3. On **Friday** you start with the assignment, found in the `MAKEME.md`. For the first week of `JavaScript`, that would be [Week1 Assignment](/Week1/MAKEME.md) +4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have. +5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the cohort channel. +6. On **Sunday** you'll attend the Q&A session. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others. +7. You spend **Monday** and **Tuesday** finalizing your assignment. +8. **DEADLINE 2**: You submit your assignment to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor 9. Start the new week by going back to point 1! In summary: ![Weekflow](assets/weekflow.png) -To have a more detailed overview of the guidelines, please read [this document](https://docs.google.com/document/d/1JUaEbxMQTyljAPFsWIbbLwwvvIXZ0VCHmCCN8RaeVIc/edit?usp=sharing) or ask your mentor/class on Slack! +To have a more detailed overview of the guidelines, please read [this document](https://docs.google.com/document/d/1JUaEbxMQTyljAPFsWIbbLwwvvIXZ0VCHmCCN8RaeVIc/edit?usp=sharing) or ask your mentor/cohort on Slack! ## Planning -| Week | Topic | Reading Materials | Homework | +| Week | Topic | Reading Materials | Assignment | | ---- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | -| 1. | Variables, Variable Types, Operators, Objects, Arrays | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | -| 2. | Loops, Control Flow, If/Else, | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | -| 3. | Functions, Scope, ModernJS | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | -| 4. | Higher Order Functions, Array functions, Closures | [Reading W4](/Week4/README.md) | [Homework W4](/Week4/MAKEME.md) | +| 1. | JS Basics Refresher, Loops, Naming Conventions | [Reading W1](/Week1/README.md) | [Assignment W1](/Week1/MAKEME.md) | +| 2. | Scope, ModernJS, Problem Solving | [Reading W2](/Week2/README.md) | [Assignment W2](/Week2/MAKEME.md) | +| 3. | Higher Order Functions, Closures, Unit Testing | [Reading W3](/Week3/README.md) | [Assignment W3](/Week3/MAKEME.md) | +| 4. | This keyword, constructor functions, classes | [Reading W4](/Week4/README.md) | [Assignment W4](/Week4/MAKEME.md) | ## Finished? diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 3ef29f5..7f6f747 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,40 +1,48 @@ -# Homework JavaScript Week 1 +# Assignment JavaScript Week 1 ## **Todo list** 1. JS Tutor -2. Prep exercises -3. Practice the concepts +1. Practice the concepts +1. Prep exercises +1. Practice practice practice ## **1. JS Tutor** -Practice, practice, practice. This week you are not handing in any homework, but are going to practice as much javascript as you can. Play around with the exercises mentioned below, remember that you can copy the code into [JS Tutor](http://pythontutor.com/javascript.html#mode=edit) to step through the code. Or look at it in the debugger in the browser/vscode. +Practice, practice, practice. This week you are not handing in any assignment, but are going to practice as much javascript as you can. Play around with the exercises mentioned below, remember that you can copy the code into [JS Tutor](http://pythontutor.com/javascript.html#mode=edit) to step through the code. Or look at it in the debugger in the browser/vscode. -## **2. Prep exercises** +## **2. Practice the concepts** -> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your class and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did. +In this section you will be doing interactive exercises, that will allow you to practice with the concepts you've learned about this week! We provide a lot of possible exercises here and you probably can't do everything, but do as many as you need to feel comfortable with the concepts. Also feel free to come back to them later. -Inside your `JavaScript` fork, go to the folder `Week1`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then. +- Do all parts of [Codecademy: Arrays](https://www.codecademy.com/courses/introduction-to-javascript/lessons/arrays) (Signup required!) +- Do 5 exercises of [FreeCodeCamp: Basic data structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-data-structures) +- [Codecademy: Functions ](https://www.codecademy.com/courses/introduction-to-javascript/lessons/functions) +- [JSchallenger](https://www.jschallenger.com/) - Do all of the Javascript Basics section except for `scope` and `asynchronous javascript`. +- There is a practice-exercises folder in this week's repository that is filled with exercises to try out. The solutions are in a separate folder so you can check if you did it correctly. Clone this repository to your computer and have a go! -## **3. Practice the concepts** +## **3. Prep exercises** -Before we learn how to build actual applications, we first need to gain experience using JavaScript in a computational way. This teaches us how to think like a programmer, and gives us more experience with the language itself. +> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your cohort and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did. -In the following exercises you'll learn how to use different JavaScript concepts to solve common computational problems. +Inside your `JavaScript` fork, go to the folder `Week1`. Inside that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then. -- [Learn-js](https://www.learn-js.org/). Do all the `Learn the basics` exercises. -- [Codecademy: Introduction to JavaScript](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-introduction). Do all the exercises (#1 to #10). -- [jshero.net](https://www.jshero.net/en/success.html). Do the first 5 exercises. +## **4. Practice practice practice** -The above should give you a nice basis. If you have extra time and are still a little unsure, have a look at the following: +Done with the above? Then it is time to practice practice practice! Below you will find huge lists of practice exercises to keep practicing. The better you get at JavaScript, the easier the rest of the curriculum is so try to do as much as you can. Some of these solutions use some of the concepts of next week so if something looks weird, have a quick look at next week's topics to see what it means: -- [FreeCodeCamp: Introduction to JavaScript](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript). Do at least 20 exercises, you can choose whichever ones you feel are challenging enough. -- There is a practice-exercises folder in this week's repository that is filled with exercises to try out. The solutions are in a separate folder so you can check if you did it correctly. Clone this repository to your computer and have a go! +- [W3Resource Basic exercises](https://www.w3resource.com/javascript-exercises/javascript-basic-exercises.php) _(Note that the given solutions to these exercises use old JS syntax, we will learn more about this later. Most important now is that we don't use `var` anymore, so make sure you use `let` or `const`!)_ + +There are also multiple websites that provide constant challenges to practice your skills. These go from beginner to advanced and you should bookmark them and return every once in awhile. In some interview processes these kinds of exercises are given nowadays. We suggest to start with Edabit as they are more geared to beginners, the others start at a higher level: + +- [Edabit](https://edabit.com/challenges) - You can choose JavaScript as a language and then try solving as many challenges as you can. If you find the level too easy then you can choose a higher difficulty. +- [leetcode](https://leetcode.com/) - Sign up and start solving! +- [Code Wars](https://www.codewars.com/) - Once you feel comfortable with the JavaScript syntax sign up for code wars to practice. It is a website where you can solve exercises and rank up! When signing up, only choose JavaScript to really focus the problems on learning to solve problems in it. You can later change it to other technologies when you get more familiar. -## No homework to hand in +## No assignment to hand in (for now) -For the first 2 weeks of JavaScript there is no homework to hand in as the exercises already give you all the feedback you need. Go through the first 3 weeks at your own pace, and feel free to ask questions about any of the 3 weeks for the Q&A sessions. +For the first week of JavaScript there is no assignment to hand in as the exercises already give you all the feedback you need. ## Done early? -Try to do more exercises in the links above. The first weeks of the JavaScript modules are very important as understanding the basics will make the rest of the curriculum that much easier to follow. So keep reading and writing code! If you are done early, go on to week 2! +Try to do more exercises in the links above. The first weeks of the JavaScript modules are very important as understanding the basics will make the rest of the curriculum that much easier to follow. So keep reading and writing code! diff --git a/Week1/QA.md b/Week1/QA.md index 94fdec5..3498fcf 100644 --- a/Week1/QA.md +++ b/Week1/QA.md @@ -1,10 +1,11 @@ # Q & A Session -The first 2 weeks of JavaScript we do not have homework and we encourage students to follow all the material at their own pace. So students can ask questions about any week. Expect questions about: +The first week of JavaScript we do not have an assignment and we encourage trainees to follow all the material at their own pace. So trainees can ask questions about any week. Expect questions about: +- Functions - Basic JavaScript blocks (let/const, operators, loops, if/else, functions) - The Debugger (both browser/vscode) and how to debug - Naming conventions - DRY principle -In these first weeks we want to get the students to create the right mental model for JavaScript constructs, so try to go back to basics as much as possible. However easy it comes to the mentors, this is the first time students encounter all the syntax of a programming language. So try to go slowly and use the debugger / [JSTutor](http://pythontutor.com/javascript.html#mode=edit) as much as possible. +In these first weeks, we want to get the trainees to create the right mental model for JavaScript constructs, so try to go back to basics as much as possible. However easy it comes to the mentors, this is the first time trainees encounter all the syntax of a programming language. So try to go slowly and use the debugger / [JSTutor](http://pythontutor.com/javascript.html#mode=edit) as much as possible. diff --git a/Week1/README.md b/Week1/README.md index 33d9c4f..ae62329 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -2,40 +2,43 @@ ## Agenda -These are the topics for week 1. - -1. [What is programming?](https://study.hackyourfuture.net/#/programming/README) - - Software - - What is a programming language? -2. [What is web development?](https://study.hackyourfuture.net/#/the-internet/web-development) - - Web development vs. software development - - Web development vs. web design - - Website vs. web application -3. [What is JavaScript?](https://study.hackyourfuture.net/#/javascript/README) -4. [What are variables?](https://study.hackyourfuture.net/#/javascript/variables) - - The keywords: let, const, var -5. [What are values?](https://study.hackyourfuture.net/#/javascript/values) -6. [Statements vs. Expressions](https://study.hackyourfuture.net/#/javascript/statements-vs-expressions) -7. [Operators](https://study.hackyourfuture.net/#/javascript/operators) -8. [Debuggers](https://study.hackyourfuture.net/#/tools/debuggers) -9. Testing code +These are the topics for week 1: + +1. [Refresher on JavaScript building blocks](https://github.com/HackYourFuture/explore/tree/main/Week3) + - Variables + - Values + - Statements / Expressions + - Operators + - Conditional Statements + - [Functions](https://study.hackyourfuture.net/#/javascript/functions) +1. [Refresher on debuggers](https://study.hackyourfuture.net/#/tools/debuggers) +1. [Loops](https://study.hackyourfuture.net/#/javascript/loops) +1. [Naming conventions](https://study.hackyourfuture.net/#/programming/naming-conventions) +1. [Testing code](https://www.ministryoftesting.com/articles/e463d4ba?s_id=14519957) - [Assertion](https://study.hackyourfuture.net/#/testing/assertion) -10. [Career training I (Your Personal Brand)](https://github.com/HackYourFuture/yourpersonalbrand) ## Week goals -All of the detailed information about every concept is in your study book. The following goal explanation will link you to the correct place to get studying. Read through the goal description once to get an idea of what you will be learning, then go through the different links (either from the agenda or this goal list). -This week is all about getting you started in the world of JavaScript. For that we have to go a little broad and first explain the difference between what you have been doing until now (very visual, one line does one thing coding) to actually programming. Start by opening your study book to the [What is programming](https://study.hackyourfuture.net/#/programming/README) section and reading through it to get a feel for the world you are going to embark into. Once you know what programming is it is time to learn about the programmer niche this curriculum is built for which is [Web development](https://study.hackyourfuture.net/#/the-internet/web-development). Now let's talk about JavaScript, which is the programming language the whole rest of the curriculum will be done in. First read up on what JavaScript is in your studybook [here](https://study.hackyourfuture.net/#/javascript/README). +All of the detailed information about every concept is in your study book. The following goal explanation will link you to the correct place to get studying. Read through the goal description once to get an idea of what you will be learning, then go through the different links and look at them in detail. -Time to start learning the language with the first building blocks: variables! Have a look at what variables are [here](https://study.hackyourfuture.net/#/javascript/variables) and what values are [here](https://study.hackyourfuture.net/#/javascript/values). Then let's go over some syntax with the difference between statements and expressions [here](https://study.hackyourfuture.net/#/javascript/statements-vs-expressions). And finally let's look at what we can do with variables and values by using what's called operators. Read about them [here](https://study.hackyourfuture.net/#/javascript/operators). +Welcome to week 1 of JavaScript! Time to get coding, let's start with refreshing the things we learned during the explore module. Have a look at [week 3](https://github.com/HackYourFuture/explore/tree/main/Week3) there again to remind yourself what the following concepts mean again: -To help learn the language we also want to introduce you to some tools that you can use to look under the hood of your code in the section about [debuggers](https://study.hackyourfuture.net/#/tools/debuggers). You won't understand everything of what's there yet, but debugging is so important we want you to look at it early. Read through it once and play around a bit in the debugger. We will be telling you to revisit the debugging section over the next few weeks as you start learning more and more about what is possible. +- Variables +- Values +- Statements / Expressions +- Operators +- Conditional Statements -Lastly we want to introduce the first steps to testing code with some code you will find in your exercises. Have a look at what assertion is [here](https://study.hackyourfuture.net/#/testing/assertion), the `console.assert` lines in your practice exercises uses this to check that your code does the right thing. +Then have a look at functions again over [here](https://study.hackyourfuture.net/#/javascript/functions). -## Career training I (Your personal brand) -During this module, you will also learn about the different components that make your personal brand (CV, GitHub, LinkedIn, etc). We have compiled all important info for you in [this repo](https://github.com/HackYourFuture/yourpersonalbrand). Be sure to read the full repo for the Career Training session that will happen in Week 2 of this module and start working on your personal brand which you will have to hand in at the end of JS week 4! +This week we are going to go a little deeper and get some extra building blocks to work with. Another cool thing we can do in JavaScript is repeat actions, we can do that using a concept called loops, read more about that [here](https://study.hackyourfuture.net/#/javascript/loops). + +You now have all of the basic building blocks that form the basis of all code! You will undoubtedly already have encountered the difficulty of reading code, and combining everything this week will make it even more difficult to follow. It is a good idea to revisit the debugger section with this new knowledge [here](https://study.hackyourfuture.net/#/tools/debuggers). Although it is called debugging, a lot of the process of finding 'bugs' in your code is trying to understand what is happening in the code. So keep using the debugger to understand pieces of code that you are not 100% comfortable with yet! + +This is also the week we are going to start learning about best practices surrounding programming. These are general rules programmers follow so that code remains readable for others. The first will be about naming conventions, read more about that [here](https://study.hackyourfuture.net/#/programming/naming-conventions) and try to make it a habit to follow them. + +Lastly we want to introduce the first steps to testing code. Let's first have a look at what software testing is and why we do it [here](https://www.ministryoftesting.com/articles/e463d4ba?s_id=14519957). The simplest form of testing is using assertions, have a look what that is [here](https://study.hackyourfuture.net/#/testing/assertion), we will introduce this more in your assignment so you will see how it works. ## Finished? -Are you finished with going through the materials? You're doing great! If you feel ready to get practical, click [here](./MAKEME.md). If you have finished the exercises, then start working on week 2! The first 3 weeks of this module cover all the basic building blocks of JavaScript and getting familiar with them is of the utmost importance! +Are you finished with going through the materials? You're doing great! If you feel ready to get practical, click [here](./MAKEME.md). diff --git a/Week1/practice-exercises/1-hello-world.js b/Week1/practice-exercises/1-hello-world.js deleted file mode 100644 index e345354..0000000 --- a/Week1/practice-exercises/1-hello-world.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Write a statement, using the console.log() function. It should fulfill the following requirements: - * It takes a string as an argument - * The string should contain the message "Hello world!" - * Execute the file 10 times, each time using the phrase in different languages - * - * For example: - * Halo, dunia! // Indonesian - * Ciao, mondo! // Italian - * Hola, mundo! // Spanish - */ - diff --git a/Week2/practice-exercises/1-remove-the-comma.js b/Week1/practice-exercises/1-remove-the-comma.js similarity index 100% rename from Week2/practice-exercises/1-remove-the-comma.js rename to Week1/practice-exercises/1-remove-the-comma.js diff --git a/Week2/practice-exercises/2-even-odd-reporter.js b/Week1/practice-exercises/2-even-odd-reporter.js similarity index 100% rename from Week2/practice-exercises/2-even-odd-reporter.js rename to Week1/practice-exercises/2-even-odd-reporter.js diff --git a/Week1/practice-exercises/2-syntax-error.js b/Week1/practice-exercises/2-syntax-error.js deleted file mode 100644 index a0005dd..0000000 --- a/Week1/practice-exercises/2-syntax-error.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Consider this code, it has a syntax error in it. - * Fix it so that when running this file it shows the message 'I'm awesome!' - */ - -console.log('I'm awesome'!; \ No newline at end of file diff --git a/Week1/practice-exercises/3-log-number.js b/Week1/practice-exercises/3-log-number.js deleted file mode 100644 index c29038c..0000000 --- a/Week1/practice-exercises/3-log-number.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Follow the commented steps to write a piece of code. - * Then run it to see if you are correct! - */ - -// 1. Declare your variable numberX. Do not initialize it (which means, don't give it a starting value) yet - - -// 2. Add a console.log statement that explains in words what you think the value of x is - - -// 3. Add a console.log statement that logs the value of numberX. - - -// 4. Now initialize your variable numberX with a number (also called an integer in computer science terms) - - -// 5. Next, add a console.log statement that explains what you think the value of numberX is - - -// 6. Add a console.log statement that logs the value of numberX - - diff --git a/Week2/practice-exercises/3-recipe-card.js b/Week1/practice-exercises/3-recipe-card.js similarity index 100% rename from Week2/practice-exercises/3-recipe-card.js rename to Week1/practice-exercises/3-recipe-card.js diff --git a/Week1/practice-exercises/4-log-string.js b/Week1/practice-exercises/4-log-string.js deleted file mode 100644 index 8e38cb3..0000000 --- a/Week1/practice-exercises/4-log-string.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Follow the commented steps to write a piece of code. - * Then run it to see if you are correct! - */ - -// 1. Declare a variable myString and assign a string to it. Use your full name, including spaces, as the content for the string. - - -// 2. Write a console.log statement in which you explain in words what you think the value of the string is. - - -// 3. Now console.log the variable myString. - - -// 4. Now reassign to the variable myString a new string. - - -// 5. Just like what you did before write a console.log statement that explains in words what you think will be logged to the console. - - -// 6. Now console.log myString again. - - diff --git a/Week2/practice-exercises/4-reading-list.js b/Week1/practice-exercises/4-reading-list.js similarity index 100% rename from Week2/practice-exercises/4-reading-list.js rename to Week1/practice-exercises/4-reading-list.js diff --git a/Week1/practice-exercises/5-round-number.js b/Week1/practice-exercises/5-round-number.js deleted file mode 100644 index 602c5f1..0000000 --- a/Week1/practice-exercises/5-round-number.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Follow the commented steps to write a piece of code - */ - - // 1. Declare a variable z and assign the number 7.25 to it. - - - // 2. Write a console.log statement in which you log the value of z. - - - // 3. Declare another variable a that has the value of z but rounded to the nearest integer. - - - // 4. Write a console.log statement in which you log the value of a. - - - // 5. So now we have z and a find a way to compare the two values and log true if a is greater than z or false if a is smaller than z. diff --git a/Week2/practice-exercises/5-who-wants-a-drink.js b/Week1/practice-exercises/5-who-wants-a-drink.js similarity index 100% rename from Week2/practice-exercises/5-who-wants-a-drink.js rename to Week1/practice-exercises/5-who-wants-a-drink.js diff --git a/Week1/practice-exercises/6-log-animals.js b/Week1/practice-exercises/6-log-animals.js deleted file mode 100644 index 65c2e41..0000000 --- a/Week1/practice-exercises/6-log-animals.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Follow the commented steps to write a piece of code. - */ - -// 1. Declare variable and assign to it an empty array. Make sure that the name of the variable indicates it contains more than 1 item. For example items instead of item. - - -// 2. Write a console.log statement that explains in words what you think the value of the array is. - - -// 3. Write a console.log statement that logs the array. - - -// 4. Create a new variable with an array that has 3 of your favorite animals, each in a different string. Make sure the name of the variables says something about what the variable contains. - - -// 5. Write a console.log statement that logs the second array. - - -// 6. Add a statement that adds another string ("Piglet)" to the array of animals. - - -// 7. Write a console.log statement that logs the second array! - - diff --git a/Week1/practice-exercises/7-log-string-length.js b/Week1/practice-exercises/7-log-string-length.js deleted file mode 100644 index b1ee540..0000000 --- a/Week1/practice-exercises/7-log-string-length.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Follow the commented steps to write a piece of code. - */ - -// 1. Declare a variable called mySentence and initialize it with the following string: "Programming is so interesting!". - - -// 2. Figure out (using Google) how to get the length of mySentence. Then write a console.log statement to log the length of mySentence. - diff --git a/Week1/practice-exercises/solutions/1-hello-world.js b/Week1/practice-exercises/solutions/1-hello-world.js deleted file mode 100644 index 4853c8e..0000000 --- a/Week1/practice-exercises/solutions/1-hello-world.js +++ /dev/null @@ -1,10 +0,0 @@ -console.log('Hello world!'); // English -console.log('Привет, мир!'); // Russian -console.log('Hallo Wereld'); // Dutch -console.log('أهلان و سهلان يا دنيا'); // Arabic -console.log('Bonjour le monde'); // French -console.log('Сәлем Әлем'); // Kazakh -console.log('Selam Dünya'); // Turkish -console.log('你好，世界') // Chinese -console.log('こんにちは世界'); // Japanese -console.log('Salamu, Dunia'); // Swahili \ No newline at end of file diff --git a/Week2/practice-exercises/solutions/1-remove-the-comma.js b/Week1/practice-exercises/solutions/1-remove-the-comma.js similarity index 100% rename from Week2/practice-exercises/solutions/1-remove-the-comma.js rename to Week1/practice-exercises/solutions/1-remove-the-comma.js diff --git a/Week2/practice-exercises/solutions/2-even-odd-reporter.js b/Week1/practice-exercises/solutions/2-even-odd-reporter.js similarity index 100% rename from Week2/practice-exercises/solutions/2-even-odd-reporter.js rename to Week1/practice-exercises/solutions/2-even-odd-reporter.js diff --git a/Week1/practice-exercises/solutions/2-syntax-error.js b/Week1/practice-exercises/solutions/2-syntax-error.js deleted file mode 100644 index b5a6589..0000000 --- a/Week1/practice-exercises/solutions/2-syntax-error.js +++ /dev/null @@ -1 +0,0 @@ -console.log("I'm awesome'!"); \ No newline at end of file diff --git a/Week1/practice-exercises/solutions/3-log-number.js b/Week1/practice-exercises/solutions/3-log-number.js deleted file mode 100644 index ff6b240..0000000 --- a/Week1/practice-exercises/solutions/3-log-number.js +++ /dev/null @@ -1,18 +0,0 @@ -// 1. Declare your variable numberX. Do not initialize it (which means, don't give it a starting value) yet -let numberX; - -// 2. Add a console.log statement that explains in words what you think the value of x is -console.log('I think numberX will be undefined, because we have not given it a value'); - -// 3. Add a console.log statement that logs the value of numberX. -console.log(numberX); - -// 4. Now initialize your variable numberX with a number (also called an integer in computer science terms) -numberX = 4; - -// 5. Next, add a console.log statement that explains what you think the value of numberX is -console.log('I think numberX will now be 4 as I have explicitely set it to 4'); - -// 6. Add a console.log statement that logs the value of numberX -console.log(numberX); - diff --git a/Week2/practice-exercises/solutions/3-recipe-card.js b/Week1/practice-exercises/solutions/3-recipe-card.js similarity index 100% rename from Week2/practice-exercises/solutions/3-recipe-card.js rename to Week1/practice-exercises/solutions/3-recipe-card.js diff --git a/Week1/practice-exercises/solutions/4-log-string.js b/Week1/practice-exercises/solutions/4-log-string.js deleted file mode 100644 index 0badf9e..0000000 --- a/Week1/practice-exercises/solutions/4-log-string.js +++ /dev/null @@ -1,18 +0,0 @@ -// 1. Declare a variable myString and assign a string to it. Use your full name, including spaces, as the content for the string. -let myString = 'John Doe'; - -// 2. Write a console.log statement in which you explain in words what you think the value of the string is. -console.log('I think the value of the string is John Doe as I assigned it immediately'); - -// 3. Now console.log the variable myString. -console.log(myString); - - -// 4. Now reassign to the variable myString a new string. -myString = 'Jane'; - -// 5. Just like what you did before write a console.log statement that explains in words what you think will be logged to the console. -console.log('I think the value of the string is Jane as I reassigned it'); - -// 6. Now console.log myString again. -console.log(myString); \ No newline at end of file diff --git a/Week2/practice-exercises/solutions/4-reading-list.js b/Week1/practice-exercises/solutions/4-reading-list.js similarity index 100% rename from Week2/practice-exercises/solutions/4-reading-list.js rename to Week1/practice-exercises/solutions/4-reading-list.js diff --git a/Week1/practice-exercises/solutions/5-round-number.js b/Week1/practice-exercises/solutions/5-round-number.js deleted file mode 100644 index c7139a9..0000000 --- a/Week1/practice-exercises/solutions/5-round-number.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Follow the commented steps to write a piece of code - */ - - // 1. Declare a variable z and assign the number 7.25 to it. -const z = 7.25; - - // 2. Write a console.log statement in which you log the value of z. -console.log(z); - - // 3. Declare another variable a that has the value of z but rounded to the nearest integer. -const a = Math.round(z); - - // 4. Write a console.log statement in which you log the value of a. -console.log(a); - - // 5. So now we have z and a find a way to compare the two values and log true if a is greater than z or false if a is smaller than z. -console.log(a > z); \ No newline at end of file diff --git a/Week2/practice-exercises/solutions/5-who-wants-a-drink.js b/Week1/practice-exercises/solutions/5-who-wants-a-drink.js similarity index 100% rename from Week2/practice-exercises/solutions/5-who-wants-a-drink.js rename to Week1/practice-exercises/solutions/5-who-wants-a-drink.js diff --git a/Week1/practice-exercises/solutions/6-log-animals.js b/Week1/practice-exercises/solutions/6-log-animals.js deleted file mode 100644 index 8641080..0000000 --- a/Week1/practice-exercises/solutions/6-log-animals.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Follow the commented steps to write a piece of code. - */ - -// 1. Declare variable and assign to it an empty array. Make sure that the name of the variable indicates it contains more than 1 item. For example items instead of item. -const items = []; - -// 2. Write a console.log statement that explains in words what you think the value of the array is. -console.log('I think the items array will be an empty array as it has been initialised like that'); - -// 3. Write a console.log statement that logs the array. -console.log(items); - -// 4. Create a new variable with an array that has 3 of your favorite animals, each in a different string. Make sure the name of the variables says something about what the variable contains. -const animals = ['Dog', 'Cat', 'Mouse']; - -// 5. Write a console.log statement that logs the second array. -console.log(animals); - -// 6. Add a statement that adds another string ("Piglet)" to the array of animals. -animals.push('Piglet'); - -// 7. Write a console.log statement that logs the second array! -console.log(animals); - diff --git a/Week1/practice-exercises/solutions/7-log-string-length.js b/Week1/practice-exercises/solutions/7-log-string-length.js deleted file mode 100644 index e4da70c..0000000 --- a/Week1/practice-exercises/solutions/7-log-string-length.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Follow the commented steps to write a piece of code. - */ - -// 1. Declare a variable called mySentence and initialize it with the following string: "Programming is so interesting!". -const mySentence = "Programming is so interesting!"; - -// 2. Figure out (using Google) how to get the length of mySentence. Then write a console.log statement to log the length of mySentence. -console.log(mySentence.length); diff --git a/Week1/prep-exercises/1-objects-and-arrays/README.md b/Week1/prep-exercises/1-objects-and-arrays/README.md deleted file mode 100644 index f049e0b..0000000 --- a/Week1/prep-exercises/1-objects-and-arrays/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# Prep exercise - Objects and Arrays - -Objects and Arrays form the basis of pretty much all data structures in JavaScript and allow us to represent the state of the world to be manipulated. This exercise is all about how to represent objects in the real world in an 'IT' way. By thinking about the data structure you can make it easier to implement certain functionality which will help code stay simple and readable! - -## Traffic light - -In the `traffic-light-1.js` and `traffic-light-2.js` files we give two different ways of representing a traffic light. Have a look at the files and think about the following: - -- In the first version we create an object with a state property. Why do you think we do this? Why not just a variable? -- In the second version we add extra information (the `possibleStates` property). What do you think the advantage is of that? -- In the second version the `stateIndex` property is a number, why do you think that is? - -## HackYourFuture program - -In the `hyf.js` file we have a more complex representation of the hyf program. We have divided the hyf world into 4 what we call `entities`: `modules`, `classes`, `students`, `mentors`. The `export` statements are for week 4, you can ignore those for now! Have a look and think about the following: - -- Why do you think we have a `name` and `displayName` property for the `modules`? -- Do you think `active` and `start`/`graduationDate` are both needed in the `classes` array? Why or why not? - -## Things to think about - -Next to the questions specific to each representation, also have a think about the following: - -- In all of the examples, you will see that objects and arrays are mostly defined using a `const` statement rather than a `let` even if we change the value of the object or array, why do you think this is the case? diff --git a/Week1/prep-exercises/1-objects-and-arrays/traffic-light-1.js b/Week1/prep-exercises/1-objects-and-arrays/traffic-light-1.js deleted file mode 100644 index 8db87fe..0000000 --- a/Week1/prep-exercises/1-objects-and-arrays/traffic-light-1.js +++ /dev/null @@ -1,10 +0,0 @@ -"use strict"; -/** - * The `state` property says what the traffic light's state (i.e. colour) is at - * that moment. - */ -const trafficLight = { - state: "red", -}; - -const currentState = trafficLight.state; diff --git a/Week1/prep-exercises/1-objects-and-arrays/traffic-light-2.js b/Week1/prep-exercises/1-objects-and-arrays/traffic-light-2.js deleted file mode 100644 index a893800..0000000 --- a/Week1/prep-exercises/1-objects-and-arrays/traffic-light-2.js +++ /dev/null @@ -1,12 +0,0 @@ -"use strict"; -/** - * The `possibleStates` property define the states (in this case: colours) - * in which the traffic light can be. - * The `stateIndex` property indicates which of the possible states is current. - */ -const trafficLight = { - possibleStates: ["green", "orange", "red"], - stateIndex: 0, -}; - -const currentState = trafficLight.possibleStates[trafficLight.stateIndex]; diff --git a/Week1/prep-exercises/1-traffic-light/README.md b/Week1/prep-exercises/1-traffic-light/README.md new file mode 100644 index 0000000..d994741 --- /dev/null +++ b/Week1/prep-exercises/1-traffic-light/README.md @@ -0,0 +1,9 @@ +# Prep exercise - traffic light + +Let's have a deeper look at the working of traffic lights this week so that we can practice logic and loops. In `traffic-light-1.js` and `traffic-light-2.js` you will find the same requirements but with different ways of representing the traffic light. Have a look through the files and solve them so you can see how the way we represent data affects the way we need to solve problems. + +## Things to think about + +- Which way of representing the traffic light did you find better? Why? +- What happens if you change the loop to a `do-while` loop instead of a `while` loop? Why? +- We could have also used a `for` loop to make the traffic light do 2 full rotations. Do you think that would be better? Why or why not? diff --git a/Week2/prep-exercises/1-traffic-light/traffic-light-1.js b/Week1/prep-exercises/1-traffic-light/traffic-light-1.js similarity index 100% rename from Week2/prep-exercises/1-traffic-light/traffic-light-1.js rename to Week1/prep-exercises/1-traffic-light/traffic-light-1.js diff --git a/Week2/prep-exercises/1-traffic-light/traffic-light-2.js b/Week1/prep-exercises/1-traffic-light/traffic-light-2.js similarity index 100% rename from Week2/prep-exercises/1-traffic-light/traffic-light-2.js rename to Week1/prep-exercises/1-traffic-light/traffic-light-2.js diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 85e6d68..ca85c57 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,32 +1,36 @@ -# Homework JavaScript Week 2 +# Assignment JavaScript Week 2 -Practice, practice, practice. Same as week 1, you are not handing in any homework, but are going to practice as much javascript as you can. Play around with the exercises mentioned below, remember that you can copy the code into [jsTutor](http://pythontutor.com/javascript.html#mode=edit) to step through the code, or look at it in the debugger in the browser/vscode. +This will be the first week you are expected to hand in an assignment when we combine all of the concepts you have been practicing the last 3 weeks. -## **Todo list ** +## **Todo list** -1. Practice the concepts -2. Prep exercises +1. Prep exercises +1. Assignment +1. Practice practice practice -## **1. Practice the concepts** +## **1. Prep exercises** -In this section you will be doing interactive exercises, that will allow you to practice with the concepts you've learned about this week! Do as many as you need to feel comfortable with the concepts. +> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your cohort and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did. -- Do all parts of [Codecademy: Arrays](https://www.codecademy.com/courses/introduction-to-javascript/lessons/arrays) (Signup required!) -- Do 5 exercises of [FreeCodeCamp: Basic data structures](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures) -- There is a practice-exercises folder in this week's repository that is filled with exercises to try out. The solutions are in a separate folder so you can check if you did it correctly. Clone this repository to your computer and have a go! +Inside your `JavaScript` fork, go to the folder `Week2`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then. -## **2. Prep exercises** +## **2. Assignment** -> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your class and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did. +It is time to combine everything we have learned the past couple of weeks and get some feedback from experienced developers. This will be the first week you are working with the assignment repository so reserve some time to set it up. You will find the repository in our [HackYourAssignment](https://github.com/HackYourAssignment/) GitHub page. There should be one called Assignment-cohortXX where XX is your cohort number, you will want to fork that to your own GitHub. Have a look at the [Assignment guide](../hand-in-assignments-guide.md) to see how to hand in your assignment. -Inside your `JavaScript` fork, go to the folder `Week2`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then. +This week we expect you to do the exercises in the corresponding module/week folder (JavaScript / Week 2). + +_NOTE: Make sure to read and apply all of the steps in the README in the assignment repository to set up the extensions in Visual Studio Code!_. + +## **3. Practice practice practice** -## No homework to hand in (for now) +Done with the above? Then it is time to practice practice practice! Below you will find huge lists of practice exercises to keep practicing. The better you get at JavaScript, the easier the rest of the curriculum is so try to do as much as you can. Some of these solutions use some of the concepts of next week so if something looks weird, have a quick look at next week's topics to see what it means: -For the first 2 weeks of JavaScript there is no homework to hand in as the exercises already give you all the feedback you need. Go through the first 3 weeks at your own pace, and feel free to ask questions about any of the 3 weeks for the Q&A sessions. +- [JSchallenger](https://www.jschallenger.com/) - Do the `scope` part in the `Basics` section. Then do the following in the Javascript Practice section (fundamentals, arrays, objects). +- [W3Resource - JavaScript Fundamental exercises](https://www.w3resource.com/javascript-exercises/fundamental/index.php) -While there’s no homework to be handed in this week, we strongly suggest that you start working on your Personal Brand as mentioned in the Career Training session. Keep in mind that the last week of Javascript you will have to hand in your CV so better get started soon! +Also keep going with all of the from beginner to advanced platforms mentioned last week! ## Done early? -Try to do more exercises in the links above. The first weeks of the JavaScript modules are very important as understanding the basics will make the rest of the curriculum that much easier to follow. So keep reading and writing code! If you feel up to it, continue on to week 3 as then we bring everything together. +Try to do more exercises in the links above. The first weeks of the JavaScript modules are very important as understanding the basics will make the rest of the curriculum that much easier to follow. So keep reading and writing code! diff --git a/Week2/QA.md b/Week2/QA.md index 94fdec5..55aea31 100644 --- a/Week2/QA.md +++ b/Week2/QA.md @@ -1,10 +1,10 @@ -# Q & A Session +# Q & A session -The first 2 weeks of JavaScript we do not have homework and we encourage students to follow all the material at their own pace. So students can ask questions about any week. Expect questions about: +This week we are going deeper into more advanced topics, so expect questions about: -- Basic JavaScript blocks (let/const, operators, loops, if/else, functions) -- The Debugger (both browser/vscode) and how to debug -- Naming conventions +- Scope +- The Debugger (both browser/vscode) and how to debug functions - DRY principle +- Naming conventions -In these first weeks we want to get the students to create the right mental model for JavaScript constructs, so try to go back to basics as much as possible. However easy it comes to the mentors, this is the first time students encounter all the syntax of a programming language. So try to go slowly and use the debugger / [JSTutor](http://pythontutor.com/javascript.html#mode=edit) as much as possible. +In these first weeks we want to get the trainees to create the right mental model for JavaScript constructs, so try to go back to basics as much as possible. However easy it comes to the mentors, this is the first time trainees encounter all the syntax of a programming language. So try to go slowly and use the debugger / [JSTutor](http://pythontutor.com/javascript.html#mode=edit) as much as possible. diff --git a/Week2/README.md b/Week2/README.md index 129b182..3feb55c 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -1,26 +1,21 @@ -# Reading Material JavaScript1 Week 2 +# Reading Material JavaScript Week 2 ## Agenda These are the topics for week 2: -1. [Conditional statements](https://study.hackyourfuture.net/#/javascript/conditional-statements) -2. [Loops](https://study.hackyourfuture.net/#/javascript/loops) -3. [Revisit debuggers](https://study.hackyourfuture.net/#/tools/debuggers) -4. [Naming conventions](https://study.hackyourfuture.net/#/programming/naming-conventions) -5. [Your personal brand](https://github.com/HackYourFuture/yourpersonalbrand) +1. [Scope](https://study.hackyourfuture.net/#/javascript/scope) +1. [Modern JS](https://study.hackyourfuture.net/#/javascript/modern-js) +1. [Problem solving](https://study.hackyourfuture.net/#/programming/problem-solving-process) ## Week goals -All of the detailed information about every concept is in your study book. The following goal explanation will link you to the correct place to get studying. Read through the goal description once to get an idea of what you will be learning, then go through the different links and look at them in detail. -This week we are going to go a little deeper and get some extra building blocks to work with. That way we can make some more interesting pieces of code that actually have some logic in them. At this point we can determine things with our values and manipulate them, but the real power of programming comes when we can make 'decisions' to do something different based on our value. That way we can actually build logic into our code! Read all about conditional statements [here](https://study.hackyourfuture.net/#/javascript/conditional-statements). Another cool thing we can do in JavaScript is repeat actions, we can do that using a concept called loops, read more about that [here](https://study.hackyourfuture.net/#/javascript/loops). +Functions bring along with them a concept called the scope that you may have encountered a bit already but we want to explicitly explain now. Read about scope [here](https://study.hackyourfuture.net/#/javascript/scope). -There are a lot of things you can do with just these building blocks (next week you will get to know the last few to complete your arsenal). You will undoubtedly already have encountered the difficulty of reading code, and all the things we learned this week will make it even more difficult to follow. It is a good idea to revisit the debugger section with this new knowledge [here](https://study.hackyourfuture.net/#/tools/debuggers). Although it is called debugging, a lot of the process of finding 'bugs' in your code is trying to understand what is happening in the code. So keep using the debugger to understand pieces of code that you are not 100% comfortable with yet! +We have to confess we also kept something else from you until now, JavaScript has different versions. JavaScript has been evolving over its lifetime and certain syntax has been added. Have a look in your study book at the topic of what is called 'Modern JS' [here](https://study.hackyourfuture.net/#/javascript/modern-js). Throughout the curriculum we will be expecting you to use the modern syntax as that is most likely what you will be programming in. You can skip the sections that are about Promises and async/await for now, we will get there in the Using API's module. There is also a section on the history of JavaScript in there, you do not need to know this but we recommend it if you have some time to spare as it is very interesting. -This is also the week we are going to start learning about best practices surrounding programming. These are general rules programmers follow so that code remains readable for others. The first will be about naming conventions, read more about that [here](https://study.hackyourfuture.net/#/programming/naming-conventions). It will mention the term `functions`, which you haven't learned about yet, but keep that in mind for next week when you will be introduced to them! - -We also want to start working on your personal brand in the coming weeks as it takes time to get this correct. In a couple of months we also want to start practicing interviews with some of our partner companies using your brand! So in the upcoming weeks have a look through the [personal brand repo](https://github.com/HackYourFuture/yourpersonalbrand). It will also be a nice break for your mind to do something completely different than programming :). +Now that we are getting into more and more complex code it is also a good idea to learn a structured way to solve more complex problems. Have a look at the page on problem solving in your study book over [here](https://study.hackyourfuture.net/#/programming/problem-solving-process). ## Finished? -Are you finished with going through the materials? You're doing great! If you feel ready to get practical, click [here](./MAKEME.md). +Are you finished with going through the materials? Give yourself a pat on the back because you rock! It is time to combine everything you have learned and start practicing them vigorously. Have a look at the exercises [here](./MAKEME.md) and try to make as many of them as you can. This week there will be an assignment to do and hand in, so don't forget to do that! If you haven't set up the assignment repository yet, have a look at your class repo. diff --git a/Week2/prep-exercises/1-traffic-light/README.md b/Week2/prep-exercises/1-traffic-light/README.md index ce86d93..b3c3748 100644 --- a/Week2/prep-exercises/1-traffic-light/README.md +++ b/Week2/prep-exercises/1-traffic-light/README.md @@ -1,9 +1,9 @@ -# Prep exercise - traffic light +# Prep exercise - Traffic light -Let's have a deeper look at the working of traffic lights this week so that we can practice logic and loops. In the previous week we went into some different ways of representing a traffic light, now let's make the traffic light work. In `traffic-light-1.js` and `traffic-light-2.js` you will find the same requirements but with different ways of representing the traffic light. Have a look through the files and solve them. +In the previous week we started with our traffic light. Now that we also know what a function is we have one last look at the workings of a traffic light in a different way. Take a look at the `traffic-light.js` file and implement the same requirements as last week again, but then with another different way of organising. ## Things to think about -- Which way of representing the traffic light did you find better? Why? -- What happens if you change the loop to a `do-while` loop instead of a `while` loop? Why? -- We could have also used a `for` loop to make the traffic light do 2 full rotations. Do you think that would be better? Why or why not? +- This time the loop was changed to a for loop that will run the code 6 times. Why was that needed? +- Why was the trafficLight added to the `main` function and not left at the top of the file? +- What do you think is the advantage of having the `getCurrentTrafficLightState` and `getNextStateIndex` functions? diff --git a/Week3/prep-exercises/1-traffic-light/traffic-light.js b/Week2/prep-exercises/1-traffic-light/traffic-light.js similarity index 100% rename from Week3/prep-exercises/1-traffic-light/traffic-light.js rename to Week2/prep-exercises/1-traffic-light/traffic-light.js diff --git a/Week3/prep-exercises/2-experiments/README.md b/Week2/prep-exercises/2-experiments/README.md similarity index 100% rename from Week3/prep-exercises/2-experiments/README.md rename to Week2/prep-exercises/2-experiments/README.md diff --git a/Week3/prep-exercises/2-experiments/index.js b/Week2/prep-exercises/2-experiments/index.js similarity index 100% rename from Week3/prep-exercises/2-experiments/index.js rename to Week2/prep-exercises/2-experiments/index.js diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 931ccbc..0073857 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -1,36 +1,37 @@ -# Homework JavaScript Week 3 - -This will be the first week you are expected to hand in some homework when we combine all of the concepts you have been practicing the last 3 weeks. +# Assignment JavaScript Week 3 ## **Todo list** 1. Practice the concepts -2. Prep exercises -3. Homework exercises -4. Your personal brand +1. Prep exercises +1. Assignment +1. Extra: Challenges (Optional) ## **1. Practice the concepts** -In this section you will be doing interactive exercises that will allow you to practice with the concepts you've learned about this week. In the first course you'll learn about functions, the structure and how they're used. They are a fundamental part of understanding programming and you should become very familiar with them! Do as many of the things in the following list to feel comfortable with the concepts. +Before we head into the assignment, it might be nice to do some interactive exercises first! In the following resource you'll find some exercises that'll teach you all about higher order and array functions! -- [Codecademy: Functions ](https://www.codecademy.com/courses/introduction-to-javascript/lessons/functions) +- [Learn JavaScript: Higher Order Functions](https://www.codecademy.com/courses/introduction-to-javascript/lessons/higher-order-functions/exercises/introduction) +- [Learn JavaScript: Iterators](https://www.codecademy.com/courses/introduction-to-javascript/lessons/javascript-iterators/exercises/intro) ## **2. Prep exercises** -> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your class and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did. +> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your cohort and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did. Inside your `JavaScript` fork, go to the folder `Week3`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then. -## **3. Homework exercises** +## **3. Assignment** + +This week we expect you to do the exercises in the corresponding module/week folder (JavaScript / Week 3). Have a look at the [assignment guide](https://github.com/HackYourFuture/JavaScript/blob/main/hand-in-assignments-guide.md) to see how to hand in your assignment. -It is time to combine everything we have learned the past couple of weeks and get some feedback from experienced developers. This will be the first week you are working with the [homework repository](https://github.com/HackYourFuture/Homework/blob/main/README.md) so reserve some time to set it up. This week we expect you to do the exercises in the corresponding module/week folder (JavaScript / Week 3). Have a look at the [homework guide](https://github.com/HackYourFuture/JavaScript/blob/main/hand-in-homework-guide.md) to see how to hand in your homework. +_NOTE: do NOT forget to checkout the main branch before creating the branch for this week. Otherwise your previous assignment will be a part of the PR_ -_NOTE: Make sure to read and apply all of the README in the homework repository to set up the extensions in Visual Studio Code!_. +## **4. Extra: Challenges (Optional)** -## **4. Your personal brand** +Have a look at the challenges folder in this repository to try some harder problems. We expect these to be hard, so take your time to try and solve them yourself. If you really can't figure it out then have a look at the solutions, but it usually sticks better if you find the solution yourself. -Remember that next week you have to hand in your CV! If you haven’t started yet, this is the last reminder :) +Also keep going with all of the from beginner to advanced platforms mentioned last week! -## Done early? +## Finished? -Have a look at some of the week4 concepts already! +Try to do more exercises in the links above. The first weeks of the JavaScript modules are very important as understanding the basics will make the rest of the curriculum that much easier to follow. So keep reading and writing code! diff --git a/Week3/QA.md b/Week3/QA.md index 4235c91..5f52c87 100644 --- a/Week3/QA.md +++ b/Week3/QA.md @@ -1,11 +1,9 @@ -# Q & A Session +# Q & A session -The first 2 weeks of JavaScript we do not have homework and we encourage students to follow all the material at their own pace. So students can ask questions about any week. Expect questions about: +The third week is all about more complex JavaScript topics. By now the trainees should have the basics down, so expect some tougher questions. Expect questions about: -- Functions -- Scope +- Higher Order Functions +- _Closures_ - The Debugger (both browser/vscode) and how to debug functions -- DRY principle -- Naming conventions -In these first weeks we want to get the students to create the right mental model for JavaScript constructs, so try to go back to basics as much as possible. However easy it comes to the mentors, this is the first time students encounter all the syntax of a programming language. So try to go slowly and use the debugger / [JSTutor](http://pythontutor.com/javascript.html#mode=edit) as much as possible. +We have noticed that Closures are tough for the trainees, so try to spend any time you have spare on that topic. Also try to keep using the debugger to show what happens line by line! diff --git a/Week3/README.md b/Week3/README.md index fd64e09..0076edc 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -4,24 +4,24 @@ These are the topics for week 3: -1. [Functions](https://study.hackyourfuture.net/#/javascript/functions) -2. [Scope](https://study.hackyourfuture.net/#/javascript/scope) -3. [Modern JS](https://study.hackyourfuture.net/#/javascript/modern-js) -4. [Continue with Your personal brand](https://github.com/HackYourFuture/yourpersonalbrand) -5. [Testing code](https://www.ministryoftesting.com/dojo/series/the-testing-planet-2017/lessons/so-what-is-software-testing) - - [Assertion](https://study.hackyourfuture.net/#/testing/assertion) +1. [Higher Order Functions](https://study.hackyourfuture.net/#/javascript/higher-order-functions) + - Array methods +1. [Closures](https://study.hackyourfuture.net/#/javascript/closures) + - Execution context + - Why do we need closures? +1. [Unit testing](https://study.hackyourfuture.net/#/testing/unit-tests) + - [Testing framework (Jest)](https://study.hackyourfuture.net/#/tools/test-framework) ## Week goals -This week is the last week of explaining all the basic building blocks that JavaScript offers for you to work with. The last one is called functions, read all about them [here](https://study.hackyourfuture.net/#/javascript/functions). Functions bring along with them a concept called the scope that you may have encountered a bit last week but we want to explicitely explain now. Read about scope [here](https://study.hackyourfuture.net/#/javascript/scope). -These things will take the power of what you can do to another level, as it allows you to group a certain set of lines of code into a single 'action' to take. Making it reusable in other places as well helping you organise your code, which will help a lot when you start writing more and more code. +This week we are going to keep practicing coding and introducing a few more advanced topics that you will encounter. Firstly, higher order functions are a way functions are being used regularly in the real world, most notably in the methods `Array`'s provide us. Read all about it [here](https://study.hackyourfuture.net/#/javascript/higher-order-functions). Our graduates recommend to spend extra time learning the `Array` methods as they are a huge part of solving problems. -Now that you have learned all the basic blocks it is time to tell you about the different versions of JavaScript. JavaScript has been evolving over its lifetime and certain syntax has been added. Have a look in your study book at the topic of what is called 'Modern JS' [here](https://study.hackyourfuture.net/#/javascript/modern-js). Throughout the curriculum we will be expecting you to use the modern syntax as that is most likely what you will be programming in. You can skip the sections that are about Promises and async/await for now, we will get there in the Using API's module. There is also a section on the history of JavaScript in there, you do not need to know this but we recommend it if you have some time to spare as it is very interesting. +Secondly, JavaScript has a thing called closures which you should know about. You will most likely not encounter issues with them any time soon, but it is good to have in the back of your mind that this exists. So read all about them [here](https://study.hackyourfuture.net/#/javascript/closures). -Lastly we want to introduce the first steps to testing code. Let's first have a look at what software testing is and why we do it [here](https://www.ministryoftesting.com/dojo/series/the-testing-planet-2017/lessons/so-what-is-software-testing). The simplest form of testing is using assertions, have a look what that is [here](https://study.hackyourfuture.net/#/testing/assertion), we will introduce this more in your homework. +Previously, we learned about the `assert` function which allow us to make code checks, but that is only the start. For consistent testing we developers write something we call unit tests, have a look at what that means [here](https://study.hackyourfuture.net/#/testing/unit-tests). Then have a look at test frameworks and what they can do over [here](https://study.hackyourfuture.net/#/tools/test-framework). Note that in our curriculum we will always be using _Jest_ as it is very popular and works well with React which we will be studying later. Behind the scenes we have been testing your homework with Jest all this time and it is where the error messages when running your homework comes from! -Also, don't forget about the [personal brand repo](https://github.com/HackYourFuture/yourpersonalbrand) if you didn't manage to complete it last week. +After that it is time to start practicing again, make as many exercises as you can in the list [here](./MAKEME.md) and don't forget to hand in your assignment. There will also be a test coming up for this module. What and when will be announced in your class channel, so keep an eye on that as usual! The best way to prepare is to keep programming! ## Finished? -Are you finished with going through the materials? Give yourself a pat on the back because you rock! It is time to combine everything you have learned and start practicing them vigorously. Have a look at the exercises [here](./MAKEME.md) and try to make as many of them as you can. This week there will be homework to do and hand in, so don't forget to do that! If you haven't set up the homework repository yet, have a look at your class repo. +Are you finished with going through the materials? Give yourself a pat on the back because you rock! When you feel ready to get practical, click [here](./MAKEME.md). diff --git a/Week4/challenges/1-sum-entries.js b/Week3/challenges/1-sum-entries.js similarity index 100% rename from Week4/challenges/1-sum-entries.js rename to Week3/challenges/1-sum-entries.js diff --git a/Week4/challenges/2-sum-three-entries.js b/Week3/challenges/2-sum-three-entries.js similarity index 100% rename from Week4/challenges/2-sum-three-entries.js rename to Week3/challenges/2-sum-three-entries.js diff --git a/Week4/challenges/3-password-validation.js b/Week3/challenges/3-password-validation.js similarity index 100% rename from Week4/challenges/3-password-validation.js rename to Week3/challenges/3-password-validation.js diff --git a/Week4/challenges/4-bank-account.js b/Week3/challenges/4-bank-account.js similarity index 100% rename from Week4/challenges/4-bank-account.js rename to Week3/challenges/4-bank-account.js diff --git a/Week4/challenges/solutions/1-sum-entries.js b/Week3/challenges/solutions/1-sum-entries.js similarity index 100% rename from Week4/challenges/solutions/1-sum-entries.js rename to Week3/challenges/solutions/1-sum-entries.js diff --git a/Week4/challenges/solutions/2-sum-three-entries.js b/Week3/challenges/solutions/2-sum-three-entries.js similarity index 100% rename from Week4/challenges/solutions/2-sum-three-entries.js rename to Week3/challenges/solutions/2-sum-three-entries.js diff --git a/Week4/challenges/solutions/3-password-validation.js b/Week3/challenges/solutions/3-password-validation.js similarity index 100% rename from Week4/challenges/solutions/3-password-validation.js rename to Week3/challenges/solutions/3-password-validation.js diff --git a/Week4/challenges/solutions/4-bank-account.js b/Week3/challenges/solutions/4-bank-account.js similarity index 100% rename from Week4/challenges/solutions/4-bank-account.js rename to Week3/challenges/solutions/4-bank-account.js diff --git a/Week4/prep-exercises/1-hyf-program/1-find-mentors.js b/Week3/prep-exercises/1-hyf-program/1-find-mentors.js similarity index 92% rename from Week4/prep-exercises/1-hyf-program/1-find-mentors.js rename to Week3/prep-exercises/1-hyf-program/1-find-mentors.js index a096de0..72baa61 100644 --- a/Week4/prep-exercises/1-hyf-program/1-find-mentors.js +++ b/Week3/prep-exercises/1-hyf-program/1-find-mentors.js @@ -1,4 +1,4 @@ -import { modules, students, mentors, classes } from "./hyf"; +import { modules, students, mentors, classes } from "./hyf.js"; /** * Tjebbe would like help to get a list of possible mentors for a module. diff --git a/Week4/prep-exercises/1-hyf-program/2-class-list.js b/Week3/prep-exercises/1-hyf-program/2-class-list.js similarity index 95% rename from Week4/prep-exercises/1-hyf-program/2-class-list.js rename to Week3/prep-exercises/1-hyf-program/2-class-list.js index 995f9f1..44d2798 100644 --- a/Week4/prep-exercises/1-hyf-program/2-class-list.js +++ b/Week3/prep-exercises/1-hyf-program/2-class-list.js @@ -1,4 +1,4 @@ -import { modules, students, mentors, classes } from "./hyf"; +import { modules, students, mentors, classes } from "./hyf.js"; /** * We would like to have a list of everyone that is currently participating in a class. diff --git a/Week4/prep-exercises/1-hyf-program/README.md b/Week3/prep-exercises/1-hyf-program/README.md similarity index 100% rename from Week4/prep-exercises/1-hyf-program/README.md rename to Week3/prep-exercises/1-hyf-program/README.md diff --git a/Week1/prep-exercises/1-objects-and-arrays/hyf.js b/Week3/prep-exercises/1-hyf-program/hyf.js similarity index 100% rename from Week1/prep-exercises/1-objects-and-arrays/hyf.js rename to Week3/prep-exercises/1-hyf-program/hyf.js diff --git a/Week4/prep-exercises/1-hyf-program/package.json b/Week3/prep-exercises/1-hyf-program/package.json similarity index 100% rename from Week4/prep-exercises/1-hyf-program/package.json rename to Week3/prep-exercises/1-hyf-program/package.json diff --git a/Week3/prep-exercises/1-traffic-light/README.md b/Week3/prep-exercises/1-traffic-light/README.md deleted file mode 100644 index cabe682..0000000 --- a/Week3/prep-exercises/1-traffic-light/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# Prep exercise - Traffic light - -In the previous week we continued with our traffic light. Now that we also know what a function is we have one last look at the workings of a traffic light in a different way. Take a look at the `traffic-light.js` file and implement the same requirements as last week again, but then with another different way of organising. - -## Things to think about - -- This time the loop was changed to a for loop that will run the code 6 times. Why was that needed? -- Why was the trafficLight added to the `main` function and not left at the top of the file? -- What do you think is the advantage of having the `getCurrentTrafficLightState` and `getNextStateIndex` functions? diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 22c761c..e0833c0 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -1,44 +1,31 @@ -# Homework JavaScript Week 4 +# Assignment JavaScript Week 4 ## **Todo list** 1. Practice the concepts -2. Prep exercises -3. Homework exercises -4. Your personal brand -5. Extra: Challenges (Optional) +1. Prep exercises +1. Practice practice practice (for the assessment) -## **1. Practice the concepts** +## **1. Reinforce the concepts** -Before we head into the homework exercises, it might be nice to do some interactive exercises first! In the following resource you'll find some exercises that'll teach you all about higher order and array functions! +Go through the following article that has examples for all of the things you learned about this week combined (and a couple of extras): -- [Learn JavaScript: Iterators](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-iterators) +- [Overview with examples](./overview.ipynb) ## **2. Prep exercises** -> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your class and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did. +> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your cohort and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did. Inside your `JavaScript` fork, go to the folder `Week4`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then. -## **3. Homework exercises** +## **3. Practice practice practice (for the assessment)** -This week we expect you to do the exercises in the corresponding module/week folder (JavaScript / Week 4). Have a look at the [homework guide](https://github.com/HackYourFuture/JavaScript/blob/main/hand-in-homework-guide.md) to see how to hand in your homework. +At the end of this week (Tuesday most likely, but keep an eye on your cohort channel for the exact date) there will be a assessment. You will have received a practice assessment already and should have seen that what is most important is being able to translate a description of a problem to a solution in JavaScript. This is what a lot of the job is and is also becoming a bigger factor in applying to companies where these kind of exercises are part of the admission process. -_NOTE: do NOT forget to checkout the main branch before creating the branch for this week. Otherwise your previous homework will be a part of the PR_ +So take the rest of the week to keep working on those beginner to advanced websites and practice these skills! -## **4. Your personal brand** +Good luck on the assessment! -This week is the deadline to submit your CV with links to your updated GitHub and LinkedIn profiles. To submit your CV, be sure to follow the guidelines given [here](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team). We strongly suggest you make use of the provided templates! They have all the important sections and together with the info in the repo, they will help you end up with a great personal brand, crucial to find an internship or job as a developer. +## No assignment to hand in this week -## **5. Extra: Challenges (Optional)** - -Have a look at the challenges folder in this repository to try some harder problems. We expect these to be hard, so take your time to try and solve them yourself. If you really can't figure it out then have a look at the solutions, but it usually sticks better if you find the solution yourself. - -## Finished? - -So you think you are a JavaScript superstar now huh? :wink: - -Once you have finished the homework there are a couple of things you can keep doing to improve your JavaScript and problem solving skills. Have a look at the following and come back to them later in the curriculum, it is never bad to do these exercises! - -- [Project Euler](https://projecteuler.net/) - Project Euler defines problems that you can use your new JavaScript knowledge to find solutions for. These start off doable with the knowledge you have now and will get more and more difficult. You can come back to it later if you get stuck, or ask your classmates! Whenever you have some time or want to practice problem solving this is a good place to go. +For the last week of JavaScript there is no assignment to hand in as we want you to focus on practicing for the assessment. diff --git a/Week4/QA.md b/Week4/QA.md deleted file mode 100644 index 2937422..0000000 --- a/Week4/QA.md +++ /dev/null @@ -1,9 +0,0 @@ -# Q & A Session - -The fourth week is all about more complex JavaScript topics. By now the students should have the basics down, so expect some tougher questions. Expect questions about: - -- Higher Order Functions -- *Closures* -- The Debugger (both browser/vscode) and how to debug functions - -We have noticed that Closures are tough for the students, so try to spend any time you have spare on that topic. Also try to keep using the debugger to show what happens line by line! diff --git a/Week4/README.md b/Week4/README.md index 6fa49f3..bf1441c 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -4,27 +4,22 @@ These are the topics for week 4: -1. [Higher Order Functions](https://study.hackyourfuture.net/#/javascript/higher-order-functions) - - Array methods -2. [Closures](https://study.hackyourfuture.net/#/javascript/closures) - - Execution context - - Why do we need closures? -3. [Problem solving](https://study.hackyourfuture.net/#/programming/problem-solving-process) -4. [Unit testing](https://study.hackyourfuture.net/#/testing/unit-tests) - - [Testing framework (Jest)](https://study.hackyourfuture.net/#/tools/test-framework) -5. [Finalise Your personal brand](https://github.com/HackYourFuture/yourpersonalbrand) +1. [The `this` keyword](https://study.hackyourfuture.net/#/javascript/this) +1. [Constructor functions](https://study.hackyourfuture.net/#/javascript/constructor-functions) + - The `new` keyword +1. [Classes](https://study.hackyourfuture.net/#/javascript/classes) ## Week goals -This week we are going to keep practicing coding and introducing a few more advanced topics that you will encounter. So a little less reading, more practicing! Firstly, higher order functions are a way functions are being used regularly in the real world, most notably in the methods `Array`'s provide us. Read all about it [here](https://study.hackyourfuture.net/#/javascript/higher-order-functions). Secondly, JavaScript has a thing called closures which you should know about. You will not encounter issues with them any time soon, but it is good to have in the back of your mind that this exists. So read all about them [here](https://study.hackyourfuture.net/#/javascript/closures). +This week we are going to keep practicing coding and introducing the last few intricacies of JavaScript that you will encounter a couple of times later on in the curriculum. These are good to know about but you will not be working with these a lot so don't worry too much about fully understanding every detail. You can come back to this at the point you will need them. -Now that we are getting into more and more complex code it is also a good idea to learn a structured way to solve more complex problems. Have a look at the page on problem solving in your study book over [here](https://study.hackyourfuture.net/#/programming/problem-solving-process). +Let's start with the `this` keyword, it is a little tricky and sporadically you will want to use the context it provides. Have a look at what it means over [here](https://study.hackyourfuture.net/#/javascript/this). -Last week we learned about the `assert` function which allow us to make code checks, but that is only the start. For real testing we developers write something we call unit tests, have a look at what that means [here](https://study.hackyourfuture.net/#/testing/unit-tests). Then have a look at test frameworks and what they can do over [here](https://study.hackyourfuture.net/#/tools/test-framework). Note that in our curriculum we will always be using *Jest* as it is very popular and works well with React which we will be studying later. Behind the scenes we have been testing your homework with Jest all this time and it is where the error messages when running your homework comes from! +Next let's learn about constructor functions which is why we have the `new` keyword. You have probably used it already but it is good to know what it does behind the scenes. Go through [this article](https://study.hackyourfuture.net/#/javascript/constructor-functions). -After that it is time to start practicing again, make as many exercises as you can in the list [here](./MAKEME.md) and don't forget to hand in your homework. There will also be a test coming up for this module. What and when will be announced in your class channel, so keep an eye on that as usual! The best way to prepare is to keep programming! +Lastly let's learn about classes which is another modern JavaScript addition to the language. Have a look [here](https://study.hackyourfuture.net/#/javascript/classes). -Also, don't forget about the [personal brand repo](https://github.com/HackYourFuture/yourpersonalbrand) if you didn't manage to complete it last week. +After that it is all about practicing for the assessment :scream: at the end of this week. You will have received a practice assessment in your cohort channel that will show you what it is about. ## Finished? diff --git a/Week4/overview.ipynb b/Week4/overview.ipynb new file mode 100644 index 0000000..d670268 --- /dev/null +++ b/Week4/overview.ipynb @@ -0,0 +1,463 @@ +{ + "cells": [ + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## Objects, Classes, new, this and prototypes\n", + "\n", + "> Created by the one and only Jim, you can find him on our [Slack](https://hackyourfuture.slack.com/team/U383PTTK9) and on [GitHub](https://github.com/remarcmij)!\n", + "\n", + "> This is a Jupyter notebook, with the right setup you can run the code but we suggest not trying to set that up. Setting up takes time and we don't use these notebooks often so it is not worth it\n", + "\n", + "Calling a function that doesn't `return` anything simply returns `undefined`. " + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "1 undefined\n" + ] + } + ], + "source": [ + "// Example 1\n", + "{\n", + " function foo() {\n", + " // Just an empty function\n", + " }\n", + "\n", + " const result = foo();\n", + " console.log(1, typeof result);\n", + "}\n" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "Calling the same function, but now using the `new` keyword returns an object." + ] + }, + { + "cell_type": "code", + "execution_count": 13, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "2 object\n" + ] + } + ], + "source": [ + "// Example 2\n", + "{\n", + " function foo() {\n", + " // Just an empty function\n", + " }\n", + "\n", + " const result = new foo();\n", + " //_____________^^^\n", + " console.log(2, typeof result);\n", + "}\n", + "\n" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "Every function has an associated `this` variable bound to its scope. The value of `this` depends on how the function is called. If it is called directly as in example 3 below its value is `undefined`. (If the function has no use for `this` it might as well be `undefined`.)" + ] + }, + { + "cell_type": "code", + "execution_count": 14, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "3 undefined\n" + ] + } + ], + "source": [ + "// Example 3\n", + "'use strict';\n", + "{\n", + " function foo() {\n", + " console.log(3, typeof this);\n", + " }\n", + "\n", + " const result = foo();\n", + "}\n" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "Note that the `this` value may reference the \"global\" object (`window` in the browser, `global` in Node) if we leave out `'use strict'`. This is almost always something that we don't want, therefore in ES5 the `'use strict'` directive was added to the language. (We want to protect ourselves against messing around accidentally with the global object.)\n", + "\n", + "In example 4 below the `this` variable is a reference to the `global` of Node (a _huge_ object).\n", + "\n", + "Note that adding `'use strict'` is not required when you use ES6 modules. It is implied in that case." + ] + }, + { + "cell_type": "code", + "execution_count": 15, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "4 object\n" + ] + } + ], + "source": [ + "// Example 4\n", + "// Note: no 'use strict' used.\n", + "{\n", + " function foo() {\n", + " console.log(4, typeof this);\n", + " }\n", + "\n", + " const result = foo();\n", + "}\n" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "When called with `new`, the `this` variable holds a reference to a new, empty object." + ] + }, + { + "cell_type": "code", + "execution_count": 16, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "5 object\n" + ] + } + ], + "source": [ + "// Example 5\n", + "{\n", + " function foo() {\n", + " console.log(5, typeof this);\n", + " }\n", + "\n", + " const result = new foo();\n", + " //_____________^^^\n", + "}\n" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "The purpose of calling a function with the `new` keyword is to construct a new object and to initialize its properties (values and functions). A function that is intended to be called with `new` is called a _constructor function_ and, by convention its name should start with an uppercase letter." + ] + }, + { + "cell_type": "code", + "execution_count": 17, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "6 Person { firstName: 'John', lastName: 'Doe' }\n" + ] + } + ], + "source": [ + "// Example 6\n", + "{\n", + " function Person(firstName, lastName) {\n", + " this.firstName = firstName;\n", + " this.lastName = lastName;\n", + " }\n", + "\n", + " const result = new Person('John', 'Doe');\n", + " console.log(6, result)\n", + "}" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "We could add further properties and functions (now called _methods_) to enhance the functionality of the object." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "7 John Doe\n" + ] + } + ], + "source": [ + "// Example 7\n", + "{\n", + " function Person(firstName, lastName) {\n", + " this.firstName = firstName;\n", + " this.lastName = lastName;\n", + " this.fullName = function() {\n", + " return this.firstName + ' ' + this.lastName;\n", + " }\n", + " }\n", + "\n", + " const john = new Person('John', 'Doe');\n", + " console.log(7, john.fullName())\n", + "}" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "This method of constructing object can become wasteful if we want to create multiple objects through the constructor function. This is because each object gets its own copy of the methods.\n", + "\n", + "Note that when you call a function using dot notation on an object, the `this` variable hold a reference to that object. A function called in this way is called a _method_. Through `this` it has access to other properties and methods of the object." + ] + }, + { + "cell_type": "code", + "execution_count": 19, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "8.1 John Doe\n", + "8.2 Jane Seymour\n", + "8.3 false\n" + ] + } + ], + "source": [ + "// Example 8\n", + "{\n", + " function Person(firstName, lastName) {\n", + " this.firstName = firstName;\n", + " this.lastName = lastName;\n", + " this.fullName = function() {\n", + " return this.firstName + ' ' + this.lastName;\n", + " }\n", + " }\n", + "\n", + " const john = new Person('John', 'Doe');\n", + " const jane = new Person('Jane', 'Seymour');\n", + "\n", + " console.log(8.1, john.fullName());\n", + " console.log(8.2, jane.fullName());\n", + "\n", + " // The fullName() methods are identical but separate copies\n", + " console.log(8.3, john.fullName === jane.fullName);\n", + "}" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "To make it possible for objects constructed from the same constructor function to share methods the JavaScript designer added a `prototype` object to functions which could be used as follows.\n", + "\n", + "(Note the `prototype` feature also makes it possible to use _inheritance_, a subject that is out of scope here and you will not need it in the HYF curriculum)." + ] + }, + { + "cell_type": "code", + "execution_count": 20, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "9.1 John Doe\n", + "9.2 Jane Seymour\n", + "9.3 true\n" + ] + } + ], + "source": [ + "// Example 9\n", + "{\n", + " function Person(firstName, lastName) {\n", + " this.firstName = firstName;\n", + " this.lastName = lastName;\n", + " }\n", + "\n", + " Person.prototype.fullName = function() {\n", + " return this.firstName + ' ' + this.lastName;\n", + " }\n", + "\n", + " const john = new Person('John', 'Doe');\n", + " const jane = new Person('Jane', 'Seymour');\n", + " \n", + " console.log(9.1, john.fullName());\n", + " console.log(9.2, jane.fullName());\n", + "\n", + " // The fullName() methods are one and the same, i.e. shared\n", + " console.log(9.3, john.fullName === jane.fullName);\n", + "}" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "Prior to ES5, object creation through constructor function and its associated `prototype` object was the only way to construct objects with shared method.\n", + "\n", + "In ES5 a more modern way of creating such objects was introduced, using _Classes_. This was modelled after the way it is done on other languages, such as Java and C++.\n", + "\n", + "The `constructor` method now takes the role of the constructor function." + ] + }, + { + "cell_type": "code", + "execution_count": 21, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "10.1 John Doe\n", + "10.2 Jane Seymour\n", + "10.3 true\n" + ] + } + ], + "source": [ + "// Example 10\n", + "{\n", + " class Person {\n", + " constructor(firstName, lastName) {\n", + " this.firstName = firstName;\n", + " this.lastName = lastName;\n", + " }\n", + "\n", + " fullName() {\n", + " return this.firstName + ' ' + this.lastName;\n", + " }\n", + " }\n", + "\n", + " const john = new Person('John', 'Doe');\n", + " const jane = new Person('Jane', 'Seymour');\n", + "\n", + " console.log(10.1, john.fullName());\n", + " console.log(10.2, jane.fullName());\n", + "\n", + " // The fullName() methods are one and the same, i.e. shared\n", + " console.log(10.3, john.fullName === jane.fullName);\n", + "}" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "The `class` syntax is sometimes called _syntactical sugar_ because it still uses the `prototype` object under the hood. Luckily, in our daily programming we just use classes without worrying about and how this all works at the detail level." + ] + }, + { + "cell_type": "code", + "execution_count": 22, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "11.1 function\n", + "11.2 object\n", + "11.3 function\n" + ] + } + ], + "source": [ + "// Example 11\n", + "{\n", + " class Person {\n", + " constructor(firstName, lastName) {\n", + " this.firstName = firstName;\n", + " this.lastName = lastName;\n", + " }\n", + "\n", + " fullName() {\n", + " return this.firstName + ' ' + this.lastName;\n", + " }\n", + " }\n", + "\n", + " // Under the hood, the class name is still seen as a constructor function by JavaScript.\n", + " // Nice to know, but not relevant for our daily programming job.\n", + " console.log(11.1, typeof Person);\n", + "\n", + " // There is still a prototype object under hood. Again, nice to know, but not\n", + " // relevant for our daily programming job.\n", + " console.log(11.2, typeof Person.prototype);\n", + " console.log(11.3, typeof Person.prototype.fullName);\n", + "}" + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": "JavaScript", + "language": "javascript", + "name": "jslab" + }, + "language_info": { + "file_extension": ".js", + "mimetype": "text/javascript", + "name": "javascript", + "version": "" + }, + "orig_nbformat": 4 + }, + "nbformat": 4, + "nbformat_minor": 2 +} diff --git a/Week4/prep-exercises/1-hyf-program/hyf.js b/Week4/prep-exercises/1-hyf-program/hyf.js deleted file mode 100644 index c06c02c..0000000 --- a/Week4/prep-exercises/1-hyf-program/hyf.js +++ /dev/null @@ -1,84 +0,0 @@ -export const modules = [ - { name: "html-css", displayName: "HTML/CSS" }, - { name: "javascript", displayName: "JavaScript" }, - { name: "browsers", displayName: "Browsers" }, - { name: "using-apis", displayName: "Using APIs" }, - { name: "node", displayName: "Node.js" }, - { name: "databases", displayName: "Databases" }, - { name: "react", displayName: "React" }, - { name: "project", displayName: "Project" }, -]; - -export const classes = [ - { - name: "class32", - startDate: "23-3-2021", - active: false, - graduationDate: "7-11-2021", - }, - { - name: "class33", - startDate: "28-5-2021", - active: false, - graduationDate: "7-11-2021", - }, - { - name: "class34", - startDate: "2-9-2021", - active: true, - currentModule: "react", - }, - { - name: "class35", - startDate: "14-11-2021", - active: true, - currentModule: "using-apis", - }, - { - name: "class36", - startDate: "5-1-2022", - active: true, - currentModule: "javascript", - }, -]; - -export const students = [ - { name: "Fede", class: "class33", gitHubName: "fedefu", graduated: false }, - { name: "Tjebbe", class: "class32", gitHubName: "Tjebbee", graduated: true }, - { name: "Rob", class: "class34", gitHubName: "robvk", graduated: false }, - { - name: "Wouter", - class: "class35", - gitHubName: "wouterkleijn", - graduated: false, - }, -]; - -export const mentors = [ - { - name: "Stas", - canTeach: ["javascript", "browsers", "using-apis"], - nowTeaching: "javascript", - }, - { - name: "Andrej", - canTeach: ["using-apis", "node"], - }, - { - name: "Shriyans", - canTeach: ["react"], - nowTeaching: "react", - }, - { - name: "Yash", - canTeach: ["javascript", "using-apis"], - }, - { - name: "Rohan", - canTeach: ["html/css/git", "javascript", "node"], - }, - { - name: "Collin", - canTeach: ["browsers", "using-apis", "node"], - }, -]; diff --git a/Week4/prep-exercises/1-wallet/README.md b/Week4/prep-exercises/1-wallet/README.md new file mode 100644 index 0000000..7f795cc --- /dev/null +++ b/Week4/prep-exercises/1-wallet/README.md @@ -0,0 +1,108 @@ +# Wallet Exercise + +> Created by the one and only Jim, you can find him on our [Slack](https://hackyourfuture.slack.com/team/U383PTTK9) and on [GitHub](https://github.com/remarcmij)! + +This week's prep exercise is going to be all about how to solve the same thing in many different ways using all of the tools we have learned so far. In this folder you will find five different exercise files that all use a different technique: + +1. Closures +2. Classes +3. Objects (factory functions) +4. Objects where the methods are shared +5. Prototypes + +## Assignment + +Add a _maximum daily withdrawal_ feature to _each_ of the different wallet implementations. As an example, in `ex1-closure.js` the new functionality has already been implemented. + +1. Add two data values to the wallet: + + - A variable/property `dailyAllowance` indicating the maximum amount that can be withdrawn per day. Set the default value to 40. + - A variable/property `dayTotalWithdrawals` that holds the total amount withdrawn during the day, initially zero. + +2. Add a method `resetDailyAllowance()`. It should reset `dayTotalWithdrawals` to zero. Assume that the issuer of the wallet (e.g. a bank) will call this function at the start of a new day. + +3. Add a method `setDailyAllowance(newAllowance)` to set/update the maximum daily allowance (`dailyAllowance`). Assume that the issuer of the wallet (e.g., a bank) will call this function after approving a request from the wallet owner to update the daily allowance. + +4. Update the other methods as required to support the new functionality. + +## Some help + +As this will not be easy, let's go through a few of the concepts again but then specifically to this exercise: + +### Public Interface vs Private Implementation + +Imagine that our various wallet implementations (however simplistic they may be) will be used as libraries by third party developers, perhaps as part of a banking application. We would expect those developers to access the functionality of our wallet through the methods that we specifically provide for that purpose. We consider that to be the _public interface_ of our wallet, i.e. a contract between ourselves as library owner and the users of the library. If third party developers would be allowed to manipulate the internals of the wallet (e.g. `cash`, `dailyAllowance`, etc.) we can no longer guarantee its correct functioning. We consider those internals to be _private implementation details_, and we would want the reserve the right to make implementation changes/improvements. So long as such changes have no impact on what can be observed through the _public interface_ (i.e. we honour the "contract") there should not be a problem. + +In the _closure_ version of our wallet the internal values (`cash`, `dailyAllowance`, etc.) are well protected against unwanted modification. Those values are simply not accessible outside of the `createWallet()` function. + +In the other (object-based) versions the private properties are accessible and prone to unwanted modification unless we take measures to either indicate that those properties are to be considered private or actually make those properties inaccessible from the outside. + +When working with regular JavaScript objects there is no easy way to hide "private" properties. As a remedy, developers have adopted a naming convention over the years for such properties in plain old JavaScript objects: they begin the property names with an underscore character, e.g.: + +```js +_cash, _name; +``` + +While this does not protect properties against undesired access we can least indicate to other developers that such properties are to be considered _private_, i.e. not to be accessed or manipulated directly. + +> For more information, see this StackOverflow question: [Is the underscore prefix for property and method names merely a convention?](https://stackoverflow.com/questions/4484424/is-the-underscore-prefix-for-property-and-method-names-merely-a-convention) + +Until fairly recently we had no alternative to do the same when using ES6 `class` syntax. However, in ES2022, now well supported in modern, evergreen browsers we have the ability to make class fields truly private, by using a `#` prefix: + +```js +#hash, #name; +``` + +> More information on MDN: [Private class features](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields) + +### Getters and Setters + +Sometimes we _do_ want to provide access to internal object/class fields, but in a controlled way through the _public interface_. In this case we can use _getters_ and _setters_. For instance, if we want to give readonly access to a private field we can provide a _getter_ method (but no _setter_) that just returns the value of the private field. For instance: + +```js +getCash() { + return this._cash; +} + +getName() { + return this._name; +} +``` + +In a _setter_ method we could add validations to ensure that only valid values are accepted before updating the private field, e.g.: + +```js +setEmail(email) { + // See: https://www.regular-expressions.info/index.html + if (/^\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b.test(email)) { + this._email = email + } else { + console.error('Invalid email address!'); + } +} +``` + +In ES6 classes you can use special _getters_ and _setters_. You will find an example of an ES6 _getter_ in the `ex2-classes.js`. + +```js +get name() { + return this.#name; +} +``` + +You can now access `name` with property syntax (i.e., without parentheses): + +```js +console.log(myWallet.name); +``` + +> More information on ES6 getters and setters on MDN: +> +> - [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) +> - [setter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) + +## Things to think about + +- The 5 different ways all have their advantages and disadvantages. Which way did you prefer? Why? +- Which did you find easiest to understand? +- How much did you change in the `main` function of each of them? Why is that important? diff --git a/Week4/prep-exercises/1-wallet/euroFormatter.js b/Week4/prep-exercises/1-wallet/euroFormatter.js new file mode 100644 index 0000000..e341e4e --- /dev/null +++ b/Week4/prep-exercises/1-wallet/euroFormatter.js @@ -0,0 +1,6 @@ +const eurosFormatter = new Intl.NumberFormat('nl-NL', { + style: 'currency', + currency: 'EUR', +}); + +export default eurosFormatter; diff --git a/Week4/prep-exercises/1-wallet/ex1-closure-example.js b/Week4/prep-exercises/1-wallet/ex1-closure-example.js new file mode 100644 index 0000000..e98b056 --- /dev/null +++ b/Week4/prep-exercises/1-wallet/ex1-closure-example.js @@ -0,0 +1,89 @@ +import eurosFormatter from "./euroFormatter.js"; + +/** + * This is the closure way of doing things and we have already completed it for you so you don't need to do anything. + * We leave it here as an example of how your other implementations should work! + */ + +function createWallet(name, cash = 0) { + let dailyAllowance = 40; + let dayTotalWithdrawals = 0; + + function deposit(amount) { + cash += amount; + } + + function withdraw(amount) { + if (cash - amount < 0) { + console.log(`Insufficient funds!`); + return 0; + } + + if (dayTotalWithdrawals + amount > dailyAllowance) { + console.log(`Insufficient remaining daily allowance!`); + return 0; + } + + cash -= amount; + dayTotalWithdrawals += amount; + return amount; + } + + function transferInto(wallet, amount) { + console.log( + `Transferring ${eurosFormatter.format( + amount + )} from ${name} to ${wallet.getName()}` + ); + const withdrawnAmount = withdraw(amount); + wallet.deposit(withdrawnAmount); + } + + function setDailyAllowance(newAllowance) { + dailyAllowance = newAllowance; + console.log( + `Daily allowance set to: ${eurosFormatter.format(newAllowance)}` + ); + } + + function resetDailyAllowance() { + dayTotalWithdrawals = 0; + } + + function reportBalance() { + console.log(`Name: ${name}, balance: ${eurosFormatter.format(cash)}`); + } + + const getName = () => name; + + return { + deposit, + withdraw, + transferInto, + setDailyAllowance, + resetDailyAllowance, + reportBalance, + getName, + }; +} + +function main() { + const walletJack = createWallet("Jack", 100); + const walletJoe = createWallet("Joe", 10); + const walletJane = createWallet("Jane", 20); + + walletJack.transferInto(walletJoe, 50); + walletJack.setDailyAllowance(80); + walletJack.transferInto(walletJoe, 50); + + walletJane.transferInto(walletJoe, 25); + + walletJane.deposit(20); + walletJane.transferInto(walletJoe, 25); + + walletJack.reportBalance(); + walletJoe.reportBalance(); + walletJane.reportBalance(); +} + +main(); diff --git a/Week4/prep-exercises/1-wallet/ex2-classes.js b/Week4/prep-exercises/1-wallet/ex2-classes.js new file mode 100644 index 0000000..f016137 --- /dev/null +++ b/Week4/prep-exercises/1-wallet/ex2-classes.js @@ -0,0 +1,63 @@ +import eurosFormatter from './euroFormatter.js'; + +class Wallet { + #name; + #cash; + + constructor(name, cash) { + this.#name = name; + this.#cash = cash; + } + + get name() { + return this.#name; + } + + deposit(amount) { + this.#cash += amount; + } + + withdraw(amount) { + if (this.#cash - amount < 0) { + console.log(`Insufficient funds!`); + return 0; + } + + this.#cash -= amount; + return amount; + } + + transferInto(wallet, amount) { + console.log( + `Transferring ${eurosFormatter.format(amount)} from ${this.name} to ${ + wallet.name + }` + ); + const withdrawnAmount = this.withdraw(amount); + wallet.deposit(withdrawnAmount); + } + + reportBalance() { + console.log( + `Name: ${this.name}, balance: ${eurosFormatter.format(this.#cash)}` + ); + } +} + +function main() { + const walletJack = new Wallet('Jack', 100); + const walletJoe = new Wallet('Joe', 10); + const walletJane = new Wallet('Jane', 20); + + walletJack.transferInto(walletJoe, 50); + walletJane.transferInto(walletJoe, 25); + + walletJane.deposit(20); + walletJane.transferInto(walletJoe, 25); + + walletJack.reportBalance(); + walletJoe.reportBalance(); + walletJane.reportBalance(); +} + +main(); diff --git a/Week4/prep-exercises/1-wallet/ex3-object.js b/Week4/prep-exercises/1-wallet/ex3-object.js new file mode 100644 index 0000000..e94faac --- /dev/null +++ b/Week4/prep-exercises/1-wallet/ex3-object.js @@ -0,0 +1,60 @@ +import eurosFormatter from './euroFormatter.js'; + +function createWallet(name, cash = 0) { + return { + _name: name, + _cash: cash, + + deposit: function (amount) { + this._cash += amount; + }, + + withdraw: function (amount) { + if (this._cash - amount < 0) { + console.log(`Insufficient funds!`); + return 0; + } + + this._cash -= amount; + return amount; + }, + + transferInto: function (wallet, amount) { + console.log( + `Transferring ${eurosFormatter.format(amount)} from ${ + this._name + } to ${wallet.getName()}` + ); + const withdrawnAmount = this.withdraw(amount); + wallet.deposit(withdrawnAmount); + }, + + reportBalance: function () { + console.log( + `Name: ${this._name}, balance: ${eurosFormatter.format(this._cash)}` + ); + }, + + getName: function () { + return this._name; + }, + }; +} + +function main() { + const walletJack = createWallet('Jack', 100); + const walletJoe = createWallet('Joe', 10); + const walletJane = createWallet('Jane', 20); + + walletJack.transferInto(walletJoe, 50); + walletJane.transferInto(walletJoe, 25); + + walletJane.deposit(20); + walletJane.transferInto(walletJoe, 25); + + walletJack.reportBalance(); + walletJoe.reportBalance(); + walletJane.reportBalance(); +} + +main(); diff --git a/Week4/prep-exercises/1-wallet/ex4-object-shared-methods.js b/Week4/prep-exercises/1-wallet/ex4-object-shared-methods.js new file mode 100644 index 0000000..bd4fd20 --- /dev/null +++ b/Week4/prep-exercises/1-wallet/ex4-object-shared-methods.js @@ -0,0 +1,65 @@ +import eurosFormatter from './euroFormatter.js'; + +function deposit(amount) { + this._cash += amount; +} + +function withdraw(amount) { + if (this._cash - amount < 0) { + console.log(`Insufficient funds!`); + return 0; + } + + this._cash -= amount; + return amount; +} + +function transferInto(wallet, amount) { + console.log( + `Transferring ${eurosFormatter.format(amount)} from ${ + this._name + } to ${wallet.getName()}` + ); + const withdrawnAmount = this.withdraw(amount); + wallet.deposit(withdrawnAmount); +} + +function reportBalance() { + console.log( + `Name: ${this._name}, balance: ${eurosFormatter.format(this._cash)}` + ); +} + +function getName() { + return this._name; +} + +function createWallet(name, cash = 0) { + return { + _name: name, + _cash: cash, + deposit, + withdraw, + transferInto, + reportBalance, + getName, + }; +} + +function main() { + const walletJack = createWallet('Jack', 100); + const walletJoe = createWallet('Joe', 10); + const walletJane = createWallet('Jane', 20); + + walletJack.transferInto(walletJoe, 50); + walletJane.transferInto(walletJoe, 25); + + walletJane.deposit(20); + walletJane.transferInto(walletJoe, 25); + + walletJack.reportBalance(); + walletJoe.reportBalance(); + walletJane.reportBalance(); +} + +main(); diff --git a/Week4/prep-exercises/1-wallet/ex5-prototype.js b/Week4/prep-exercises/1-wallet/ex5-prototype.js new file mode 100644 index 0000000..7cba410 --- /dev/null +++ b/Week4/prep-exercises/1-wallet/ex5-prototype.js @@ -0,0 +1,58 @@ +import eurosFormatter from './euroFormatter.js'; + +function Wallet(name, cash) { + this._name = name; + this._cash = cash; +} + +Wallet.prototype.deposit = function (amount) { + this._cash += amount; +}; + +Wallet.prototype.withdraw = function (amount) { + if (this._cash - amount < 0) { + console.log(`Insufficient funds!`); + return 0; + } + + this._cash -= amount; + return amount; +}; + +Wallet.prototype.transferInto = function (wallet, amount) { + console.log( + `Transferring ${eurosFormatter.format(amount)} from ${ + this._name + } to ${wallet.getName()}` + ); + const withdrawnAmount = this.withdraw(amount); + wallet.deposit(withdrawnAmount); +}; + +Wallet.prototype.reportBalance = function () { + console.log( + `Name: ${this._name}, balance: ${eurosFormatter.format(this._cash)}` + ); +}; + +Wallet.prototype.getName = function () { + return this._name; +}; + +function main() { + const walletJack = new Wallet('Jack', 100); + const walletJoe = new Wallet('Joe', 10); + const walletJane = new Wallet('Jane', 20); + + walletJack.transferInto(walletJoe, 50); + walletJane.transferInto(walletJoe, 25); + + walletJane.deposit(20); + walletJane.transferInto(walletJoe, 25); + + walletJack.reportBalance(); + walletJoe.reportBalance(); + walletJane.reportBalance(); +} + +main(); diff --git a/Week4/prep-exercises/2-game-of-life/Cell.js b/Week4/prep-exercises/2-game-of-life/Cell.js new file mode 100644 index 0000000..cac08da --- /dev/null +++ b/Week4/prep-exercises/2-game-of-life/Cell.js @@ -0,0 +1,57 @@ +/** + * @typedef {Object} GridCell + * @property {number} x + * @property {number} y + * @property {boolean} alive + * @property {boolean} [nextAlive] + */ + +export default class Cell { + static size; + + constructor(x, y) { + this.x = x; + this.y = y; + this.alive = Math.random() > 0.5; + this.nextAlive = false; + } + + draw(context) { + // Draw this background + context.fillStyle = '#303030'; + context.fillRect( + this.x * Cell.size, + this.y * Cell.size, + Cell.size, + Cell.size + ); + + if (this.alive) { + // Draw living this inside background + context.fillStyle = `rgb(24, 215, 236)`; + context.fillRect( + this.x * Cell.size + 1, + this.y * Cell.size + 1, + Cell.size - 2, + Cell.size - 2 + ); + } + } + + liveAndLetDie(aliveNeighbors) { + if (aliveNeighbors === 2) { + // Living cell remains living, dead cell remains dead + this.nextAlive = this.alive; + } else if (aliveNeighbors === 3) { + // Dead cell becomes living, living cell remains living + this.nextAlive = true; + } else { + // Living cell dies, dead cell remains dead + this.nextAlive = false; + } + } + + update() { + this.alive = this.nextAlive; + } +} diff --git a/Week4/prep-exercises/2-game-of-life/Game.js b/Week4/prep-exercises/2-game-of-life/Game.js new file mode 100644 index 0000000..697d15e --- /dev/null +++ b/Week4/prep-exercises/2-game-of-life/Game.js @@ -0,0 +1,35 @@ +import Grid from './Grid.js'; + +const CELL_SIZE = 10; +const NUM_COLUMNS = 75; +const NUM_ROWS = 40; + +export default class Game { + constructor(canvas) { + // Resize the canvas to accommodate the desired number of cell rows and + // columns + canvas.height = NUM_ROWS * CELL_SIZE; + canvas.width = NUM_COLUMNS * CELL_SIZE; + + // Obtain a context that is needed to draw on the canvas + this.context = canvas.getContext('2d'); + if (!(this.context instanceof CanvasRenderingContext2D)) { + throw new Error('Context not found'); + } + + this.grid = new Grid(NUM_ROWS, NUM_COLUMNS, CELL_SIZE); + } + + gameLoop() { + this.grid.render(this.context); + this.grid.update(); + + setTimeout(() => { + window.requestAnimationFrame(() => this.gameLoop()); + }, 200); + } + + start() { + window.requestAnimationFrame(() => this.gameLoop()); + } +} diff --git a/Week4/prep-exercises/2-game-of-life/Grid.js b/Week4/prep-exercises/2-game-of-life/Grid.js new file mode 100644 index 0000000..3157730 --- /dev/null +++ b/Week4/prep-exercises/2-game-of-life/Grid.js @@ -0,0 +1,65 @@ +import Cell from './Cell.js'; + +export default class Grid { + rows = []; + + constructor(numRows, numColumns, cellSize) { + this.numRows = numRows; + this.numColumns = numColumns; + + Cell.size = cellSize; + + // Create the grid as a two-dimensional array (i.e. an array of arrays) + for (let y = 0; y < numRows; y++) { + const row = []; + for (let x = 0; x < numColumns; x++) { + const cell = new Cell(x, y); + row.push(cell); + } + this.rows.push(row); + } + } + + isAlive(x, y) { + // Out-of-border cells are presumed dead + if (x < 0 || x >= this.numColumns || y < 0 || y >= this.numRows) { + return 0; + } + + const cell = this.rows[y][x]; + return cell.alive ? 1 : 0; + } + + countLivingNeighbors(cell) { + const { x, y } = cell; + return ( + this.isAlive(x - 1, y - 1) + + this.isAlive(x, y - 1) + + this.isAlive(x + 1, y - 1) + + this.isAlive(x - 1, y) + + this.isAlive(x + 1, y) + + this.isAlive(x - 1, y + 1) + + this.isAlive(x, y + 1) + + this.isAlive(x + 1, y + 1) + ); + } + + forEachCell(callback) { + this.rows.forEach((row) => { + row.forEach((cell) => callback(cell)); + }); + } + + update() { + this.forEachCell((cell) => { + const aliveNeighbors = this.countLivingNeighbors(cell); + cell.liveAndLetDie(aliveNeighbors); + }); + + this.forEachCell((cell) => cell.update()); + } + + render(context) { + this.forEachCell((cell) => cell.draw(context)); + } +} diff --git a/Week4/prep-exercises/2-game-of-life/README.md b/Week4/prep-exercises/2-game-of-life/README.md new file mode 100644 index 0000000..b0eb941 --- /dev/null +++ b/Week4/prep-exercises/2-game-of-life/README.md @@ -0,0 +1,102 @@ +# Prep exercise: Conway's Game of Life + +In this exercise you will work with existing, working code for which you are asked to implement an enhancement. The application is a JavaScript version of a classic simulation, called [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life). + +From Wikipedia: + +> The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970. It is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves. + +As illustrated in the picture below, the game is a two-dimensional grid where cells come alive and die, depending on certain rules. These rules as summarized in the Wikipedia article as follows: + +1. Any live cell with two or three live neighbors survives. +2. Any dead cell with three live neighbors becomes a live cell. +3. All other live cells die in the next generation. Similarly, all other dead cells stay dead. + +In the exercise code a new generation of cells replaces the previous one every 200ms. For each cell of the new generation life or death is determined by applying the above rules on the state of that same cell in the current generation. + +![Game of Life changing](../../../assets/game-of-life-1.gif) + +## Code walk-through + +The JavaScript code is made up of four files, three of which contain JavaScript classes (one class per file) and a file containing a `main()` function. + +### `class Cell` + +This class represents a single cell. + + +| Methods | Description | +|----------|-------------| +| constructor() | Initializes the cell's `x` and `y` coordinates from arguments passed to the constructor. It randomly sets the initial `alive` boolean state of the cell and initializes its next `alive` state. | +| draw() | Draws the cell on the canvas. The visual representation depends on whether the cell is alive or dead. | +| liveAndLetDie() | Determines the next state (alive or dead) depending on the number of living neighbors of the cell, by applying the rules of the Game Of Life. | +| update() | Updates the state of the cell (alive or dead) as set previously by `liveAndLetDie()`. + +### `class Grid` + +This class manages the game grid, made up of cells. + + +| Methods | Description | +|----------|-------------| +| `constructor()` | Creates a two-dimensional array (i.e., an array of arrays) that represents a grid of cells that evolve over time. It keeps a reference to the canvas context unto which the cells will be drawn. | +| `forEachCell()` | Executes a callback function for each cell in the two-dimensional grid array, passing the cell as a parameter to the callback. | +| `isAlive()` | Determines whether a cell at the given coordinates is alive or dead. The coordinates could potentially be off-grid. Off-grid cells are presumed to be dead. The function returns one if the given cell is alive or zero if its dead. | +| `countLivingNeighbors()` | Counts the number of living neighbors for a given cell. Each cell has eight neighbors, some of which may be off-grid if the cell is located at an edge or a corner of the grid. | +| `update()` | Iterates through all cells of the grid and computes the new state of each cell. | +| `render()` | Iterates through all cells of the grid and draws each cell onto the canvas. | + +### `class Game` + + +| Methods | Description | +|----------|-------------| +| `gameLoop()` | Executes one life cycle of the game (i.e., `grid.render()` followed by `grid.update()`) and then reschedules itself to run again after a delay. | +| `start()` | The `start()` method calls `gameLoop()` to kickstart the game. | + +The `main()` function gets a reference to the `canvas` element hard-coded in the `index.html` file and instantiates a `Game` object, passing the canvas reference to the `Game` constructor. + +The diagram below visualizes the overall call hierarchy of the various classes and methods. + +![Game of Life Call Graph](../../../assets/GameOfLife.png) + +The `gameLoop()` method calls `grid.update()` to update (each cell of) the grid according to the game rules (see above) and calls `grid.render()` to render the updated grid to the web page. It then schedules a call to itself using `setTimeout()`. This causes the game to keep evolving the grid according to the game rules every 200ms until the page is closed. + +Note: The use of [`window.requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) is not essential for the functioning of the game but helps to avoid screen flicker. + +### Exercise + +In the supplied JavaScript code the color of all living cells is a single shade of blue. This is in contrast to the illustration above where living cells have different shades of blue, depending on their life time. Your job is as follows: + +1. In the constructor of the `Cell` class, add a numeric `lifeTime` property to the object and assign it the value of `1` if the cell is initially alive or `0` if it is initially dead. + +2. In `draw` method of the `Cell` class, replace [`rgb()`]() with [`rgba()`]() that adds a fourth parameter indicating `opacity` to the `rgb` value like this: + + ```js + context.fillStyle = `rgba(24, 215, 236, ${opacity})`; + ``` + + The `opacity` of each rendered cell should depend on the cell's `lifeTime` property, as specified in this table: + + | lifeTime | opacity | + | :------: | :-----: | + | 1 | 0.25 | + | 2 | 0.5 | + | 3 | 0.75 | + | 4+ | 1 | + +3. In the `liveAndLetDie()` method of the `Cell` class add code to update the `lifeTime` value of each cell: + + - A living cell that remains living should have its `lifeTime` incremented by one. + - A living cell that dies should have its `lifeTime` reset to zero. + - A dead cell that is brought to life should have its `lifeTime` reset to one. + +Here is a visual check that you can use to verify that the life time enhancement is correctly implemented. Most of the time, if you wait long enough, the game will "stabilize" to "still life" and "oscillator" patterns, as shown in the GIF below (see the Wikipedia article for more information about the Game Of Life patterns). + +![Game of Life stable](../../../assets/game-of-life-2.gif) + +- Cells in a still life pattern remain living indefinitely and should therefore stabilize at the highest opacity. + +- The oscillating parts of an oscillator pattern continually switch between life and death and, when briefly living, should have the lowest opacity. The stable parts should be at the highest opacity. + +_Have fun!_ diff --git a/Week4/prep-exercises/2-game-of-life/app.js b/Week4/prep-exercises/2-game-of-life/app.js new file mode 100644 index 0000000..db55856 --- /dev/null +++ b/Week4/prep-exercises/2-game-of-life/app.js @@ -0,0 +1,16 @@ +import Game from './Game.js'; + +function main() { + const canvas = document.getElementById('canvas'); + if (!(canvas instanceof HTMLCanvasElement)) { + throw new Error('Canvas element not found'); + } + + // Create the game "engine" + const game = new Game(canvas); + + // Start the game + game.start(); +} + +window.addEventListener('load', main); diff --git a/Week4/prep-exercises/2-game-of-life/index.html b/Week4/prep-exercises/2-game-of-life/index.html new file mode 100644 index 0000000..1281dfb --- /dev/null +++ b/Week4/prep-exercises/2-game-of-life/index.html @@ -0,0 +1,38 @@ + + + + + Codestin Search App + + + + + + + + + diff --git a/Week4/prep-exercises/2-game-of-life/style.css b/Week4/prep-exercises/2-game-of-life/style.css new file mode 100644 index 0000000..f8ae468 --- /dev/null +++ b/Week4/prep-exercises/2-game-of-life/style.css @@ -0,0 +1,18 @@ +canvas { + border: 1px solid lightgrey; + border-radius: 6px; +} + +.markdown-body { + box-sizing: border-box; + min-width: 200px; + max-width: 980px; + margin: 0 auto; + padding: 45px; +} + +@media (max-width: 767px) { + .markdown-body { + padding: 15px; + } +} diff --git a/assets/GameOfLife.drawio b/assets/GameOfLife.drawio new file mode 100644 index 0000000..0aba370 --- /dev/null +++ b/assets/GameOfLife.drawio @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/GameOfLife.png b/assets/GameOfLife.png new file mode 100644 index 0000000..d14c6b5 Binary files /dev/null and b/assets/GameOfLife.png differ diff --git a/assets/game-of-life-1.gif b/assets/game-of-life-1.gif new file mode 100644 index 0000000..aa77cd0 Binary files /dev/null and b/assets/game-of-life-1.gif differ diff --git a/assets/game-of-life-2.gif b/assets/game-of-life-2.gif new file mode 100644 index 0000000..7d53440 Binary files /dev/null and b/assets/game-of-life-2.gif differ diff --git a/assets/javascript.png b/assets/javascript.png index 7d0351d..b8a8e12 100644 Binary files a/assets/javascript.png and b/assets/javascript.png differ diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..0704fb8 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,15 @@ +module.exports = [ + { + languageOptions: { + parserOptions: { + ecmaFeatures: { + modules: true, + }, + }, + }, + rules: { + semi: 'error', + 'prefer-const': 'error', + }, + }, +]; diff --git a/hand-in-assignments-guide.md b/hand-in-assignments-guide.md new file mode 100644 index 0000000..cd4154f --- /dev/null +++ b/hand-in-assignments-guide.md @@ -0,0 +1,90 @@ +# How to hand in the weekly assignment + +In this module you'll submit your assignment only using GIT and GitHub. + +1. [GitHub](https://www.github.com/HackYourFuture/JavaScript) + +## 1. GitHub Assignment Guide + +HYF Video + +Watch the video (by clicking the image) or go through the following walk-through to learn how to submit your assignment: + +### 1.1 One Time Only (start of every module) + +1. Create a [fork](https://help.github.com/en/articles/fork-a-repo) of the assignment module repository. For JavaScript (as well as the next 2 modules), the assignment module repository is `https://www.github.com/HackYourAssignment/Assignment-cohortXX` where XX is your cohort number. You do this by using the `fork` option on the top right. +2. Navigate to the URL of the cloned repository (it should be in your personal GitHub account, under "repositories"). +3. Clone the repository, using SSH[1], to your local machine. You can do this by typing in `git clone ` in the command line. +4. On your local machine, navigate to the folder using the command line. +5. Make sure you've cloned it correctly by running `git status` from the command line. +6. This assignment repository is a little special, have a look through the README how it all works! + +### 1.2 Every Week + +1. First make sure that you are in your `main` branch. If not, check it out first. +2. With your `main` branch checked out, create a new branch to work on the assignments of the new week. For example, for the assignment week 3[2] for JavaScript create a branch called `YOUR_NAME-w3-JavaScript`. Don't forget to checkout this branch after creating it. Note that you should never modify the `main` branch. +3. Make your assignment! +4. Once you're finished, add your assignment to a commit. There will be some test and config files added by the test runner, this is expected and should be added! +5. Create the commit (`git commit`). Make the commit message meaningful, for example `Finished project for assignment week 3`. +6. Push the branch to your forked repository. +7. On the GitHub page of your forked repository, click on the `create pull request` button. Make sure the `base repository` is the `Assignment-cohortXX` repository, on branch `main`. +8. Give the pull request a title in the same format as you used for the branch, e.g: `YOUR_NAME-w3-JavaScript`. +9. Submit the pull request from your forked repository branch into the `main` branch of the destination repository. + +If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! + +**Notes:** + + +[1] If you are in an AZC you may need to use HTTPS instead as the AZC may have blocked the network protocol used by SSH.
+[2] This first week for which you need to submit an assignment is week 2 of the JavaScript module. + + + +# Assignments Review Process + +## Before you start + +1. You get assigned a mentor at the start of the module in the slack group chat. (S)He is responsible for reviewing your work for the duration of the module. +2. Please don't hesitate to contact your mentor or the education director if you are facing any issues. We are here to help you out! + +## Review process + +Together with the mentor and other trainees in your group you have the freedom to decide on the way of communication. You can do video calls or get feedback via comments to the PR. + +The mentor will start a group message on Slack and agree together on the way of communication. There, the mentor can keep the whole group informed of his/her availability and updates. + +### Video calls + +If your group chooses to do video calls, there're 2 options. Individual calls or a group call. + +Please write down some questions before te start of the call. During the call it is important to make notes of the feedback from the mentor, so you know what has to be adjusted afterwards. + +### Comments to the PR + +The mentor will place comments on your pull request. You have to adjust your work accordingly and reply on the feedback. + +### Timeline feedback + +| Days | Activities | +| ------------------------------------- | ---------------------------------------------------------------------------------------- | +| Tuesday (week 1) | Deadline for you to hand in your first version | +| Wednesday (week 1) - Tuesday (week 2) | Mentor provides feedback | +| Wednesday (week 2) - Tuesday (week 3) | you improve the assignment based on the feedback and mentor evaluates improvements | +| Wednesday (week 3) | Core-team member Assignment Approval Check. At this point every PR needs to be approved. | + +It can happen that your mentor doesn't reply on your questions or your updated assignment. Please send a reminder via slack. If that doesn't work and you're afraid you can't make the deadline, contact your cohort supervisor. + +### Labels + +It is important for the you and the core-team to have up to date info about the status of the assignment. This is why the mentors use two labels on your PR. + +| Label | Description | +| ---------- | ----------------------------------------------- | +| no label | not reviewed yet | +| Needs work | reviewed, but you need to implement feedback | +| Approved | reviewed, and your assignment has been approved | + +Here is an example of this in action. + +![labels](https://github.com/HackYourFuture/mentors/blob/main/assets/labels.png) diff --git a/hand-in-homework-guide.md b/hand-in-homework-guide.md deleted file mode 100644 index f0ebb1f..0000000 --- a/hand-in-homework-guide.md +++ /dev/null @@ -1,88 +0,0 @@ -# How to hand in homework - -In this module you'll submit your homework only using GIT and GitHub. - -1. [GitHub](https://www.github.com/HackYourFuture/JavaScript) - -## 1. GitHub homework guide - -HYF Video - -Watch the video (by clicking the image) or go through the following walk-through to learn how to submit your homework: - -ONE TIME ONLY (START OF EVERY MODULE) - -1. Create a [fork](https://help.github.com/en/articles/fork-a-repo) of the homework module repository. For JavaScript (as well as the next 2 modules), the homework module repository is `https://www.github.com/HackYourHomework/Homework-classXX` where XX is your class number. You do this by using the `fork` option on the top right. -2. Navigate to the URL of the cloned repository (it should be in your personal GitHub account, under "repositories"). -3. Clone the repository, using SSH¹, to your local machine. You can do this by typing in `git clone ` in the command line. -4. On your local machine, navigate to the folder using the command line. -5. Make sure you've cloned it correctly by running `git status` from the command line. -6. This homework repository is a little special, have a look through the README how it all works! - -EVERY WEEK - -1. Do a `git pull` on your main branch to get the latest version. -2. Create a new branch for each week you have homework. For example, for the week 3 homework² for JavaScript create a branch called `YOUR_NAME-w3-JavaScript`. Don't forget to checkout this branch after creating it. You should not modify the `main` branch. -3. Make your homework! -4. Once you're finished, add your homework to a commit. There will be some test and config files added by the test runner, this is expected and should be added! -5. Create the commit (`git commit`). Make the commit message meaningful, for example `Finished project for homework week 3`. -6. Push the branch to your forked repository. -7. On the GitHub page of your forked repository, click on the `create pull request` button. Make sure the `base repository` is the `Homework-classXX` repository, on branch `main`. -8. Give the pull request a title in the following format: - -```markdown -Homework week 3 -``` - -9. Submit the pull request from your forked repository branch into the `main` branch. - -If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! - -Notes: - -1. If you are in an AZC you may need to use HTTPS instead as the AZC may have blocked the network protocol used by SSH. -2. This first week for which you need to submit homework is week 3 of the JavaScript module. - -# Homework Review Process - -## Before you start -1. You get assigned a mentor at the start of the module in the slack group chat. (S)He is responsible for reviewing your work for the duration of the module. -3. Please don't hesitate to contact Tjebbe or the class mentor if you are facing any issues. We are here to help you out! - -## Review process -Together with the mentor and other students in your group you have the freedom to decide on the way of communication. You can do video calls or get feedback via comments to the PR. - -The mentor will start a group message on Slack and agree together on the way of communication. There, the mentor can keep the whole group informed of his/her availability and updates. - - -### Video calls -If your group chooses to do video calls, there're 2 options. Individual calls or a group call. - -Please write down some questions before te start of the call. During the call it is important to make notes of the feedback from the mentor, so you know what has to be adjusted afterwards. - -### Comments to the PR -The mentor will place comments on your pull request. You have to adjust your work accordingly and reply on the feedback. - -### Timeline feedback -| Days | Activities | -| --- | --- | -|Tuesday (week 1) | Deadline for you to hand in your first version | -|Wednesday (week 1) - Tuesday (week 2) | Mentor provides feedback | -| Wednesday (week 2) - Tuesday (week 3) | you improve homework based on the feedback and mentor evaluates improvements | -| Wednesday (week 3) | Core-team member Homework Approval Check. At this point every PR needs to be approved. | - -It can happen that your mentor doesn't reply on your questions or your updated homework. Please send a reminder via slack. If that doesn't work and you're afraid you can't make the deadline, contact your class-mentor. - -### Labels -It is important for the you and the core-team to have up to date info about the status of the homework. This is why the mentors use two labels on your PR. - -| Label | Description | -| --- | --- | -|no label |not reviewed yet | -|Needs work |reviewed, but you need to implement feedback | -|Approved |reviewed, and your homework has been approved | - -Here is an example of this in action. - -![labels](https://github.com/HackYourFuture/mentors/blob/main/assets/labels.png) - diff --git a/review/README.md b/review/README.md deleted file mode 100644 index 016be8d..0000000 --- a/review/README.md +++ /dev/null @@ -1,47 +0,0 @@ -> UNDER CONSTRUCTION: This is still a WIP, feel free to add questions. As soon as there are enough we can open it up to students. - -# Review - -Test yourself with this review quiz to make sure you've learned the most important concepts from this module - ---- - -## What is JavaScript - -Which of these is true? - -1. JavaScript is Java, but for browsers -1. Node.js is a popular browser -1. JavaScript can be used to make websites interactive - -
-answer - -3 is the correct answer: JavaScript works with HTML & CSS to create interactive websites: - -- HTML defines how the site is structured -- CSS defines how the website looks -- JavaScript defines what the site does - -
- ---- - -## basic syntax - -### loops - -How do you write a for loop to log the numbers from 0 to 9? - -
-answer - -```js -for (let i = 0; i < 10; i++) { - console.log(i); -} -``` - -
- ----