Skip to content

Commit ac376aa

Browse files
huangwtings-hubhuangwtings-hub
committed
Refactor code structure for improved readability and maintainability
1 parent 67ef06d commit ac376aa

7 files changed

Lines changed: 185 additions & 150 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ Writing that out as a series of questions to ask yourself:
2828
All fields are required.
2929
Do not write a form action for this project.
3030

31+
> [!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+
>
34+
> 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!
35+
3136
## Acceptance Criteria
3237

3338
### Developers must test their work.

‎Form-Controls/index.html‎

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,72 +3,77 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>T-Shirt Order Form</title>
6+
<title>My form exercise</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
99
</head>
1010
<body>
1111
<header>
12-
<h1>Order Your CYF T-Shirt</h1>
12+
<h1>Product Pick</h1>
1313
</header>
14-
<main>
15-
<form>
16-
<div class"form-group">
17-
<label for"customer-name">Full Name</label>
18-
<input
19-
type"text"
20-
id="customer-name"
21-
required
22-
pattern=".*\S.*\S.*"
23-
title"Name must contain at least two non-space characters.">
24-
</div>
14+
<main>
15+
<form aria-labelledby="form-title">
16+
<h1 id="form-title">T-Shirt Order Form</h1>
2517

26-
<div class="form-group">
27-
<label for="customer-email">Email Address</label>
28-
<input
29-
type="email"
30-
id="customer-email"
31-
name="customer-email"
32-
required>
33-
</div>
34-
</fieldset>
18+
<div class="form-group">
19+
<label for="customer-name">Full Name</label>
20+
<input
21+
type="text"
22+
id="customer-name"
23+
name="customer-name"
24+
required
25+
pattern=".*\S.*\S.*"
26+
title="Name must contain at least two non-space characters.">
27+
</div>
3528

36-
<!-- Section 2: T-Shirt Customization -->
37-
<fieldset>
38-
<legend>T-Shirt Options</legend>
29+
<div class="form-group">
30+
<label for="customer-email">Email Address</label>
31+
<input
32+
type="type"
33+
id="customer-email"
34+
name="customer-email"
35+
required>
36+
</div>
3937

40-
<!-- Colour Selection (Dropdown) -->
41-
<div class="form-group">
42-
<label for="tshirt-color">Choose a Colour</label>
43-
<select id="tshirt-color" name="tshirt-color" required>
44-
<option value="" disabled selected>Select a colour...</option>
45-
<option value="black">Classic Black</option>
46-
<option value="blue">CYF Blue</option>
47-
<option value="white">Minimalist White</option>
48-
</select>
49-
</div>
38+
<div class="form-group">
39+
<span id="colour-label" style="display: block; font-weight: bold; margin-bottom: 5px;">T-Shirt Colour</span>
40+
<div class="radio-group" role="radiogroup" aria-labelledby="colour-label">
41+
<div class="radio-option">
42+
<input type="radio" id="colour-red" name="colour" value="red" required>
43+
<label for="colour-red">Red</label>
44+
</div>
45+
<div class="radio-option">
46+
<input type="radio" id="colour-blue" name="colour" value="blue">
47+
<label for="colour-blue">Blue</label>
48+
</div>
49+
<div class="radio-option">
50+
<input type="radio" id="colour-green" name="colour" value="green">
51+
<label for="colour-green">Green</label>
52+
</div>
53+
</div>
54+
</div>
5055

51-
<!-- Size Selection (Radio Buttons) -->
52-
<div class="form-group">
53-
<span class="label-heading">Select Your Size</span>
54-
55-
<div class="radio-options">
56-
<label><input type="radio" name="tshirt-size" value="XS" required> XS</label>
57-
<label><input type="radio" name="tshirt-size" value="S"> S</label>
58-
<label><input type="radio" name="tshirt-size" value="M"> M</label>
59-
<label><input type="radio" name="tshirt-size" value="L"> L</label>
60-
<label><input type="radio" name="tshirt-size" value="XL"> XL</label>
61-
<label><input type="radio" name="tshirt-size" value="XXL"> XXL</label>
62-
</div>
63-
</div>
64-
</fieldset>
56+
<div class="form-group">
57+
<label for="tshirt-size">T-Shirt Size</label>
58+
<select id="tshirt-size" name="size" required>
59+
<option value="" disabled selected>Select a size</option>
60+
<option value="XS">XS</option>
61+
<option value="S">S</option>
62+
<option value="M">M</option>
63+
<option value="L">L</option>
64+
<option value="XL">XL</option>
65+
<option value="XXL">XXL</option>
66+
</select>
67+
</div>
6568

66-
<button type="submit">Confirm Order</button>
67-
</form>
68-
</main>
69+
<button type="submit">Confirm Order</button>
70+
</form>
71+
</main>
6972
<footer>
70-
<!-- Wing Ting Huang-->
73+
<!-- change to your name-->
7174
<p>By HOMEWORK SOLUTION</p>
7275
</footer>
7376
</body>
7477
</html>
78+
79+

‎Wireframe/git-branch-concept.jpg‎

33.2 KB
Loading

‎Wireframe/index.html‎

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,48 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
7+
<link rel="stylesheet" href="style.css">
88
</head>
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>
1512
</header>
13+
1614
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23-
</p>
24-
<a href="">Read more</a>
25-
</article>
15+
<section class="articles-container">
16+
<h2 class="visually-hidden">Core Web Development Articles</h2>
17+
18+
<article>
19+
<img src="readme-concept.jpg" alt="A laptop screen showing a project documentation file">
20+
<h3>What is the purpose of a README file?</h3>
21+
<p>A README file is the front page of a repository. It introduces the project, explains how to install or run the code, and guides other developers on how to contribute.</p>
22+
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more about READMEs</a>
23+
</article>
24+
25+
<article>
26+
<img src="wireframe-concept.jpg" alt="A simple sketch of a website layout using lines and boxes">
27+
<h3>What is the purpose of a wireframe?</h3>
28+
<p>A wireframe acts as a blueprint for a user interface. It defines the structural layout, content hierarchy, and functionality of a page before any visual design or code is added.</p>
29+
<a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more about Wireframes</a>
30+
</article>
31+
32+
<article>
33+
<img src="git-branch-concept.jpg" alt="A diagram showing a main code branch splitting into a feature branch">
34+
<h3>What is a branch in Git?</h3>
35+
<p>A branch is an independent line of development in Git. It allows you to work on new features or fixes safely without affecting the stable 'main' codebase until it is fully tested.</p>
36+
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell#:~:text=A%20branch%20in%20Git%20is,branch%20pointer%20moves%20forward%20automatically.">Read more about Git Branches</a>
37+
</article>
38+
39+
</section>
2640
</main>
41+
2742
<footer>
2843
<p>
29-
This is the default, provided code and no changes have been made yet.
44+
<p>&copy; 2026 Code Your Future Onboarding Coursework. Created by Tiffany.</p>
3045
</p>
3146
</footer>
3247
</body>
33-
</html>
48+
</html>

‎Wireframe/readme-concept.jpg‎

279 KB
Loading

‎Wireframe/style.css‎

Lines changed: 90 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,99 @@
1-
/* Here are some starter styles
2-
You can edit these or replace them entirely
3-
It's showing you a common way to organise CSS
4-
And includes solutions to common problems
5-
As well as useful links to learn more */
6-
7-
/* ====== Design Palette ======
8-
This is our "design palette".
9-
It sets out the colours, fonts, styles etc to be used in this design
10-
At work, a designer will give these to you based on the corporate brand, but while you are learning
11-
You can design it yourself if you like
12-
Inspect the starter design with Devtools
13-
Click on the colour swatches to see what is happening
14-
I've put some useful CSS you won't have learned yet
15-
For you to explore and play with if you are interested
16-
https://web.dev/articles/min-max-clamp
17-
https://scrimba.com/learn-css-variables-c026
18-
====== Design Palette ====== */
19-
:root {
20-
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
22-
--font: 100%/1.5 system-ui;
23-
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25-
--container: 1280px;
1+
/* Reset basic margins and set up a clean professional font */
2+
* {
3+
box-sizing: border-box;
4+
margin: 0;
5+
padding: 0;
266
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
7+
298
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
9+
font-family: Arial, sans-serif;
10+
line-height: 1.6;
11+
background-color: #f9f9f9;
12+
color: #333;
13+
/* Add padding at the bottom so content isn't covered by the fixed footer */
14+
padding-bottom: 80px;
3315
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
16+
17+
/* Header Styling */
18+
header {
19+
background-color: #24292e;
20+
color: #fff;
21+
text-align: center;
22+
padding: 2rem 1rem;
23+
margin-bottom: 2rem;
3824
}
39-
img,
40-
svg {
41-
width: 100%;
42-
object-fit: cover;
25+
26+
/* Flexbox Grid Container for the Articles */
27+
.articles-grid {
28+
display: flex;
29+
flex-wrap: wrap;
30+
justify-content: center;
31+
gap: 30px;
32+
max-width: 1200px;
33+
margin: 0 auto;
34+
padding: 0 20px;
4335
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
48-
main {
49-
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
36+
37+
/* Individual Card Styling */
38+
article {
39+
background: #fff;
40+
border: 1px solid #e1e4e8;
41+
border-radius: 6px;
42+
flex: 1;
43+
min-width: 280px;
44+
max-width: 360px;
45+
padding: 20px;
46+
display: flex;
47+
flex-direction: column;
48+
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
5149
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
55-
text-align: center;
50+
51+
/* Article Images */
52+
article img {
53+
width: 100%;
54+
height: 180px;
55+
object-fit: cover;
56+
border-radius: 4px;
57+
margin-bottom: 15px;
5658
}
57-
/* ====== Articles Grid Layout ====
58-
Setting the rules for how articles are placed in the main element.
59-
Inspect this in Devtools and click the "grid" button in the Elements view
60-
Play with the options that come up.
61-
https://developer.chrome.com/docs/devtools/css/grid
62-
https://gridbyexample.com/learn/
63-
*/
64-
main {
65-
display: grid;
66-
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
59+
60+
/* Headings and Paragraphs inside Cards */
61+
article h2 {
62+
font-size: 1.3rem;
63+
color: #0366d6;
64+
margin-bottom: 10px;
7165
}
72-
/* ====== Article Layout ======
73-
Setting the rules for how elements are placed in the article.
74-
Now laying out just the INSIDE of the repeated card/article design.
75-
Keeping things orderly and separate is the key to good, simple CSS.
76-
*/
77-
article {
78-
border: var(--line);
79-
padding-bottom: var(--space);
80-
text-align: left;
81-
display: grid;
82-
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
66+
67+
article p {
68+
font-size: 0.95rem;
69+
color: #586069;
70+
margin-bottom: 15px;
71+
flex-grow: 1; /* Pushes the links to line up evenly at the bottom */
72+
}
73+
74+
/* Link elements styled like clean anchor buttons */
75+
article a {
76+
display: inline-block;
77+
color: #0366d6;
78+
text-decoration: none;
79+
font-weight: bold;
80+
font-size: 0.9rem;
8981
}
82+
83+
article a:hover {
84+
text-decoration: underline;
85+
}
86+
87+
/* Fixed Footer to the exact bottom of the viewport */
88+
footer {
89+
position: fixed;
90+
left: 0;
91+
bottom: 0;
92+
width: 100%;
93+
background-color: #24292e;
94+
color: #fff;
95+
text-align: center;
96+
padding: 15px 0;
97+
font-size: 0.9rem;
98+
border-top: 3px solid #f38020; /* Classy accent line */
99+
}

‎Wireframe/wireframe-concept.jpg‎

152 KB
Loading

0 commit comments

Comments
 (0)