Link to the coursework

https://github.com/CodeYourFuture/Module-JS2/issues/

Why are we doing this?

The CYF curriculum is an open source project. Like all software, it is continually revised and improved in iterations.

Help improve the curriculum by giving quick emoji feedback on any assignment.

Feedback on this assignment by pressing the emoji reaction button on the top comment.

Emoji Key

👍 = Useful
👎 = Not useful

🚀 = Way too much time given
😕 = Not enough time given

You are invited to give feedback on any assignment in this way. Do this on the CYF issue, not your copy, so CYF can track it using the GitHub reactions API.

Maximum time in hours

.05

How to submit

Click the emoji button on the first post on any coursework assignment.

From Module-JS3 created by SallyMcGrath: CodeYourFuture/Module-JS3#249

Link to the coursework

https://code.visualstudio.com/docs/introvideos/debugging

Why are we doing this?

For months now we have been building a toolkit to help us write great software. In our toolkit we have:

Specifications, like user stories, acceptance criteria, and Given/When/Then
Help us understand what to write and check we’ve written the right thing.

Tests, like unit tests and assertions
Help us break down our problems and check our solutions work even when we change things.

Asking questions
Help us formally reason through our problems and identify gaps in our mental models.

Playing computer
Helps us reason about code with a mental model.

Audits, like Lighthouse
Help us identify performance and quality improvements we can make to our code.

And now we can add debuggers to our toolkit.

Debuggers are tools that help us find and fix problems, or “bugs”, in our JavaScript code. They let us step through our code line-by-line while it runs to see what is happening. This helps us find the place where our mental model of the code is different from our implementation. Your browser has a debugger and so does VSCode. You have used a similar program to “step through” code in your prep work.

Key reasons we use debuggers:

• See what’s happening inside functions
• Check if variables have expected values
• Pause execution and step through slowly
• Find exactly where mistakes happen

JavaScript debuggers give control over execution flow to methodically test and fix bugs. Watch the first four minutes of the video and then explore the VSCode Debugger on your machine.

Maximum time in hours

.25

How to get help

AI can help you here. Code along with AI so it has the context and ask it when you get stuck. Use this starting prompt:

Act as a friendly, supportive, knowledgeable programming mentor. I am learning the debugger in VSCode.Talk me through the interface step by step. Provide a simple example of a Node script with a bug in it and walk me through finding the bug by setting breakpoints with the debugger. Don’t tell me what the bug is. When I get stuck, answer my questions in CEFR B2 English meant for an adult professional speaking in a second language. When I ask for hints, give me useful pointers. Say okee dokee if you understand and begin your walkthrough.

Remember to use careful prompting when you don’t understand, so you get real learning out of the exchange. Say things like:

The execution is paused and it shows me that i is undefined and this is undefined, but I don’t understand why it says that. Can you explain this to me?

And remember you should always ask your friendly humans in Slack when you get really stuck.

Coursework content

• Have you come across any useful resources lately that you think will benefit the community? This can be anything from Tech, to PD, to a book you have read etc.
• Share this in the appropriate Slack channel. When you post, write 1-2 sentences on why you think it is a useful resource.
• Read someone else’s post and comment in their thread, saying why you liked their resource and how you think you will benefit from it.

Estimated time in hours

0.5

What is the purpose of this assignment?

This will assist you in fostering a habit of sharing useful resources and content with the community.

How to submit

• Share the link and a screenshot to your post on your coursework board.

• Share the link and a screenshot to the post you commented on.

Anything else?

Coursework content

• Watch this video by Gargi Sharma (26 mins) where she discusses the importance of ‘bragging’ about yourself and celebrating your achievements.
• Next, think about your work now and training to become a developer. How can you start to make your work visible? What has happened over the past week, 2 weeks, 3 weeks, 4 weeks- 8 weeks since you started the course that you are proud of?
• Create a Brag doc/diary in template in Google Doc and write about your past achievements in the course. Below is an example of a past trainee’s brag diary.
• Update this diary at least once a month.

Estimated time in hours

1

What is the purpose of this assignment?

This assignment will help you reflect on your achievements in this course and prepare you to answer situational-based interview questions in the future.
This is also a great way for you to keep track of your development, have clear examples you can use in interviews - and when you have your job, help you in your annual reviews and salary negotiations.

How to submit

Since it is quite personal, you can choose to either post it on the board for anyone to see or share it with the ones you trust and want to share this with.

Anything else?

Link to the coursework

https://applymagicsauce.com/demo

Why are we doing this?

Companies are very interested in the data provided by software like Apply Magic Sauce. Automated language analysis is already being used in the hiring of personnel. Applicant Tracking Systems (ATS) are used in 97% of Fortune 500 companies.

Apply Magic Sauce is a machine interpretation of personality based on how a person writes a sentence in an email or the types of content they like on social media. This is great when it gets the personality traits 99% accurate. But what if it goes horribly wrong and ruins lives?

Choose one thing that Apply Magic Sauce can do that you don’t like (or like the least). Describe what it is and say why you don’t like it. (250 words)

Below are some starting points for you to think about:

1. What happens when human beings rely on software to make consequential judgments about human beings?
2. Are algorithms more or less biased than people?
3. What are the consequences of surveilling people in this way? How does this affect how people talk and act online?

Maximum time in hours

1.5

How to get help

Undertake the demo at home and then discuss this in class. Developers should be literate citizens of the internet, and understand the consequences of gathering and analysing personal data. You may also like to look into some short courses on GDPR on Udemy.

How to submit

Post your analysis in your class channel thread, and join the discussion. Post a link to the thread on this ticket.

Link to the coursework

Look up the reading-list app in the week-3 directory.

Why are we doing this?

These challenges are designed to develop your problem-solving skills.
Check out the file contents in the reading-list directory to familiarise yourself with the starting code.

Acceptance criteria

Here are some checklist-style acceptance criteria for the reading list problem:

• A <ul> element is created to contain the list of books

For each book object in the books array:

• A <li> element is created
• The book title is displayed in a <p> element
• The book author is displayed in a <p> element
• An <img> element is added with the source set to the book’s cover image URL
• The <ul> containing the book list is added to the DOM inside the element with id “content”
• Books that have already been read have a green background
• Books that have not yet been read have a red background
• The completed list matches the provided design example
• No errors occur when iterating through the books array
• The page is visually appealing

The goal is to break down the problem into specific, testable elements that can easily be checked off to verify the acceptance criteria are met.

Maximum time in hours

3

How to get help

Share your blockers in your class channel
https://curriculum.codeyourfuture.io/guides/asking-questions

How to submit

1. Fork to your Github account.
2. Make a branch for this project.
3. Make regular small commits in this branch with clear messages.
4. When you are ready, open a PR to the CYF repo, following the instructions in the PR template.

gitGraph
    commit id: "start"
    branch feature/reading-list
    commit id: "skeleton page code"
    commit id: "Fonts and colours"
    commit id: "mobile layout"
    commit id: "lighthouse audit revisions mobile"
    commit id: "desktop layout"
    commit id: "lighthouse audit revisions desktop"
    checkout main
    merge feature/reading-list

There are several projects in this repo. Make a new branch for each project.

Link to the coursework

Look up the quote-generator app in the week-3 directory to get started.

Why are we doing this?

These challenges are designed to develop your problem-solving skills.

Acceptance criteria

• Given a user visits the quote generator web page
  When the page loads
  Then a random quote from the quotes array should be displayed on the screen
  And the name of the person who said the quote should be displayed

• Given a user is viewing a random quote on the quote generator page
  When the user clicks the ‘New Quote’ button
  Then a new random quote from the quotes array should be displayed on the screen
  And the name of the new quote’s author should be displayed

• Given a user is viewing a quote on the quote generator page
  When the user clicks the ‘New Quote’ button multiple times
  Then a different random quote from the quotes array should be displayed each time
  And the name of the new quote’s author should be displayed each time

Maximum time in hours

3

How to get help

Share your blockers in your class channel
https://syllabus.codeyourfuture.io/guides/asking-questions

How to submit

1. Fork to your Github account.
2. Make a branch for this project.
3. Make regular small commits in this branch with clear messages.
4. When you are ready, open a PR to the CYF repo, following the instructions in the PR template.

gitGraph
    commit id: "start"
    branch feature/js2-challenges-week4
    commit id: "skeleton page code"
    commit id: "Fonts and colours"
    commit id: "mobile layout"
    commit id: "lighthouse audit revisions mobile"
    commit id: "desktop layout"
    commit id: "lighthouse audit revisions desktop"
    checkout main
    merge feature/js2-challenges-week4

There are several projects in this repo. Make a new branch for each project.

Link to the coursework

Look up the alarmclock app in the week-3 directory to get started.

Why are we doing this?

These challenges are designed to develop your problem-solving skills.

Acceptance criteria

• Given the user has entered a number in the input field
  When the user clicks the “Set Alarm” button
  Then the “Time Remaining” title should update to show the entered number in mm:ss format

• Given the alarm is set with a valid time
  When one second passes
  Then the “Time Remaining” title should decrement by 1 second

• Given the alarm is set with a time of 00:00
  When the timer reaches 00:00
  Then the alarm sound should play continuously

• Given the alarm sound is currently playing
  When the user clicks the “Stop Alarm” button
  Then the alarm sound should stop playing

• Given the alarm is set with a time of 00:10
  When the timer reaches 00:00
  Then the background color should change
  And the alarm sound should play

• Given the user has not set an alarm
  When the page first loads
  Then the “Time Remaining” title should show 00:00
  And no alarm sound should play

Maximum time in hours

4

How to get help

Share your blockers in your class channel
https://syllabus.codeyourfuture.io/guides/asking-questions

How to submit

1. Fork to your Github account.
2. Make a branch for this project.
3. Make regular small commits in this branch with clear messages.
4. When you are ready, open a PR to the CYF repo, following the instructions in the PR template.

gitGraph
    commit id: "start"
    branch feature/alarmclock
    commit id: "skeleton page code"
    commit id: "Fonts and colours"
    commit id: "mobile layout"
    commit id: "lighthouse audit revisions mobile"
    commit id: "desktop layout"
    commit id: "lighthouse audit revisions desktop"
    checkout main
    merge feature/alarmclock

There are several projects in this repo. Make a new branch for each project.

Why are we doing this?

You’ll need to regularly check solutions to evaluate your understanding.
However, you must attempt the activities first before you use the solutions.
You can find the solutions for all the assignments in this repo’s solutions branch.

Maximum time in hours

0.5

Link to the coursework

https://www.codewars.com/users/CodeYourFuture/authored_collections

Why are we doing this?

Every week you need to complete at least three kata. Spend at least 20 minutes, three times a week, on your kata workout.

Find the Collection for this week on the CodeYourFuture account.

Take some time to check your levels. Before you are accepted on to a Final Project on the developer track, you need to complete the Final Projects collection and reach a Level 5 kyu in Codewars. Are you on track to reach this standard? Have you run a study group to work on kata? Have you reached out on the #cyf-codewars channel? What is your plan to meet this goal?

Maximum time in hours (Tech has max 16 per week total)

1

How to get help

• Join the #cyf-codewars Slack channel
• Read the CYF Codewars docs
• Read Codewars advice from CYFers
• Read Codewars advice from mentors

Remember, after 20 minutes, take a break.

How to submit

Your codewars progress is tracked automatically and is available on the public API. You don’t need to submit it.

How to review

Once you have completed your kata, look at the other solutions in the solutions view. Consider how many different approaches there are.

Link to the coursework

Use the prep view from the CYF curriculum to prepare for this week.

Why are we doing this?

It is essential to start learning new concepts and ideas before Saturday’s session. During the week, we expect you to get stuck and form questions about the new content so you can address misconceptions during Saturday’s session. The prep work here will introduce you to the new concepts for the week.

Maximum time in hours

4

How to get help

Share your blockers in your class channel. Remember to Ask Your Questions like a developer.

How to submit

Write down at least one specific technical question to bring to the group.

How to review

Come to class with your questions