From d880057942d80d58ed9177d13014a1b6cf9cb862 Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 13 Jan 2025 12:25:36 +0100 Subject: [PATCH 01/25] UNCLOSED A It's my vscode eating my tags again --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 30e3ff1d9..80aa49666 100644 --- a/index.html +++ b/index.html @@ -41,6 +41,6 @@

Project 2: Form Controls

- + From 97e501cd8d0b3e804584fd4ea84b1475dcfddb8a Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 13 Jan 2025 12:58:54 +0100 Subject: [PATCH 02/25] Create netlify.toml I think this should broadly work? It's not really possible to test it beforehand --- netlify.toml | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 netlify.toml diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 000000000..42fa7c4ff --- /dev/null +++ b/netlify.toml @@ -0,0 +1,16 @@ +[[plugins]] + package = "@netlify/plugin-lighthouse" + + [plugins.inputs] + fail_deploy = true + + [plugins.inputs.thresholds] + accessibility = 1.0 + + [[plugins.inputs.audits]] + path = "/wireframe/" + output_path = "reports/wireframe.html" + + [[plugins.inputs.audits]] + path = "/form-controls/" + output_path = "reports/form-controls.html" From ff3a577869bc56d375d6c77c0493f9aeb6abccce Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 13 Jan 2025 13:01:54 +0100 Subject: [PATCH 03/25] Update netlify.toml --- netlify.toml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/netlify.toml b/netlify.toml index 42fa7c4ff..9b00f7fcc 100644 --- a/netlify.toml +++ b/netlify.toml @@ -2,7 +2,8 @@ package = "@netlify/plugin-lighthouse" [plugins.inputs] - fail_deploy = true + [plugins.inputs] + fail_deploy_on_score_thresholds = true [plugins.inputs.thresholds] accessibility = 1.0 From 9832f20c6ffbabf1164a34776cc00071f431b2b7 Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 13 Jan 2025 13:02:39 +0100 Subject: [PATCH 04/25] Update netlify.toml --- netlify.toml | 1 - 1 file changed, 1 deletion(-) diff --git a/netlify.toml b/netlify.toml index 9b00f7fcc..967c08285 100644 --- a/netlify.toml +++ b/netlify.toml @@ -2,7 +2,6 @@ package = "@netlify/plugin-lighthouse" [plugins.inputs] - [plugins.inputs] fail_deploy_on_score_thresholds = true [plugins.inputs.thresholds] From 02f552f6895bfd44fe0d4a634716caf0f8ba244c Mon Sep 17 00:00:00 2001 From: CJ Yuan Date: Tue, 6 May 2025 13:44:15 +0100 Subject: [PATCH 05/25] Update pull_request_template.md --- .github/pull_request_template.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index ad933349a..3f0e90653 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,11 +2,11 @@ You must title your PR like this: -COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK +REGION | COHORT_NAME | FIRST_NAME LAST_NAME | PROJ_NAME For example, -NW4 | Carol Owen | HTML-CSS-Module | Week1 +London | May-2025 | Carol Owen | Wireframe Complete the task list below this message. If your PR is rejected, check the task list. @@ -18,7 +18,7 @@ If your PR is rejected, check the task list. Self checklist - [ ] I have committed my files one by one, on purpose, and for a reason -- [ ] I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK +- [ ] I have titled my PR with REGION | COHORT_NAME | FIRST_NAME LAST_NAME | PROJ_NAME - [ ] I have tested my changes - [ ] My changes follow the [style guide](https://curriculum.codeyourfuture.io/guides/reviewing/style-guide/) - [ ] My changes meet the [requirements](./README.md) of this task From 16d639067fb176fc610aa41281f9c39b9b5ce2da Mon Sep 17 00:00:00 2001 From: Daniel Wagner-Hall Date: Mon, 14 Jul 2025 16:26:46 +0100 Subject: [PATCH 06/25] Update repo metadata --- .github/FUNDING.yml | 11 ---- .github/ISSUE_TEMPLATE/config.yml | 4 +- .github/ISSUE_TEMPLATE/pd-assignment.yml | 2 +- .github/ISSUE_TEMPLATE/tech-ed-assignment.yml | 14 ++-- .github/pull_request_template.md | 6 +- HOW_TO_REVIEW.md | 66 ------------------- 6 files changed, 13 insertions(+), 90 deletions(-) delete mode 100644 HOW_TO_REVIEW.md diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index b34cfcfc3..ea03447fe 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,13 +1,2 @@ -# These are supported funding model platforms - github: CodeYourFuture -patreon: # Replace with a single Patreon username -open_collective: # Replace with a single Open Collective username -ko_fi: # Replace with a single Ko-fi username -tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel -community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry -liberapay: # Replace with a single Liberapay username -issuehunt: # Replace with a single IssueHunt username -otechie: # Replace with a single Otechie username -lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry custom: https://codeyourfuture.io/donate diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 5fe8ffd09..db0e6f432 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,4 +1,4 @@ -blank_issues_enabled: false +blank_issues_enabled: true contact_links: - name: CYF url: contact@codeyourfuture.io @@ -8,7 +8,7 @@ contact_links: about: Join CYF here - name: CYF Slack url: codeyourfuture.slack.com - about: Come to #cyf-syllabus-tech and chat + about: Come to #cyf-curriculum and chat - name: CYF Tech Ed url: https://github.com/orgs/CodeYourFuture/teams/mentors about: CYF mentors on Github diff --git a/.github/ISSUE_TEMPLATE/pd-assignment.yml b/.github/ISSUE_TEMPLATE/pd-assignment.yml index c8bd22980..19f15fa3a 100644 --- a/.github/ISSUE_TEMPLATE/pd-assignment.yml +++ b/.github/ISSUE_TEMPLATE/pd-assignment.yml @@ -1,7 +1,7 @@ name: PD Coursework description: Assign a piece of PD coursework title: "[PD] " -labels: [PD, 🏝 Priority Stretch, πŸ‡ Size Small] +labels: [PD, 🏝 Priority Stretch, πŸ‡ Size Small, πŸ“… Sprint 1] body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/tech-ed-assignment.yml b/.github/ISSUE_TEMPLATE/tech-ed-assignment.yml index ac9da906a..343b4d677 100644 --- a/.github/ISSUE_TEMPLATE/tech-ed-assignment.yml +++ b/.github/ISSUE_TEMPLATE/tech-ed-assignment.yml @@ -1,20 +1,20 @@ name: Tech Ed Coursework description: Assign a piece of technical coursework title: "<title>" -labels: [Tech Ed, πŸ• Priority Mandatory, πŸ‚ Size Medium, πŸ“… Module 1] +labels: [Tech Ed, πŸ• Priority Mandatory, πŸ‚ Size Medium, πŸ“… Sprint 1] body: - type: markdown attributes: value: | - Thanks for taking the time to assign this coursework! + Thanks for taking the time to assign this coursework! - To support our trainees with planning and prioritising their own learning journey, we want our coursework assignments to be more informative. + To support our trainees with planning and prioritising their own learning journey, we want our coursework assignments to be more informative. We don't just want to tell them what to do, we want to tell them stuff like: - why we are doing it - what it's "for" (problem-solving, debugging, etc) - how long they should spend on it, maximum - - how to get help - - how to review it with answers + - how to get help + - how to review it with answers - how to get it reviewed from mentors and peers - type: input attributes: @@ -26,7 +26,7 @@ body: label: Learning Objectives description: https://common.codeyourfuture.io/common-theme/shortcodes/objectives/ placeholder: | - <!--{{<objectives}}--> + <!--{{<objectives}}--> - [ ] CYF format, task list formatting <!--{{</objectives}}--> - type: textarea @@ -80,7 +80,7 @@ body: 1. Update labels - priority -- is this coursework key, mandatory, or stretch? Pick one. - size -- help trainees plan their time with rough estimation. Pick one - - topics -- add all that seem relevant to you. + - topics -- add all that seem relevant to you. 2. Add a Sprint label to add to the backlog view - sprint 1,2,3,4 diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 3f0e90653..86544e40d 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,11 +2,11 @@ You must title your PR like this: -REGION | COHORT_NAME | FIRST_NAME LAST_NAME | PROJ_NAME +Region | Cohort | FirstName LastName | Sprint | Assignment Title For example, -London | May-2025 | Carol Owen | Wireframe +London | 25-ITP-May | Carol Owen | Sprint 1 | Alarm Clock Complete the task list below this message. If your PR is rejected, check the task list. @@ -18,7 +18,7 @@ If your PR is rejected, check the task list. Self checklist - [ ] I have committed my files one by one, on purpose, and for a reason -- [ ] I have titled my PR with REGION | COHORT_NAME | FIRST_NAME LAST_NAME | PROJ_NAME +- [ ] I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title - [ ] I have tested my changes - [ ] My changes follow the [style guide](https://curriculum.codeyourfuture.io/guides/reviewing/style-guide/) - [ ] My changes meet the [requirements](./README.md) of this task diff --git a/HOW_TO_REVIEW.md b/HOW_TO_REVIEW.md deleted file mode 100644 index 39222358f..000000000 --- a/HOW_TO_REVIEW.md +++ /dev/null @@ -1,66 +0,0 @@ -# Everyone reviews code at CYF - -[![Code Review Flow](code-review-flow.png)](https://curriculum.codeyourfuture.io/guides/reviewing/) - -https://curriculum.codeyourfuture.io/guides/reviewing/ - -Mentors and participants all review code, and collaborate on improving code quality. We are all helping each other to talk, write, and think about code more clearly. - -We are not reviewing code as if we were to merge this PR into production; we are opening a technical conversation for the purpose of insight and development. - -## Key points: - -1. Ask questions instead of making statements: - - **YES:** "Is there another element you could use to group a set of fields in a form? Why might someone use a different element in a form?" - **NO:** "Use fieldset not divs" - -2. Encourage simplicity, clarity, and precision: - - **YES** "There are 15,0000 files in this changelist. Which files should be reviewed?" - **NO** "It doesn't matter; I can try to figure out what you meant." - -3. Respect everyone's work and time: - - **YES** "I think there's some more to do here. Thanks for sharing where you're up to. Can I help you complete this?" - **NO** "This is rubbish. Try harder." - -## Getting your pull request reviewed - -We're using GitHub Labels in our Code Review process. In order for a volunteer to review a pull request, a participant will need to add a "Needs Review" label to it. - -To add a label to a pull request: - -- Open the pull request -- In the right sidebar, click Labels, then select the label you'd like to add - for example: "Needs Review" - -Take a look at our code review process from beginning to end. Let us know if you have any questions or need help! -![Code Review Flow](code-review-flow.png) - -## Labels for feedback - -Reviewers, please add labels (provided) to the PR once you've reviewed. This helps to focus the participant on the areas they should work on, and gives an overview for mentors on what the whole cohort needs to work on. - -## Solutions - -### Where to find solutions? - -You can find the solutions for the module on the `solutions` branch. - -### Solutions branch - -The solutions branch typically contains: - -#### Sample solutions - -Solutions are example answers not the only correct answers. - -#### Common responses guides. - -Everyone is invited to contribute commonly encountered problems, mistakes, misunderstandings, and mental-model errors to our common responses documents. - -Use these resources to inform your code review, get unstuck, and improve your understanding. - -## Guides - -https://curriculum.codeyourfuture.io/guides/reviewing/ From 7b96b80a687352cd6b87efa19a8e8dd2d59a9580 Mon Sep 17 00:00:00 2001 From: Daniel Wagner-Hall <dawagner@gmail.com> Date: Wed, 13 Aug 2025 20:22:01 +0100 Subject: [PATCH 07/25] Set up Validate PR Metadata action --- .github/workflows/validate-pr-metadata.yml | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 .github/workflows/validate-pr-metadata.yml diff --git a/.github/workflows/validate-pr-metadata.yml b/.github/workflows/validate-pr-metadata.yml new file mode 100644 index 000000000..5c06d7083 --- /dev/null +++ b/.github/workflows/validate-pr-metadata.yml @@ -0,0 +1,18 @@ +name: Validate PR Metadata +on: + pull_request: + types: + - labeled + - unlabeled + - opened + - edited + - reopened + +jobs: + validate_pr_metadata: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: CodeYourFuture/actions/validate-pr-metadata@main + with: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} From 0b12de6425597ddf5cb1f7d49799f2e08bcd1930 Mon Sep 17 00:00:00 2001 From: Daniel Wagner-Hall <dawagner@gmail.com> Date: Wed, 13 Aug 2025 20:27:15 +0100 Subject: [PATCH 08/25] Allow secrets on action --- .github/workflows/validate-pr-metadata.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/validate-pr-metadata.yml b/.github/workflows/validate-pr-metadata.yml index 5c06d7083..10ef3c74a 100644 --- a/.github/workflows/validate-pr-metadata.yml +++ b/.github/workflows/validate-pr-metadata.yml @@ -1,6 +1,6 @@ name: Validate PR Metadata on: - pull_request: + pull_request_target: types: - labeled - unlabeled From 72fe02ba5885d4f58923a041e9a4f6ffca1b99e5 Mon Sep 17 00:00:00 2001 From: Daniel Wagner-Hall <dawagner@gmail.com> Date: Tue, 26 Aug 2025 17:44:30 +0100 Subject: [PATCH 09/25] Update PR template --- .github/pull_request_template.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 86544e40d..0d8ee1dfd 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -8,8 +8,13 @@ For example, London | 25-ITP-May | Carol Owen | Sprint 1 | Alarm Clock -Complete the task list below this message. -If your PR is rejected, check the task list. +Fill in the template below - remove any sections that don't apply. + +Complete the self checklist - replace each empty box in the checklist [ ] with a [x]. + +Add the label "Needs Review" and you will get review. + +Respond to volunteer reviews until the volunteer marks it as "Complete". --> @@ -17,11 +22,10 @@ If your PR is rejected, check the task list. Self checklist -- [ ] I have committed my files one by one, on purpose, and for a reason - [ ] I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title +- [ ] My changes meet the requirements of the task - [ ] I have tested my changes - [ ] My changes follow the [style guide](https://curriculum.codeyourfuture.io/guides/reviewing/style-guide/) -- [ ] My changes meet the [requirements](./README.md) of this task ## Changelist From 3b1f39507172b13da87aea1b4566a77620cca281 Mon Sep 17 00:00:00 2001 From: Colin Farquhar <cifarquhar@gmail.com> Date: Thu, 22 Jan 2026 16:01:14 +0000 Subject: [PATCH 10/25] Remove old issue templates (#1012) --- .github/ISSUE_TEMPLATE/config.yml | 14 --- .github/ISSUE_TEMPLATE/pd-assignment.yml | 59 ------------- .github/ISSUE_TEMPLATE/tech-ed-assignment.yml | 88 ------------------- 3 files changed, 161 deletions(-) delete mode 100644 .github/ISSUE_TEMPLATE/config.yml delete mode 100644 .github/ISSUE_TEMPLATE/pd-assignment.yml delete mode 100644 .github/ISSUE_TEMPLATE/tech-ed-assignment.yml diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml deleted file mode 100644 index db0e6f432..000000000 --- a/.github/ISSUE_TEMPLATE/config.yml +++ /dev/null @@ -1,14 +0,0 @@ -blank_issues_enabled: true -contact_links: - - name: CYF - url: contact@codeyourfuture.io - about: Please report serious issues here. - - name: Join CYF - url: https://codeyourfuture.io/volunteers/ - about: Join CYF here - - name: CYF Slack - url: codeyourfuture.slack.com - about: Come to #cyf-curriculum and chat - - name: CYF Tech Ed - url: https://github.com/orgs/CodeYourFuture/teams/mentors - about: CYF mentors on Github diff --git a/.github/ISSUE_TEMPLATE/pd-assignment.yml b/.github/ISSUE_TEMPLATE/pd-assignment.yml deleted file mode 100644 index 19f15fa3a..000000000 --- a/.github/ISSUE_TEMPLATE/pd-assignment.yml +++ /dev/null @@ -1,59 +0,0 @@ -name: PD Coursework -description: Assign a piece of PD coursework -title: "[PD] <title>" -labels: [PD, 🏝 Priority Stretch, πŸ‡ Size Small, πŸ“… Sprint 1] -body: - - type: markdown - attributes: - value: | - Thanks for taking the time to assign this coursework! - - type: input - attributes: - label: Coursework content - validations: - required: true - - type: input - attributes: - label: Estimated time in hours - description: (PD has max 4 per week total) - validations: - required: true - - type: textarea - attributes: - label: What is the purpose of this assignment? - description: Clearly explain the purpose of this assignment and how trainees can evaluate this. - validations: - required: true - - type: textarea - attributes: - label: How to submit - description: State in clear steps how a trainee can submit this assignment. - placeholder: | - Copy the Google doc to your own Google Drive - Complete the work assigned - When you are ready, move your document to your class Drive - validations: - required: true - - type: textarea - attributes: - label: Anything else? - description: | - Links? References? Anything that will give more context - - Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. - - type: markdown - attributes: - value: | - **Thank you so much.** - - Please now complete this ticket by filling in the options on the sidebar. - - 1. Update labels - - priority -- is this coursework key, mandatory, or stretch? - - size -- help trainees plan their time with rough estimation - 2. Add to project backlog - - add to the project named the same as this repo - - fill in custom fields -- priority, size, hours, week -- to match this issue - - Once your ticket is complete, you may like to check it out on the example project board attached to this repo. - This is so you understand how trainees will use your work. diff --git a/.github/ISSUE_TEMPLATE/tech-ed-assignment.yml b/.github/ISSUE_TEMPLATE/tech-ed-assignment.yml deleted file mode 100644 index 343b4d677..000000000 --- a/.github/ISSUE_TEMPLATE/tech-ed-assignment.yml +++ /dev/null @@ -1,88 +0,0 @@ -name: Tech Ed Coursework -description: Assign a piece of technical coursework -title: "<title>" -labels: [Tech Ed, πŸ• Priority Mandatory, πŸ‚ Size Medium, πŸ“… Sprint 1] -body: - - type: markdown - attributes: - value: | - Thanks for taking the time to assign this coursework! - - To support our trainees with planning and prioritising their own learning journey, we want our coursework assignments to be more informative. - We don't just want to tell them what to do, we want to tell them stuff like: - - why we are doing it - - what it's "for" (problem-solving, debugging, etc) - - how long they should spend on it, maximum - - how to get help - - how to review it with answers - - how to get it reviewed from mentors and peers - - type: input - attributes: - label: Link to the coursework - validations: - required: true - - type : textarea - attributes: - label: Learning Objectives - description: https://common.codeyourfuture.io/common-theme/shortcodes/objectives/ - placeholder: | - <!--{{<objectives}}--> - - [ ] CYF format, task list formatting - <!--{{</objectives}}--> - - type: textarea - attributes: - label: Why are we doing this? - description: Clearly explain the purpose of this assignment - validations: - required: true - - type: input - attributes: - label: Maximum time in hours - description: (Tech has max 16 per week total) - validations: - required: true - - type: textarea - attributes: - label: How to get help - description: State simply how trainees can get help with this assignment - value: | - Share your blockers in your class channel - https://curriculum.codeyourfuture.io/guides/getting-help/asking-questions/ - - type: textarea - attributes: - label: How to submit - description: State in clear steps how a trainee can submit this assignment. - value: | - Fork the repo to your own GitHub account - Make regular small commits with clear messages - When you are ready, open a Pull Request to the CYF repo - Make sure you fill in the PR template provided - validations: - required: true - - type: textarea - attributes: - label: How to review - description: How to get code review and how to self-review - - type: textarea - attributes: - label: Anything else? - description: | - Links? References? Anything that will give more context - - Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. - - type: markdown - attributes: - value: | - **Thank you so much.** - - Please now complete this ticket by filling in the options on the sidebar. - - 1. Update labels - - priority -- is this coursework key, mandatory, or stretch? Pick one. - - size -- help trainees plan their time with rough estimation. Pick one - - topics -- add all that seem relevant to you. - 2. Add a Sprint label to add to the backlog view - - sprint 1,2,3,4 - - Once your ticket is complete, you may like to add it to the example project board attached to this repo. - This is so you understand how trainees will use your work. Nobody has built a board copier yet, so trainees will be doing this step themselves. From 762d3ae2dfd0b4e5cd9af3cd72e080f48d722fe7 Mon Sep 17 00:00:00 2001 From: Jennifer Alexander <jenny_alexander@icloud.com> Date: Mon, 26 Jan 2026 09:18:15 -0600 Subject: [PATCH 11/25] Update readme to include article image in acceptance criteria. (#1074) --- Wireframe/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..f7b59df8c 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -15,7 +15,7 @@ There are some provided HTML and CSS files you can use to get started. You can u <!--{{<objectives>}}>--> - [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including a title, summary, and a link +- [ ] Create three articles, each including an image, title, summary, and a link - [ ] Check a webpage against a wireframe layout - [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) - [ ] Use version control by committing often and pushing regularly to GitHub @@ -26,7 +26,7 @@ There are some provided HTML and CSS files you can use to get started. You can u - [ ] Semantic HTML tags are used to structure the webpage. - [ ] The page scores 100 for Accessibility in the Lighthouse audit. - [ ] The page header includes a title and description. -- [ ] The articles section has three unique articles, each including a title, summary, and a link. +- [ ] The articles section has three unique articles, each including an image, title, summary, and a link. - [ ] The page footer is fixed to the bottom of the viewport. - [ ] The webpage is styled using a linked .css file. - [ ] The webpage is properly committed and pushed to a branch on GitHub. From e3593e282b4a34c9f2f1fa05af5751b0af4525ba Mon Sep 17 00:00:00 2001 From: Poonam <61753159+Poonam-raj@users.noreply.github.com> Date: Wed, 4 Feb 2026 19:05:35 +0000 Subject: [PATCH 12/25] Makes the Questions section and GitHub bot a bit clearer (#1131) --- .github/pull_request_template.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 0d8ee1dfd..7c6879088 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -16,6 +16,8 @@ Add the label "Needs Review" and you will get review. Respond to volunteer reviews until the volunteer marks it as "Complete". +Please note: if the PR template is not filled as described above, an automatic GitHub bot will give feedback in the "Conversation" tab of the pull request and not allow the "Needs Review" label to be added until it's fixed. + --> ## Learners, PR Template @@ -33,4 +35,4 @@ Briefly explain your PR. ## Questions -Ask any questions you have for your reviewer. +Ask any questions you have for your reviewer. You must remove this section if you have no questions. From 2460dbd13570e73c15e4793cd63482bf50c547ef Mon Sep 17 00:00:00 2001 From: Daniel Wagner-Hall <dawagner@gmail.com> Date: Wed, 4 Feb 2026 19:09:27 +0000 Subject: [PATCH 13/25] Remove PR template We inherit these from the org now --- .github/pull_request_template.md | 38 -------------------------------- 1 file changed, 38 deletions(-) delete mode 100644 .github/pull_request_template.md diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md deleted file mode 100644 index 7c6879088..000000000 --- a/.github/pull_request_template.md +++ /dev/null @@ -1,38 +0,0 @@ -<!-- - -You must title your PR like this: - -Region | Cohort | FirstName LastName | Sprint | Assignment Title - -For example, - -London | 25-ITP-May | Carol Owen | Sprint 1 | Alarm Clock - -Fill in the template below - remove any sections that don't apply. - -Complete the self checklist - replace each empty box in the checklist [ ] with a [x]. - -Add the label "Needs Review" and you will get review. - -Respond to volunteer reviews until the volunteer marks it as "Complete". - -Please note: if the PR template is not filled as described above, an automatic GitHub bot will give feedback in the "Conversation" tab of the pull request and not allow the "Needs Review" label to be added until it's fixed. - ---> - -## Learners, PR Template - -Self checklist - -- [ ] I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title -- [ ] My changes meet the requirements of the task -- [ ] I have tested my changes -- [ ] My changes follow the [style guide](https://curriculum.codeyourfuture.io/guides/reviewing/style-guide/) - -## Changelist - -Briefly explain your PR. - -## Questions - -Ask any questions you have for your reviewer. You must remove this section if you have no questions. From e2a10ab0a69e09e2beac07a4d0834409ecaba09f Mon Sep 17 00:00:00 2001 From: Jennifer Alexander <jenny_alexander@icloud.com> Date: Fri, 6 Feb 2026 04:09:32 -0600 Subject: [PATCH 14/25] Replace <h2> with <p> in footer since no major section in footer (#1147) --- Form-Controls/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..74b591ffc 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -21,7 +21,7 @@ <h1>Product Pick</h1> </main> <footer> <!-- change to your name--> - <h2>By HOMEWORK SOLUTION</h2> + <p>By HOMEWORK SOLUTION</p> </footer> </body> </html> From 3725052ddb973123837397737779dbd5c8838526 Mon Sep 17 00:00:00 2001 From: Jennifer Alexander <jenny_alexander@icloud.com> Date: Wed, 11 Feb 2026 08:09:47 -0600 Subject: [PATCH 15/25] Remove restriction on using CSS from forms readme. (#1169) --- Form-Controls/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index bfcdf6c0b..f21386f42 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -30,8 +30,8 @@ Do not write a form action for this project. Let's write out our testable criteria. Check each one off as you complete it. -- [ ] I have used HTML only. -- [x] I have not used any CSS or JavaScript. +- [ ] I have only used HTML and CSS. +- [ ] I have not used any JavaScript. ### HTML From 329eea0ba19f96b865ffd337a2ce7ca9b7990ff5 Mon Sep 17 00:00:00 2001 From: Daniel Wagner-Hall <dawagner@gmail.com> Date: Wed, 11 Mar 2026 16:41:57 +0000 Subject: [PATCH 16/25] Give more specific comments for earlier learners (#1206) --- .github/workflows/validate-pr-metadata.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/validate-pr-metadata.yml b/.github/workflows/validate-pr-metadata.yml index 10ef3c74a..65df06116 100644 --- a/.github/workflows/validate-pr-metadata.yml +++ b/.github/workflows/validate-pr-metadata.yml @@ -15,4 +15,5 @@ jobs: - uses: actions/checkout@v4 - uses: CodeYourFuture/actions/validate-pr-metadata@main with: + give_more_specific_comment_for_earlier_learners: true GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} From a7b8a25ca13d611bde6a06a39b9e23165bcb07ff Mon Sep 17 00:00:00 2001 From: CJ Yuan <cjyuan00@gmail.com> Date: Mon, 4 May 2026 18:09:28 +0100 Subject: [PATCH 17/25] Update Wireframe and Form-Control README.md (#1212) ## Changelist - Addressed issue https://github.com/CodeYourFuture/Module-Onboarding/issues/1209 - Clarify a few requirements - Added a practical guide about formatting code and making small commits --- Form-Controls/README.md | 34 +++++++++++++++++------- Wireframe/README.md | 43 +++++++++++++++++++++--------- practical_guide.md | 58 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+), 22 deletions(-) create mode 100644 practical_guide.md diff --git a/Form-Controls/README.md b/Form-Controls/README.md index f21386f42..844572470 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -8,25 +8,29 @@ - [ ] Write a valid form - [ ] Test with Devtools - [ ] Refactor using Devtools +- [ ] Use version control by committing often and pushing regularly to GitHub +- [ ] Develop the habit of writing clean, well-structured, and error-free code <!--{{<objectives>}}>--> ## Task -We are selling t-shirts. Write a form to collect the following data: +We are selling T-shirts. Write a form to collect the following data: Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and size. Writing that out as a series of questions to ask yourself: -1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL +1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters. +2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern. +3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? +4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL All fields are required. Do not write a form action for this project. -## Developers must test their work. +## Acceptnce Criteria + +### Developers must test their work. Let's write out our testable criteria. Check each one off as you complete it. @@ -35,17 +39,29 @@ Let's write out our testable criteria. Check each one off as you complete it. ### HTML -- [ ] My form is semantic html. +- [ ] My form is semantic HTML. - [ ] All inputs have associated labels. - [ ] My Lighthouse Accessibility score is 100. -- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more. +- [ ] I require a valid name. - [ ] I require a valid email. - [ ] I require one colour from a defined set of 3 colours. - [ ] I require one size from a defined set of 6 sizes. -## Resources +### Developers must adhere to professional standards. + +> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional? +These practices reflect the level of quality expected in professional work. +They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. + +- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [ ] My code is consistently formatted +- [ ] My page content is free of typos and grammatical mistakes +- [ ] I commit often and push regularly to GitHub + +## Resources - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms) - [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) - [Lighthouse](https://developers.google.com/web/tools/lighthouse) - [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [Format Code and Make Logical Commits in VS Code](../practical_guide.md) diff --git a/Wireframe/README.md b/Wireframe/README.md index f7b59df8c..aa85ec80b 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -1,15 +1,5 @@ # Wireframe -![Wireframe](./wireframe.png) - -Using the provided wireframe and resources, write a new webpage explaining: - -1. What is the purpose of a README file? -1. What is the purpose of a wireframe? -1. What is a branch in Git? - -There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work. - ## Learning Objectives <!--{{<objectives>}}>--> @@ -19,20 +9,47 @@ There are some provided HTML and CSS files you can use to get started. You can u - [ ] Check a webpage against a wireframe layout - [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) - [ ] Use version control by committing often and pushing regularly to GitHub +- [ ] Develop the habit of writing clean, well-structured, and error-free code <!--{{</objectives>}}>--> +## Task +![Wireframe](./wireframe.png) + +Using the provided wireframe and resources, write a new webpage explaining: + +1. What is the purpose of a README file? +1. What is the purpose of a wireframe? +1. What is a branch in Git? + +The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted. + +There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work. + ## Acceptance Criteria - [ ] Semantic HTML tags are used to structure the webpage. - [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The page header includes a title and description. -- [ ] The articles section has three unique articles, each including an image, title, summary, and a link. -- [ ] The page footer is fixed to the bottom of the viewport. - [ ] The webpage is styled using a linked .css file. - [ ] The webpage is properly committed and pushed to a branch on GitHub. +- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. +- [ ] The page footer is fixed to the bottom of the viewport. +- [ ] The page layout closely match the wireframe. + +### Developers must adhere to professional standards. + +> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional? + +These practices reflect the level of quality expected in professional work. +They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. + +- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [ ] My code is consistently formatted +- [ ] My page content is free of typos and grammatical mistakes +- [ ] I commit often and push regularly to GitHub ## Resources - [Wireframe](https://www.productplan.com/glossary/wireframe/) - [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) - [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) +- [Format Code and Make Logical Commits in VS Code](../practical_guide.md) diff --git a/practical_guide.md b/practical_guide.md new file mode 100644 index 000000000..90537cd76 --- /dev/null +++ b/practical_guide.md @@ -0,0 +1,58 @@ +## Clean Code and Smart Commits: A Practical Guide + +### 1. Formatting code consistently + +- In VS Code, right-click anywhere in the editor and choose "Format Document" from the context menu. + +- You can also use the shortcut: + - Windows/Linux: `Shift + Alt + F` + - macOS: `Shift + Option + F` + +- More details: https://code.visualstudio.com/docs/editing/codebasics#_formatting + +--- +### 2. Enabling automatic formatting + +- Open your VS Code settings (user or workspace settings). + - Guide: https://code.visualstudio.com/docs/getstarted/settings#_creating-user-and-workspace-settings +- Search for `editor format` +- Set `editor.formatOnSave` and `editor.formatOnPaste` to true + +This ensures your code stays clean without needing manual formatting each time. + +--- + +### 3. Committing files often, in meaningful groups + +Creating small, focused commits improves both your workflow and team collaboration. + +Why this matters: +- **Clarity**: Each commit tells a clear story (one feature, one fix, one change). +- **Debugging**: Easy to find and undo the commit that caused a bug. +- **Collaboration**: Teammates can review and understand changes faster. +- **History**: Project log becomes a readable timeline, not a messy dump. +- **Safety**: Progress is saved in safe, logical stepsβ€”less risk of losing work. + +#### Appraoch 1: Using VS Code + +- In the Source Control panel, stage individual files instead of all changes. +- Commit only what is staged. +- Watch this video (around 12:50): https://www.youtube.com/watch?v=z5jZ9lrSpqk&t=705 + +#### Approach 2: Using Git commands + +1. Stage a changed file (`git add`) + +e.g.: To stage a modified file named `index.html` +``` +git add index.html +``` + +2. Commit the staged changes: (`git commit`) + +e.g.: To commit the staged changes with a short commit message +``` +git commit -m "Fix syntax error" +``` + +- Additional resource: [W3School Git Tutorial](https://www.w3schools.com/git/default.asp?remote=github) From 46911aeac47a328037edfa42b15bb9f740ae734b Mon Sep 17 00:00:00 2001 From: Poonam <61753159+Poonam-raj@users.noreply.github.com> Date: Mon, 11 May 2026 11:27:53 +0100 Subject: [PATCH 18/25] Fix typo in 'Acceptance Criteria' section --- Form-Controls/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 844572470..86f623d89 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -28,7 +28,7 @@ Writing that out as a series of questions to ask yourself: All fields are required. Do not write a form action for this project. -## Acceptnce Criteria +## Acceptance Criteria ### Developers must test their work. From c44123d682bd435b63f5494103678de8fb6bb371 Mon Sep 17 00:00:00 2001 From: Liam310 <52577696+Liam310@users.noreply.github.com> Date: Fri, 22 May 2026 10:47:40 +0100 Subject: [PATCH 19/25] add a tip to use pre-baked regex (#1337) --- Form-Controls/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 86f623d89..c356f8844 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -28,6 +28,11 @@ Writing that out as a series of questions to ask yourself: All fields are required. Do not write a form action for this project. +> [!TIP] +> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`. +> +> Now you have the regular expression, it's up to you to figure out how to use it in the context of an HTML form! + ## Acceptance Criteria ### Developers must test their work. From 64be115b5f3c774130f9c5fe69e7a3265710e4f2 Mon Sep 17 00:00:00 2001 From: CJ Yuan <cjyuan00@gmail.com> Date: Thu, 18 Jun 2026 23:27:54 +0100 Subject: [PATCH 20/25] Emphasise use of CSS in Wireframe spec --- Wireframe/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..b1712c4b3 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -6,7 +6,7 @@ - [ ] Use semantic HTML tags to structure the webpage - [ ] Create three articles, each including an image, title, summary, and a link -- [ ] Check a webpage against a wireframe layout +- [ ] Use CSS to lay out and style elements so they match a wireframe design - [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) - [ ] Use version control by committing often and pushing regularly to GitHub - [ ] Develop the habit of writing clean, well-structured, and error-free code @@ -21,9 +21,9 @@ Using the provided wireframe and resources, write a new webpage explaining: 1. What is the purpose of a wireframe? 1. What is a branch in Git? -The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted. +Then arrange and style the elements so the page closely matches the wireframe. Exact replication is the goal, but small differences may be accepted. -There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work. +You can add image files, but you _must_ modify `index.html` and `style.css` to meet the acceptance criteria and you must check this criteria yourself before you submit your work. ## Acceptance Criteria @@ -32,7 +32,7 @@ There are some provided HTML and CSS files you can use to get started. You can u - [ ] The webpage is styled using a linked .css file. - [ ] The webpage is properly committed and pushed to a branch on GitHub. - [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. -- [ ] The page footer is fixed to the bottom of the viewport. +- [ ] The page footer is fixed to the bottom of the viewport; it remains in place when the page scrolls. - [ ] The page layout closely match the wireframe. ### Developers must adhere to professional standards. From 4a0c11c807d9ab4f556cbdb781f824ae72ad4314 Mon Sep 17 00:00:00 2001 From: CJ Yuan <cjyuan00@gmail.com> Date: Thu, 18 Jun 2026 23:38:56 +0100 Subject: [PATCH 21/25] Clear style.css for the Wireframe exercise --- Wireframe/style.css | 93 +++------------------------------------------ 1 file changed, 6 insertions(+), 87 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..bb89e34a4 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,8 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ +/* + (Suggestion) Apply CSS in this order: + 1. Lay out the top-level elements: <header>, <main>, <footer>. + 2. Lay out the articles within <main>. + 3. Style individual elements. -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ -:root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; -} -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ -body { - background: var(--paper); - color: var(--ink); - font: var(--font); -} -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; -} -img, -svg { - width: 100%; - object-fit: cover; -} -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ + Please REMOVE this comment before submitting your work. */ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; -} -footer { - position: fixed; - bottom: 0; - text-align: center; -} -/* ====== Articles Grid Layout ==== -Setting the rules for how articles are placed in the main element. -Inspect this in Devtools and click the "grid" button in the Elements view -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ -main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } -} -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -Now laying out just the INSIDE of the repeated card/article design. -Keeping things orderly and separate is the key to good, simple CSS. -*/ -article { - border: var(--line); - padding-bottom: var(--space); - text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } -} From 1c0c731b1d14ec88e8bdc3b23772f686bfa446a0 Mon Sep 17 00:00:00 2001 From: CJ Yuan <cjyuan00@gmail.com> Date: Thu, 18 Jun 2026 23:58:12 +0100 Subject: [PATCH 22/25] Add "top-down approach" in suggestion --- Wireframe/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index bb89e34a4..aca09e1cc 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,8 +1,8 @@ /* - (Suggestion) Apply CSS in this order: - 1. Lay out the top-level elements: <header>, <main>, <footer>. - 2. Lay out the articles within <main>. - 3. Style individual elements. + (Suggestion) Use a top-down approach when applying CSS: + 1. Lay out the top-level elements: <header>, <main>, <footer> + 2. Lay out the articles within <main> + 3. Style individual elements Please REMOVE this comment before submitting your work. */ From 3a47b15d6229856bd285bad9610179f9fe7b178f Mon Sep 17 00:00:00 2001 From: Colin Farquhar <cifarquhar@gmail.com> Date: Fri, 21 Aug 2026 16:23:07 +0100 Subject: [PATCH 23/25] add git collaborating task (#1454) * add git collaborating task * Update git-collaboration/README.md Co-authored-by: Daniel Wagner-Hall <dawagner@gmail.com> --------- Co-authored-by: Daniel Wagner-Hall <dawagner@gmail.com> --- git-collaboration/README.md | 51 +++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 git-collaboration/README.md diff --git a/git-collaboration/README.md b/git-collaboration/README.md new file mode 100644 index 000000000..627a018fd --- /dev/null +++ b/git-collaboration/README.md @@ -0,0 +1,51 @@ +# Git Collaboration + +## Learning Objectives + +<!--{{<objectives>}}>--> + +- [ ] Collaborate with colleagues using Git +<!--{{<objectives>}}>--> + +It's very unlikely that you will be the only person working with a Git repository. We have already practised creating branches and merging on our own during the prep, now we will do it with another person. + +**You will need to find a partner for this exercise**. If you have an odd number of people in your cohort you can work in a three, the important thing is that you work on a different repository for parts 1 and 2. + +## Instructions + +### Part 1 - Creating the repository + +1. Create a new directory called `animal-website` and an `index.html` file inside it. +2. Initialise a Git repository and commit the empty file. +3. Create a repository on GitHub and link it to your local repository +4. Populate `index.html` file with some information about your favourite animal. You should include: + - A title + - Two or three sentences about the animal. You can copy something from the internet if you like. + - A picture of the animal + - An unordered list with three facts about the animal, eg. its habitat, its diet, etc +5. Remember to commit your changes often! +6. When you have built the site push the changes to GitHub and send the repository's url to your partner. +7. You will need to add your partner as a collaborator on your repository before they can push to it. Click the `Settings` tab on the repository page then go to the `Collaborators and teams` page, then click `Add people` and enter your partners username. They will get an invite which they need to accept. + +### Part 2 - Collaborating + +1. Accept the invitation to collaborate from your partner +2. Clone the repository to your computer +3. Create a branch called `add-css`. Check that you are now working on your new branch. +4. Create a `styles.css` file and add it to `index.html` using a `<link>` element. +5. Add the following styling to the page: + - Change the background colour + - Change the font + - Center the title + - Add a border to the image +6. Remember to commit after each change! +7. Push your branch to GitHub +8. Create a pull request asking to merge your branch to `main` + +### Part 3 - Merging + +1. At this point your partner should have created a pull request. Merge the changes into your `main` branch. +2. **If you see a message about merge conflicts stop here**. That means something has gone wrong somewhere in this process. Post a message in Slack to ask for help. +3. You can **pull** the changes to your laptop to see what's different in the website. Click the three dots next to teh repository name in the source control tab and click "pull". + +If you see your partner's changes in your browser then everything has worked, well done! If not then you can post in Slack and ask for help, or speak to a volunteer in class. You should definitely speak to your partner and make sure nobody missed anything while working through the exercise. \ No newline at end of file From f5b9e819a30f0c85670a434480f8c50da8fbe6ab Mon Sep 17 00:00:00 2001 From: Daniel Wagner-Hall <dawagner@gmail.com> Date: Mon, 24 Aug 2026 14:07:44 +0100 Subject: [PATCH 24/25] Move exercises from Structuring and Testing Data (#1460) --- .gitignore | 6 +-- Sprint-2/1-key-exercises/1-count.js | 6 +++ Sprint-2/1-key-exercises/2-initials.js | 10 +++++ Sprint-2/1-key-exercises/3-paths.js | 23 +++++++++++ Sprint-2/1-key-exercises/4-random.js | 9 ++++ Sprint-2/2-mandatory-errors/0.js | 2 + Sprint-2/2-mandatory-errors/1.js | 4 ++ Sprint-2/2-mandatory-errors/2.js | 5 +++ Sprint-2/2-mandatory-errors/3.js | 9 ++++ Sprint-2/2-mandatory-errors/4.js | 2 + .../1-percentage-change.js | 22 ++++++++++ .../3-mandatory-interpret/2-time-format.js | 25 +++++++++++ Sprint-2/3-mandatory-interpret/3-to-pounds.js | 27 ++++++++++++ Sprint-2/4-stretch-explore/chrome.md | 15 +++++++ Sprint-2/4-stretch-explore/objects.md | 16 ++++++++ Sprint-2/README.md | 35 ++++++++++++++++ Sprint-3/1-key-errors/0.js | 13 ++++++ Sprint-3/1-key-errors/1.js | 20 +++++++++ Sprint-3/1-key-errors/2.js | 20 +++++++++ Sprint-3/2-mandatory-debug/0.js | 14 +++++++ Sprint-3/2-mandatory-debug/1.js | 13 ++++++ Sprint-3/2-mandatory-debug/2.js | 24 +++++++++++ Sprint-3/3-mandatory-implement/1-bmi.js | 19 +++++++++ Sprint-3/3-mandatory-implement/2-cases.js | 16 ++++++++ Sprint-3/3-mandatory-implement/3-to-pounds.js | 6 +++ Sprint-3/4-mandatory-interpret/time-format.js | 38 +++++++++++++++++ Sprint-3/5-stretch-extend/format-time.js | 25 +++++++++++ Sprint-3/README.md | 41 +++++++++++++++++++ package.json | 15 +++++++ 29 files changed, 477 insertions(+), 3 deletions(-) create mode 100644 Sprint-2/1-key-exercises/1-count.js create mode 100644 Sprint-2/1-key-exercises/2-initials.js create mode 100644 Sprint-2/1-key-exercises/3-paths.js create mode 100644 Sprint-2/1-key-exercises/4-random.js create mode 100644 Sprint-2/2-mandatory-errors/0.js create mode 100644 Sprint-2/2-mandatory-errors/1.js create mode 100644 Sprint-2/2-mandatory-errors/2.js create mode 100644 Sprint-2/2-mandatory-errors/3.js create mode 100644 Sprint-2/2-mandatory-errors/4.js create mode 100644 Sprint-2/3-mandatory-interpret/1-percentage-change.js create mode 100644 Sprint-2/3-mandatory-interpret/2-time-format.js create mode 100644 Sprint-2/3-mandatory-interpret/3-to-pounds.js create mode 100644 Sprint-2/4-stretch-explore/chrome.md create mode 100644 Sprint-2/4-stretch-explore/objects.md create mode 100644 Sprint-2/README.md create mode 100644 Sprint-3/1-key-errors/0.js create mode 100644 Sprint-3/1-key-errors/1.js create mode 100644 Sprint-3/1-key-errors/2.js create mode 100644 Sprint-3/2-mandatory-debug/0.js create mode 100644 Sprint-3/2-mandatory-debug/1.js create mode 100644 Sprint-3/2-mandatory-debug/2.js create mode 100644 Sprint-3/3-mandatory-implement/1-bmi.js create mode 100644 Sprint-3/3-mandatory-implement/2-cases.js create mode 100644 Sprint-3/3-mandatory-implement/3-to-pounds.js create mode 100644 Sprint-3/4-mandatory-interpret/time-format.js create mode 100644 Sprint-3/5-stretch-extend/format-time.js create mode 100644 Sprint-3/README.md create mode 100644 package.json diff --git a/.gitignore b/.gitignore index 04ad57f27..bde36e530 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ -**/.DS_Store +node_modules .DS_Store -node_modules/ -.vscode/ \ No newline at end of file +.vscode +**/.DS_Store \ No newline at end of file diff --git a/Sprint-2/1-key-exercises/1-count.js b/Sprint-2/1-key-exercises/1-count.js new file mode 100644 index 000000000..117bcb2b6 --- /dev/null +++ b/Sprint-2/1-key-exercises/1-count.js @@ -0,0 +1,6 @@ +let count = 0; + +count = count + 1; + +// Line 1 is a variable declaration, creating the count variable with an initial value of 0 +// Describe what line 3 is doing, in particular focus on what = is doing diff --git a/Sprint-2/1-key-exercises/2-initials.js b/Sprint-2/1-key-exercises/2-initials.js new file mode 100644 index 000000000..964c9563c --- /dev/null +++ b/Sprint-2/1-key-exercises/2-initials.js @@ -0,0 +1,10 @@ +const firstName = "Creola"; +const middleName = "Katherine"; +const lastName = "Johnson"; + +// Declare a variable called initials that stores the first character of each string. +// This should produce the string "CKJ", but you must not write the characters C, K, or J in the code of your solution. + +const initials = ``; + +// https://www.google.com/search?q=get+first+character+of+string+mdn diff --git a/Sprint-2/1-key-exercises/3-paths.js b/Sprint-2/1-key-exercises/3-paths.js new file mode 100644 index 000000000..ab90ebb28 --- /dev/null +++ b/Sprint-2/1-key-exercises/3-paths.js @@ -0,0 +1,23 @@ +// The diagram below shows the different names for parts of a file path on a Unix operating system + +// β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +// β”‚ dir β”‚ base β”‚ +// β”œβ”€β”€β”€β”€β”€β”€β”¬ β”œβ”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€ +// β”‚ root β”‚ β”‚ name β”‚ ext β”‚ +// " / home/user/dir / file .txt " +// β””β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”˜ + +// (All spaces in the "" line should be ignored. They are purely for formatting.) + +const filePath = "/Users/mitch/cyf/Module-JS1/week-1/interpret/file.txt"; +const lastSlashIndex = filePath.lastIndexOf("/"); +const base = filePath.slice(lastSlashIndex + 1); +console.log(`The base part of ${filePath} is ${base}`); + +// Create a variable to store the dir part of the filePath variable +// Create a variable to store the ext part of the variable + +const dir = ; +const ext = ; + +// https://www.google.com/search?q=slice+mdn \ No newline at end of file diff --git a/Sprint-2/1-key-exercises/4-random.js b/Sprint-2/1-key-exercises/4-random.js new file mode 100644 index 000000000..292f83aab --- /dev/null +++ b/Sprint-2/1-key-exercises/4-random.js @@ -0,0 +1,9 @@ +const minimum = 1; +const maximum = 100; + +const num = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum; + +// In this exercise, you will need to work out what num represents? +// Try breaking down the expression and using documentation to explain what it means +// It will help to think about the order in which expressions are evaluated +// Try logging the value of num and running the program several times to build an idea of what the program is doing diff --git a/Sprint-2/2-mandatory-errors/0.js b/Sprint-2/2-mandatory-errors/0.js new file mode 100644 index 000000000..cf6c5039f --- /dev/null +++ b/Sprint-2/2-mandatory-errors/0.js @@ -0,0 +1,2 @@ +This is just an instruction for the first activity - but it is just for human consumption +We don't want the computer to run these 2 lines - how can we solve this problem? \ No newline at end of file diff --git a/Sprint-2/2-mandatory-errors/1.js b/Sprint-2/2-mandatory-errors/1.js new file mode 100644 index 000000000..7a43cbea7 --- /dev/null +++ b/Sprint-2/2-mandatory-errors/1.js @@ -0,0 +1,4 @@ +// trying to create an age variable and then reassign the value by 1 + +const age = 33; +age = age + 1; diff --git a/Sprint-2/2-mandatory-errors/2.js b/Sprint-2/2-mandatory-errors/2.js new file mode 100644 index 000000000..e09b89831 --- /dev/null +++ b/Sprint-2/2-mandatory-errors/2.js @@ -0,0 +1,5 @@ +// Currently trying to print the string "I was born in Bolton" but it isn't working... +// what's the error ? + +console.log(`I was born in ${cityOfBirth}`); +const cityOfBirth = "Bolton"; diff --git a/Sprint-2/2-mandatory-errors/3.js b/Sprint-2/2-mandatory-errors/3.js new file mode 100644 index 000000000..ec101884d --- /dev/null +++ b/Sprint-2/2-mandatory-errors/3.js @@ -0,0 +1,9 @@ +const cardNumber = 4533787178994213; +const last4Digits = cardNumber.slice(-4); + +// The last4Digits variable should store the last 4 digits of cardNumber +// However, the code isn't working +// Before running the code, make and explain a prediction about why the code won't work +// Then run the code and see what error it gives. +// Consider: Why does it give this error? Is this what I predicted? If not, what's different? +// Then try updating the expression last4Digits is assigned to, in order to get the correct value diff --git a/Sprint-2/2-mandatory-errors/4.js b/Sprint-2/2-mandatory-errors/4.js new file mode 100644 index 000000000..5f86c730b --- /dev/null +++ b/Sprint-2/2-mandatory-errors/4.js @@ -0,0 +1,2 @@ +const 12HourClockTime = "8:53pm"; +const 24hourClockTime = "20:53"; diff --git a/Sprint-2/3-mandatory-interpret/1-percentage-change.js b/Sprint-2/3-mandatory-interpret/1-percentage-change.js new file mode 100644 index 000000000..e24ecb8e1 --- /dev/null +++ b/Sprint-2/3-mandatory-interpret/1-percentage-change.js @@ -0,0 +1,22 @@ +let carPrice = "10,000"; +let priceAfterOneYear = "8,543"; + +carPrice = Number(carPrice.replaceAll(",", "")); +priceAfterOneYear = Number(priceAfterOneYear.replaceAll("," "")); + +const priceDifference = carPrice - priceAfterOneYear; +const percentageChange = (priceDifference / carPrice) * 100; + +console.log(`The percentage change is ${percentageChange}`); + +// Read the code and then answer the questions below + +// a) How many function calls are there in this file? Write down all the lines where a function call is made + +// b) Run the code and identify the line where the error is coming from - why is this error occurring? How can you fix this problem? + +// c) Identify all the lines that are variable reassignment statements + +// d) Identify all the lines that are variable declarations + +// e) Describe what the expression Number(carPrice.replaceAll(",","")) is doing - what is the purpose of this expression? diff --git a/Sprint-2/3-mandatory-interpret/2-time-format.js b/Sprint-2/3-mandatory-interpret/2-time-format.js new file mode 100644 index 000000000..47d239558 --- /dev/null +++ b/Sprint-2/3-mandatory-interpret/2-time-format.js @@ -0,0 +1,25 @@ +const movieLength = 8784; // length of movie in seconds + +const remainingSeconds = movieLength % 60; +const totalMinutes = (movieLength - remainingSeconds) / 60; + +const remainingMinutes = totalMinutes % 60; +const totalHours = (totalMinutes - remainingMinutes) / 60; + +const result = `${totalHours}:${remainingMinutes}:${remainingSeconds}`; +console.log(result); + +// For the piece of code above, read the code and then answer the following questions + +// a) How many variable declarations are there in this program? + +// b) How many function calls are there? + +// c) Using documentation, explain what the expression movieLength % 60 represents +// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators + +// d) Interpret line 4, what does the expression assigned to totalMinutes mean? + +// e) What do you think the variable result represents? Can you think of a better name for this variable? + +// f) Try experimenting with different values of movieLength. Will this code work for all values of movieLength? Explain your answer diff --git a/Sprint-2/3-mandatory-interpret/3-to-pounds.js b/Sprint-2/3-mandatory-interpret/3-to-pounds.js new file mode 100644 index 000000000..60c9ace69 --- /dev/null +++ b/Sprint-2/3-mandatory-interpret/3-to-pounds.js @@ -0,0 +1,27 @@ +const penceString = "399p"; + +const penceStringWithoutTrailingP = penceString.substring( + 0, + penceString.length - 1 +); + +const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0"); +const pounds = paddedPenceNumberString.substring( + 0, + paddedPenceNumberString.length - 2 +); + +const pence = paddedPenceNumberString + .substring(paddedPenceNumberString.length - 2) + .padEnd(2, "0"); + +console.log(`Β£${pounds}.${pence}`); + +// This program takes a string representing a price in pence +// The program then builds up a string representing the price in pounds + +// You need to do a step-by-step breakdown of each line in this program +// Try and describe the purpose / rationale behind each step + +// To begin, we can start with +// 1. const penceString = "399p": initialises a string variable with the value "399p" diff --git a/Sprint-2/4-stretch-explore/chrome.md b/Sprint-2/4-stretch-explore/chrome.md new file mode 100644 index 000000000..962580b82 --- /dev/null +++ b/Sprint-2/4-stretch-explore/chrome.md @@ -0,0 +1,15 @@ +Open a new window in Chrome, right click an empty space on the page, select **Inspect** from the dropdown, then locate the **Console** tab. + +Voila! You now have access to the [Chrome V8 Engine](https://www.cloudflare.com/en-gb/learning/serverless/glossary/what-is-chrome-v8/). +Just like the Node REPL, you can input JavaScript code into the Console tab and the V8 engine will execute it. + +Let's try an example. + +In the Chrome console, invoke the function `alert` with one argument, the string `"Hello world!"`; + +What effect does calling the `alert` function have? + +Now try invoking the function `prompt` with a string input of `"What is your name?"` - store the return value of your call to `prompt` in an variable called `myName`. + +What effect does calling the `prompt` function have? +What is the return value of `prompt`? diff --git a/Sprint-2/4-stretch-explore/objects.md b/Sprint-2/4-stretch-explore/objects.md new file mode 100644 index 000000000..0216dee56 --- /dev/null +++ b/Sprint-2/4-stretch-explore/objects.md @@ -0,0 +1,16 @@ +## Objects + +In this activity, we'll explore some additional concepts that you'll encounter in more depth later on in the course. + +Open the Chrome devtools Console, type in `console.log` and then hit enter + +What output do you get? + +Now enter just `console` in the Console, what output do you get back? + +Try also entering `typeof console` + +Answer the following questions: + +What does `console` store? +What does the syntax `console.log` or `console.assert` mean? In particular, what does the `.` mean? diff --git a/Sprint-2/README.md b/Sprint-2/README.md new file mode 100644 index 000000000..826253dfc --- /dev/null +++ b/Sprint-2/README.md @@ -0,0 +1,35 @@ +# 🧭 Guide to Sprint 2 exercises + +> https://curriculum.codeyourfuture.io/javascript-fundamentals/sprints/2/prep/ + +> [!TIP] +> You should always do the prep work _before_ attempting the coursework. +> The prep shows you _how_ to do the coursework. +> There is often a step by step video you can code along with too. +> Do the prep. + +This README will guide you through the different sections for this week. + +## 1 Exercises + +In this section, you'll have a short program and task. Some of the syntax may be unfamiliar - in this case, you'll need to look things up in documentation. + +https://developer.mozilla.org/en-US/docs/Web/JavaScript + +## 2 Errors + +In this section, you'll need to go to each file in `errors` directory and run the file with node to check what the error is. Your task is to interpret the error message and explain why it occurs. The [errors documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors) will help you figure out the solution. + +## 3 Interpret + +In these tasks, you have to interpret a slightly larger program with some syntax / operators / functions that may be unfamiliar. + +You must use documentation to make sense of anything unfamiliar - learning how to look things up this way is a fundamental part of being a developer! + +You can also use `console.log` to check the value of different variables in the code. + +https://developer.mozilla.org/en-US/docs/Web/JavaScript + +## 4 Explore - Stretch πŸ’ͺ + +This stretch activity will get you to start exploring new concepts and environments by yourself. It will do so by prompting you to reflect on some questions. diff --git a/Sprint-3/1-key-errors/0.js b/Sprint-3/1-key-errors/0.js new file mode 100644 index 000000000..653d6f5a0 --- /dev/null +++ b/Sprint-3/1-key-errors/0.js @@ -0,0 +1,13 @@ +// Predict and explain first... +// =============> write your prediction here + +// call the function capitalise with a string input +// interpret the error message and figure out why an error is occurring + +function capitalise(str) { + let str = `${str[0].toUpperCase()}${str.slice(1)}`; + return str; +} + +// =============> write your explanation here +// =============> write your new code here diff --git a/Sprint-3/1-key-errors/1.js b/Sprint-3/1-key-errors/1.js new file mode 100644 index 000000000..f2d56151f --- /dev/null +++ b/Sprint-3/1-key-errors/1.js @@ -0,0 +1,20 @@ +// Predict and explain first... + +// Why will an error occur when this program runs? +// =============> write your prediction here + +// Try playing computer with the example to work out what is going on + +function convertToPercentage(decimalNumber) { + const decimalNumber = 0.5; + const percentage = `${decimalNumber * 100}%`; + + return percentage; +} + +console.log(decimalNumber); + +// =============> write your explanation here + +// Finally, correct the code to fix the problem +// =============> write your new code here diff --git a/Sprint-3/1-key-errors/2.js b/Sprint-3/1-key-errors/2.js new file mode 100644 index 000000000..aad57f7cf --- /dev/null +++ b/Sprint-3/1-key-errors/2.js @@ -0,0 +1,20 @@ + +// Predict and explain first BEFORE you run any code... + +// this function should square any number but instead we're going to get an error + +// =============> write your prediction of the error here + +function square(3) { + return num * num; +} + +// =============> write the error message here + +// =============> explain this error message here + +// Finally, correct the code to fix the problem + +// =============> write your new code here + + diff --git a/Sprint-3/2-mandatory-debug/0.js b/Sprint-3/2-mandatory-debug/0.js new file mode 100644 index 000000000..b27511b41 --- /dev/null +++ b/Sprint-3/2-mandatory-debug/0.js @@ -0,0 +1,14 @@ +// Predict and explain first... + +// =============> write your prediction here + +function multiply(a, b) { + console.log(a * b); +} + +console.log(`The result of multiplying 10 and 32 is ${multiply(10, 32)}`); + +// =============> write your explanation here + +// Finally, correct the code to fix the problem +// =============> write your new code here diff --git a/Sprint-3/2-mandatory-debug/1.js b/Sprint-3/2-mandatory-debug/1.js new file mode 100644 index 000000000..37cedfbcf --- /dev/null +++ b/Sprint-3/2-mandatory-debug/1.js @@ -0,0 +1,13 @@ +// Predict and explain first... +// =============> write your prediction here + +function sum(a, b) { + return; + a + b; +} + +console.log(`The sum of 10 and 32 is ${sum(10, 32)}`); + +// =============> write your explanation here +// Finally, correct the code to fix the problem +// =============> write your new code here diff --git a/Sprint-3/2-mandatory-debug/2.js b/Sprint-3/2-mandatory-debug/2.js new file mode 100644 index 000000000..57d3f5dc3 --- /dev/null +++ b/Sprint-3/2-mandatory-debug/2.js @@ -0,0 +1,24 @@ +// Predict and explain first... + +// Predict the output of the following code: +// =============> Write your prediction here + +const num = 103; + +function getLastDigit() { + return num.toString().slice(-1); +} + +console.log(`The last digit of 42 is ${getLastDigit(42)}`); +console.log(`The last digit of 105 is ${getLastDigit(105)}`); +console.log(`The last digit of 806 is ${getLastDigit(806)}`); + +// Now run the code and compare the output to your prediction +// =============> write the output here +// Explain why the output is the way it is +// =============> write your explanation here +// Finally, correct the code to fix the problem +// =============> write your new code here + +// This program should tell the user the last digit of each number. +// Explain why getLastDigit is not working properly - correct the problem diff --git a/Sprint-3/3-mandatory-implement/1-bmi.js b/Sprint-3/3-mandatory-implement/1-bmi.js new file mode 100644 index 000000000..58b1085f1 --- /dev/null +++ b/Sprint-3/3-mandatory-implement/1-bmi.js @@ -0,0 +1,19 @@ +// Below are the steps for how BMI is calculated + +// The BMI calculation divides an adult's weight in kilograms (kg) by their height in metres (m) squared. + +// For example, if you weigh 70kg (around 11 stone) and are 1.73m (around 5 feet 8 inches) tall, you work out your BMI by: + +// squaring your height: 1.73 x 1.73 = 2.99 +// dividing 70 by 2.99 = 23.41 +// Your result will be displayed to 1 decimal place, for example '23.4'. + +// You will need to implement a function that calculates the BMI of someone based off their weight and height + +// Given someone's weight in kg and height in metres +// Then when we call this function with the weight and height +// It should return a string of their Body Mass Index to 1 decimal place + +function calculateBMI(weight, height) { + // return the BMI of someone based off their weight and height +} diff --git a/Sprint-3/3-mandatory-implement/2-cases.js b/Sprint-3/3-mandatory-implement/2-cases.js new file mode 100644 index 000000000..5b0ef77ad --- /dev/null +++ b/Sprint-3/3-mandatory-implement/2-cases.js @@ -0,0 +1,16 @@ +// A set of words can be grouped together in different cases. + +// For example, "hello there" in snake case would be written "hello_there" +// UPPER_SNAKE_CASE means taking a string and writing it in all caps with underscores instead of spaces. + +// Implement a function that: + +// Given a string input like "hello there" +// When we call this function with the input string +// it returns the string in UPPER_SNAKE_CASE, so "HELLO_THERE" + +// Another example: "lord of the rings" should be "LORD_OF_THE_RINGS" + +// You will need to come up with an appropriate name for the function +// Use the MDN string documentation to help you find a solution +// This might help https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase diff --git a/Sprint-3/3-mandatory-implement/3-to-pounds.js b/Sprint-3/3-mandatory-implement/3-to-pounds.js new file mode 100644 index 000000000..10754da73 --- /dev/null +++ b/Sprint-3/3-mandatory-implement/3-to-pounds.js @@ -0,0 +1,6 @@ +// In Sprint-1, there is a program written in 3-mandatory-interpret/3-to-pounds.js + +// You will need to take this code and turn it into a reusable block of code. +// You will need to declare a function called toPounds with an appropriately named parameter. + +// You should call this function a number of times to check it works for different inputs diff --git a/Sprint-3/4-mandatory-interpret/time-format.js b/Sprint-3/4-mandatory-interpret/time-format.js new file mode 100644 index 000000000..c0dd9c9a5 --- /dev/null +++ b/Sprint-3/4-mandatory-interpret/time-format.js @@ -0,0 +1,38 @@ +function pad(num) { + let numString = num.toString(); + while (numString.length < 2) { + numString = "0" + numString; + } + return numString; +} + +function formatTimeDisplay(seconds) { + const remainingSeconds = seconds % 60; + const totalMinutes = (seconds - remainingSeconds) / 60; + const remainingMinutes = totalMinutes % 60; + const totalHours = (totalMinutes - remainingMinutes) / 60; + + return `${pad(totalHours)}:${pad(remainingMinutes)}:${pad(remainingSeconds)}`; +} + +// You will need to play computer with this example - use the Python Visualiser https://pythontutor.com/visualize.html#mode=edit +// to help you answer these questions + +// Questions + +// a) When formatTimeDisplay is called how many times will pad be called? +// =============> write your answer here + +// Call formatTimeDisplay with an input of 61, now answer the following: + +// b) What is the value assigned to num when pad is called for the first time? +// =============> write your answer here + +// c) What is the return value of pad when it is called for the first time? +// =============> write your answer here + +// d) What is the value assigned to num when pad is called for the last time in this program? Explain your answer +// =============> write your answer here + +// e) What is the return value of pad when it is called for the last time in this program? Explain your answer +// =============> write your answer here diff --git a/Sprint-3/5-stretch-extend/format-time.js b/Sprint-3/5-stretch-extend/format-time.js new file mode 100644 index 000000000..32a32e66b --- /dev/null +++ b/Sprint-3/5-stretch-extend/format-time.js @@ -0,0 +1,25 @@ +// This is the latest solution to the problem from the prep. +// Make sure to do the prep before you do the coursework +// Your task is to write tests for as many different groups of input data or edge cases as you can, and fix any bugs you find. + +function formatAs12HourClock(time) { + const hours = Number(time.slice(0, 2)); + if (hours > 12) { + return `${hours - 12}:00 pm`; + } + return `${time} am`; +} + +const currentOutput = formatAs12HourClock("08:00"); +const targetOutput = "08:00 am"; +console.assert( + currentOutput === targetOutput, + `current output: ${currentOutput}, target output: ${targetOutput}` +); + +const currentOutput2 = formatAs12HourClock("23:00"); +const targetOutput2 = "11:00 pm"; +console.assert( + currentOutput2 === targetOutput2, + `current output: ${currentOutput2}, target output: ${targetOutput2}` +); diff --git a/Sprint-3/README.md b/Sprint-3/README.md new file mode 100644 index 000000000..e8b0419f9 --- /dev/null +++ b/Sprint-3/README.md @@ -0,0 +1,41 @@ +# 🧭 Guide to week 2 exercises + +> https://curriculum.codeyourfuture.io/itp/javascript-fundamentals/sprints/3/prep/ + +> [!TIP] +> You should always do the prep work _before_ attempting the coursework. +> The prep shows you how to do the coursework. +> There is often a step by step video you can code along with too. +> Do the prep. + +## 1 Errors + +In this section, you need to go to each file in `errors` directory. Read the file and predict what error will happen. Then run the file with node to check what the error is. Your task is to interpret the error message and explain why it occurs. The [errors documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors) will help you figure out the solution. + +## 2 Debug + +In this section, you need to go to each file in `debug` to **explain and predict** why the program isn't behaving as intended. Then you'll need to run the program with node to check your prediction. You will also need to correct the code too. + +## 3 Implement + +In this section, you will have a short set of requirements about a function. You will need to implement a function based off this set of requirements. Make sure you check your function works for a number of different inputs. + +Here is a recommended order: + +1. `1-bmi.js` +1. `2-cases.js` +1. `3-to-pounds.js` + +## 4 Interpret + +In these tasks, you have to interpret a slightly larger program with some syntax / operators / functions that may be unfamiliar. + +You must use documentation to make sense of anything unfamiliar. Learning how to look things up this way is a fundamental part of being a developer! + +You can also use `console.log` to check the value of different variables in the code. + +## 5 Extend + +In the prep for this sprint, we developed a function to convert 24 hour clock times to 12 hour clock times. + +Your task is to write tests for as many different groups of input data or edge cases as you can, and fix any bugs you find. This section is not mandatory, but it will also help you solve some similar kata in Codewars. diff --git a/package.json b/package.json new file mode 100644 index 000000000..eb798a7b6 --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "module-javascript-fundamentals", + "version": "1.0.0", + "description": "Like learning a musical instrument, programming requires daily practice.", + "main": "index.js", + "scripts": { + "test": "jest" + }, + "keywords": [], + "author": "Code Your Future", + "license": "ISC", + "dependencies": { + "jest": "^29.7.0" + } +} From d28242a938d2c22e3cfcc74476e48046bed8a348 Mon Sep 17 00:00:00 2001 From: abdishakoor-dev <abdishakoor@codeyourfuture.io> Date: Tue, 8 Sep 2026 13:26:43 +0100 Subject: [PATCH 25/25] Update READMEs for the JavaScript Fundamentals rename (#1474) The top-level README still welcomed trainees to the Onboarding module and had no curriculum link. The Sprint 2 prep link was missing /itp/ and 404'd, and the Sprint 3 guide was titled "week 2". Co-authored-by: Abdi Saeed <abdi.saeed2009@gmail.com> --- Sprint-2/README.md | 2 +- Sprint-3/README.md | 2 +- readme.md | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/Sprint-2/README.md b/Sprint-2/README.md index 826253dfc..a47afc540 100644 --- a/Sprint-2/README.md +++ b/Sprint-2/README.md @@ -1,6 +1,6 @@ # 🧭 Guide to Sprint 2 exercises -> https://curriculum.codeyourfuture.io/javascript-fundamentals/sprints/2/prep/ +> https://curriculum.codeyourfuture.io/itp/javascript-fundamentals/sprints/2/prep/ > [!TIP] > You should always do the prep work _before_ attempting the coursework. diff --git a/Sprint-3/README.md b/Sprint-3/README.md index e8b0419f9..992ae7906 100644 --- a/Sprint-3/README.md +++ b/Sprint-3/README.md @@ -1,4 +1,4 @@ -# 🧭 Guide to week 2 exercises +# 🧭 Guide to Sprint 3 exercises > https://curriculum.codeyourfuture.io/itp/javascript-fundamentals/sprints/3/prep/ diff --git a/readme.md b/readme.md index e929bed32..2390a4a33 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,6 @@ -# 🀝 Welcome to your Onboarding Module +# 🀝 Welcome to your JavaScript Fundamentals Module + +> https://curriculum.codeyourfuture.io/itp/javascript-fundamentals/ ## πŸ”‘ Do the prep