Skip to content

Commit b373daf

Browse files
shafiekwalker7861shafiekwalker7861
committed
Complete form controls task
1 parent a7b8a25 commit b373daf

4 files changed

Lines changed: 149 additions & 37 deletions

File tree

‎Form-Controls/Form Control Lighthouse score.jpg‎

116 KB
Loading

‎Form-Controls/README.md‎

Lines changed: 16 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,60 +8,44 @@
88
- [ ] Write a valid form
99
- [ ] Test with Devtools
1010
- [ ] Refactor using Devtools
11-
- [ ] Use version control by committing often and pushing regularly to GitHub
12-
- [ ] Develop the habit of writing clean, well-structured, and error-free code
1311
<!--{{<objectives>}}>-->
1412

1513
## Task
1614

17-
We are selling T-shirts. Write a form to collect the following data:
15+
We are selling t-shirts. Write a form to collect the following data:
1816

1917
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.
2018

2119
Writing that out as a series of questions to ask yourself:
2220

23-
1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
24-
2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
25-
3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
26-
4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL
21+
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.
22+
2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
23+
3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
24+
4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
2725

2826
All fields are required.
2927
Do not write a form action for this project.
3028

31-
## Acceptnce Criteria
32-
33-
### Developers must test their work.
29+
## Developers must test their work.
3430

3531
Let's write out our testable criteria. Check each one off as you complete it.
3632

37-
- [ ] I have only used HTML and CSS.
38-
- [ ] I have not used any JavaScript.
33+
- [✅] I have only used HTML and CSS.
34+
- [✅] I have not used any JavaScript.
3935

4036
### HTML
4137

42-
- [ ] My form is semantic HTML.
43-
- [ ] All inputs have associated labels.
44-
- [ ] My Lighthouse Accessibility score is 100.
45-
- [ ] I require a valid name.
46-
- [ ] I require a valid email.
47-
- [ ] I require one colour from a defined set of 3 colours.
48-
- [ ] I require one size from a defined set of 6 sizes.
49-
50-
### Developers must adhere to professional standards.
51-
52-
> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional?
53-
54-
These practices reflect the level of quality expected in professional work.
55-
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
56-
57-
- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
58-
- [ ] My code is consistently formatted
59-
- [ ] My page content is free of typos and grammatical mistakes
60-
- [ ] I commit often and push regularly to GitHub
38+
- [✅] My form is semantic html.
39+
- [✅] All inputs have associated labels.
40+
- [✅] My Lighthouse Accessibility score is 100.
41+
- [✅] I require a valid name. I have defined a valid name as a text string of two characters or more.
42+
- [✅] I require a valid email.
43+
- [✅] I require one colour from a defined set of 3 colours.
44+
- [✅] I require one size from a defined set of 6 sizes.
6145

6246
## Resources
47+
6348
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
6449
- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
6550
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
6651
- [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse)
67-
- [Format Code and Make Logical Commits in VS Code](../practical_guide.md)

‎Form-Controls/index.html‎

Lines changed: 93 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<title>My form exercise</title>
7+
<link rel="stylesheet" href="style.css">
78
<meta name="description" content="" />
89
<meta name="viewport" content="width=device-width, initial-scale=1" />
910
</head>
@@ -13,15 +14,102 @@ <h1>Product Pick</h1>
1314
</header>
1415
<main>
1516
<form>
16-
<!-- write your html here-->
17-
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
17+
18+
<!--
19+
T-SHIRT ORDER FORM REQUIREMENTS
20+
21+
- Only HTML and CSS (no JavaScript)
22+
- Semantic HTML structure
23+
- All inputs must have associated labels
24+
- Accessibility should be high (Lighthouse target: 100)
25+
26+
DATA TO COLLECT:
27+
28+
1. Customer Name
29+
- Required
30+
- Must be at least 2 characters
31+
32+
2. Customer Email
33+
- Required
34+
- Must be a valid email format
35+
36+
3. T-shirt Colour
37+
- Required
38+
- Must choose ONE from 3 options:
39+
• Black
40+
• White
41+
• Blue
42+
43+
4. T-shirt Size
44+
- Required
45+
- Must choose ONE from 6 options:
46+
• XS
47+
• S
48+
• M
49+
• L
50+
• XL
51+
• XXL
52+
53+
NOTES:
54+
- Do NOT include a form action
55+
- All fields must be required
56+
-->
57+
<!-- Name -->
58+
<label for="name">Name:</label>
59+
<input
60+
type="text"
61+
id="name"
62+
name="name"
63+
minlength="2"
64+
required
65+
>
66+
67+
<br><br>
68+
69+
<!-- Email -->
70+
<label for="email">Email:</label>
71+
<input
72+
type="email"
73+
id="email"
74+
name="email"
75+
required
76+
>
77+
78+
<br><br>
79+
80+
<!-- Colour -->
81+
<label for="colour">Choose Colour:</label>
82+
<select id="colour" name="colour" required>
83+
<option value="">Select Colour</option>
84+
<option value="black">Black</option>
85+
<option value="white">White</option>
86+
<option value="blue">Blue</option>
87+
</select>
88+
89+
<br><br>
90+
91+
<!-- Size -->
92+
<label for="size">Choose Size:</label>
93+
<select id="size" name="size" required>
94+
<option value="">Select Size</option>
95+
<option value="XS">XS</option>
96+
<option value="S">S</option>
97+
<option value="M">M</option>
98+
<option value="L">L</option>
99+
<option value="XL">XL</option>
100+
<option value="XXL">XXL</option>
101+
</select>
102+
103+
<br><br>
104+
105+
<button type="submit">Submit Order</button>
106+
107+
20108
</form>
21109
</main>
22110
<footer>
23111
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
112+
<p>By SHAFIEK WALKER</p>
25113
</footer>
26114
</body>
27115
</html>

‎Form-Controls/style.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #f4f4f4;
4+
padding: 40px;
5+
}
6+
7+
h1 {
8+
text-align: center;
9+
}
10+
11+
p {
12+
text-align: center;
13+
}
14+
15+
form {
16+
background-color: white;
17+
max-width: 400px;
18+
margin: 0 auto;
19+
padding: 24px;
20+
border-radius: 12px;
21+
box-shadow: inset 0 0 0 2px #ccc;
22+
}
23+
24+
label {
25+
font-weight: bold;
26+
}
27+
28+
input,
29+
select,
30+
button {
31+
width: 100%;
32+
padding: 10px;
33+
margin-top: 6px;
34+
margin-bottom: 16px;
35+
box-sizing: border-box;
36+
}
37+
38+
button {
39+
cursor: pointer;
40+
}

0 commit comments

Comments
 (0)