Skip to content

Commit e43e9f4

Browse files
SallyMcGrathSallyMcGrath
committed
minimal solutions for coursework
1 parent 1749552 commit e43e9f4

7 files changed

Lines changed: 124 additions & 28 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44

55
<!--{{<objectives>}}>-->
66

7-
- [ ] Interpret requirements and check against a list of criteria
8-
- [ ] Write a valid form
9-
- [ ] Test with Devtools
10-
- [ ] Refactor using Devtools
7+
- [x] Interpret requirements and check against a list of criteria
8+
- [x] Write a valid form
9+
- [x] Test with Devtools
10+
- [x] Refactor using Devtools
1111
<!--{{<objectives>}}>-->
1212

1313
## Task
@@ -30,18 +30,18 @@ Do not write a form action for this project.
3030

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

33-
- [ ] I have used HTML only.
33+
- [x] I have used HTML only.
3434
- [x] I have not used any CSS or JavaScript.
3535

3636
### HTML
3737

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.
38+
- [x] My form is semantic html.
39+
- [x] All inputs have associated labels.
40+
- [x] My Lighthouse Accessibility score is 100.
41+
- [x] I require a valid name. I have defined a valid name as a text string of two characters or more.
42+
- [x] I require a valid email.
43+
- [x] I require one colour from a defined set of 3 colours.
44+
- [x] I require one size from a defined set of 6 sizes.
4545

4646
## Resources
4747

‎Form-Controls/index.html‎

Lines changed: 73 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,91 @@
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<title>My form exercise</title>
7-
<meta name="description" content="" />
7+
<meta name="description" content="A" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
99
</head>
1010
<body>
1111
<header>
1212
<h1>Product Pick</h1>
1313
</header>
1414
<main>
15+
<!-- there should be no action on the form -->
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+
<!-- extra marks if fieldset is used :) -->
18+
<fieldset>
19+
<!-- and legend -->
20+
<legend>Customer identification</legend>
21+
<!-- labels must be associated with the correct inputs using for="" or with implicit association by wrapping the input with the label. However, attribute association is preferred-->
22+
<label for="name">Your Name</label>
23+
<!-- a pattern or a minlength is valid -->
24+
<input
25+
type="text"
26+
name="name"
27+
id="name"
28+
pattern=".{2,}"
29+
required
30+
title="2 letters or more in your name, please"
31+
required
32+
/>
33+
<label for="email">Your Email</label>
34+
<input
35+
type="email"
36+
name="email"
37+
id="email"
38+
required
39+
autocomplete="on"
40+
/>
41+
</fieldset>
42+
<fieldset>
43+
<legend>Choose Colour</legend>
44+
<!-- radio buttons solve the problem, as would select -->
45+
<!-- wrong solutions: colorpicker without list constraint, text input, checkboxes -->
46+
<input
47+
type="radio"
48+
id="red"
49+
name="tShirtColor"
50+
value="#FF0000"
51+
required
52+
/>
53+
<label for="red">Red</label>
54+
<input type="radio" id="green" name="tShirtColor" value="#008000" />
55+
<label for="green">Green</label>
56+
<input type="radio" id="blue" name="tShirtColor" value="#0000FF" />
57+
<label for="blue">Blue</label>
58+
</fieldset>
59+
<fieldset>
60+
<legend for="size">Size</legend>
61+
<label for="size">Choose Size</label>
62+
<!-- select or radio buttons are the right choice here -->
63+
<select name="size" id="size" required>
64+
<option value="xs">Extra Small</option>
65+
<option value="s">Small</option>
66+
<option value="m">Medium</option>
67+
<option value="l">Large</option>
68+
<option value="xl">Extra Large</option>
69+
<option value="xxl">Extra Extra Large</option>
70+
</select>
71+
</fieldset>
72+
<fieldset>
73+
<label for="date">Choose delivery date</label>
74+
<!-- a datepicker is the right choice here -->
75+
<!-- it should have min and max but these dates will change! -->
76+
<input
77+
type="date"
78+
name="date"
79+
id="date"
80+
min="2025-01-01"
81+
max="2025-02-15"
82+
required
83+
/>
84+
</fieldset>
85+
<!-- submit is not technically necessary but it is good practice -->
86+
<button type="submit">Submit</button>
2087
</form>
2188
</main>
2289
<footer>
2390
<!-- change to your name-->
24-
<h2>By HOMEWORK SOLUTION</h2>
91+
<h2>By SALLY MCGRATH</h2>
2592
</footer>
2693
</body>
2794
</html>

‎Wireframe/branch.png‎

101 KB
Loading

‎Wireframe/index.html‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,51 @@
99
<body>
1010
<header>
1111
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
12+
<p>This is the sample solution.</p>
1513
</header>
1614
<main>
1715
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
16+
<img src="readme.png" alt="" />
17+
<h2>README</h2>
18+
<p>
19+
README files are how developers explain their project to other people.
20+
They introduce the codebase, explain what it is for and how to use it.
21+
</p>
22+
<a
23+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
24+
>Read more</a
25+
>
26+
</article>
27+
<article>
28+
<img src="sample.png" alt="" />
29+
<h2>Wireframe</h2>
30+
<p>
31+
When we build applications, we usually break down pages into
32+
components we can build separately. Wireframes show the placement and
33+
organisation of components without details like fonts, colours, or
34+
functionality.
35+
</p>
36+
<a href="https://adamfard.com/blog/wireframes">Read more</a>
37+
</article>
38+
<article>
39+
<img src="branch.png" alt="" />
40+
<h2>Git branches</h2>
2041
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
42+
Imagine a repository as a big, growing tree and each new idea or
43+
feature as a new branch. In Git, a 'branch' is like an offshoot from
44+
the main trunk. It's a space to nurture new growth - new code -
45+
independently from the rest of the tree. You can cultivate your
46+
branch, tweaking and pruning it until it's exactly right.
2347
</p>
24-
<a href="">Read more</a>
48+
<a
49+
href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
50+
>Read more</a
51+
>
2552
</article>
2653
</main>
2754
<footer>
2855
<p>
29-
This is the default, provided code and no changes have been made yet.
56+
This is a sample solution and should not be copied. It is for reference.
3057
</p>
3158
</footer>
3259
</body>

‎Wireframe/readme.png‎

197 KB
Loading

‎Wireframe/sample.png‎

155 KB
Loading

‎Wireframe/style.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ main {
4949
max-width: var(--container);
5050
margin: 0 auto calc(var(--space) * 4) auto;
5151
}
52+
header {
53+
text-align: center;
54+
}
5255
footer {
5356
position: fixed;
5457
bottom: 0;
@@ -77,7 +80,6 @@ Keeping things orderly and separate is the key to good, simple CSS.
7780
article {
7881
border: var(--line);
7982
padding-bottom: var(--space);
80-
text-align: left;
8183
display: grid;
8284
grid-template-columns: var(--space) 1fr var(--space);
8385
> * {

0 commit comments

Comments
 (0)