Merge pull request HackYourFuture-CPH#186 from HackYourFuture-CPH/project-based-homework-updates

Homework projects

Author: adamblanchard

homework-projects/README.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!

homework-projects/guides/demo-day-presentation.md

@@ -13,7 +13,8 @@ It is expected that your app will have at least these features and functionality
 - Timeout for the market open/close
 - Call the currency API to receive the rates dynamically
 
-<br/>
+> [!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:
 

homework-projects/projects/currency-converter/currency-converter.md

@@ -5,6 +5,9 @@
 You joined an online game platform startup and your task is to build one of the small classic games. <br/>
 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

homework-projects/projects/memory-game/memory-game.md

@@ -6,6 +6,9 @@ You joined a startup that has the ambition to build the best new movie streaming
 Your taks will be to build a simple prototype to showcase the look of the platform and some simple functionality. <br/>
 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

homework-projects/projects/movie-app/movie-app.md

@@ -5,6 +5,9 @@
 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

homework-projects/projects/quiz-app/quiz-app.md

@@ -4,6 +4,9 @@
 
 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

homework-projects/projects/recipe-app/recipe-app.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!
+<br/>
+
+![](assets/project-flow.png)
+
+<br/>
+
+# 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.
+
+<br/>
+
+# PROJECT IDEAS
+
+[Currency Converter](projects/currency-converter/currency-converter.md) <br/>
+[Memory Game](projects/memory-game/memory-game.md)<br/>
+[Movie App](projects/movie-app/movie-app.md)<br/>
+[Quiz App](projects/quiz-app/quiz-app.md)<br/>
+[Recipe App](projects/recipe-app/recipe-app.md)<br/>
+
+> [!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.
+
+<br/>
+
+# 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.
+
+<br/>
+
+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.
+
+<br/>
+
+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.
+
+<br/>
+
+# 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.
+
+<br/>
+
+# 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.

homework-projects/readme.md

@@ -2,6 +2,6 @@
 
 | Week | Topic | Preparation | Homework | Lesson plan |
 | ---- | ----- | ----------- | -------- |------------ |
-| 1.   | Browser environment<br>DOM manipulation <br> DOM event listeners | [Preparation](week1/preparation.md) | [Homework](week1/homework.md) | [Lesson plan](week1/lesson-plan.md)|
-| 2.   | Array functions <br> [Arrow function](week2/readme.md#arrow-function) | [Preparation](week2/preparation.md) | [Homework](week2/homework.md) | [Lesson plan](week2/lesson-plan.md)|
-| 3.   | Callback function <br> Asyncronicity <br> Scope | [Preparation](week3/preparation.md) | [Homework](week3/homework.md) | [Lesson plan](week3/lesson-plan.md)|
+| 1.   | Browser environment<br>DOM manipulation <br> DOM event listeners | [Preparation](week1/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week1/lesson-plan.md)|
+| 2.   | Array functions <br> [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 <br> Asyncronicity <br> Scope | [Preparation](week3/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week3/lesson-plan.md)|

javascript2/readme.md

@@ -1,11 +1,7 @@
 > [!WARNING]
-> You do not need to complete these homeworks. We are currently testing new homeworks for JS2 and JS3. More info [here](https://github.com/HackYourFuture-CPH/js-projects).
+> 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.
 
-# Homework
-
-## Start the homework
-
-Need to brush up on the homework setup process? Check [this](https://github.com/HackYourFuture-CPH/Git/blob/main/homework-submission.md) out before you get into some git confusion!
+# Optional Homework
 
 ## So why this homework?
 
@@ -117,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`
 
 <br/>
-
-## Hand in homework
-
-Need to brush up on the homework hand-in process?<br/>
-Check [this resource](https://github.com/HackYourFuture-CPH/Git/blob/main/homework-submission.md) to remember how to hand in the homework correctly!

javascript2/week1/homework.md renamed to javascript2/week1/optional-homework.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)
 
 

javascript2/week1/homework/hyf-bay/hyfBayHelpers.js renamed to javascript2/week1/optional-homework/hyf-bay/hyfBayHelpers.js

@@ -1,11 +1,7 @@
 > [!WARNING]
-> You do not need to complete these homeworks. We are currently testing new homeworks for JS2 and JS3. More info [here](https://github.com/HackYourFuture-CPH/js-projects).
+> 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.
 
-# Homework
-
-## Start the homework
-
-Need to brush up on the homework setup process? Check [this](https://github.com/HackYourFuture-CPH/Git/blob/main/homework-submission.md) out before you get into some git confusion!
+# Optional Homework
 
 ## Why should i even do this homework?
 
@@ -139,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!
 
-<br/>
-
-## Hand in homework
-
-Need to brush up on the homework hand-in process?<br/>
-Check [this resource](https://github.com/HackYourFuture-CPH/Git/blob/main/homework-submission.md) to remember how to hand in the homework correctly!
+<br/>

javascript2/week1/homework/hyf-bay/index.html renamed to javascript2/week1/optional-homework/hyf-bay/index.html

@@ -9,7 +9,7 @@
 -->
 ## Relevant links
 * [Preparation](preparation.md)
-* [Homework](homework.md)
+* [Homework](/homework-projects/readme.md)
 * [Lesson plan](lesson-plan.md)
 
 

javascript2/week1/homework/hyf-bay/main.css renamed to javascript2/week1/optional-homework/hyf-bay/main.css

@@ -1,11 +1,7 @@
 > [!WARNING]
-> You do not need to complete these homeworks. We are currently testing new homeworks for JS2 and JS3. More info [here](https://github.com/HackYourFuture-CPH/js-projects).
+> 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.
 
-# Homework
-
-## Start the homework
-
-Need to brush up on the homework setup process? Check [this](https://github.com/HackYourFuture-CPH/Git/blob/main/homework-submission.md) out before you get into some git confusion!
+# Optional Homework
 
 ## So why this homework?
 
@@ -111,15 +107,4 @@ Use the library in your page by adding this line before you load your main.js:
 
 `<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>`
 
-<br/>
-
-## Hand in homework
-
-Need to brush up on the homework hand-in process?<br/>
-Check [this resource](https://github.com/HackYourFuture-CPH/Git/blob/main/homework-submission.md) to remember how to hand in the homework correctly!
-
-<br/>
-
-## Feedback
-
-And finally, please take 5 minutes to give the mentors and staff feedback by filling out the survey [here](https://forms.gle/Kdt8WEdmx595hijN9).
+<br/>

javascript2/week1/homework/hyf-bay/main.js renamed to javascript2/week1/optional-homework/hyf-bay/main.js

@@ -10,7 +10,7 @@ Functions advanced
 
 ## Relevant links
 * [Preparation](preparation.md)
-* [Homework](homework.md)
+* [Homework](/homework-projects/readme.md)
 * [Lesson plan](lesson-plan.md)
 
 

javascript2/week1/readme.md

@@ -2,6 +2,6 @@
 
 | Week | Topic | Preparation | Homework | Lesson plan |
 | ---- | ----- | ----------- | -------- |------------ |
-| 7. | Json <br> Apis <br> Fetch| [Preparation](week1/preparation.md) | [Homework](week1/homework.md) | [Lesson plan](week1/lesson-plan.md)|
-| 8. | Promises <br> Async/Await | [Preparation](week2/preparation.md) | [Homework](week2/homework.md) | [Lesson plan](week2/lesson-plan.md)|
-| 9. | Classes <br> Promises advanced | [Preparation](week3/preparation.md)| [Homework](week3/homework.md) | [Lesson plan](week3/lesson-plan.md) |
+| 7. | Json <br> Apis <br> Fetch| [Preparation](week1/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week1/lesson-plan.md)|
+| 8. | Promises <br> Async/Await | [Preparation](week2/preparation.md) | [Homework](/homework-projects/readme.md) | [Lesson plan](week2/lesson-plan.md)|
+| 9. | Classes <br> Promises advanced | [Preparation](week3/preparation.md)| [Homework](/homework-projects/readme.md) | [Lesson plan](week3/lesson-plan.md) |

javascript2/week2/homework.md renamed to javascript2/week2/optional-homework.md

@@ -1,11 +1,7 @@
 > [!WARNING]
-> You do not need to complete these homeworks. We are currently testing new homeworks for JS2 and JS3. More info [here](https://github.com/HackYourFuture-CPH/js-projects).
+> 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.
 
-# Homework
-
-## Start the homework
-
-Need to brush up on the homework setup process? Check [this](https://github.com/HackYourFuture-CPH/Git/blob/main/homework-submission.md) out before you get into some git confusion!
+# Optional Homework
 
 ## Why should i even do this homework?
 
@@ -103,9 +99,4 @@ Try break this problem into **smaller problems** and write down how you are goin
 
 ![giphy search](assets/giphy-search.gif)
 
-<br/>
-
-## Hand in homework
-
-Need to brush up on the homework hand-in process?<br/>
-Check [this resource](https://github.com/HackYourFuture-CPH/Git/blob/main/homework-submission.md) to remember how to hand in the homework correctly!
+<br/>

javascript2/week2/homework/hyf-bay-price.gif renamed to javascript2/week2/optional-homework/hyf-bay-price.gif

@@ -5,5 +5,5 @@
 
 # Relevant links
 * [Preparation](preparation.md)
-* [Homework](homework.md)
+* [Homework](/homework-projects/readme.md)
 * [Lesson plan](lesson-plan.md)

javascript2/week2/homework/hyf-bay-searching.gif renamed to javascript2/week2/optional-homework/hyf-bay-searching.gif

@@ -1,11 +1,7 @@
 > [!WARNING]
-> You do not need to complete these homeworks. We are currently testing new homeworks for JS2 and JS3. More info [here](https://github.com/HackYourFuture-CPH/js-projects).
+> 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.
 
-# Homework
-
-## Start the homework
-
-Need to brush up on the homework setup process? Check [this](https://github.com/HackYourFuture-CPH/Git/blob/main/homework-submission.md) out before you get into some git confusion!
+# Optional Homework
 
 ## Why should i even do this homework?
 

javascript2/week2/homework/hyf-bay/hyfBayHelpers.js renamed to javascript2/week2/optional-homework/hyf-bay/hyfBayHelpers.js

@@ -4,7 +4,7 @@
 
 # Relevant links
 * [Preparation](preparation.md)
-* [Homework](homework.md)
+* [Homework](/homework-projects/readme.md)
 * [Lesson plan](lesson-plan.md)
 
 ## Promise chaining