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 784984b..a9a49e4 100644 --- a/README.md +++ b/README.md @@ -49,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. | JS Basics Refresher, Loops, Naming Conventions | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | -| 2. | Scope, ModernJS, Problem Solving | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | -| 3. | Higher Order Functions, Closures, Unit Testing | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | -| 4. | This keyword, constructor functions, classes | [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 37af6ef..7f6f747 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,4 +1,4 @@ -# Homework JavaScript Week 1 +# Assignment JavaScript Week 1 ## **Todo list** @@ -9,21 +9,21 @@ ## **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. 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! 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. - 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) +- 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. 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 `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. @@ -39,9 +39,9 @@ There are also multiple websites that provide constant challenges to practice yo - [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 (for now) +## No assignment to hand in (for now) -For the first week of JavaScript there is no homework to hand in as the exercises already give you all the feedback you need. +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? diff --git a/Week1/QA.md b/Week1/QA.md index 5286dd6..3498fcf 100644 --- a/Week1/QA.md +++ b/Week1/QA.md @@ -1,6 +1,6 @@ # Q & A Session -The first week 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) @@ -8,4 +8,4 @@ The first week of JavaScript we do not have homework and we encourage students t - 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 2e30656..ae62329 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -37,7 +37,7 @@ You now have all of the basic building blocks that form the basis of all code! Y 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 homework so you will see how it works. +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? diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index aa118b2..ca85c57 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,26 +1,26 @@ -# Homework JavaScript Week 2 +# Assignment JavaScript Week 2 -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. +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** 1. Prep exercises -1. Homework exercises +1. Assignment 1. Practice practice practice ## **1. 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 `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. Homework exercises** +## **2. 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 so reserve some time to set it up. You will find the repository in our [HackYourHomework](https://github.com/HackYourHomework/) GitHub page. There should be one called Homework-classXX where XX is your class number, you will want to fork that to your own GitHub. Have a look at the [homework guide](../hand-in-homework-guide.md) to see how to hand in your homework. +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. 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 homework repository to set up the extensions in Visual Studio Code!_. +_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** diff --git a/Week2/QA.md b/Week2/QA.md index 8cf8165..55aea31 100644 --- a/Week2/QA.md +++ b/Week2/QA.md @@ -1,4 +1,4 @@ -# Q & A Session +# Q & A session This week we are going deeper into more advanced topics, so expect questions about: @@ -7,4 +7,4 @@ This week we are going deeper into more advanced topics, so expect questions abo - 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 f998510..3feb55c 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -18,4 +18,4 @@ Now that we are getting into more and more complex code it is also a good idea t ## 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! 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/Week3/MAKEME.md b/Week3/MAKEME.md index 1e650d4..0073857 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -1,30 +1,30 @@ -# Homework JavaScript Week 3 +# Assignment JavaScript Week 3 ## **Todo list** 1. Practice the concepts 1. Prep exercises -1. Homework exercises +1. Assignment 1. Extra: Challenges (Optional) ## **1. Practice 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! +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! - [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 [homework guide](https://github.com/HackYourFuture/JavaScript/blob/main/hand-in-homework-guide.md) to see how to hand in your homework. +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. -_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_ +_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_ ## **4. Extra: Challenges (Optional)** diff --git a/Week3/QA.md b/Week3/QA.md index abf8385..5f52c87 100644 --- a/Week3/QA.md +++ b/Week3/QA.md @@ -1,9 +1,9 @@ -# Q & A Session +# Q & A session -The third 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: +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: - 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! +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 dd56352..0076edc 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -20,7 +20,7 @@ Secondly, JavaScript has a thing called closures which you should know about. Yo 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! -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! +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? diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 5352524..e0833c0 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -1,10 +1,10 @@ -# Homework JavaScript Week 4 +# Assignment JavaScript Week 4 ## **Todo list** 1. Practice the concepts 1. Prep exercises -1. Practice practice practice (for the test) +1. Practice practice practice (for the assessment) ## **1. Reinforce the concepts** @@ -14,18 +14,18 @@ Go through the following article that has examples for all of the things you lea ## **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. Practice practice practice (for the test)** +## **3. Practice practice practice (for the assessment)** -At the end of this week (Tuesday most likely, but keep an eye on your class channel for the exact date) there will be a test. You will have received a practice test 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. +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. So take the rest of the week to keep working on those beginner to advanced websites and practice these skills! -Good luck on the test! +Good luck on the assessment! -## No homework to hand in this week +## No assignment to hand in this week -For the last week of JavaScript there is no homework to hand in as we want you to focus on practicing for the test. +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/README.md b/Week4/README.md index f587a84..bf1441c 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -19,7 +19,7 @@ Next let's learn about constructor functions which is why we have the `new` keyw 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). -After that it is all about practicing for the test :scream: at the end of this week. You will have received a practice test in your class channel that will show you what it is about. +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/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); -} -``` - -
- ----