diff --git a/homework-projects/assets/API-guide-1.png b/homework-projects/assets/API-guide-1.png
new file mode 100644
index 00000000..958df4fc
Binary files /dev/null and b/homework-projects/assets/API-guide-1.png differ
diff --git a/homework-projects/assets/API-guide-2.png b/homework-projects/assets/API-guide-2.png
new file mode 100644
index 00000000..ceadfbe7
Binary files /dev/null and b/homework-projects/assets/API-guide-2.png differ
diff --git a/homework-projects/assets/API-guide-3.png b/homework-projects/assets/API-guide-3.png
new file mode 100644
index 00000000..08937a17
Binary files /dev/null and b/homework-projects/assets/API-guide-3.png differ
diff --git a/homework-projects/assets/API-guide-4.png b/homework-projects/assets/API-guide-4.png
new file mode 100644
index 00000000..6176f249
Binary files /dev/null and b/homework-projects/assets/API-guide-4.png differ
diff --git a/homework-projects/assets/memory-game-card-flip.gif b/homework-projects/assets/memory-game-card-flip.gif
new file mode 100644
index 00000000..df22983d
Binary files /dev/null and b/homework-projects/assets/memory-game-card-flip.gif differ
diff --git a/homework-projects/assets/memory-game-grid.png b/homework-projects/assets/memory-game-grid.png
new file mode 100644
index 00000000..236b0f3f
Binary files /dev/null and b/homework-projects/assets/memory-game-grid.png differ
diff --git a/homework-projects/assets/memory-game-pattern.png b/homework-projects/assets/memory-game-pattern.png
new file mode 100644
index 00000000..de65a79c
Binary files /dev/null and b/homework-projects/assets/memory-game-pattern.png differ
diff --git a/homework-projects/assets/movie-app-star-rating.gif b/homework-projects/assets/movie-app-star-rating.gif
new file mode 100644
index 00000000..09602c4a
Binary files /dev/null and b/homework-projects/assets/movie-app-star-rating.gif differ
diff --git a/homework-projects/assets/project-flow.png b/homework-projects/assets/project-flow.png
new file mode 100644
index 00000000..9739dff2
Binary files /dev/null and b/homework-projects/assets/project-flow.png differ
diff --git a/homework-projects/guides/demo-day-presentation.md b/homework-projects/guides/demo-day-presentation.md
new file mode 100644
index 00000000..cfce99db
--- /dev/null
+++ b/homework-projects/guides/demo-day-presentation.md
@@ -0,0 +1,29 @@
+# Demo Day Presentation
+
+Your team may choose to run a demo day to present your project and get feedback. If so, here's a brief to guide you through your 15-minute presentation. Each individual will have 40-minutes in total, broken down into 15-minutes for presenting and 25-minutes for discussions. Your presentation will be an opportunity to showcase your project, detail your weekly progress, and share your challenges and learnings.
+
+
+## Presentation Structure (15 minutes)
+
+### Introduction (2 minutes)
+Briefly introduce your chosen project. (Refer to the "projects" folder for details.)
+
+### Weekly Task Breakdown (10 minutes)
+For each week of the JS2 and JS3 modules, highlight:
+- Your understanding and implementation of their concepts.
+- Specific challenges you faced and how you overcame them.
+- Any particular successes or insights you gained.
+
+### Project Summary (3 minutes)
+Summarize what you learned from this project and how it ties together the concepts learned over JS2 and JS3.
+
+### Feedback and Discussion Session (25 minutes)
+
+After your presentation, there will be an open session for feedback and discussion. This is a valuable time to gain insights from your mentors and peers.
+
+Tips for a Successful Presentation:
+- Be Clear and Concise: Focus on the key points and challenges of your project while being mindful of time.
+- Reflect on Your Learning Journey: Share how your understanding evolved over the weeks.
+- Be Open to Feedback: This is a learning opportunity – embrace the insights and suggestions from mentors and peers.
+
+This is a suggested guideline for you to follow. We look forward to seeing your projects and hearing about your journey through the JS2 and JS3 modules in a way that works for you and your project. Good luck!
diff --git a/homework-projects/guides/making-your-API-guide.md b/homework-projects/guides/making-your-API-guide.md
new file mode 100644
index 00000000..5166ef68
--- /dev/null
+++ b/homework-projects/guides/making-your-API-guide.md
@@ -0,0 +1,68 @@
+# Build your own API
+
+[GitHub Pages](https://pages.github.com/) is a good place to host a site for your portfolio or a project, but another excellent use for it is to host your own JSON API data!
+
+All you would need to do, in short, is create a GitHub Pages repository, put a JSON file in there, and your custom URL will have all of that data from the JSON file. See below for more detailed instructions and some screenshots to help you get around!
+
+## Instructions
+
+### Creating the repository
+
+The first thing you’ll need to do is create a GitHub Pages repository.
+
+Head on over to your GitHub account and create a repository called *`username`*.github.io, where *`username`* is your GitHub username.
+
+If you already have such a repository, just go on to the next step.
+
+
+
+❗Make sure that it matches your username or it won’t work!
+
+❗It seems like the repository can be private if you will just use it for the API, but has to be public if you also want to use it to [create a site](https://pages.github.com/). ([see here](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site#:~:text=GitHub%20Pages%20is%20available%20in%20public%20repositories%20with%20GitHub%20Free%20and%20GitHub%20Free%20for%20organizations%2C%20and%20in%20public%20and%20private%20repositories%20with%20GitHub%20Pro%2C%20GitHub%20Team%2C%20GitHub%20Enterprise%20Cloud%2C%20and%20GitHub%20Enterprise%20Server.%20For%20more%20information%2C%20see%20%22GitHub%E2%80%99s%20plans.%22) for more information)
+
+### Adding the JSON file
+
+1. Once the repository has been made, head over to your terminal and clone that repository into a directory of your choosing.
+2. Once the repository been cloned to your computer, open the project folder in VS Code.
+3. Create a folder for your APIs or just create a file in the root of the repository. You might want to organize it into a folder (fx. “data”) if you plan to create more APIs in the future and/or if you plan to also host your site on Github Pages. In the case of your JS project, you would just copy and paste the array of objects that you have been using so far and perhaps add more objects to it, if needed.
+4. Once you are ready with your JSON file, add, commit and push the changes to `main` so that you have the file on your repository.
+5. Head over to the repo on GitHub and verify that your file is there and that all is good.
+
+
+
+❗Be mindful about your data format. Note wether you should use an object or an array of objects and form your file accordingly.
+
+### Using the API
+
+Now comes the fun part! You can use the JSON file in a FETCH to get and use the data dynamically.
+
+Your URL for FETCH will be the raw content of the JSON file that you added. Head on to the `raw` version of your file:
+
+
+
+Copy the URL and use it for fetching the data.
+
+
+
+Now you have a publicly hosted API! To access this information, all you need to do is make an API call like you normally would (FETCH), parse that data (iterate through an array of objects), and then use the data in whatever way you need for your project!
+
+❗Note that in Vanilla JS (which is what you are learning now), you cannot access the fetched data outside of your fetch function. So you will most probably need to move your whole code from before into the function or call the necessary functions from within the FETCH function, something like this:
+
+```jsx
+async function getData() {
+ const response = await fetch(
+ "https://raw.githubusercontent.com/shpomp/shpomp.github.io/main/test.json?token=%3C%3E"
+ );
+ const myData = await response.json();
+
+ theFunctionThatUsesYourData(myData);
+}
+
+const theFunctionThatUsesYourData = (data) => {
+ for (const item of data) {
+ // your code ....
+ }
+};
+
+// other code ...
+```
diff --git a/homework-projects/guides/weekly-submission-guide.md b/homework-projects/guides/weekly-submission-guide.md
new file mode 100644
index 00000000..db1c2d17
--- /dev/null
+++ b/homework-projects/guides/weekly-submission-guide.md
@@ -0,0 +1,94 @@
+# HOMEWORK SUBMISSION
+
+## TL;DR
+
+- [ ] start any coding session from `main`.
+- [ ] periodically keep your local `main` up to date with changes in the remote `main` (for example, when you merge a PR on GitHub, your remote `main` gets the new code added, but your local `main` does not).
+- [ ] periodically merge the up-to-date local `main` into your new homework branch.
+- [ ] always checkout to a new homework branch from `main`.
+- [ ] write meaningful commit messages.
+- [ ] before pushing, double check that your branch name is correct.
+- [ ] if the branch name is not correct, you can checkout to a new, correct branch from the current branch - you will carry all the commits with you.
+- [ ] stay patient. Slack, Google and ChatGPT are your best friends now.
+- [ ] make the changes as per PR review in the appropriate branch, push the changes to the appropriate branch and merge the PR.
+
+
+
+
+
+
+## Before you start the project
+
+- Create a public project repository in your GitHub account (choose the option to add README.md).
+- Clone the repository locally and open it in VS code.
+
+## Before you start your homework
+
+1. You are probably opening your project repo on the last weeks branch - make sure that any changes you have there are either committed and pushed, or stashed, or discarded - whatever you prefer. The point is to be mindful that:
+ - you are most probably starting on a branch you last worked with, that is how VS Code works,
+ - and there might be changes that you have not handled last time.
+ - if you are about to start a new homework, you need to go to `main` first.
+
+
+
+2. Checkout to `main` and pull the latest changes from it. If you skip this step, you will get in trouble sooner or later.
+
+
+
+3. Checkout to your new homework branch, following the branch naming convention of `module-week/yourname`.
+ See [allowed branch name prefixes](#allowed-branch-name-prefixes).
+
+
+❗ Always firstly checkout to the new homework branch from an updated `main`. Always.
+
+
+
+### Allowed branch name prefixes:
+
+| | | | | |
+| ----------------- | ----------------- | ----------------- | --- | --- |
+| javascript2-week1 | javascript2-week2 | javascript2-week3 | |
+| javascript3-week1 | javascript3-week2 | javascript3-week3 | |
+
+### Examples
+
+> ❌ javascript3/maria
+> ❌ javascript2-week1-homework
+> ❌ javascript3-week2
+> ✅ javascript3-week3/maria
+
+
+
+## Completing and submitting your homework
+
+1. Implement your homework. Be mindful of structuring and naming. Make sure you complete all the tasks listed for that week in your project description.
+
+
+
+2. Verify that your branch name is right. Commit and push your homework to the repository. If the branch name is not right, you can commit and checkout to a new, correct branch from the current branch - you will carry all the commits with you. Then you can push.
+
+
+
+3. Go to your project repository and create a Pull Request from your weekly homework branch to `main`.
+
+
+
+4. Post the link to the PR to your class channel and celebrate with your classmates! 🎉 💃🏽 🕺🏾 🥳
+
+
+
+## After submitting your homework
+
+1. Follow the PR to see the review and interact with the reviewer as well as make the suggested changes.
+
+
+
+2. When you have made changes to the code since the homework submission and review, push the changes and merge the PR.
+
+
+
+3. Update your local `main` with the merged changes in the remote `main`.
+
+
+
+4. Take a moment to celebrate your progress and be proud of your learning!
diff --git a/homework-projects/projects/currency-converter/currency-converter.md b/homework-projects/projects/currency-converter/currency-converter.md
new file mode 100644
index 00000000..ba685c41
--- /dev/null
+++ b/homework-projects/projects/currency-converter/currency-converter.md
@@ -0,0 +1,117 @@
+
+
+# CURRENCY CONVERTER
+
+You started working in a new cool fintech startup, and your first task is to build a simple currency converter app.
+It is expected that your app will have at least these features and functionality:
+
+- Insert a new currency rate
+- List currencies and rates
+- Search currencies
+- Set a rate to be alerted when a currency reaches that rate
+- The ‘most moving’ currency rate
+- Timeout for the market open/close
+- Call the currency API to receive the rates dynamically
+
+> [!NOTE]
+> Take some time to research online for similar apps and how they look and work to gain inspiration. This is an important skill to practice as a developer because you won't always know (or be told) how to approach the design.
+
+## Weekly specs:
+
+### `JS2 week1` - Browser environment, DOM manipulation, DOM event listeners
+
+- [ ] Create a form to insert a brand new currency rate from `a` to `b`.
+- [ ] Create a form to covert an amount of money from `x` currency to `y` based on the rates provided.
+- [ ] optional bonus: create a form to update existing currency conversion with a new rate.
+
+
+Your currency rate object format could be something like this:
+
+```js
+{
+ "timestamp": 1519296206,
+ "base": "EUR",
+ "date": "2021-03-17",
+ "rates": {
+ "USD": 1.23396,
+ [...]
+ }
+}
+```
+
+The above would be how a brand new currency rate could look like (the first task).
+Then, after an update (the bonus task) it could look something like this:
+
+```js
+{
+ "timestamp": 1519296206,
+ "base": "EUR",
+ "date": "2021-03-17",
+ "rates": {
+ "USD": 1.23396,
+ "GBP": 0.882047,
+ [...]
+ }
+}
+```
+
+---
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of currency rate objects. Even a small one is perfectly enough, but go as big as you want!
+Continue with the format of the object you used last week or improve it and refactor!
+
+- [ ] List: Traverse through your array of the currency rate objects, and display them in a grid of items containing all the relevant details.
+- [ ] Implement a function to find a specific currency rate, searching by the currency `from` or `to`.
+ Basically, it is just a search function! With a twist, though, because you have both the `from` and the `to` fields.
+ As a user, I want to find a specific rate, but I am too lazy to scan through all the rates with my eyes, I want to be able to type in and search!
+
+---
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+- [ ] Implement a timeout to show an announcement when the market open or/and close. The market opens at 9AM and closes at 5PM local time.
+
+- [ ] optional bonus:
+ a. Implement a watcher to periodically check a specific currency conversion and alert the user when the value reaches a speicfic point. Let's say the user is interested in converting USD to Danish kroner but the rate today is very bad, 1 USD is 5 DKK. We wan to alert the user when 1 USD is 7 DKK so the user can convert with maximum gain
+ b. Watch currency updates and show a banner with the hotest currency exchange rate. I.e., currency conversion reaching the double value.
+
+---
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] Follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] Refactor your code so that you use the currency rates dynamically from your API instead of the static array of objects.
+- [ ] Implement functionality to search for a specific currency.
+- [ ] Ensure all the functionality is working smoothly after refactoring.
+
+---
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] You used promise chaining last week - now rewrite the fetch in the "async await" approach.
+- [ ] Testing. Implement a test to ensure that the application will work as expected after the refactoring.
+
+---
+
+### `JS3 week3` - Classes, Revision and Presentation of projects
+
+- [ ] Rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] Make improvements to the style or functionality or add additional functionality.
+- [ ] Prepare to showcase your project to external people, talk through your code and explain what you have implemented.
+
+---
+
+
+
+
+## Project completion checklist ✅
+
+- [ ] I can insert a new currency rate
+- [ ] I can see a list of all currencies and rates
+- [ ] I can use the coverter to convert a currency and see the result
+- [ ] I can search currencies to find a specific one
+- [ ] I can set a rate to be alerted when a currency reaches that rate
+- [ ] I can see an indicator for the market open/close
+- [ ] I am using the currency API to receive the rates dynamically
diff --git a/homework-projects/projects/memory-game/card-backside.jpg b/homework-projects/projects/memory-game/card-backside.jpg
new file mode 100644
index 00000000..3c61a6c6
Binary files /dev/null and b/homework-projects/projects/memory-game/card-backside.jpg differ
diff --git a/homework-projects/projects/memory-game/card-picture.jpg b/homework-projects/projects/memory-game/card-picture.jpg
new file mode 100644
index 00000000..a5fe247d
Binary files /dev/null and b/homework-projects/projects/memory-game/card-picture.jpg differ
diff --git a/homework-projects/projects/memory-game/memory-game.md b/homework-projects/projects/memory-game/memory-game.md
new file mode 100644
index 00000000..f8c61cc9
--- /dev/null
+++ b/homework-projects/projects/memory-game/memory-game.md
@@ -0,0 +1,89 @@
+
+
+# MEMORY GAME
+
+You joined an online game platform startup and your task is to build one of the small classic games.
+You will build a Memory Game, where a user needs to flip all the cards in a game in pairs until they find all the matching pairs. You aspire to make the game smooth and pleasant, so the user is compelled to spend more time playing it.
+
+> [!NOTE]
+> Take some time to research online for similar apps and how they look and work to gain inspiration. This is an important skill to practice as a developer because you won't always know (or be told) how to approach the design.
+
+## Weekly specs:
+
+### `JS2 week1` - Browser environment, DOM manipulation, DOM event listeners
+
+You are provided with a picture and a card backside pattern picture (or pick your own).
+
+- [ ] display a single card on the page using DOM manipulation.
+- [ ] implement the functionality of flipping the card: on click, the card flips from showing the backside pattern to the picture and vice versa. Visual animation is optional and the exact look of it is up to you!
+
+
+
+---
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of picture objects. Even a small one is perfectly enough, but go as big as you want! A picture object should ideally have at least an id, a name and a picture url.
+Continue with the format of the picture object you used last week or improve it and refactor!
+
+- [ ] generate a new array where each card object is added to it twice, but in a random order. Think about _doubling_ and _shuffling_ an array when you research how to complete this task.
+- [ ] traverse through the new array of picture objects and display all the cards in a grid.
+- [ ] include the functionality from the previous week so that each card will flip from the picture to the backside pattern and back when it is clicked.
+
+
+
+---
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+- [ ] implement a counter for how many times in total you have flipped a card (one counter for all the cards). Note that you are not supposed to count clicks! The purpose is to count how many times you have _revealed_ the card picture - in other words, you are couunting player moves.
+- [ ] implement a timer for how much time has passed since you first clicked on a card.
+- [ ] adjust the functionality so that once 2 cards are flipped, they stay flipped for X seconds, after which they flip back down automatically.
+
+---
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] refactor your code so that you ditch the static array of objects and instead fetch the cards data from your API.
+- [ ] ensure all the functionality is working smoothly after refactoring.
+
+---
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] you used promise chaining last week - now rewrite the fetch in the "async await" approach.
+- [ ] implement the functionality for it to work like and actual memory game:
+
+At least:
+
+- You can only flip 2 cards at a time.
+- If the cards match, they are removed from the DOM.
+- The game reloads once all cards are removed.
+
+At most:
+
+- Implement the tasks listed under "At least".
+- Use the counter and timer that you implemented before and stop the game when a certain count or time is reached. The time or count can be hardcoded or user-submitted via an input.
+
+---
+
+### `JS3 week3` - Classes, Revision and Presentation of projects
+
+- [ ] rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] make improvements to the style or functionality or add additional functionality.
+- [ ] Prepare to showcase your project to external people, talk through your code and explain what you have implemented.
+
+
+
+
+## Project completion checklist ✅
+
+- [ ] at first, I can see a square grid of cards "flipped down" - seeing their backside pattern;
+- [ ] I can click on a card, which makes the card "flip" and reveal the picture/gif;
+- [ ] I can only reaveal 2 cards at a time;
+- [ ] the 2 revealed cards stay flipped for X seconds, after which they flip down again;
+- [ ] if I reveal 2 matching cards, they are removed from the page;
+- [ ] I can see a timer that starts once I flip the very first card in a new game;
+- [ ] I can see a counter that counts how many times I have flipped a card;
+- [ ] once all cards are removed, the game reloads.
diff --git a/homework-projects/projects/movie-app/movie-app.md b/homework-projects/projects/movie-app/movie-app.md
new file mode 100644
index 00000000..312ec452
--- /dev/null
+++ b/homework-projects/projects/movie-app/movie-app.md
@@ -0,0 +1,106 @@
+
+
+# MOVIE APP
+
+You joined a startup that has the ambition to build the best new movie streaming platform!
+Your taks will be to build a simple prototype to showcase the look of the platform and some simple functionality.
+Your way to impress is to not only build a nice-looking main movie list page, but to also include some interesting features that the competitors do not have!
+
+> [!NOTE]
+> Take some time to research online for similar apps and how they look and work to gain inspiration. This is an important skill to practice as a developer because you won't always know (or be told) how to approach the design.
+
+## Weekly specs:
+
+### `JS2 week1` - Browser environment, DOM manipulation, DOM event listeners
+
+Use a movie object with details such as id, title, description, year, main actors, etc.
+
+It could be something like this:
+
+```js
+ {
+ id: 1,
+ title: 'Interstellar',
+ description:
+ 'The adventures of a group of explorers who make use of a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.',
+ movie_year: 2014,
+ director: "Christopher Nolan",
+ actors: ["Matthew McConaughey", "Anne Hathaway", "Jessica Chastain", "Michael Caine", "Casey Affleck", "Mackenzie Foy", "John Lithgow", "Ellen Burstyn", "Matt Damon"],
+ poster_url:
+ 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg',
+ price: '120.00',
+ },
+```
+
+Add whatever properties you think are relevant and that you want to display as the information on your future movie website!
+
+- [ ] design and implement the layout of the movie card via DOM manipulation.
+
+- [ ] via DOM manipulation, implement one of the two (or both!):
+ a. submitting and displaying a comment about the movie. Implement an imput under the movie and a functionality to display the submitted comment.
+ b. rating the movie in a star-rating format and displaying the submitted rating.
+
+
+
+
+---
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of movie objects. Even a small one is perfectly enough, but go as big as you want!
+Continue with the format of the movie object you used last week or improve it and refactor!
+
+- [ ] traverse the movie array and display all the movies on the page in a grid via DOM manipulation.
+- [ ] manipulate the movie array, implementing these functions:
+- a function for searching for a provided keyword in the movie title;
+- a function for sorting the movie array by one or a few selected properties.
+- [ ] optional: as you might guess, you will later use these functions to implement searching and sorting functionality, so feel free to add any other array-manipulation functions of your choice!
+
+---
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+Here you will develop some features that will differentiate your movie platform from the competition!
+
+- [ ] implement a timer where you can set a time for how much time you give yourself to pick a movie to watch, the timer alerts or rings when then time is over.
+- [ ] implement a timer to show how long you have spent on the page.
+
+---
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] refactor your code so that you ditch the static array of objects and instead fetch the movies data from your API.
+- [ ] ensure all the functionality is working smoothly after refactoring.
+
+---
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] you used promise chaining last week - now rewrite the fetch in the "async await" approach
+- [ ] fit and apply one (or all) of your functions from JS2 week2 to manipulate the displayed movies:
+
+- a function to search a movie by title that a user submits via an input, displaying only the matching movies.
+- a function to sort the movies by a property selected via a dropdown.
+- a function to filter the movies by a specific constraint submitted by the user via an input (or hardcoded), only displaying the relevant movies.
+
+---
+
+### `JS3 week3` - Classes, Promises advanced
+
+- [ ] rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] make improvements to the style or functionality or add additional functionality.
+
+---
+
+
+
+
+## Project completion checklist ✅
+
+- [ ] I can see a page with a list of movies displayed in a grid;
+- [ ] I can see the most important details about a movie displayed in a nice and readable way;
+- [ ] I can either submit a comment to a movie or a star rating or both;
+- [ ] I can search for movies by titling, typing in a search keyword;
+- [ ] I can sort the movies by at least one specific property;
+- [ ] I can filter the movies by at least one user-submitted or hardcoded constraint (f.x. movies older than year X).
diff --git a/homework-projects/projects/quiz-app/quiz-app.md b/homework-projects/projects/quiz-app/quiz-app.md
new file mode 100644
index 00000000..89f7e705
--- /dev/null
+++ b/homework-projects/projects/quiz-app/quiz-app.md
@@ -0,0 +1,109 @@
+
+
+# QUIZ APP
+
+The most popular quiz app has become very expensive... so there came a startup that aspires to build a new one that will be better, cheaper to use and more fun!
+You join the startup as a developer and your task is to build a nice prototype of the product while the rest of the product team works to define what the final version will be.
+
+> [!NOTE]
+> Take some time to research online for similar apps and how they look and work to gain inspiration. This is an important skill to practice as a developer because you won't always know (or be told) how to approach the design.
+
+## Weekly specs:
+
+### `JS2 week1` - Browser environment, DOM manipulation, DOM event listeners
+
+- [ ] create a form to insert a quiz question. It should take a question and 4 options for answers. There should be a way to mark which answer is correct in the form, but you should only be able to select one correct answer.
+
+- [ ] implement one of the two (or both!):
+
+a. add a button that randomizes the order of the 4 option inputs once they have been filled in.
+
+b. color the input for the "correct" answer option in green and the "wrong" ones in red. Make sure it's still readable.
+
+- [ ] optional bonus: make sure the question is not longer than 140 characters.
+
+The format of the object of the quiz question, for example, could be something like this:
+
+```js
+const quizQuestion = {
+ id: 1,
+ question: "What is the capital of Denmark?",
+ options: [
+ { text: "Berlin", isCorrect: false },
+ { text: "Copenhagen", isCorrect: true },
+ { text: "Madrid", isCorrect: false },
+ { text: "Rome", isCorrect: false },
+ ],
+ explanation: "Copenhagen is the capital of Denmark.",
+};
+```
+
+---
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of quiz question objects. Even a small one is perfectly enough, but go as big as you want!
+Continue with the format of the question object you used last week or improve it and refactor!
+
+- [ ] save the quiz question into an array when the form is submitted.
+
+- [ ] show a list of all quiz questions added to the array below the form. It should show the questions, the 4 options but not which one is correct. Add a button with the functionality to reveal which is the correct answer for each question.
+
+- [ ] build a function to filter the questions by searching the content of the question.
+
+---
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+- [ ] add inputs for 2 player names and a button to start a quiz. When the quiz starts, player names are displayed with their collected points (0 to begin with).
+
+- [ ] implement one of the two (or both!):
+
+a. next to each player's name, add two buttons [correct] and [wrong]. When the "correct" button for a player is pressed, they score 1 point, when the wrong button is pressed, the _other_ player scores one point.
+
+b. add number inputs for the player points and use the browser's arrow buttons on the input fields to increase/decrease the points.
+
+- [ ] optional bonus: play a sound and end the quiz game when one of the players has reached 10 points.
+
+---
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+
+- [ ] refactor your code so that you ditch the static array of objects and instead fetch the initial questions data from your API.
+
+- [ ] ensure all the functionality is working smoothly after refactoring.
+
+- [ ] add alphabetical sorting of the questions and random sorting of the questions and let the user choose.
+
+---
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] you used promise chaining last week - now rewrite the fetch in the "async await" approach.
+
+- [ ] add a search input to filter the questions by searching the content of the question - use the function that you have build before. When you click the search button, display only the questions where the search input is included in the question text.
+
+---
+
+### `JS3 week3` - Classes, Revision and Presentation of projects
+
+- [ ] rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] make improvements to the style or functionality or add additional functionality.
+- [ ] Prepare to showcase your project to external people, talk through your code and explain what you have implemented.
+
+---
+
+
+
+
+## Project completion checklist ✅
+
+- [ ] I can see a form to submit a question at the top of the page and a list of questions bellow it;
+- [ ] when submitting a new question, I can see an indication where to submit the correct answer;
+- [ ] the questions are displayed in a nice and readable way, and I can see a button to reveal the right answer for each question;
+- [ ] I can sort the questions alphabetically;
+- [ ] I can use search and get the questions wher my search keyword is included in the question text;
+- [ ] there is a functionality to submit two player names;
+- [ ] it is possible to interact with player scores.
diff --git a/homework-projects/projects/recipe-app/recipe-app.md b/homework-projects/projects/recipe-app/recipe-app.md
new file mode 100644
index 00000000..c77887ab
--- /dev/null
+++ b/homework-projects/projects/recipe-app/recipe-app.md
@@ -0,0 +1,101 @@
+
+
+# RECIPE APP
+
+You are a foood lover, a cooking enthusiast and you want to share your passion with the web. You aspire to build a cool recipe website as a hobby project and eventually earn a little bit on the side from it.
+
+> [!NOTE]
+> Take some time to research online for similar apps and how they look and work to gain inspiration. This is an important skill to practice as a developer because you won't always know (or be told) how to approach the design.
+
+## Weekly specs:
+
+### `JS2 week1` - Browser environment, DOM manipulation, DOM event listeners
+
+Create a recipe object that has at least the id, name, description, a list of ingredients and a picture url.
+Or just use the below!
+
+```js
+const recipeObject = {
+ id: 1,
+ title: "Gløgg",
+ picture_url:
+ "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Gl%C3%B6gg_kastrull.JPG/800px-Gl%C3%B6gg_kastrull.JPG",
+ ingredients: [
+ { NAME: "Orange zest", AMOUNT: "0.5" },
+ { NAME: "Water", AMOUNT: "200 ml" },
+ { NAME: "Sugar", AMOUNT: "275 g" },
+ { NAME: "Whole cloves", AMOUNT: "5" },
+ { NAME: "Cinnamon sticks", AMOUNT: "2" },
+ { NAME: "Spice", AMOUNT: undefined },
+ { NAME: "Bottle of red wine", AMOUNT: "1" },
+ { NAME: "Raisins", AMOUNT: "100 g" },
+ { NAME: "Slipped Almonds", AMOUNT: "50 g" },
+ ],
+ description: "Mix everything, heat it, and you are good to go!",
+};
+```
+
+- [ ] Display a single recipe on the page using DOM manipulation.
+- [ ] Implement a form to add a new recipe with a minimum of 5 ingredients.
+- [ ] Optional: implement functionality to add a new ingredient to a recipe.
+
+---
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of recipe objects. Even a small one is perfectly enough, but go as big as you want!
+Continue with the format of the recipe object you used last week or improve it and refactor!
+
+- [ ] Traverse through the array of recipe objects and display all the recipe cards in a grid.
+- [ ] Implement functions to manipulate the array:
+- find a recipe by a provided search word to check in the recipe title.
+- sort the recipe array by the amount of ingredients needed.
+
+---
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+- [ ] Implement a cooking timer where the time is user-picked via an input or hard-coded. The timer should alert and/or ring once the time is up.
+- [ ] Implement a timer for how much time you have spent on the page.
+
+---
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] Follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] Refactor your code so that you ditch the static array of objects and instead fetch the recipes data from your API.
+- [ ] Implement functionality to search for an ingredient, fetch and display the relevant ingredient prices for a recipe
+- [ ] Ensure all the functionality is working smoothly after refactoring.
+
+---
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] You used promise chaining last week - now rewrite the fetch in the "async await" approach.
+- [ ] Use the fuunctions created in preivous week and build functionality to:
+- [ ] Find a recipe by a provided search word to check in the recipe title.
+- [ ] Sort the recipe array by the amount of ingredients needed.
+
+---
+
+### `JS3 week3` - Classes, Revision and Presentation of projects
+
+- [ ] Rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] Make improvements to the style or functionality or add additional functionality.
+- [ ] Prepare to showcase your project to external people, talk through your code and explain what you have implemented.
+
+
+---
+
+
+
+
+## Project completion checklist ✅
+
+- [ ] I can see a page with a list of recipes displayed in a grid;
+- [ ] I can see the most important details about a recipe displayed in a nice and readable way;
+- [ ] I can search for recipes by title, typing in a search keyword;
+- [ ] I can sort the recipe array by the amount of ingredients needed;
+- [ ] I can search for an ingredient, fetch and display the relevant ingredient prices for a recipe;
+- [ ] I can use a cooking timer that alerts and/or rings once the time is up;
+- [ ] I can see a timer for how much time I have spent on the page.
diff --git a/homework-projects/readme.md b/homework-projects/readme.md
new file mode 100644
index 00000000..68fe1daa
--- /dev/null
+++ b/homework-projects/readme.md
@@ -0,0 +1,60 @@
+# WHAT
+
+During the JS2 and JS3 modules, you will be working on a project instead of the usual weekly homework assignments (which you can still do, as optional practice). Each week, you will be required to add new features to your project. By the end of JS3, you will have built an actual app using your newly gained knowledge and coding skills!
+
+
+
+
+
+
+# WHY
+
+We're doing this for four main reasons:
+
+- You will gain experience and an understanding of what it's like to work on **one continuous project**, instead of switching contexts with each new homework assignment.
+- You will apply what you learned every week and understand how each new method can be implemented into an actual product.
+- You will build a solid project for your portfolio that you can showcase on your CV and in future tech interviews!
+- You will gain experience presenting your project and code in a 'mini-tech interview' at the end of JS3.
+
+
+
+# PROJECT IDEAS
+
+[Currency Converter](projects/currency-converter/currency-converter.md)
+[Memory Game](projects/memory-game/memory-game.md)
+[Movie App](projects/movie-app/movie-app.md)
+[Quiz App](projects/quiz-app/quiz-app.md)
+[Recipe App](projects/recipe-app/recipe-app.md)
+
+> [!NOTE]
+> New projects are welcome to be added by mentors. Just follow a similar structure to the existing ones, and submit it as a PR for review by staff and other mentors.
+
+
+
+# HOW
+
+The projects will either be worked on individually, in a pair or as a group. You may also be set up to peer review another's project. This is up to the staff and mentors running the module.
+
+
+
+First, you will pick a project idea from above. Each week, you will have specific tasks that you have to deliver. Those tasks are provided in your chosen project description. The tasks are designed to help you practice the main learning points throughout the JS2 and JS3 modules.
+
+
+
+You will work in your project repository for JS2 and JS3 (not the central homework repository!), and you will submit the weekly task in the usual way by creating a Pull Request.
+
+During JS2 and JS3, refer to the relevant [homework submission guide](guides/weekly-submission-guide.md).
+
+The main difference is that you will be on a different repository and that you will merge the PR after implementing the review-based improvements, while all the technical steps are the same as always.
+
+
+
+# DEPLOYMENT
+
+So you can demo your project easily both at the end of the project, but also to future employers, it is a requirement that you deploy the project. You can use the [HackYourFuture project template](https://github.com/HackYourFuture-CPH/hyf-project-template) as a starting point, or an otherwise agreed upon process by the staff and mentors.
+
+
+
+# CONCLUSION
+
+When you wrap up your project in JS3 week3, you will get a chance to present your project either as a video recording or on a demo day. If your team is hosting a demo day, then check out [this guide](guides/demo-day-presentation.md) for how to prepare for the presentation.
diff --git a/javascript1/week1/homework.md b/javascript1/week1/homework.md
index 5cbff414..ff6976d6 100644
--- a/javascript1/week1/homework.md
+++ b/javascript1/week1/homework.md
@@ -8,7 +8,7 @@
### Get git ready to work on homework
-Using the `hyf-homework` repo. In the terminal run `git status`
+Using the ` your hyf-homework` repo. In the terminal run `git status`
If there are changes that have not been committed, figure out what to do with those changes
@@ -20,7 +20,7 @@ When you have figured out what to do with the changes and fixed those. Write `gi
#### Creating the branch
-Using the `hyf-homework` repo write this command
+Using the `your hyf-homework` repo write this command
`git checkout main` - You are now on the `main` branch
@@ -67,7 +67,7 @@ Cool now lets venture into the world and see which problems we can solve with so
> You are talking to a friend who suddently looks at you and asks: "How old will you be in 2045?" Hmm you remember the year you were born and try to do some calculation: Born in 1987 + 3 that's 1990. 90 - 40 is 50 + 5 thats 58. I will be 58! Wow that was painful! Let's fix that by making some code that automatically does this!
-Create two variables called `yearOfBirth` and `yearFuture`. Assign these your own age and a future year.
+Create two variables called `yearOfBirth` and `yearFuture`. Assign these your birth year and a future year.
What type will these two variables be? Using `yearOfBirth` and `yearFuture` calculate the age and store that in a variable called `age`.
Log out this string: "You will be 40 years old in 2027". With 40 being the result of the `age` variable and 2027 being the `yearFuture` variable. (Hint use string concatenation)
@@ -150,7 +150,7 @@ git push origin javascript-javascript1-week1
---
-Go into the `hyf-homework` repo on https://github.com/ click on the `Pull requests` tab and then click the `New pull request` button
+Go into the ` your hyf-homework` repo on https://github.com/ click on the `Pull requests` tab and then click the `New pull request` button
diff --git a/javascript1/week1/lesson-plan.md b/javascript1/week1/lesson-plan.md
index 385c1cc2..f312a860 100644
--- a/javascript1/week1/lesson-plan.md
+++ b/javascript1/week1/lesson-plan.md
@@ -74,7 +74,7 @@ Here is a Notion Zoey Zou made: https://www.notion.so/JS1-Week1-2fdc88fdd4344c95
## Flipped classroom videos
-[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/master/javascript1/week1/preparation.md#flipped-classroom-videos)
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript1/week1/preparation.md#flipped-classroom-videos)
## Code inspiration
diff --git a/javascript1/week1/preparation.md b/javascript1/week1/preparation.md
index 3c7c4e5a..679a6edc 100644
--- a/javascript1/week1/preparation.md
+++ b/javascript1/week1/preparation.md
@@ -1,7 +1,7 @@
# Preparation
-- [ ] [Read this](https://exploringjs.com/es5/toc.html) up to and including the *Strings* chapter (it’s okay if you don’t understand all of it yet, we will cover these concepts in class as well. Do make sure to write or document the questions you have so we can discuss them in class) (15 min)
+- [ ] [Read this](https://exploringjs.com/es5/ch01.html) up to and including the *Strings* chapter (it’s okay if you don’t understand all of it yet, we will cover these concepts in class as well. Do make sure to write or document the questions you have so we can discuss them in class) (15 min)
- [ ] [JavaScript Introduction at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction) (10 min)
diff --git a/javascript1/week1/readme.md b/javascript1/week1/readme.md
index d3ab4fe7..c13d3436 100644
--- a/javascript1/week1/readme.md
+++ b/javascript1/week1/readme.md
@@ -89,7 +89,7 @@ However, in our communication, we will call these variables arrays.
The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined".
-Whenever you declare a variable, but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it.
+Whenever you declare a variable, but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it - it represents the intentional absence of any object value (read [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/null) for more context).
```js
let x;
@@ -124,7 +124,7 @@ baz.length; //-> 11
### String methods
-> Todo
+More about [string methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String).
## Number
diff --git a/javascript1/week2/homework.md b/javascript1/week2/homework.md
index a3f5c6db..99a25b06 100644
--- a/javascript1/week2/homework.md
+++ b/javascript1/week2/homework.md
@@ -7,7 +7,7 @@ Using the `hyf-homework` repo. In the terminal run `git status`
If there are changes that have not been committed, figure out what to do with those changes
- Should they be committed to another branch?
-- Should they be committed to `master`?
+- Should they be committed to `main`?
- Should they be discarded?
When you have figured out what to do with the changes and fixed those. Write `git status` again. If it says `nothing to commit, working tree clean`. Then you are ready to create the branch for this weeks homework.
@@ -16,7 +16,7 @@ When you have figured out what to do with the changes and fixed those. Write `gi
Using the `hyf-homework` repo write this command
-`git checkout master` - You are now on the `master` branch
+`git checkout main` - You are now on the `main` branch
`git checkout -b javascript-javascript1-week2`
@@ -39,15 +39,15 @@ Just like last homework, lets **warmup our brain**!
Do these freecodecamp challenges. We know this seems like a lot, but the tasks are not so big, so hang in there! If you get stuck on one of the tasks, just go to the next and then return to the difficult task later on.
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/global-vs--local-scope-in-functions/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop/
+- [ ] [Passing values to functions with arguments](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments/)
+- [ ] [Return a value from a function with return](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return/)
+- [ ] [Assignment with a returned value](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value/)
+- [ ] [Local scope and functions](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions/)
+- [ ] [Global vs local scope in functions](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/global-vs--local-scope-in-functions/)
+- [ ] [Introducing else if statements](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements/)
+- [ ] [Logical order in if else statements](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements/)
+- [ ] [Iterate with javascript for loops](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops/)
+- [ ] [Iterate through an array with a for loop](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop/)
Please add your freecodecamp username as answer for this exercise!
@@ -55,7 +55,7 @@ Please add your freecodecamp username as answer for this exercise!
## Step 3: Smart-ease - Goes Global!
-Following the massive success of Smart-ease's first couple of products things have been quite hectic at Smart-ease's shared office space. The phone is constantly ringing from journalists wanting to interview the genius behind the success and the greatest developers want to work for you. [Wired](www.wired.com) wrote an article with the headline "Smart-ease as good as Smarties"
+Following the massive success of Smart-ease's first couple of products things have been quite hectic at Smart-ease's shared office space. The phone is constantly ringing from journalists wanting to interview the genius behind the success and the greatest developers want to work for you. [Wired](https://www.wired.com) wrote an article with the headline "Smart-ease as good as Smarties"
BUT people are asking: What will be the next product that truly defines Smart-ease as the startup of the century?
@@ -225,6 +225,6 @@ Watch [this video](https://www.youtube.com/watch?v=JcT4wmK1VcA) for a more detai
- Create a pull request using the `javascript-javascript1-week2` branch and give your PR the same name `javascript-javascript1-week2`
- Wait for mentor feedback
- Implement feedback, `add`, `commit` and `push` the changes
-- Now you can merge the changes into `master`
+- Now you can merge the changes into `main`
- When merged you can **share the github link** to your classes slack channel if you are **proud of what you did** 💪
- Now celebrate 🎉🎉🎉
diff --git a/javascript1/week2/lesson-plan.md b/javascript1/week2/lesson-plan.md
index 29b547e6..2390d2d7 100644
--- a/javascript1/week2/lesson-plan.md
+++ b/javascript1/week2/lesson-plan.md
@@ -49,7 +49,7 @@ Zoey Zou made a nice Notion lesson plan here: https://www.notion.so/JS1-Week2-8f
## Flipped classroom videos
-[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/master/javascript1/week2/preparation.md#flipped-classroom-videos)
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript1/week2/preparation.md#flipped-classroom-videos)
## Code inspiration
diff --git a/javascript1/week3/homework.md b/javascript1/week3/homework.md
index 1482d2f7..ca56812d 100644
--- a/javascript1/week3/homework.md
+++ b/javascript1/week3/homework.md
@@ -1,29 +1,5 @@
# Homework
-### Get git ready to work on homework
-
-Using the `hyf-homework` repo. In the terminal run `git status`
-
-If there are changes that have not been committed, figure out what to do with those changes
-
-- Should they be committed to another branch?
-- Should they be committed to `master`?
-- Should they be discarded?
-
-When you have figured out what to do with the changes and fixed those. Write `git status` again. If it says `nothing to commit, working tree clean`. Then you are ready to create the branch for this weeks homework.
-
-#### Creating the branch
-
-Using the `hyf-homework` repo write this command
-
-`git checkout master` - You are now on the `master` branch
-
-`git checkout -b javascript-javascript1-week3`
-
-This will create and checkout the branch so you are ready make commits to it
-
-[This video](https://www.youtube.com/watch?v=JcT4wmK1VcA) can help. On slack use the #git-support channel to ask questions about git
-
## Why should i even do this homework?
Array's has lots of helper functions, that is used all the time when developing js applications. It is super helpful to be able to **manipulate an array** like **removing elements** or **adding elements** at specific indexes. Another helpful function of arrays is to know **where a specific item is** in the array.
@@ -41,18 +17,6 @@ Its warmup time!
-### Freecodecamp exercises
-
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object/
-- [ ] https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups/
-
-Please add your freecodecamp username as answer for this exercise!
-
----
### Item array removal
@@ -158,7 +122,7 @@ function logOutSeriesText() {
logOutSeriesText(); // logs out the text found above
```
-## Step 3: Smart-ease - Back to the basics!
+## Smart-ease - Back to the basics!
Smart-ease is going back to the basics. As always Smart-ease starts by helping people fix their problems. So lets venture out into the real world and see what we find:
@@ -291,7 +255,7 @@ Optional
---
-## Step 4 bonus homework
+## Bonus homework
The bonus homework for this week (for those of you want an extra challenge) do the following:
@@ -299,15 +263,4 @@ https://www.codewars.com/kata/job-matching-number-1/train/javascript
https://www.codewars.com/kata/job-matching-number-2/train/javascript
https://www.codewars.com/kata/unfinished-loop-bug-fixing-number-1/train/javascript
-## Step 5: Hand in Homework
-
-Watch [this video](https://www.youtube.com/watch?v=JcT4wmK1VcA) for a more detailed go-through of how to hand in homework!
-- Use the branch called `javascript-javascript1-week3`
-- Add all your changes to this branch in the `javascript-javascript1-week3` folder.
-- Create a pull request using the `javascript-javascript1-week3` branch and give your PR the same name `javascript-javascript1-week3`
-- Wait for mentor feedback
-- Implement feedback, `add`, `commit` and `push` the changes
-- Now you can merge the changes into `master`
-- When merged you can **share the github link** to your classes slack channel if you are **proud of what you did** 💪
-- Now celebrate 🎉🎉🎉
diff --git a/javascript1/week3/lesson-plan.md b/javascript1/week3/lesson-plan.md
index 725246ae..dd4e23dc 100644
--- a/javascript1/week3/lesson-plan.md
+++ b/javascript1/week3/lesson-plan.md
@@ -44,7 +44,7 @@ Zoey Zou has created a nice lesson plan here: https://www.notion.so/JS1-Week3-a0
## Flipped classroom videos
-[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/master/javascript1/week3/preparation.md#flipped-classroom-videos)
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript1/week3/preparation.md#flipped-classroom-videos)
## Code inspiration
diff --git a/javascript1/week4/homework.md b/javascript1/week4/homework.md
index b384f603..952a8790 100644
--- a/javascript1/week4/homework.md
+++ b/javascript1/week4/homework.md
@@ -1,29 +1,5 @@
# Homework
-### Get git ready to work on homework
-
-Using the `hyf-homework` repo. In the terminal run `git status`
-
-If there are changes that have not been committed, figure out what to do with those changes
-
-- Should they be committed to another branch?
-- Should they be committed to `master`?
-- Should they be discarded?
-
-When you have figured out what to do with the changes and fixed those. Write `git status` again. If it says `nothing to commit, working tree clean`. Then you are ready to create the branch for this weeks homework.
-
-#### Creating the branch
-
-Using the `hyf-homework` repo write this command
-
-`git checkout master` - You are now on the `master` branch
-
-`git checkout -b javascript-javascript1-week4`
-
-This will create and checkout the branch so you are ready make commits to it
-
-[This video](https://www.youtube.com/watch?v=JcT4wmK1VcA) can help. On slack use the #git-support channel to ask questions about git
-
## Why should i even do this homework?
Understanding the basics of Javascript is SUPER important. Therefore this homework focuses on repeating the basics to really have a solid understanding of this.
@@ -39,10 +15,11 @@ Finish the exercises from the class!
## Codewars
-Complete these Katas in codewars:
-- 
-- 
-- 
+
+Complete these Katas in codewars:
+- [7kyu Vowel Count](https://www.codewars.com/kata/54ff3102c1bad923760001f3)
+- [7kyu Digit*Digit](https://www.codewars.com/kata/546e2562b03326a88e000020)
+- [7kyu Highest and Lowest](https://www.codewars.com/kata/554b4ac871d6813a03000035)
Post a link to your codewars profile when you sumbmit the homework!
@@ -77,19 +54,6 @@ When you are done, add your `getReply` function and global variables to this Cod
---> https://codesandbox.io/s/beautiful-worker-gnhbw <---
-## Hand in Homework:
-
-Watch [this video](https://www.youtube.com/watch?v=JcT4wmK1VcA) for a more detailed go-through of how to hand in homework!
-
-- Use the branch called `javascript-javascript1-week4`
-- Add all your changes to this branch in the `javascript-javascript1-week4` folder.
-- Go through the [Homework checklist](#homework-checklist)
-- Create a pull request using the `javascript-javascript1-week4` branch and give your PR the same name `javascript-javascript1-week4`
-- Wait for mentor feedback
-- Implement feedback, `add`, `commit` and `push` the changes
-- Now you can merge the changes into `master`
-- When merged you can **share the github link** to your classes slack channel if you are **proud of what you did** 💪
-- Now celebrate 🎉🎉🎉
## Homework checklist
diff --git a/javascript2/readme.md b/javascript2/readme.md
index 9222609d..6cff4a2c 100644
--- a/javascript2/readme.md
+++ b/javascript2/readme.md
@@ -2,6 +2,6 @@
| Week | Topic | Preparation | Homework | Lesson plan |
| ---- | ----- | ----------- | -------- |------------ |
-| 1. | Browser environment DOM manipulation DOM event listeners | [Preparation](week1/preparation.md) | [Homework](week1/homework.md) | [Lesson plan](week1/lesson-plan.md)|
-| 2. | Array functions [Arrow function](week2/readme.md#arrow-function) | [Preparation](week2/preparation.md) | [Homework](week2/homework.md) | [Lesson plan](week2/lesson-plan.md)|
-| 3. | Callback function Asyncronicity Scope | [Preparation](week3/preparation.md) | [Homework](week3/homework.md) | [Lesson plan](week3/lesson-plan.md)|
+| 1. | Browser environment DOM manipulation DOM event listeners | [Preparation](week1/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week1/lesson-plan.md)|
+| 2. | Array functions [Arrow function](week2/readme.md#arrow-function) | [Preparation](week2/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week2/lesson-plan.md)|
+| 3. | Callback function Asyncronicity Scope | [Preparation](week3/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week3/lesson-plan.md)|
diff --git a/javascript2/week1/lesson-plan.md b/javascript2/week1/lesson-plan.md
index e83af8fb..0c7ea406 100644
--- a/javascript2/week1/lesson-plan.md
+++ b/javascript2/week1/lesson-plan.md
@@ -47,7 +47,7 @@ Really try in this class to do short teaching and lots of exercises!
## Flipped classroom videos
-[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/master/javascript2/week1/preparation.md#flipped-classroom-videos)
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week1/preparation.md#flipped-classroom-videos)
## Code inspiration
diff --git a/javascript2/week1/homework.md b/javascript2/week1/optional-homework.md
similarity index 76%
rename from javascript2/week1/homework.md
rename to javascript2/week1/optional-homework.md
index 103da910..de25854b 100644
--- a/javascript2/week1/homework.md
+++ b/javascript2/week1/optional-homework.md
@@ -1,38 +1,27 @@
-# Homework
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
-## Start the homework
-
-Need to brush up on the homework setup process? Check [this](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) out before you get into some git confusion!
+# Optional Homework
## So why this homework?
-**Interacting with the DOM is a crucial part** of building a website. If we cannot interact with the DOM and the javascript we write cannot be used in a browser. **Connecting javascript to the browser opens up a new world of possibilities** where only the imagination is the limiting factor.
+**Interacting with the DOM is a crucial part** of building a website. If we cannot interact with the DOM then the javascript we write cannot change what we see in the browser. **Connecting javascript to the browser opens up a new world of possibilities** where only the imagination is the limiting factor.
## Overview of homework
-1. **[Problem solving cardio:](#1-problem-solving-cardio)** Warmup exercise that includes
-
- - Find the shortest word
- - Find and count the Danish letters
-
-2. ⭐ **[Spirit animal name generator:](#2-spirit-animal-name-generator)** Create an interactive page where the user can enter the name and receive a spirit animal name
-
-3. 🌟 **[hyfBay:](#hyfbay)** It's a single-page app where users can search for products. We will be building this website step by step over this course.
-
# 1. Problem solving cardio
Lets exercise our problem solving abilities!
-## 1.1. Find the shortest word
+## 1.1. codewars!
-Write a function that finds the shortest word of an array of words
-
-```js
-const danishWords = ["bil", "plante", "kaffe", "bog", "ø", "planetarium"];
-notThisFunctionName(danishWords); // returns 'ø'
-```
+Complete these Katas:
+- [8kyu Remove First and Last Character](https://www.codewars.com/kata/56bc28ad5bdaeb48760009b0)
+- [8kyu Counting sheep...](https://www.codewars.com/kata/54edbc7200b811e956000556)
+- [7kyu String ends with?](https://www.codewars.com/kata/51f2d1cafc9c0f745c00037d)
+- [7kyu Odd or Even?](https://www.codewars.com/kata/5949481f86420f59480000e7)
## 1.2. Find and count the Danish letters
@@ -124,8 +113,3 @@ Here is a possible way to render the products
3. [Append the `li`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) to the `ul`
-
-## Hand in homework
-
-Need to brush up on the homework hand-in process?
-Check [this resource](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) to remember how to hand in the homework correctly!
diff --git a/javascript2/week1/homework/hyf-bay/hyfBayHelpers.js b/javascript2/week1/optional-homework/hyf-bay/hyfBayHelpers.js
similarity index 100%
rename from javascript2/week1/homework/hyf-bay/hyfBayHelpers.js
rename to javascript2/week1/optional-homework/hyf-bay/hyfBayHelpers.js
diff --git a/javascript2/week1/homework/hyf-bay/index.html b/javascript2/week1/optional-homework/hyf-bay/index.html
similarity index 100%
rename from javascript2/week1/homework/hyf-bay/index.html
rename to javascript2/week1/optional-homework/hyf-bay/index.html
diff --git a/javascript2/week1/homework/hyf-bay/main.css b/javascript2/week1/optional-homework/hyf-bay/main.css
similarity index 100%
rename from javascript2/week1/homework/hyf-bay/main.css
rename to javascript2/week1/optional-homework/hyf-bay/main.css
diff --git a/javascript2/week1/homework/hyf-bay/main.js b/javascript2/week1/optional-homework/hyf-bay/main.js
similarity index 100%
rename from javascript2/week1/homework/hyf-bay/main.js
rename to javascript2/week1/optional-homework/hyf-bay/main.js
diff --git a/javascript2/week1/readme.md b/javascript2/week1/readme.md
index 43fbf288..3886978c 100644
--- a/javascript2/week1/readme.md
+++ b/javascript2/week1/readme.md
@@ -19,7 +19,7 @@ Event listeners
## Relevant links
* [Preparation](preparation.md)
-* [Homework](homework.md)
+* [Homework](/homework-projects/readme.md)
* [Lesson plan](lesson-plan.md)
diff --git a/javascript2/week2/lesson-plan.md b/javascript2/week2/lesson-plan.md
index ee1d8473..0c6235a8 100644
--- a/javascript2/week2/lesson-plan.md
+++ b/javascript2/week2/lesson-plan.md
@@ -1,4 +1,11 @@
# Lesson plan
+
+## Lesson materials
+These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.
+- [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-2-Week-2-cd0c1163d0264215824dc17580c97825?pvs=4) (by [Thomas](https://github.com/te-online))
+
+---
+
```
> Focus on having lots of in class exercises.
@@ -47,7 +54,7 @@ If you find anything that could be improved, please create a pull request! We we
## Flipped classroom videos
-[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/master/javascript2/week2/preparation.md#flipped-classroom-videos)
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week2/preparation.md#flipped-classroom-videos)
## Code inspiration
diff --git a/javascript2/week2/homework.md b/javascript2/week2/optional-homework.md
similarity index 91%
rename from javascript2/week2/homework.md
rename to javascript2/week2/optional-homework.md
index f2e816cc..178c4024 100644
--- a/javascript2/week2/homework.md
+++ b/javascript2/week2/optional-homework.md
@@ -1,8 +1,7 @@
-# Homework
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
-## Start the homework
-
-Need to brush up on the homework setup process? Check [this](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) out before you get into some git confusion!
+# Optional Homework
## Why should i even do this homework?
@@ -54,7 +53,17 @@ console.log("The doubled numbers are", newNumbers); // [2, 6]
Rewrite the above program using `map` and `filter` don't forget to use arrow functions.
-## 1.2. Working with movies
+
+
+## 1.2. codewars!
+
+Complete these Katas:
+- [8 kyu To square(root) or not to square(root)](https://www.codewars.com/kata/57f6ad55cca6e045d2000627)
+- [8 kyu Removing Elements](https://www.codewars.com/kata/5769b3802ae6f8e4890009d2)
+
+
+
+## 1.3. Working with movies
@@ -64,7 +73,7 @@ Copy the movies array in the [movies](homework/movies.js) file. Use this array t
2. Create an array of movie titles with **long movie titles**
3. Count the **number of movies** made between 1980-1989 (including both the years)
4. Create a new array that has an **extra key called tag**. The tag is based on the rating: Good (>= 7), Average (>= 4 and < 7), Bad (< 4)
-5. **Using [chaining](readme.md#Chaining)**, first filter the movies array to only contain the movies rated higher than 6. Now map the movies array to only the rating of the movies.
+5. **Using [chaining](readme.md#chaining)**, first filter the movies array to only contain the movies rated higher than 6. Now map the movies array to only the rating of the movies.
6. **Count the total number of movies** containing any of following keywords: `Surfer`, `Alien` or `Benjamin`. So if there were 3 movies that contained `Surfer`, 1 with `Alien` and 2 with `Benjamin`, you would return 6. Can you make sure the search is case insensitive?
7. Create an array of movies where a **word in the title is duplicated**. Fx "Star **Wars**: The Clone **Wars**" the word **Wars** is duplicated. Here are some madeup examples of movies with duplicated words in the title: "**The** three men and **the** pistol", "**Chase** three - The final **chase**"
8. Calculate the **average rating** of all the movies using [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce). _Optional_
@@ -126,9 +135,4 @@ This task is more open ended! So you need to come up with fx how the user should
Give the user the possibility to sort the products. That could fx be on price, name, rating or all of the above!
-
-
-## Hand in homework
-
-Need to brush up on the homework hand-in process?
-Check [this resource](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) to remember how to hand in the homework correctly!
+
\ No newline at end of file
diff --git a/javascript2/week2/homework/hyf-bay-price.gif b/javascript2/week2/optional-homework/hyf-bay-price.gif
similarity index 100%
rename from javascript2/week2/homework/hyf-bay-price.gif
rename to javascript2/week2/optional-homework/hyf-bay-price.gif
diff --git a/javascript2/week2/homework/hyf-bay-searching.gif b/javascript2/week2/optional-homework/hyf-bay-searching.gif
similarity index 100%
rename from javascript2/week2/homework/hyf-bay-searching.gif
rename to javascript2/week2/optional-homework/hyf-bay-searching.gif
diff --git a/javascript2/week2/homework/hyf-bay/hyfBayHelpers.js b/javascript2/week2/optional-homework/hyf-bay/hyfBayHelpers.js
similarity index 100%
rename from javascript2/week2/homework/hyf-bay/hyfBayHelpers.js
rename to javascript2/week2/optional-homework/hyf-bay/hyfBayHelpers.js
diff --git a/javascript2/week2/homework/hyf-bay/index.html b/javascript2/week2/optional-homework/hyf-bay/index.html
similarity index 100%
rename from javascript2/week2/homework/hyf-bay/index.html
rename to javascript2/week2/optional-homework/hyf-bay/index.html
diff --git a/javascript2/week2/homework/hyf-bay/main.css b/javascript2/week2/optional-homework/hyf-bay/main.css
similarity index 100%
rename from javascript2/week2/homework/hyf-bay/main.css
rename to javascript2/week2/optional-homework/hyf-bay/main.css
diff --git a/javascript2/week2/homework/hyf-bay/main.js b/javascript2/week2/optional-homework/hyf-bay/main.js
similarity index 100%
rename from javascript2/week2/homework/hyf-bay/main.js
rename to javascript2/week2/optional-homework/hyf-bay/main.js
diff --git a/javascript2/week2/homework/movies.js b/javascript2/week2/optional-homework/movies.js
similarity index 100%
rename from javascript2/week2/homework/movies.js
rename to javascript2/week2/optional-homework/movies.js
diff --git a/javascript2/week2/readme.md b/javascript2/week2/readme.md
index 47141060..4cec8299 100644
--- a/javascript2/week2/readme.md
+++ b/javascript2/week2/readme.md
@@ -9,7 +9,7 @@
-->
## Relevant links
* [Preparation](preparation.md)
-* [Homework](homework.md)
+* [Homework](/homework-projects/readme.md)
* [Lesson plan](lesson-plan.md)
diff --git a/javascript2/week3/lesson-plan.md b/javascript2/week3/lesson-plan.md
index ce45d3f9..2ee80efc 100644
--- a/javascript2/week3/lesson-plan.md
+++ b/javascript2/week3/lesson-plan.md
@@ -1,4 +1,11 @@
# Lesson plan
+
+## Lesson materials
+These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.
+- [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-2-Week-3-6bce73b3a0bf47a3ad32ed12ee4d0519?pvs=4) (by [Thomas](https://github.com/te-online))
+
+---
+
```
> Focus on having lots of in class exercises.
@@ -35,7 +42,7 @@ document.querySelector('button').addEventListner('click', logOuttext());
Good example of practical example of callbacks: https://github.com/HackYourFuture-CPH/JavaScript/blob/class08/JavaScript2/Week5/classwork/extra_examples.md
-At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/master/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
+At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/main/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
This is super good at explaining function logic
@@ -43,7 +50,7 @@ This is super good at explaining function logic
## Flipped classroom videos
-[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/master/javascript2/week3/preparation.md#flipped-classroom-videos)
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week3/preparation.md#flipped-classroom-videos)
## Code inspiration
diff --git a/javascript2/week3/homework.md b/javascript2/week3/optional-homework.md
similarity index 83%
rename from javascript2/week3/homework.md
rename to javascript2/week3/optional-homework.md
index fc0b58da..26340076 100644
--- a/javascript2/week3/homework.md
+++ b/javascript2/week3/optional-homework.md
@@ -1,8 +1,7 @@
-# Homework
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
-## Start the homework
-
-Need to brush up on the homework setup process? Check [this](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) out before you get into some git confusion!
+# Optional Homework
## So why this homework?
@@ -10,22 +9,14 @@ Working with functions in javascript is such an essential part of working with j
We want you to realise that **functions are just variables** in javascript. It is exactly the same as string or a number. This homework forces you into using functions in weird ways that forces you to think differently about functions.
-## Overview of homework
-
-1. **[Warmup:](#1-warmup)** Warmup exercise that includes
- - ⭐ Create a function to make delay in logging out text
- - calling a function within a function
- - ⭐ Log out location
- - Implement runAfterDelay function
- - Simulate double click with click event
- - Implement joke creator
+# 1. Warmup
-2. ⭐ **[Function as a variable:](#2-function-as-a-variable)**
+## 1.1 codewars!
-3. 🌟 **[The fastest presser in this realm:](#3-the-fastest-presser-in-this-realm)** It's a game where two people compete about who can press a key most often.
+- [7 kyu Product Array (Array Series #5)](https://www.codewars.com/kata/5a905c2157c562994900009d/javascript)
-# 1. Warmup
+## 1.2 functions!
If you struggle to do this weeks homework there are a couple of things to do:
@@ -116,19 +107,4 @@ Use the library in your page by adding this line before you load your main.js:
``
----
-
-If you have **any feedback to this specific homework** please fill in this [**quick google form**](https://forms.gle/S5ag1NKg7MdTXgry5)
-
-
-
-## Hand in homework
-
-Need to brush up on the homework hand-in process?
-Check [this resource](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) to remember how to hand in the homework correctly!
-
-
-
-## Feedback
-
-And finally, please take 5 minutes to give the mentors and staff feedback by filling out the survey [here](https://forms.gle/Kdt8WEdmx595hijN9).
+
\ No newline at end of file
diff --git a/javascript2/week3/homework/fastest-clicker.gif b/javascript2/week3/optional-homework/fastest-clicker.gif
similarity index 100%
rename from javascript2/week3/homework/fastest-clicker.gif
rename to javascript2/week3/optional-homework/fastest-clicker.gif
diff --git a/javascript2/week3/preparation.md b/javascript2/week3/preparation.md
index 3dc789d3..b8e4c6f2 100644
--- a/javascript2/week3/preparation.md
+++ b/javascript2/week3/preparation.md
@@ -2,6 +2,7 @@
- Callback functions: https://www.youtube.com/watch?v=pTbSfCT42_M (15 min)
- Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/ (10 min)
+
_Please go through the material and come to class prepared!_
diff --git a/javascript2/week3/readme.md b/javascript2/week3/readme.md
index b5bf30ea..18fa06ae 100644
--- a/javascript2/week3/readme.md
+++ b/javascript2/week3/readme.md
@@ -10,7 +10,7 @@ Functions advanced
## Relevant links
* [Preparation](preparation.md)
-* [Homework](homework.md)
+* [Homework](/homework-projects/readme.md)
* [Lesson plan](lesson-plan.md)
diff --git a/javascript3/readme.md b/javascript3/readme.md
index b6ef9a80..e67aef36 100644
--- a/javascript3/readme.md
+++ b/javascript3/readme.md
@@ -2,6 +2,6 @@
| Week | Topic | Preparation | Homework | Lesson plan |
| ---- | ----- | ----------- | -------- |------------ |
-| 7. | Json Apis Fetch| [Preparation](week1/preparation.md) | [Homework](week1/homework.md) | [Lesson plan](week1/lesson-plan.md)|
-| 8. | Promises Async/Await | [Preparation](week2/preparation.md) | [Homework](week2/homework.md) | [Lesson plan](week2/lesson-plan.md)|
-| 9. | Classes Promises advanced | [Preparation](week3/preparation.md)| [Homework](week3/homework.md) | [Lesson plan](week3/lesson-plan.md) |
+| 7. | Json Apis Fetch| [Preparation](week1/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week1/lesson-plan.md)|
+| 8. | Promises Async/Await | [Preparation](week2/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week2/lesson-plan.md)|
+| 9. | Classes Promises advanced | [Preparation](week3/preparation.md)| [Homework](/homework-projects/readme.md) | [Lesson plan](week3/lesson-plan.md) |
diff --git a/javascript3/week1/lesson-plan.md b/javascript3/week1/lesson-plan.md
index 3f3b66bc..c65b8b66 100644
--- a/javascript3/week1/lesson-plan.md
+++ b/javascript3/week1/lesson-plan.md
@@ -1,4 +1,11 @@
# Lesson plan
+
+## Lesson materials
+These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.
+- [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-3-Week-1-c6fd6d7243454ac0b519c17829bf8761?pvs=4) (by [Thomas](https://github.com/te-online))
+
+---
+
```
> Focus on having lots of in class exercises.
@@ -29,19 +36,19 @@ If you find anything that could be improved then please create a pull request! W
- Apis
- The focus should be on consuming api's with `get` method.
- Give an example of an api (preferably one with an accesstoken, showing that part aswell)
- - Explain conceptually what an api is (interface that hides abstraction). Explain how paths and query parameters work. Do not show how an api is implemented. We show that in the node class. Good analogies [here](https://sidewaysdictionary.com/#/term/api) and [here](https://www.reddit.com/r/webdev/comments/en04ct/i_created_a_word_suggestions_api_to_use_on_a/fdtmj60/)
+ - Explain conceptually what an api is (interface that hides abstraction). Explain how paths and query parameters work. Do not show how an api is implemented. We show that in the node class. Good analogy [here](https://www.reddit.com/r/webdev/comments/en04ct/i_created_a_word_suggestions_api_to_use_on_a/fdtmj60/)
- [Code inspiration](#apis)
- Fetch (No promise explanation! Focus on usage)
- Focus on usage let the students copy the fetch script and use it from there. Next week promises will be explained!
- [Code inspiration](#fetch)
- [Exercise 1](#astronauts-in-space), [exercise 2](#dog-fan-website)
-At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/master/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
+At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/main/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
## Flipped classroom videos
-[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/master/javascript3/week1/preparation.md#flipped-classroom-videos)
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript3/week1/preparation.md#flipped-classroom-videos)
## Code inspiration
diff --git a/javascript3/week1/homework.md b/javascript3/week1/optional-homework.md
similarity index 90%
rename from javascript3/week1/homework.md
rename to javascript3/week1/optional-homework.md
index 5680c745..20c7d569 100644
--- a/javascript3/week1/homework.md
+++ b/javascript3/week1/optional-homework.md
@@ -1,8 +1,7 @@
-# Homework
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
-## Start the homework
-
-Need to brush up on the homework setup process? Check [this](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) out before you get into some git confusion!
+# Optional Homework
## Why should i even do this homework?
@@ -13,7 +12,7 @@ It is how autocomplete can receive suggestions for a search query and how infini
If you struggle to do this weeks homework there are a couple of things to do:
- Try watch these two videos: https://www.youtube.com/watch?v=uxf0--uiX0I, https://www.youtube.com/watch?v=tc8DU14qX6I
-- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=0piVFh9S0Kc), [part 2](https://www.youtube.com/watch?v=DjdFsV1X9-o), [part 3](https://www.youtube.com/watch?v=5uN00cZzUKM) [part 4](https://www.youtube.com/watch?v=GB1N8XxFP7I)
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=0piVFh9S0Kc), [part 2](https://www.youtube.com/watch?v=DjdFsV1X9-o), [part 3](https://www.youtube.com/watch?v=5uN00cZzUKM), [part 4](https://www.youtube.com/watch?v=GB1N8XxFP7I)
- Read up on [fetch](https://javascript.info/fetch), [JSON](https://javascript.info/json). The articles are a little tricky
## Create your own json file
@@ -100,9 +99,4 @@ Try break this problem into **smaller problems** and write down how you are goin
-
-
-## Hand in homework
-
-Need to brush up on the homework hand-in process?
-Check [this resource](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) to remember how to hand in the homework correctly!
+
\ No newline at end of file
diff --git a/javascript3/week1/preparation.md b/javascript3/week1/preparation.md
index 229867ab..7b28394f 100644
--- a/javascript3/week1/preparation.md
+++ b/javascript3/week1/preparation.md
@@ -2,7 +2,8 @@
- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (5 min)
-- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work (10 min)
+- Read about APIs! The resources keep changing, but the core concepts are everlasting, so we think it is best if you search `"what are APIs"` and watch/listen/read around until you get a good basic idea! 👀 👂🏽 🧐
+Tip: try searching `"API waiter example"` - it is a good classic analogy explaining how APIs work!
- A recap of higher order functions & arrays: [video](https://www.youtube.com/watch?v=rRgD1yVwIvE&t=1s&ab_channel=TraversyMedia) (~35 mins)
diff --git a/javascript3/week1/readme.md b/javascript3/week1/readme.md
index 4911fe0f..d46798d1 100644
--- a/javascript3/week1/readme.md
+++ b/javascript3/week1/readme.md
@@ -5,5 +5,5 @@
# Relevant links
* [Preparation](preparation.md)
-* [Homework](homework.md)
+* [Homework](/homework-projects/readme.md)
* [Lesson plan](lesson-plan.md)
\ No newline at end of file
diff --git a/javascript3/week2/exercise.html b/javascript3/week2/exercise.html
index b1203dce..baa2b60c 100644
--- a/javascript3/week2/exercise.html
+++ b/javascript3/week2/exercise.html
@@ -1,5 +1,5 @@
+
+---
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of picture objects. Even a small one is perfectly enough, but go as big as you want! A picture object should ideally have at least an id, a name and a picture url.
+Continue with the format of the picture object you used last week or improve it and refactor!
+
+- [ ] generate a new array where each card object is added to it twice, but in a random order. Think about _doubling_ and _shuffling_ an array when you research how to complete this task.
+- [ ] traverse through the new array of picture objects and display all the cards in a grid.
+- [ ] include the functionality from the previous week so that each card will flip from the picture to the backside pattern and back when it is clicked.
+
+
+
+---
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+- [ ] implement a counter for how many times in total you have flipped a card (one counter for all the cards). Note that you are not supposed to count clicks! The purpose is to count how many times you have _revealed_ the card picture - in other words, you are couunting player moves.
+- [ ] implement a timer for how much time has passed since you first clicked on a card.
+- [ ] adjust the functionality so that once 2 cards are flipped, they stay flipped for X seconds, after which they flip back down automatically.
+
+---
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] refactor your code so that you ditch the static array of objects and instead fetch the cards data from your API.
+- [ ] ensure all the functionality is working smoothly after refactoring.
+
+---
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] you used promise chaining last week - now rewrite the fetch in the "async await" approach.
+- [ ] implement the functionality for it to work like and actual memory game:
+
+At least:
+
+- You can only flip 2 cards at a time.
+- If the cards match, they are removed from the DOM.
+- The game reloads once all cards are removed.
+
+At most:
+
+- Implement the tasks listed under "At least".
+- Use the counter and timer that you implemented before and stop the game when a certain count or time is reached. The time or count can be hardcoded or user-submitted via an input.
+
+---
+
+### `JS3 week3` - Classes, Revision and Presentation of projects
+
+- [ ] rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] make improvements to the style or functionality or add additional functionality.
+- [ ] Prepare to showcase your project to external people, talk through your code and explain what you have implemented.
+
+
+
+---
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of movie objects. Even a small one is perfectly enough, but go as big as you want!
+Continue with the format of the movie object you used last week or improve it and refactor!
+
+- [ ] traverse the movie array and display all the movies on the page in a grid via DOM manipulation.
+- [ ] manipulate the movie array, implementing these functions:
+- a function for searching for a provided keyword in the movie title;
+- a function for sorting the movie array by one or a few selected properties.
+- [ ] optional: as you might guess, you will later use these functions to implement searching and sorting functionality, so feel free to add any other array-manipulation functions of your choice!
+
+---
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+Here you will develop some features that will differentiate your movie platform from the competition!
+
+- [ ] implement a timer where you can set a time for how much time you give yourself to pick a movie to watch, the timer alerts or rings when then time is over.
+- [ ] implement a timer to show how long you have spent on the page.
+
+---
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] refactor your code so that you ditch the static array of objects and instead fetch the movies data from your API.
+- [ ] ensure all the functionality is working smoothly after refactoring.
+
+---
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] you used promise chaining last week - now rewrite the fetch in the "async await" approach
+- [ ] fit and apply one (or all) of your functions from JS2 week2 to manipulate the displayed movies:
+
+- a function to search a movie by title that a user submits via an input, displaying only the matching movies.
+- a function to sort the movies by a property selected via a dropdown.
+- a function to filter the movies by a specific constraint submitted by the user via an input (or hardcoded), only displaying the relevant movies.
+
+---
+
+### `JS3 week3` - Classes, Promises advanced
+
+- [ ] rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] make improvements to the style or functionality or add additional functionality.
+
+---
+
+