From 657c3d2057b23ccf57c5be43951be87367526292 Mon Sep 17 00:00:00 2001 From: lintsang Date: Thu, 21 May 2026 07:50:21 +0100 Subject: [PATCH 01/13] html form created --- Form-Controls/index.html | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..d75d64584 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,25 +3,24 @@ - My form exercise + Sprint 1 form controls exercise
-

Product Pick

+

Insert Your Name Below

- - + + +
From 17f876a7809e7944e38ace8feac939c936343cd7 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 06:30:16 +0100 Subject: [PATCH 02/13] delete js file for the task requirement --- Form-Controls/css/style.css | 3 +++ Form-Controls/index.html | 2 ++ 2 files changed, 5 insertions(+) create mode 100644 Form-Controls/css/style.css diff --git a/Form-Controls/css/style.css b/Form-Controls/css/style.css new file mode 100644 index 000000000..2f3b958b6 --- /dev/null +++ b/Form-Controls/css/style.css @@ -0,0 +1,3 @@ +h1{ + font-size: 1.5rem; +} \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index d75d64584..63e16c6de 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -6,6 +6,7 @@ Sprint 1 form controls exercise +
@@ -22,5 +23,6 @@

Insert Your Name Below

By Lin Tsang

+ From 196b343ba374c2f451ebb0d223fb5fedd6c308f8 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 06:56:22 +0100 Subject: [PATCH 03/13] added name and email in form --- Form-Controls/index.html | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 63e16c6de..69d3d615f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,20 +3,35 @@ - Sprint 1 form controls exercise + My Sprint 1 form controls exercise
-

Insert Your Name Below

+

Product Pick

- - - +
+ + Person name and email +
+ + +
+
+ + +
+ + + +
+
From 5da6e4f84ba3b86ea3c5c0fa61ce8f130cccadd4 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 07:05:48 +0100 Subject: [PATCH 04/13] added tshirt colour and size in form --- Form-Controls/index.html | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 69d3d615f..f157b909f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -25,8 +25,25 @@

Product Pick

- - +
+ + +
+
+ + + + + + + +
+
+

By Lin Tsang

- From a67be9d2307d97e05317caa0bb1313af0c5433ae Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 07:49:47 +0100 Subject: [PATCH 07/13] added css style to form --- Form-Controls/css/style.css | 35 ++++++++++++++++++++++++++++++++++- Form-Controls/index.html | 4 ++-- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/Form-Controls/css/style.css b/Form-Controls/css/style.css index 2f3b958b6..febd7e2e6 100644 --- a/Form-Controls/css/style.css +++ b/Form-Controls/css/style.css @@ -1,3 +1,36 @@ h1{ + font-family: 'Times New Roman', Times, serif; font-size: 1.5rem; -} \ No newline at end of file +} +fieldset{ + background-color: #becce2; + border: 2px solid #c0cde0; + border-style: solid; + border-radius: 0.5em; + margin: 1em auto; + padding: 1em; + width: 40em; + max-width: 800px; +} + +legend{ + color: #222; + background-color: #f6f9ff; + font-size: 90%; + padding: 1em 2em; + border: solid 1px #becce2; + border-radius: 0.3em; + + +} +fieldset > div{ + padding: 0.5em 3em; + display: grid; + grid-template-columns: 2fr 4fr; +} +input, select, button{ + border: solid 1px #becce2; + padding: 4px; + font-size: 1em; + border-radius: 0.3em; +} diff --git a/Form-Controls/index.html b/Form-Controls/index.html index e4eafc31f..03d31986e 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -15,8 +15,8 @@

Product Pick

- - Person name and email + + Person name and email
From b1cdf63fdb567ee5f8ca1e780b148d5eea43d389 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 08:57:10 +0100 Subject: [PATCH 08/13] checked all requirements fulfilled --- Form-Controls/README.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 86f623d89..9ffd4556d 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -4,12 +4,12 @@ -- [ ] 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 +- [x] Interpret requirements and check against a list of criteria +- [x] Write a valid form +- [x] Test with Devtools +- [x] Refactor using Devtools +- [x] Use version control by committing often and pushing regularly to GitHub +- [x] Develop the habit of writing clean, well-structured, and error-free code ## Task @@ -34,18 +34,18 @@ 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 only used HTML and CSS. -- [ ] I have not used any JavaScript. +- [x] I have only used HTML and CSS. +- [x] I have not used any JavaScript. ### HTML -- [ ] 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. +- [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. +- [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. ### Developers must adhere to professional standards. @@ -54,10 +54,10 @@ Let's write out our testable criteria. Check each one off as you complete it. 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 +- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [x] My code is consistently formatted +- [x] My page content is free of typos and grammatical mistakes +- [x] I commit often and push regularly to GitHub ## Resources - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms) From a226c31790f216ab125c774e589b38c2d17f9e82 Mon Sep 17 00:00:00 2001 From: lintsang Date: Mon, 1 Jun 2026 08:04:33 +0100 Subject: [PATCH 09/13] Unchecked list in readme.md --- Form-Controls/README.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 9ffd4556d..86f623d89 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -4,12 +4,12 @@ -- [x] Interpret requirements and check against a list of criteria -- [x] Write a valid form -- [x] Test with Devtools -- [x] Refactor using Devtools -- [x] Use version control by committing often and pushing regularly to GitHub -- [x] Develop the habit of writing clean, well-structured, and error-free code +- [ ] 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 ## Task @@ -34,18 +34,18 @@ Do not write a form action for this project. Let's write out our testable criteria. Check each one off as you complete it. -- [x] I have only used HTML and CSS. -- [x] I have not used any 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. -- [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. ### Developers must adhere to professional standards. @@ -54,10 +54,10 @@ Let's write out our testable criteria. Check each one off as you complete it. 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. -- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [x] My code is consistently formatted -- [x] My page content is free of typos and grammatical mistakes -- [x] I commit often and push regularly to GitHub +- [ ] 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) From 626217aa3d6cd0755671f6909a6c01c9c51b0c2a Mon Sep 17 00:00:00 2001 From: lintsang Date: Mon, 1 Jun 2026 19:31:08 +0100 Subject: [PATCH 10/13] Enhance code cleanliness by adding breathing line and removing unnecessary line --- Form-Controls/css/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Form-Controls/css/style.css b/Form-Controls/css/style.css index febd7e2e6..d08b3cb68 100644 --- a/Form-Controls/css/style.css +++ b/Form-Controls/css/style.css @@ -2,6 +2,7 @@ h1{ font-family: 'Times New Roman', Times, serif; font-size: 1.5rem; } + fieldset{ background-color: #becce2; border: 2px solid #c0cde0; @@ -20,14 +21,14 @@ legend{ padding: 1em 2em; border: solid 1px #becce2; border-radius: 0.3em; - - } + fieldset > div{ padding: 0.5em 3em; display: grid; grid-template-columns: 2fr 4fr; } + input, select, button{ border: solid 1px #becce2; padding: 4px; From 93a9337c5a8373a56f243cc4eb3db63417d40cbf Mon Sep 17 00:00:00 2001 From: lintsang Date: Mon, 1 Jun 2026 19:33:44 +0100 Subject: [PATCH 11/13] update the tidiness of html code --- Form-Controls/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 03d31986e..4e8852088 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -15,8 +15,7 @@

Product Pick

- - Person name and email + Person name and email
From 76cb8529d00ea7da882875618fb2c225491bdfaa Mon Sep 17 00:00:00 2001 From: lintsang Date: Thu, 4 Jun 2026 05:40:08 +0100 Subject: [PATCH 12/13] fixed footer at bottom --- Form-Controls/css/style.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/Form-Controls/css/style.css b/Form-Controls/css/style.css index d08b3cb68..6820b8f09 100644 --- a/Form-Controls/css/style.css +++ b/Form-Controls/css/style.css @@ -1,3 +1,13 @@ +body{ + position: relative; + height: 100%; + padding-bottom: 30px; +} + +header{ + text-align: center; +} + h1{ font-family: 'Times New Roman', Times, serif; font-size: 1.5rem; @@ -35,3 +45,10 @@ input, select, button{ font-size: 1em; border-radius: 0.3em; } + +footer{ + position: fixed; + bottom: 0; + width: 100%; + text-align: center; +} From 5cc52c6aa1e8136505efa0ba2d7688342af16149 Mon Sep 17 00:00:00 2001 From: lintsang Date: Thu, 4 Jun 2026 06:07:54 +0100 Subject: [PATCH 13/13] make the header aligned with other elements --- Form-Controls/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Form-Controls/css/style.css b/Form-Controls/css/style.css index 6820b8f09..015b2273b 100644 --- a/Form-Controls/css/style.css +++ b/Form-Controls/css/style.css @@ -1,10 +1,10 @@ body{ position: relative; height: 100%; - padding-bottom: 30px; } header{ + height: 30px; text-align: center; }