Skip to content

Commit 39e4995

Browse files
bartoszkawiakbartoszkawiak
committed
Fixed form option validation, prettier used, css style guide applied.
1 parent 3c0b3ab commit 39e4995

3 files changed

Lines changed: 162 additions & 151 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
- [ ] Refactor using Devtools
1111
- [ ] Use version control by committing often and pushing regularly to GitHub
1212
- [ ] Develop the habit of writing clean, well-structured, and error-free code
13+
1314
<!--{{<objectives>}}>-->
1415

1516
## Task
@@ -29,7 +30,7 @@ All fields are required.
2930
Do not write a form action for this project.
3031

3132
> [!TIP]
32-
> 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.*`.
33+
> 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.*`.
3334
>
3435
> 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!
3536
@@ -47,7 +48,7 @@ Let's write out our testable criteria. Check each one off as you complete it.
4748
- [ ] My form is semantic HTML.
4849
- [ ] All inputs have associated labels.
4950
- [ ] My Lighthouse Accessibility score is 100.
50-
- [ ] I require a valid name.
51+
- [ ] I require a valid name.
5152
- [ ] I require a valid email.
5253
- [ ] I require one colour from a defined set of 3 colours.
5354
- [ ] 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
6566
- [ ] I commit often and push regularly to GitHub
6667

6768
## Resources
69+
6870
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
6971
- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
7072
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)

‎Form-Controls/index.html‎

Lines changed: 62 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" >
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<title>My form exercise</title>
7-
<meta name="description" content="T-shirt order form, pick your product." >
8-
<meta name="viewport" content="width=device-width, initial-scale=1" >
9-
<link rel="stylesheet" href="/styles.css">
7+
<meta name="description" content="T-shirt order form, pick your product." />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="stylesheet" href="styles.css" />
1010
</head>
1111
<body>
1212
<header>
@@ -17,63 +17,75 @@ <h1>Product Pick</h1>
1717
<fieldset>
1818
<legend>Order Form</legend>
1919
<!--Name at least 2 non space characters-->
20-
<label for="name">Name</label>
21-
<input type="text" name="name" id="name" pattern=".*\S.*\S.*" placeholder="James" required>
22-
<!--EMAIL-->
23-
<label for="email">Email Address</label>
24-
<input type="email" name="email" id="email" required placeholder="[email protected]">
25-
<!--Color 3 options with select NO multiselect-->
26-
<label for="colorOptions">Color</label>
27-
<select id="colorOptions" name="color" required>
28-
<option hidden>Choose here</option>
29-
<option value="grey" >Grey</option>
30-
<option value="black" >Black</option>
31-
<option value="white" >White</option>
32-
</select>
20+
<label for="name">Name</label>
21+
<input
22+
type="text"
23+
name="name"
24+
id="name"
25+
pattern=".*\S.*\S.*"
26+
placeholder="James"
27+
required
28+
/>
29+
<!--EMAIL-->
30+
<label for="email">Email Address</label>
31+
<input
32+
type="email"
33+
name="email"
34+
id="email"
35+
required
36+
placeholder="[email protected]"
37+
/>
38+
<!--Color 3 options with select NO multiselect-->
39+
<label for="colorOptions">Color</label>
40+
<select id="colorOptions" name="color" required>
41+
<option value="" disabled selected hidden>Choose here</option>
42+
<option value="grey">Grey</option>
43+
<option value="black">Black</option>
44+
<option value="white">White</option>
45+
</select>
3346

34-
<!--SIZE 6 options XS,S,M,L,XL,XXL-->
35-
<p>Choose Size:</p>
47+
<!--SIZE 6 options XS,S,M,L,XL,XXL-->
48+
<fieldset>
49+
<legend>Choose Size:</legend>
3650

37-
<div id="sizeDiv">
51+
<div id="sizeDiv">
52+
<div id="xsDiv">
53+
<label for="xs">XS</label>
54+
<input type="radio" id="xs" name="size" value="xs" required />
55+
</div>
3856

39-
<div id="xsDiv">
40-
<label for="xs">XS</label>
41-
<input type="radio" id="xs" name="size" value="xs" required>
42-
</div>
57+
<div id="sDiv">
58+
<label for="s">S</label>
59+
<input type="radio" id="s" name="size" value="s" />
60+
</div>
4361

44-
<div id="sDiv">
45-
<label for="s">S</label>
46-
<input type="radio" id="s" name="size" value="s">
47-
</div>
62+
<div id="mDiv">
63+
<label for="m">M</label>
64+
<input type="radio" id="m" name="size" value="m" />
65+
</div>
4866

49-
<div id="mDiv">
50-
<label for="m">M</label>
51-
<input type="radio" id="m" name="size" value="m">
52-
</div>
67+
<div id="lDiv">
68+
<label for="l">L</label>
69+
<input type="radio" id="l" name="size" value="l" />
70+
</div>
5371

54-
<div id="lDiv">
55-
<label for="l">L</label>
56-
<input type="radio" id="l" name="size" value="l">
57-
</div>
58-
59-
<div id="xlDiv">
60-
<label for="xl">XL</label>
61-
<input type="radio" id="xl" name="size" value="xl">
62-
</div>
63-
64-
<div id="xxlDiv">
65-
<label for="xxl">XXL</label>
66-
<input type="radio" id="xxl" name="size" value="xxl">
67-
</div>
68-
</div>
72+
<div id="xlDiv">
73+
<label for="xl">XL</label>
74+
<input type="radio" id="xl" name="size" value="xl" />
75+
</div>
6976

77+
<div id="xxlDiv">
78+
<label for="xxl">XXL</label>
79+
<input type="radio" id="xxl" name="size" value="xxl" />
80+
</div>
81+
</div>
82+
</fieldset>
7083
</fieldset>
7184

7285
<div id="buttonGroup">
7386
<button type="submit">Submit</button>
7487
<button type="reset">Reset</button>
7588
</div>
76-
7789
</form>
7890
</main>
7991
<footer>

0 commit comments

Comments
 (0)