Skip to content

Commit aebdab1

Browse files
author
danisoloo
committed
refactor: cleaning the code
1 parent 8879093 commit aebdab1

File tree

2 files changed

+115
-96
lines changed

2 files changed

+115
-96
lines changed

‎Form-Controls/index.html‎

Lines changed: 77 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,92 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
7-
<meta name="description" content="" />
6+
<title>T-shirt Order Form</title>
7+
<meta name="description" content="Accessible T-shirt order form" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
99
</head>
1010
<body>
1111
<header>
1212
<h1>Product Pick</h1>
13+
<p>Please fill in the form below to order your t-shirt.</p>
1314
</header>
15+
1416
<main>
15-
<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+
<form aria-labelledby="order-form">
18+
<h2 id="order-form">T-shirt Order Form</h2>
19+
20+
<!-- REQUIREMENT 1: Customer name -->
21+
<div>
22+
<label for="name">Full Name:</label>
23+
<input
24+
type="text"
25+
id="name"
26+
name="name"
27+
minlength="2"
28+
autocomplete="name"
29+
required
30+
pattern="^(?!\s*$).+"
31+
title="Name must be at least 2 characters and not just spaces."
32+
style="min-height:48px; min-width:200px;"
33+
/>
34+
</div>
35+
36+
<!-- REQUIREMENT 2: Customer email -->
37+
<div>
38+
<label for="email">Email Address:</label>
39+
<input
40+
type="email"
41+
id="email"
42+
name="email"
43+
autocomplete="email"
44+
required
45+
style="min-height:48px; min-width:200px;"
46+
/>
47+
</div>
48+
49+
<!-- REQUIREMENT 3: Colour -->
50+
<fieldset>
51+
<legend>Choose your t-shirt colour:</legend>
52+
<div>
53+
<input type="radio" id="red" name="colour" value="red" required style="min-height:24px; min-width:24px;" />
54+
<label for="red">Red</label>
55+
</div>
56+
<div>
57+
<input type="radio" id="blue" name="colour" value="blue" style="min-height:24px; min-width:24px;" />
58+
<label for="blue">Blue</label>
59+
</div>
60+
<div>
61+
<input type="radio" id="black" name="colour" value="black" style="min-height:24px; min-width:24px;" />
62+
<label for="black">Black</label>
63+
</div>
64+
</fieldset>
65+
66+
<!-- REQUIREMENT 4: Size -->
67+
<fieldset>
68+
<legend>Choose your t-shirt size:</legend>
69+
<label for="size" class="visually-hidden">T-shirt size</label>
70+
<select id="size" name="size" required style="min-height:48px; min-width:200px;">
71+
<option value="" disabled selected>Select a size</option>
72+
<option value="XS">XS</option>
73+
<option value="S">S</option>
74+
<option value="M">M</option>
75+
<option value="L">L</option>
76+
<option value="XL">XL</option>
77+
<option value="XXL">XXL</option>
78+
</select>
79+
</fieldset>
80+
81+
<!-- Submit button -->
82+
<div>
83+
<button type="submit" aria-label="Submit your t-shirt order" style="min-height:48px; min-width:150px;">
84+
Place Order
85+
</button>
86+
</div>
2087
</form>
2188
</main>
89+
2290
<footer>
23-
<!-- change to your name-->
24-
<h2>By HOMEWORK SOLUTION</h2>
91+
<p>By Daniel Solomon</p>
2592
</footer>
2693
</body>
27-
</html>
94+
</html>

‎index.html‎

Lines changed: 38 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,46 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>T-shirt Order Form</title>
7-
<meta name="description" content="Accessible T-shirt order form" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Coursework</title>
7+
<style>
8+
:root {
9+
--paper: oklch(7 0 0);
10+
--ink: color-mix(in oklab, var(--color) 5%, black);
11+
--font: 100%/1.5 system-ui;
12+
--space: clamp(6px, 6px + 2vw, 15px);
13+
--line: 1px solid;
14+
}
15+
body {
16+
background: var(--paper);
17+
color: var(--ink);
18+
font: var(--font);
19+
max-width: 1280px;
20+
margin: 0 auto;
21+
}
22+
</style>
923
</head>
1024
<body>
11-
<header>
12-
<h1>Product Pick</h1>
13-
<p>Please fill in the form below to order your t-shirt.</p>
14-
</header>
15-
25+
<header><h1>🧐 CYF Coursework Disposable Branch Previews</h1></header>
1626
<main>
17-
<form aria-labelledby="order-form">
18-
<h2 id="order-form">T-shirt Order Form</h2>
19-
20-
<!-- REQUIREMENT 1: Customer name -->
21-
<div>
22-
<label for="name">Full Name:</label>
23-
<input
24-
type="text"
25-
id="name"
26-
name="name"
27-
minlength="2"
28-
autocomplete="name"
29-
required
30-
pattern="^(?!\s*$).+"
31-
title="Name must be at least 2 characters and not just spaces."
32-
style="min-height:48px; min-width:200px;"
33-
/>
34-
</div>
35-
36-
<!-- REQUIREMENT 2: Customer email -->
37-
<div>
38-
<label for="email">Email Address:</label>
39-
<input
40-
type="email"
41-
id="email"
42-
name="email"
43-
autocomplete="email"
44-
required
45-
style="min-height:48px; min-width:200px;"
46-
/>
47-
</div>
48-
49-
<!-- REQUIREMENT 3: Colour -->
50-
<fieldset>
51-
<legend>Choose your t-shirt colour:</legend>
52-
<div>
53-
<input type="radio" id="red" name="colour" value="red" required style="min-height:24px; min-width:24px;" />
54-
<label for="red">Red</label>
55-
</div>
56-
<div>
57-
<input type="radio" id="blue" name="colour" value="blue" style="min-height:24px; min-width:24px;" />
58-
<label for="blue">Blue</label>
59-
</div>
60-
<div>
61-
<input type="radio" id="black" name="colour" value="black" style="min-height:24px; min-width:24px;" />
62-
<label for="black">Black</label>
63-
</div>
64-
</fieldset>
65-
66-
<!-- REQUIREMENT 4: Size -->
67-
<fieldset>
68-
<legend>Choose your t-shirt size:</legend>
69-
<label for="size" class="visually-hidden">T-shirt size</label>
70-
<select id="size" name="size" required style="min-height:48px; min-width:200px;">
71-
<option value="" disabled selected>Select a size</option>
72-
<option value="XS">XS</option>
73-
<option value="S">S</option>
74-
<option value="M">M</option>
75-
<option value="L">L</option>
76-
<option value="XL">XL</option>
77-
<option value="XXL">XXL</option>
78-
</select>
79-
</fieldset>
80-
81-
<!-- Submit button -->
82-
<div>
83-
<button type="submit" aria-label="Submit your t-shirt order" style="min-height:48px; min-width:150px;">
84-
Place Order
85-
</button>
86-
</div>
87-
</form>
27+
<ol>
28+
<li>
29+
<h2><a href="/Wireframe">Project 1: Wireframe</a></h2>
30+
<p>
31+
Mentors:
32+
<a href="Wireframe/readme.md">open the assignment in a tab</a>
33+
</p>
34+
</li>
35+
<li>
36+
<h2><a href="/Form-Controls">Project 2: Form Controls</a></h2>
37+
<p>
38+
Mentors:
39+
<a href="Form-Controls/readme.md">open the assignment in a tab</a>
40+
</p>
41+
</li>
42+
</ol>
8843
</main>
89-
90-
<footer>
91-
<p>By Daniel Solomon</p>
92-
</footer>
44+
<footer><a href="HOW_TO_REVIEW.md">HOW TO REVIEW MD</a></footer>
9345
</body>
94-
</html>
46+
</html>

0 commit comments

Comments
 (0)