From bacef79360386516da9f5e922fa2c002e9160723 Mon Sep 17 00:00:00 2001 From: Armin Date: Sun, 13 Oct 2024 20:36:24 +0100 Subject: [PATCH 1/6] Create a form control that collects information about the customer, including their name, address, and details about the selected T-shirt such as size, color, and shipping date. --- Form-Controls/index.html | 62 ++++++++++++++-- Form-Controls/index.js | 33 +++++++++ Form-Controls/styles.css | 151 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 242 insertions(+), 4 deletions(-) create mode 100644 Form-Controls/index.js diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..16f11901 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -9,19 +9,73 @@ + +

Product Pick

-
- - + +
+ +
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ choose T-shirt color + +
+
+ Choose T-shirt Size + +
+
+ Choose Delivery Date: + + +
+
+ + + +
+
diff --git a/Form-Controls/index.js b/Form-Controls/index.js new file mode 100644 index 00000000..e131e5f8 --- /dev/null +++ b/Form-Controls/index.js @@ -0,0 +1,33 @@ +$(document).ready(function () { + // Event listener for input and textarea fields + $('form').find('input, textarea').on('keyup blur focus', function (e) { + var $this = $(this), + label = $this.prev('label'); + + switch (e.type) { + case 'keyup': + if ($this.val() === '') { + label.removeClass('active highlight'); + } else { + label.addClass('active highlight'); + } + break; + + case 'blur': + if ($this.val() === '') { + label.removeClass('active highlight'); + } else { + label.removeClass('highlight'); + } + break; + + case 'focus': + if ($this.val() === '') { + label.removeClass('highlight'); + } else if ($this.val() !== '') { + label.addClass('highlight'); + } + break; + } + }); +}) \ No newline at end of file diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..e509a34a 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,151 @@ + /* Basic Reset */ + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + /* Body styling */ + body { + font-family: Arial, sans-serif; + line-height: 1.6; + background-color: #FBFDFC; + color: #333; + } + + /* Container */ + .container { + width: 80%; + margin: 0 auto; + overflow: hidden; + } + + /* Header styling */ + header { + background: #F4EFEB; + color: #252F31; + padding: 20px 0; + text-align: center; + } + + /* Navigation */ + nav { + display: flex; + justify-content: space-around; + margin-top: 10px; + } + + nav a { + color: #fff; + text-decoration: none; + padding: 5px 20px; + } + + nav a:hover { + background: #3e8c81; + border-radius: 5px; + } + + /* Main content */ + main { + padding: 20px; + background: #fff; + margin-top: 20px; + border-radius: 5px; + } + form{ + display: flex; + + } + .field-wrap { + position: ; + margin-bottom: 40px + } + .formbox { + display: flex; + flex-direction: column; + gap: 20px; /* Better than justify-content for consistent spacing */ + padding: 20px; /* Adds spacing inside the container */ + border: 1px solid #ccc; /* Optional: adds a border for a defined area */ + border-radius: 5px; /* Rounded corners for a more modern look */ + background-color: #f9f9f9; /* Optional: background color for better visibility */ + width: fit-content; + } + + .address { + display: flex; + gap: 10px; /* Creates space between address fields */ + align-items: center; /* Align items vertically in the middle */ + flex-wrap: wrap; /* Allows wrapping on smaller screens */ + } + + .postcode { + flex: 1; /* Flex-grow:1 allows this to take up available space */ + min-width: 100px; /* Optional: sets a minimum width to maintain layout */ + } + + /* Label styling */ +label { + position: absolute; + transform: translateY(6px); + color: rgba(0, 0, 0, 0.5); + transition: all 0.5s ease; + pointer-events: none; + font-size: 18px; + padding-left: 10px; +} + +/* Required field indicator */ +label .req { + margin-left: 15px; /* Changed to better position the asterisk */ + color: #010202; + font-size: 14px; /* Adjusted font-size for consistency */ +} + +/* Label when active (e.g., input is focused) */ +label.active { + transform: translateY(-20px); /* Moves label up when active */ + font-size: 14px; +} + +/* Hide the required field indicator when the label is active */ +label.active .req { + opacity: 0; +} + +/* Highlight the label when the input is focused */ +label.highlight { + color: #150606; +} +input, textarea { + font-size: 22px; + display: block; + width: 100%; + padding: 5px 10px; + background: none; + border: 1px solid #a0b3b0; + color: #a0b3b0; + transition: border-color 0.25s ease, box-shadow 0.25s ease; +} +form { + /* background-color: #13232f; */ + padding: 40px; + max-width: 600px; + margin: 40px auto; + border: 4px solid #ffecd2 ; + box-shadow: 0 4px 10px 4px rgba(#ffecd2); +} +input:focus, textarea:focus { + outline: 0; + border-color: #1ab188; +} + + + /* Footer */ + footer { + background: #F4EFEB; + color: #252F31; + text-align: center; + padding: 10px 0; + margin-top: 20px; + } \ No newline at end of file From 5078f85d6753b251d6a045fa6a4b11419446e507 Mon Sep 17 00:00:00 2001 From: Armin Date: Fri, 18 Oct 2024 19:52:02 +0100 Subject: [PATCH 2/6] i edit my css and and comment whole of my js and jquery --- Form-Controls/index.html | 8 +++--- Form-Controls/index.js | 60 ++++++++++++++++++++-------------------- Form-Controls/styles.css | 10 +++++-- 3 files changed, 42 insertions(+), 36 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 16f11901..eadb548f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -9,8 +9,8 @@ - - +

Product Pick

@@ -19,11 +19,11 @@

Product Pick

- +
- +
diff --git a/Form-Controls/index.js b/Form-Controls/index.js index e131e5f8..68daef39 100644 --- a/Form-Controls/index.js +++ b/Form-Controls/index.js @@ -1,33 +1,33 @@ -$(document).ready(function () { - // Event listener for input and textarea fields - $('form').find('input, textarea').on('keyup blur focus', function (e) { - var $this = $(this), - label = $this.prev('label'); +// $(document).ready(function () { +// // Event listener for input and textarea fields +// $('form').find('input, textarea').on('keyup blur focus', function (e) { +// var $this = $(this), +// label = $this.prev('label'); - switch (e.type) { - case 'keyup': - if ($this.val() === '') { - label.removeClass('active highlight'); - } else { - label.addClass('active highlight'); - } - break; +// switch (e.type) { +// case 'keyup': +// if ($this.val() === '') { +// label.removeClass('active highlight'); +// } else { +// label.addClass('active highlight'); +// } +// break; - case 'blur': - if ($this.val() === '') { - label.removeClass('active highlight'); - } else { - label.removeClass('highlight'); - } - break; +// case 'blur': +// if ($this.val() === '') { +// label.removeClass('active highlight'); +// } else { +// label.removeClass('highlight'); +// } +// break; - case 'focus': - if ($this.val() === '') { - label.removeClass('highlight'); - } else if ($this.val() !== '') { - label.addClass('highlight'); - } - break; - } - }); -}) \ No newline at end of file +// case 'focus': +// if ($this.val() === '') { +// label.removeClass('highlight'); +// } else if ($this.val() !== '') { +// label.addClass('highlight'); +// } +// break; +// } +// }); +// }) \ No newline at end of file diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e509a34a..e82795b8 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -86,7 +86,7 @@ /* Label styling */ label { - position: absolute; + /* position: absolute; */ transform: translateY(6px); color: rgba(0, 0, 0, 0.5); transition: all 0.5s ease; @@ -148,4 +148,10 @@ input:focus, textarea:focus { text-align: center; padding: 10px 0; margin-top: 20px; - } \ No newline at end of file + } + + + + + + From 246457e1e56f32c74db25e283907d5f5fc07ce72 Mon Sep 17 00:00:00 2001 From: Armin Date: Fri, 18 Oct 2024 20:14:10 +0100 Subject: [PATCH 3/6] fix a color of label --- Form-Controls/README.md | 8 ++++---- Form-Controls/styles.css | 38 +------------------------------------- 2 files changed, 5 insertions(+), 41 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index a163d4de..9ac9748c 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -31,13 +31,13 @@ Do not write a form action for this project. Let's write out our testable criteria: -- [ ] I have used HTML and CSS only. +- [x] I have used HTML and CSS only. ### HTML -- [ ] My form is semantic html. -- [ ] All inputs have associated labels. -- [ ] My Lighthouse Accessibility score is 100. +- [x] My form is semantic html. +- [x] All inputs have associated labels. +- [x] 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. diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e82795b8..bf764c52 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -28,23 +28,8 @@ text-align: center; } - /* Navigation */ - nav { - display: flex; - justify-content: space-around; - margin-top: 10px; - } - - nav a { - color: #fff; - text-decoration: none; - padding: 5px 20px; - } - nav a:hover { - background: #3e8c81; - border-radius: 5px; - } + /* Main content */ main { @@ -88,35 +73,14 @@ label { /* position: absolute; */ transform: translateY(6px); - color: rgba(0, 0, 0, 0.5); transition: all 0.5s ease; pointer-events: none; font-size: 18px; padding-left: 10px; } -/* Required field indicator */ -label .req { - margin-left: 15px; /* Changed to better position the asterisk */ - color: #010202; - font-size: 14px; /* Adjusted font-size for consistency */ -} -/* Label when active (e.g., input is focused) */ -label.active { - transform: translateY(-20px); /* Moves label up when active */ - font-size: 14px; -} -/* Hide the required field indicator when the label is active */ -label.active .req { - opacity: 0; -} - -/* Highlight the label when the input is focused */ -label.highlight { - color: #150606; -} input, textarea { font-size: 22px; display: block; From 839a05d411ddfa44cc2eb739b254406533e8cc52 Mon Sep 17 00:00:00 2001 From: Armin Date: Fri, 18 Oct 2024 21:08:08 +0100 Subject: [PATCH 4/6] took 100% Accessibility from lighthouse --- Form-Controls/README.md | 14 +-- Form-Controls/index.html | 31 +++--- Form-Controls/styles.css | 218 ++++++++++++++++++++++----------------- 3 files changed, 147 insertions(+), 116 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 9ac9748c..df108f6d 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -38,16 +38,16 @@ Let's write out our testable criteria: - [x] My form is semantic html. - [x] All inputs have associated labels. - [x] 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. -- [ ] I require one date from a constrained date range. +- [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. +- [x] I require one date from a constrained date range. ### CSS -- [ ] I show which element is focused. -- [ ] My Lighthouse Accessibility score is 100. +- [x] I show which element is focused. +- [x] My Lighthouse Accessibility score is 100. ## Extension Task diff --git a/Form-Controls/index.html b/Form-Controls/index.html index eadb548f..d36a09b4 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -17,9 +17,8 @@

Product Pick

-
- +
@@ -40,27 +39,29 @@

Product Pick

- choose T-shirt color - +
- Choose T-shirt Size - + + +
- Choose Delivery Date: +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index bf764c52..eacc74df 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -1,121 +1,151 @@ - /* Basic Reset */ - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - - /* Body styling */ - body { - font-family: Arial, sans-serif; - line-height: 1.6; - background-color: #FBFDFC; - color: #333; - } - - /* Container */ - .container { - width: 80%; - margin: 0 auto; - overflow: hidden; - } - - /* Header styling */ - header { - background: #F4EFEB; - color: #252F31; - padding: 20px 0; - text-align: center; - } - - - - - /* Main content */ - main { - padding: 20px; - background: #fff; - margin-top: 20px; - border-radius: 5px; - } - form{ - display: flex; - - } - .field-wrap { - position: ; - margin-bottom: 40px - } - .formbox { - display: flex; - flex-direction: column; - gap: 20px; /* Better than justify-content for consistent spacing */ - padding: 20px; /* Adds spacing inside the container */ - border: 1px solid #ccc; /* Optional: adds a border for a defined area */ - border-radius: 5px; /* Rounded corners for a more modern look */ - background-color: #f9f9f9; /* Optional: background color for better visibility */ - width: fit-content; - } - - .address { - display: flex; - gap: 10px; /* Creates space between address fields */ - align-items: center; /* Align items vertically in the middle */ - flex-wrap: wrap; /* Allows wrapping on smaller screens */ - } - - .postcode { - flex: 1; /* Flex-grow:1 allows this to take up available space */ - min-width: 100px; /* Optional: sets a minimum width to maintain layout */ - } - - /* Label styling */ +/* Basic Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Body styling */ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + background-color: #FBFDFC; /* Light background */ + color: #333; /* Dark text for readability */ +} + +/* Container */ +.container { + width: 80%; + margin: 0 auto; + overflow: hidden; +} + +/* Header styling */ +header { + background: #c4c4c4; /* Darker gray for better visibility */ + color: #1a1a1a; /* Darker text for contrast */ + padding: 20px 0; + text-align: center; +} + +/* Main content */ +main { + padding: 20px; + background: #ffffff; /* White for main content */ + margin-top: 20px; + border-radius: 5px; +} + +form { + display: flex; +} + +.field-wrap { + margin-bottom: 40px; +} + +.formbox { + display: flex; + flex-direction: column; + gap: 20px; /* Better than justify-content for consistent spacing */ + padding: 20px; /* Adds spacing inside the container */ + border: 1px solid #ccc; /* Optional: adds a border for a defined area */ + border-radius: 5px; /* Rounded corners for a more modern look */ + background-color: #f0f0f0; /* Optional: background color for better visibility */ + width: fit-content; +} + +input, select, button { + color: #1a1a1a; /* Darker text for better contrast */ + background-color: #ffffff; /* White background for form controls */ + border: 1px solid #999999; /* Darker border for better definition */ +} + +button { + background-color: #0056b3; /* Darker blue button */ + color: #ffffff; /* White text for contrast */ + width: 70%; + margin-left: 50px; + padding: 10px; /* Adjust padding for better size */ + height: auto; /* Use auto to ensure the button is responsive */ + border: none; /* Remove border for cleaner look */ + border-radius: 5px; /* Rounded corners for button */ +} + +.address { + display: flex; + gap: 10px; /* Creates space between address fields */ + align-items: center; /* Align items vertically in the middle */ + flex-wrap: wrap; /* Allows wrapping on smaller screens */ +} + +.postcode { + flex: 1; /* Flex-grow:1 allows this to take up available space */ + min-width: 100px; /* Optional: sets a minimum width to maintain layout */ +} + +/* Label styling */ label { - /* position: absolute; */ transform: translateY(6px); transition: all 0.5s ease; pointer-events: none; font-size: 18px; padding-left: 10px; + color: #1a1a1a; /* Darker label text for better contrast */ } - - input, textarea { font-size: 22px; display: block; width: 100%; padding: 5px 10px; background: none; - border: 1px solid #a0b3b0; - color: #a0b3b0; + border: 1px solid #888888; /* Darker border for better visibility */ + color: #1a1a1a; /* Darker text color for better readability */ transition: border-color 0.25s ease, box-shadow 0.25s ease; } + form { - /* background-color: #13232f; */ padding: 40px; max-width: 600px; margin: 40px auto; - border: 4px solid #ffecd2 ; - box-shadow: 0 4px 10px 4px rgba(#ffecd2); + border: 4px solid #f9e3c2; /* Light border */ + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */ } + input:focus, textarea:focus { outline: 0; - border-color: #1ab188; + border-color: #1ab188; /* Highlight border on focus */ } +/* Footer */ +footer { + background: #c4c4c4; /* Darker gray for footer */ + color: #1a1a1a; /* Dark text for contrast */ + text-align: center; + padding: 10px 0; + margin-top: 20px; +} +button#choose { + background-color: #0056b3; /* Darker blue for better contrast */ + color: #ffffff; /* White text for readability */ + width: 70%; + margin-left: 50px; + padding: 10px; /* Ensures a comfortable touch target */ + height: auto; /* Responsive height */ + border: none; /* Removes default border */ + border-radius: 5px; /* Rounded corners */ + font-size: 16px; /* Readable font size */ + transition: background-color 0.3s, border-color 0.3s; /* Smooth transition effects */ +} - /* Footer */ - footer { - background: #F4EFEB; - color: #252F31; - text-align: center; - padding: 10px 0; - margin-top: 20px; - } - - - - - +/* Optional: Add hover effect */ +button#choose:hover { + background-color: #004494; /* Even darker blue on hover for better visibility */ +} +/* Optional: Add focus effect for accessibility */ +button#choose:focus { + outline: 2px solid #1ab188; /* Green outline for focus state */ + outline-offset: 2px; /* Space between outline and button */ +} From f3dfb6e69676d1ce0a3ed4d5571bcf7681045a47 Mon Sep 17 00:00:00 2001 From: Armin <107566068+ArminNouri98@users.noreply.github.com> Date: Sun, 27 Oct 2024 10:03:38 +0000 Subject: [PATCH 5/6] Update index.html delete js code from html --- Form-Controls/index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index d36a09b4..03c0f6d6 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -9,8 +9,7 @@ - +

Product Pick

@@ -80,4 +79,4 @@

By Armin Nouri

- \ No newline at end of file + From a9123e9496f1013e6c309633375a864c49e4a62a Mon Sep 17 00:00:00 2001 From: Armin <107566068+ArminNouri98@users.noreply.github.com> Date: Sun, 27 Oct 2024 10:05:36 +0000 Subject: [PATCH 6/6] Delete Form-Controls/index.js delete index.js file --- Form-Controls/index.js | 33 --------------------------------- 1 file changed, 33 deletions(-) delete mode 100644 Form-Controls/index.js diff --git a/Form-Controls/index.js b/Form-Controls/index.js deleted file mode 100644 index 68daef39..00000000 --- a/Form-Controls/index.js +++ /dev/null @@ -1,33 +0,0 @@ -// $(document).ready(function () { -// // Event listener for input and textarea fields -// $('form').find('input, textarea').on('keyup blur focus', function (e) { -// var $this = $(this), -// label = $this.prev('label'); - -// switch (e.type) { -// case 'keyup': -// if ($this.val() === '') { -// label.removeClass('active highlight'); -// } else { -// label.addClass('active highlight'); -// } -// break; - -// case 'blur': -// if ($this.val() === '') { -// label.removeClass('active highlight'); -// } else { -// label.removeClass('highlight'); -// } -// break; - -// case 'focus': -// if ($this.val() === '') { -// label.removeClass('highlight'); -// } else if ($this.val() !== '') { -// label.addClass('highlight'); -// } -// break; -// } -// }); -// }) \ No newline at end of file