Skip to content

Commit 6b3b802

Browse files
gideondefargideondefar
committed
lighthouse
1 parent b9cc5f9 commit 6b3b802

3 files changed

Lines changed: 120 additions & 101 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 66 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,75 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
7-
<meta name="description" content="T-shirt order form" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
</head>
10-
<body>
11-
<header>
12-
<h1>Product Pick</h1>
13-
</header>
143

15-
<main>
16-
<form>
17-
<!-- write your html here-->
18-
<!-- Customer Name -->
19-
<!-- Customer Name -->
20-
<label for="name">Full Name:</label>
21-
<input
22-
type="text"
23-
id="name"
24-
name="name"
25-
required
26-
minlength="2"
27-
pattern=".*\S.*"
28-
placeholder="Enter your full name"
29-
/>
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<title>My form exercise</title>
8+
<meta name="description" content="T-Shirt Order Form" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
</head>
3011

31-
<br /><br />
12+
<body>
13+
<header>
14+
<h1>Product Pick</h1>
15+
</header>
16+
<main>
17+
<form>
18+
<!-- Customer Name Input -->
19+
<p>
20+
<label for="customerName">Name:</label>
21+
<input type="text" id="customerName" name="customerName" required minlength="2"
22+
placeholder="Enter your full name">
23+
</p>
3224

33-
<!-- Email -->
34-
<label for="email">Email Address:</label>
35-
<input
36-
type="email"
37-
id="email"
38-
name="email"
39-
required
40-
placeholder="example@example.com"
41-
/>
42-
<br /><br />
25+
<!-- Customer Email Input -->
26+
<p>
27+
<label for="emailAddress">Email:</label>
28+
<input type="email" id="emailAddress" name="emailAddress" required placeholder="you@example.com"
29+
pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z]{2,63})$"
30+
title="Please enter a valid email address (e.g., user@example.com). Domain parts (like 'example') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com).">
31+
</p>
4332

44-
<!-- T-shirt Colour -->
45-
<fieldset>
46-
<legend>Choose your T-shirt colour:</legend>
47-
<input type="radio" id="red" name="color" value="Red" required />
48-
<label for="red">Red</label><br />
33+
<!-- T-Shirt Colour Selection -->
34+
<fieldset>
35+
<legend>Choose T-Shirt Colour:</legend>
36+
<p>
37+
<input type="radio" id="colourRed" name="shirtColour" value="red" required>
38+
<label for="colourRed">Red</label>
39+
</p>
40+
<p>
41+
<input type="radio" id="colourBlue" name="shirtColour" value="blue">
42+
<label for="colourBlue">Blue</label>
43+
</p>
44+
<p>
45+
<input type="radio" id="colourGreen" name="shirtColour" value="green">
46+
<label for="colourGreen">Green</label>
47+
</p>
48+
</fieldset>
4949

50-
<input type="radio" id="blue" name="color" value="Blue" />
51-
<label for="blue">Blue</label><br />
52-
53-
<input type="radio" id="black" name="color" value="Black" />
54-
<label for="black">Black</label>
55-
</fieldset>
56-
<br />
57-
58-
<!-- T-shirt Size -->
59-
<label for="size">Choose your T-shirt size:</label>
60-
<select id="size" name="size" required>
61-
<option value="" disabled selected>Select size</option>
62-
<option value="XS">XS</option>
63-
<option value="S">S</option>
64-
<option value="M">M</option>
65-
<option value="L">L</option>
66-
<option value="XL">XL</option>
67-
<option value="XXL">XXL</option>
50+
<!-- T-Shirt Size Selection -->
51+
<p>
52+
<label for="shirtSize">Choose Size:</label>
53+
<select id="shirtSize" name="shirtSize" required>
54+
<option value="">-- Please choose a size --</option>
55+
<option value="xs">XS</option>
56+
<option value="s">S</option>
57+
<option value="m">M</option>
58+
<option value="l">L</option>
59+
<option value="xl">XL</option>
60+
<option value="xxl">XXL</option>
6861
</select>
69-
<br /><br />
62+
</p>
63+
64+
<!-- Submit Section Button -->
65+
<p>
66+
<button type="submit">Place Order</button>
67+
</p>
68+
</form>
69+
</main>
70+
<footer>
71+
<h2>By Gideon Defar</h2>
72+
</footer>
73+
</body>
7074

71-
<button type="submit">Submit Order</button>
72-
<!--
73-
try writing out the requirements first as comments
74-
this will also help you fill in your PR message later-->
75-
</form>
76-
</main>
77-
<footer>
78-
<!-- change to your name-->
79-
<h2>By HOMEWORK SOLUTION</h2>
80-
</footer>
81-
</body>
82-
</html>
75+
</html>

‎Wireframe/index.html‎

Lines changed: 52 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,58 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Wireframe</h1>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Wireframe</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<header>
13+
<h1>Wireframe</h1>
14+
<p class="wireframe-title">
15+
A wireframe is a basic visual guide used in design, especially in web
16+
and app development, to represent the structure and layout of a page or
17+
interface before the final design is created.
18+
</p>
19+
</header>
20+
21+
<main>
22+
<article>
23+
<img src="placeholder.svg" alt="Placeholder image" />
24+
<h2>Purpose of a README File</h2>
1225
<p>
13-
This is the default, provided code and no changes have been made yet.
26+
A README file serves as the main introduction and documentation for a project,
27+
typically found in the root directory of software repositories (like those on GitHub).
28+
<a href="https://www.mygreatlearning.com/blog/readme-file/">Read more</a>
1429
</p>
15-
</header>
16-
<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>
26-
</main>
27-
<footer>
30+
</article>
31+
32+
<article>
33+
<img src="placeholder.svg" alt="Placeholder image" />
34+
<h2>Purpose of a Wireframe</h2>
2835
<p>
29-
This is the default, provided code and no changes have been made yet.
36+
The purpose of a wireframe is to serve as a blueprint or visual guide for designing a website,
37+
app, or digital interface before any actual design or coding begins.
38+
<a href="https://balsamiq.com/learn/articles/what-are-wireframes/">Read more</a>
3039
</p>
31-
</footer>
32-
</body>
33-
</html>
40+
</article>
41+
42+
<article>
43+
<img src="placeholder.svg" alt="Placeholder image" />
44+
<h2>A Branch in Git</h2>
45+
<p>
46+
A branch in Git is essentially a lightweight, movable pointer to a commit. It allows you
47+
to work on different versions of a project without affecting the main codebase.
48+
<a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
49+
</p>
50+
</article>
51+
</main>
52+
53+
<footer>
54+
<p>
55+
Author: Gideon Defar</p>
56+
</footer>
57+
</body>
58+
</html>

‎Wireframe/style.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,5 @@ article {
8686
> img {
8787
grid-column: span 3;
8888
}
89-
}
89+
}
90+

0 commit comments

Comments
 (0)