From 236dd8cf768272693e68ebf5aa43f45ebc3d20be Mon Sep 17 00:00:00 2001 From: khalidbih Date: Sat, 20 Sep 2025 14:07:06 +0100 Subject: [PATCH 1/2] I Added style to my inputs giving them a size --- Form-Controls/form-controls.html | 46 ++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 Form-Controls/form-controls.html diff --git a/Form-Controls/form-controls.html b/Form-Controls/form-controls.html new file mode 100644 index 000000000..2d597548a --- /dev/null +++ b/Form-Controls/form-controls.html @@ -0,0 +1,46 @@ + + + + + + T-shirt order + + +
+
+ Customer Details + + + > + + + > +
+
+ T-shirt Options + + + + + + +
+ + +
+ + + \ No newline at end of file From a88a2d281154f2ffcd9117253319e5e8d5103cd9 Mon Sep 17 00:00:00 2001 From: khalidbih Date: Sat, 27 Sep 2025 15:45:45 +0100 Subject: [PATCH 2/2] Remove Form-Controls folder from Wireframe branch --- Form-Controls/README.md | 51 -------------------------------- Form-Controls/form-controls.html | 46 ---------------------------- Form-Controls/index.html | 27 ----------------- 3 files changed, 124 deletions(-) delete mode 100644 Form-Controls/README.md delete mode 100644 Form-Controls/form-controls.html delete mode 100644 Form-Controls/index.html diff --git a/Form-Controls/README.md b/Form-Controls/README.md deleted file mode 100644 index bfcdf6c0b..000000000 --- a/Form-Controls/README.md +++ /dev/null @@ -1,51 +0,0 @@ -# Form Controls - -## Learning Objectives - - - -- [ ] Interpret requirements and check against a list of criteria -- [ ] Write a valid form -- [ ] Test with Devtools -- [ ] Refactor using Devtools - - -## Task - -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 - -All fields are required. -Do not write a form action for this project. - -## Developers must test their work. - -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. - -### 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 email. -- [ ] I require one colour from a defined set of 3 colours. -- [ ] I require one size from a defined set of 6 sizes. - -## 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) diff --git a/Form-Controls/form-controls.html b/Form-Controls/form-controls.html deleted file mode 100644 index 2d597548a..000000000 --- a/Form-Controls/form-controls.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - T-shirt order - - -
-
- Customer Details - - - > - - - > -
-
- T-shirt Options - - - - - - -
- - -
- - - \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html deleted file mode 100644 index 65a866cdb..000000000 --- a/Form-Controls/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - -