Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
d880057
UNCLOSED A
SallyMcGrath Jan 13, 2025
fafe955
Merge pull request #137 from CodeYourFuture/SallyMcGrath-patch-1
SallyMcGrath Jan 13, 2025
97e501c
Create netlify.toml
SallyMcGrath Jan 13, 2025
ff3a577
Update netlify.toml
SallyMcGrath Jan 13, 2025
9832f20
Update netlify.toml
SallyMcGrath Jan 13, 2025
2bc08bd
Merge pull request #138 from CodeYourFuture/SallyMcGrath-patch-2
SallyMcGrath Jan 13, 2025
02f552f
Update pull_request_template.md
cjyuan May 6, 2025
a575a36
Merge pull request #323 from cjyuan/update/pr-template
illicitonion May 6, 2025
16d6390
Update repo metadata
illicitonion Jul 14, 2025
7b96b80
Set up Validate PR Metadata action
illicitonion Aug 13, 2025
0b12de6
Allow secrets on action
illicitonion Aug 13, 2025
72fe02b
Update PR template
illicitonion Aug 26, 2025
3b1f395
Remove old issue templates (#1012)
cifarquhar Jan 22, 2026
762d3ae
Update readme to include article image in acceptance criteria. (#1074)
jenny-alexander Jan 26, 2026
e3593e2
Makes the Questions section and GitHub bot a bit clearer (#1131)
Poonam-raj Feb 4, 2026
2460dbd
Remove PR template
illicitonion Feb 4, 2026
f71a272
Merge pull request #1133 from CodeYourFuture/rm-pr-template
cifarquhar Feb 5, 2026
e2a10ab
Replace <h2> with <p> in footer since no major section in footer (#1147)
jenny-alexander Feb 6, 2026
3725052
Remove restriction on using CSS from forms readme. (#1169)
jenny-alexander Feb 11, 2026
329eea0
Give more specific comments for earlier learners (#1206)
illicitonion Mar 11, 2026
a7b8a25
Update Wireframe and Form-Control README.md (#1212)
cjyuan May 4, 2026
46911ae
Fix typo in 'Acceptance Criteria' section
Poonam-raj May 11, 2026
ff7b9d0
Fix a typo in README.md
cjyuan May 11, 2026
c44123d
add a tip to use pre-baked regex (#1337)
Liam310 May 22, 2026
64be115
Emphasise use of CSS in Wireframe spec
cjyuan Jun 18, 2026
4a0c11c
Clear style.css for the Wireframe exercise
cjyuan Jun 18, 2026
1c0c731
Add "top-down approach" in suggestion
cjyuan Jun 18, 2026
2615dee
Merge pull request #1451 from CodeYourFuture/cjyuan-patch-1
cjyuan Jul 16, 2026
3a47b15
add git collaborating task (#1454)
cifarquhar Aug 21, 2026
f5b9e81
Move exercises from Structuring and Testing Data (#1460)
illicitonion Aug 24, 2026
d28242a
Update READMEs for the JavaScript Fundamentals rename (#1474)
abdishakoor-dev Sep 8, 2026
c8a7393
Merge main into solutions
abdishakoor-dev Sep 22, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -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
14 changes: 0 additions & 14 deletions .github/ISSUE_TEMPLATE/config.yml

This file was deleted.

59 changes: 0 additions & 59 deletions .github/ISSUE_TEMPLATE/pd-assignment.yml

This file was deleted.

88 changes: 0 additions & 88 deletions .github/ISSUE_TEMPLATE/tech-ed-assignment.yml

This file was deleted.

32 changes: 0 additions & 32 deletions .github/pull_request_template.md

This file was deleted.

19 changes: 19 additions & 0 deletions .github/workflows/validate-pr-metadata.yml
Original file line number Diff line number Diff line change
@@ -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 }}
6 changes: 3 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
**/.DS_Store
node_modules
.DS_Store
node_modules/
.vscode/
.vscode
**/.DS_Store
61 changes: 41 additions & 20 deletions Form-Controls/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Loading