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 deleted file mode 100644 index 5fe8ffd09..000000000 --- a/.github/ISSUE_TEMPLATE/config.yml +++ /dev/null @@ -1,14 +0,0 @@ -blank_issues_enabled: false -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-syllabus-tech 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 c8bd22980..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] " -labels: [PD, 🏝 Priority Stretch, πŸ‡ Size Small] -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 ac9da906a..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, πŸ“… Module 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. diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md deleted file mode 100644 index ad933349a..000000000 --- a/.github/pull_request_template.md +++ /dev/null @@ -1,32 +0,0 @@ -<!-- - -You must title your PR like this: - -COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK - -For example, - -NW4 | Carol Owen | HTML-CSS-Module | Week1 - -Complete the task list below this message. -If your PR is rejected, check the task list. - ---> - -## Learners, PR Template - -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 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 - -Briefly explain your PR. - -## Questions - -Ask any questions you have for your reviewer. diff --git a/.github/workflows/validate-pr-metadata.yml b/.github/workflows/validate-pr-metadata.yml new file mode 100644 index 000000000..65df06116 --- /dev/null +++ b/.github/workflows/validate-pr-metadata.yml @@ -0,0 +1,19 @@ +name: Validate PR Metadata +on: + pull_request_target: + 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: + give_more_specific_comment_for_earlier_learners: true + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 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/Form-Controls/README.md b/Form-Controls/README.md index 1028d39dc..c356f8844 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -4,48 +4,69 @@ <!--{{<objectives>}}>--> -- [x] Interpret requirements and check against a list of criteria -- [x] Write a valid form -- [x] Test with Devtools -- [x] Refactor using Devtools +- [ ] Interpret requirements and check against a list of criteria +- [ ] 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. +> [!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. Let's write out our testable criteria. Check each one off as you complete it. -- [x] 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 -- [x] My form is semantic html. -- [x] All inputs have associated labels. -- [x] My Lighthouse Accessibility score is 100. -- [x] I require a valid name. I have defined a valid name as a text string of two characters or more. -- [x] I require a valid email. -- [x] I require one colour from a defined set of 3 colours. -- [x] I require one size from a defined set of 6 sizes. +- [ ] My form is semantic HTML. +- [ ] All inputs have associated labels. +- [ ] My Lighthouse Accessibility score is 100. +- [ ] 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/Form-Controls/index.html b/Form-Controls/index.html index e00a32287..41ff4b090 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -20,14 +20,14 @@ <h1>Product Pick</h1> <legend>Customer identification</legend> <!-- labels must be associated with the correct inputs using for="" or with implicit association by wrapping the input with the label. However, attribute association is preferred--> <label for="name">Your Name</label> - <!-- a pattern or a minlength is valid --> + <!-- the README gives this regex: at least two non-space characters --> + <!-- minlength="2" alone is not enough: it accepts " " or "a " --> <input type="text" name="name" id="name" - pattern=".{2,}" - required - title="2 letters or more in your name, please" + pattern=".*\S.*\S.*" + title="Please enter at least 2 letters in your name" required /> <label for="email">Your Email</label> @@ -35,8 +35,8 @@ <h1>Product Pick</h1> type="email" name="email" id="email" - required autocomplete="on" + required /> </fieldset> <fieldset> @@ -57,10 +57,12 @@ <h1>Product Pick</h1> <label for="blue">Blue</label> </fieldset> <fieldset> - <legend for="size">Size</legend> + <legend>Size</legend> <label for="size">Choose Size</label> <!-- select or radio buttons are the right choice here --> + <!-- the empty first option makes "required" work: the customer must pick a size --> <select name="size" id="size" required> + <option value="">Select a size</option> <option value="xs">Extra Small</option> <option value="s">Small</option> <option value="m">Medium</option> @@ -69,26 +71,13 @@ <h1>Product Pick</h1> <option value="xxl">Extra Extra Large</option> </select> </fieldset> - <fieldset> - <label for="date">Choose delivery date</label> - <!-- a datepicker is the right choice here --> - <!-- it should have min and max but these dates will change! --> - <input - type="date" - name="date" - id="date" - min="2025-01-01" - max="2025-02-15" - required - /> - </fieldset> <!-- submit is not technically necessary but it is good practice --> <button type="submit">Submit</button> </form> </main> <footer> <!-- change to your name--> - <h2>By SALLY MCGRATH</h2> + <p>By HOMEWORK SOLUTION</p> </footer> </body> </html> 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/ diff --git a/Sprint-2/1-key-exercises/2-initials.js b/Sprint-2/1-key-exercises/2-initials.js index f044812ed..e4e91c2f6 100644 --- a/Sprint-2/1-key-exercises/2-initials.js +++ b/Sprint-2/1-key-exercises/2-initials.js @@ -1,11 +1,11 @@ -let firstName = "Creola"; -let middleName = "Katherine"; -let lastName = "Johnson"; +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. -let initials = `${firstName[0]}${middleName[0]}${lastName[0]}`; +const initials = `${firstName[0]}${middleName[0]}${lastName[0]}`; console.assert(initials === "CKJ"); diff --git a/Sprint-2/2-mandatory-errors/4.js b/Sprint-2/2-mandatory-errors/4.js index aeba68139..8138ae5ff 100644 --- a/Sprint-2/2-mandatory-errors/4.js +++ b/Sprint-2/2-mandatory-errors/4.js @@ -1,8 +1,8 @@ -// const 12HourClockTime = "20:53"; -// const 24hourClockTime = "08:53"; +// const 12HourClockTime = "8:53pm"; +// const 24hourClockTime = "20:53"; -const clockTime12 = "20:53"; -const clockTime24 = "08:53"; +const clockTime12 = "8:53pm"; +const clockTime24 = "20:53"; // ===========> Prediction // 12HourClockTime is not a valid variable name because it starts with a number. diff --git a/Sprint-2/3-mandatory-interpret/2-time-format.js b/Sprint-2/3-mandatory-interpret/2-time-format.js index ecb54c99d..677d4ed0c 100644 --- a/Sprint-2/3-mandatory-interpret/2-time-format.js +++ b/Sprint-2/3-mandatory-interpret/2-time-format.js @@ -1,4 +1,4 @@ -const movieLength = 24; // length of movie in seconds +const movieLength = 8784; // length of movie in seconds const remainingSeconds = movieLength % 60; const totalMinutes = (movieLength - remainingSeconds) / 60; diff --git a/Sprint-2/4-stretch-explore/chrome.md b/Sprint-2/4-stretch-explore/chrome.md index cfb361442..7ae713005 100644 --- a/Sprint-2/4-stretch-explore/chrome.md +++ b/Sprint-2/4-stretch-explore/chrome.md @@ -1,16 +1,14 @@ -Open a new window in Chrome, - -then locate the **Console** tab. +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 an input string of `"Hello world!"`; +In the Chrome console, invoke the function `alert` with one argument, the string `"Hello world!"`; What effect does calling the `alert` function have? + =========> It displays a pop-up window with the message "Hello world!". 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`. @@ -22,4 +20,4 @@ What effect does calling the `prompt` function have? What is the return value of `prompt`? https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt#return_value -=========> A string containing the text entered by the user, or null. +=========> A string containing the text entered by the user, or null if the user cancels. 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/1-key-errors/1.js b/Sprint-3/1-key-errors/1.js index 5a6196786..6c48c25d1 100644 --- a/Sprint-3/1-key-errors/1.js +++ b/Sprint-3/1-key-errors/1.js @@ -4,6 +4,7 @@ // =============> Same thing. We are redeclaring the variable decimalNumber in the function. // This will throw an error because we are redeclaring the variable. But I think there's also a // problem with our console.log statement. We are trying to log a variable that is declared inside +// the function, so it does not exist outside the function. // Try playing computer with the example to work out what is going on diff --git a/Sprint-3/2-mandatory-debug/0.js b/Sprint-3/2-mandatory-debug/0.js index 6082b2389..951b355b0 100644 --- a/Sprint-3/2-mandatory-debug/0.js +++ b/Sprint-3/2-mandatory-debug/0.js @@ -11,8 +11,8 @@ // console.log(`The result of multiplying 10 and 32 is ${multiply(10, 32)}`); // =============> write your explanation here -// // When I run this script -// [~/CYF/ITP/Module-Structuring-and-Testing-Data/Sprint-2/2-mandatory-debug]: node 0.js +// When I run this script +// $ node 0.js // 320 // The result of multiplying 10 and 32 is undefined diff --git a/Sprint-3/2-mandatory-debug/2.js b/Sprint-3/2-mandatory-debug/2.js index ef268078d..5a1b2df6a 100644 --- a/Sprint-3/2-mandatory-debug/2.js +++ b/Sprint-3/2-mandatory-debug/2.js @@ -34,3 +34,7 @@ function getLastDigit(num) { console.log(`The last digit of 42 is ${getLastDigit(42)}`); //2 console.log(`The last digit of 105 is ${getLastDigit(105)}`); //5 console.log(`The last digit of 806 is ${getLastDigit(806)}`); //6 + +// This program should tell the user the last digit of each number. +// Explain why getLastDigit is not working properly - correct the problem +// =============> getLastDigit had no parameter, so it always used the global num (103). Adding a num parameter fixes it. diff --git a/Sprint-3/3-mandatory-implement/1-bmi.js b/Sprint-3/3-mandatory-implement/1-bmi.js index 45c95ecaa..727e26762 100644 --- a/Sprint-3/3-mandatory-implement/1-bmi.js +++ b/Sprint-3/3-mandatory-implement/1-bmi.js @@ -6,17 +6,19 @@ // 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. +// 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 their Body Mass Index to 1 decimal place +// It should return a string of their Body Mass Index to 1 decimal place -const calculateBMI = (weightInKilograms, heightInMetres) => { - const BMI = weightInKilograms / (heightInMetres * heightInMetres); - return Math.round(BMI * 10) / 10; // will round the value to 1 dp, can also use .toFixed( 1 ) but will convert value to a string -}; +function calculateBMI(weight, height) { + const bmi = weight / (height * height); + return bmi.toFixed(1); // toFixed returns a string, rounded to 1 decimal place +} -console.log(calculateBMI(70, 1.73)); +console.log(calculateBMI(70, 1.73)); // "23.4" + +console.assert(calculateBMI(70, 1.73) === "23.4"); diff --git a/Sprint-3/3-mandatory-implement/3-to-pounds.js b/Sprint-3/3-mandatory-implement/3-to-pounds.js index fb9fe17b5..614bda7f2 100644 --- a/Sprint-3/3-mandatory-implement/3-to-pounds.js +++ b/Sprint-3/3-mandatory-implement/3-to-pounds.js @@ -1,20 +1,20 @@ -// In Sprint-1, there is a program written in interpret/to-pounds.js +// 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 -function toPoundsAndPence(penceString) { +function toPounds(penceString) { const penceStringWithoutTrailingP = penceString.substring( 0, - penceString.length - 1 + penceString.length - 1, ); const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0"); const pounds = paddedPenceNumberString.substring( 0, - paddedPenceNumberString.length - 2 + paddedPenceNumberString.length - 2, ); const pence = paddedPenceNumberString @@ -24,6 +24,6 @@ function toPoundsAndPence(penceString) { return `Β£${pounds}.${pence}`; } -console.assert(toPoundsAndPence("399p") === "Β£3.99"); -console.assert(toPoundsAndPence("1p") === "Β£0.01"); -console.assert(toPoundsAndPence("896432p") === "Β£8964.32"); +console.assert(toPounds("399p") === "Β£3.99"); +console.assert(toPounds("1p") === "Β£0.01"); +console.assert(toPounds("896432p") === "Β£8964.32"); diff --git a/Sprint-3/4-mandatory-interpret/time-format.js b/Sprint-3/4-mandatory-interpret/time-format.js index db07f5a6e..b9699c9b1 100644 --- a/Sprint-3/4-mandatory-interpret/time-format.js +++ b/Sprint-3/4-mandatory-interpret/time-format.js @@ -1,14 +1,18 @@ function pad(num) { - return num.toString().padStart(2, "0"); + let numString = num.toString(); + while (numString.length < 2) { + numString = "0" + numString; + } + return numString; } function formatTimeDisplay(seconds) { - const remainingSeconds = seconds % 60; // playing computer : 1 - const totalMinutes = (seconds - remainingSeconds) / 60; // playing computer : 1 - const remainingMinutes = totalMinutes % 60; // playing computer : 1 - const totalHours = (totalMinutes - remainingMinutes) / 60; // playing computer : 0 + 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)}`; // playing computer : 00:01:01 + 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 @@ -17,28 +21,18 @@ function formatTimeDisplay(seconds) { // Questions // a) When formatTimeDisplay is called how many times will pad be called? - -// a) πŸ”„ pad is called 3 times: - -// Once for hours -// Once for minutes -// Once for seconds - -// This is because the time format is "HH:MM:SS" and each number needs padding! +// =============> pad is called 3 times: once for hours, once for minutes and once for seconds. // 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? 0 +// b) What is the value assigned to num when pad is called for the first time? +// =============> 0. The first call is pad(totalHours), and 61 seconds is 0 hours. -// c) What is the return value of pad when pad is called for the first time? "00" +// c) What is the return value of pad when it is called for the first time? +// =============> "00". The while loop adds one "0" to "0" so the string has 2 characters. // d) What is the value assigned to num when pad is called for the last time in this program? Explain your answer +// =============> 1. The last call is pad(remainingSeconds), and 61 % 60 is 1. -// d) The value assigned to num when pad is called for the last time in this program is 1. -// This is because pad is called with the value of remainingSeconds, which is 1, or 61 % 60. -// 61 seconds is 1 minute and 1 second in total. - -// e) What is the return value assigned to num when pad is called for the last time in this program? Explain your answer - -// e) The return value assigned to num when pad is called for the last time in this program is "01". -// This is because the pad function pads the number with a "0" if it is less than 10. +// e) What is the return value of pad when it is called for the last time in this program? Explain your answer +// =============> "01". "1" has only 1 character, so the while loop adds one "0" in front. diff --git a/Sprint-3/5-stretch-extend/format-time.js b/Sprint-3/5-stretch-extend/format-time.js index 7887a4e9b..f3563f0f6 100644 --- a/Sprint-3/5-stretch-extend/format-time.js +++ b/Sprint-3/5-stretch-extend/format-time.js @@ -1,5 +1,5 @@ // This is the latest solution to the problem from the prep. -// https://programming.codeyourfuture.io/structuring-data/sprints/2/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) { @@ -11,7 +11,7 @@ function formatAs12HourClock(time) { return `12:${minutes} am`; } if (hours === 12) { - return `${hours}:${minutes} pm`; + return `12:${minutes} pm`; } // otherwise convert to 12-hour clock @@ -19,30 +19,27 @@ function formatAs12HourClock(time) { return `${hours - 12}:${minutes} pm`; } return `${time} am`; - - return false; } // Here's a short function to make my tests easier to read function assertEquals(actualOutput, targetOutput) { console.assert( actualOutput === targetOutput, - `Expected ${actualOutput} to equal ${targetOutput}` + `current output: ${actualOutput}, target output: ${targetOutput}`, ); } -// Test Group: Valid Inputs, Boundary Conditions -const validAfternoon = formatAs12HourClock("13:22"); -assertEquals(validAfternoon, "1:22 pm"); - -const validMorning = formatAs12HourClock("10:39"); -assertEquals(validMorning, "10:39 am"); - -const midnight = formatAs12HourClock("00:00"); -assertEquals(midnight, "12:00 am"); +// Test Group: the original tests +assertEquals(formatAs12HourClock("08:00"), "08:00 am"); +assertEquals(formatAs12HourClock("23:00"), "11:00 pm"); -const noon = formatAs12HourClock("12:00"); -assertEquals(noon, "12:00 pm"); +// Test Group: minutes are kept (bug: the original always returned ":00") +assertEquals(formatAs12HourClock("13:22"), "1:22 pm"); +assertEquals(formatAs12HourClock("10:39"), "10:39 am"); -const midnightMinutes = formatAs12HourClock("00:17"); -assertEquals(midnightMinutes, "12:17 am"); +// Test Group: boundary conditions +assertEquals(formatAs12HourClock("00:00"), "12:00 am"); +assertEquals(formatAs12HourClock("00:17"), "12:17 am"); +assertEquals(formatAs12HourClock("12:00"), "12:00 pm"); +assertEquals(formatAs12HourClock("11:59"), "11:59 am"); +assertEquals(formatAs12HourClock("23:59"), "11:59 pm"); 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/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..b1712c4b3 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -1,5 +1,18 @@ # Wireframe +## Learning Objectives + +<!--{{<objectives>}}>--> + +- [ ] Use semantic HTML tags to structure the webpage +- [ ] Create three articles, each including an image, title, summary, and a link +- [ ] 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 +<!--{{</objectives>}}>--> + +## Task ![Wireframe](./wireframe.png) Using the provided wireframe and resources, write a new webpage explaining: @@ -8,31 +21,35 @@ 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? -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. +Then arrange and style the elements so the page closely matches the wireframe. Exact replication is the goal, but small differences may be accepted. -## Learning Objectives - -<!--{{<objectives>}}>--> - -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including a 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 -<!--{{</objectives>}}>--> +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 - [ ] 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 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; it remains in place when the page scrolls. +- [ ] 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/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 diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 000000000..967c08285 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,16 @@ +[[plugins]] + package = "@netlify/plugin-lighthouse" + + [plugins.inputs] + fail_deploy_on_score_thresholds = 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" 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) 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