diff --git a/Form-Controls/README.md b/Form-Controls/README.md index c356f8844..00b422c68 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -10,6 +10,7 @@ - [ ] 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 @@ -29,7 +30,7 @@ All fields are required. Do not write a form action for this project. > [!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.*`. +> 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! @@ -47,7 +48,7 @@ Let's write out our testable criteria. Check each one off as you complete it. - [ ] 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 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. @@ -65,6 +66,7 @@ They ensure your code is reliable, maintainable, and presents a polished, credib - [ ] 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) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..456d633be 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,11 +1,12 @@ - + My form exercise - + +
@@ -13,15 +14,82 @@

Product Pick

- - +
+ Order Form + + + + + + + + + + + +
+ Choose Size: + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+ +
+ + +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css new file mode 100644 index 000000000..81d020820 --- /dev/null +++ b/Form-Controls/styles.css @@ -0,0 +1,136 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-color: lightsalmon; +} + +h1 { + justify-self: center; + font-size: clamp(1rem, 10vw, 3rem); + justify-content: center; +} + +fieldset { + background-color: antiquewhite; + position: relative; + display: grid; + gap: 0.5rem; + max-width: 500px; + height: auto; + justify-self: center; + border: 2px solid; + margin: auto; +} + +legend { + margin: auto; + padding: 1rem; + color: rgb(87, 0, 0); + font-size: larger; + text-decoration: underline; + text-decoration-color: black; + position: relative; + top: -10px; +} +select { + padding: 10px; + max-width: 100%; + box-sizing: border-box; +} +option { + max-width: 100%; +} + +select:focus { + background-color: coral; + color: white; +} + +input { + justify-self: center; + padding: 10px; +} + +input:focus { + background-color: coral; + color: white; +} + +input[type="text"]:valid, +input[type="email"]:valid { + background-color: coral; +} + +input:focus::placeholder { + color: white; +} + +#sizeDiv { + display: grid; + grid-template-columns: repeat(2, 2fr); + justify-items: center; +} + +input[type="radio"]:checked { + accent-color: coral; +} + +label:active { + color: coral; +} + +label { + justify-self: start; + + font-weight: bold; +} + +p { + justify-self: center; + font-style: italic; + font-size: large; + margin: auto; + padding: 10px; +} + +#buttonGroup { + justify-self: center; + font-size: larger; + max-width: 500px; +} + +button { + border: 3px solid; + border-radius: 10px; + font-size: large; + background-color: rgba(209, 105, 68, 0.623); +} + +button:hover { + color: rgb(114, 41, 15); + opacity: 0.9; +} + +button:active { + color: red; + scale: 1.2; +} + +footer { + opacity: 0.8; + font-style: italic; + scale: 0.8; + justify-content: center; + text-align: center; +} + +@media (max-width: 600px) { + #sizeDiv { + grid-template-columns: repeat(1, 1fr); + } + #buttonGroup { + justify-self: center; + display: grid; + width: 100%; + justify-content: center; + } +}