Skip to content

NW | 25-ITP-Sep | TzeMing Ho | Sprint 2 | Form Controls #736

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
TzeMingHo wants to merge 7 commits into from
Closed

NW | 25-ITP-Sep | TzeMing Ho | Sprint 2 | Form Controls #736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f0724ab
added image, title, summary, and context of wireframe
TzeMingHo Aug 28, 2025
715c2d6
updated context of wireframe and branches in git
TzeMingHo Aug 28, 2025
1a89b42
add context of readme files
TzeMingHo Aug 29, 2025
20ea11e
add color styling in style.css
TzeMingHo Aug 29, 2025
49d1280
edited styling
TzeMingHo Aug 29, 2025
c8ccb86
create a form for username, email, color, and size with validation check
TzeMingHo Sep 1, 2025
ee1b40a
improved accessibility score to 100
TzeMingHo Sep 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 58 additions & 3 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,69 @@ <h1>Product Pick</h1>
<main>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
<fieldset>
<legend>Order your T-shirt</legend>
<legend>Your name registered with us</legend>
<div id="name-field">
<!-- customer valid name-->
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
minlength="2"
pattern="^[A-Za-z]{2,}$"
placeholder="enter your name"
required
/>
</div>
<legend>Your email registered with us</legend>
<div id="email-field">
<!-- customer valid email-->
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
pattern="^[A-Za-z0-9._]+@[A-Za-z0-9]+\.[a-z]{2,}(\.[a-z]{2,})?$"
placeholder="enter your email"
required
/>
</div>
<legend>Please choose the color of T-shirt you like</legend>
<div id="tshirt-color">
<!-- color of the T-shirt-->
<label for="color">T-shirt Color:</label>
<select id="color" name="color" required>
<option value="" disabled selected>Select a color</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>
</div>
<legend>Please choose the size of T-shirt you like</legend>
<div id="tshirt-size">
<!-- size of the T-shirt-->
<label for="size">T-shirt Size:</label>
<select id="size" name="size" required>
<option value="" disabled selected>Select a size</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</div>
</fieldset>
<!-- try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<button id="submit-button" type="submit">Submit order</button>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>By Tze Ming Ho</h2>
</footer>
</body>
</html>
39 changes: 31 additions & 8 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,48 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Wireframe, branches in git, and readme files</h1>
<p>
This is the default, provided code and no changes have been made yet.
Let's get familiar with wireframe, branches, and readme files.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="https://uxguerrilla.co.uk/wp-content/uploads/2020/09/mobile-web.png" alt="a black and white photo of wireframe in tablet, webpage, and smartphone" />
<h2>The purpose of a wireframe</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
Wireframe is a visual guide that represents the skeletal framework of a
website or application. It shows the layout, structure, and features
without focusing on design elements like colors or images, while gathering early feedback from users and stakeholders.
</p>
<a href="">Read more</a>
<a href="https://adamfard.com/blog/wireframes" target="_blank">Read more</a>
</article>
<article>

<img id="branches-img" src="https://wac-cdn.atlassian.com/dam/jcr:a905ddfd-973a-452a-a4ae-f1dd65430027/01%20Git%20branch.svg?cdnVersion=2934" alt="a picture of git branches" />


<h2>Branches in git</h2>
<p>
A branch in Git is a separate line of development that allows you to
work on different features or fixes independently. It enables
collaboration, experimentation, and version control without affecting
the main codebase.
</p>
<a href="https://www.w3schools.com/git/git_branch.asp" target="_blank">Read more</a>
</article>
<article>
<img id="readme-img" src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*oppPsIqwEiB_kndtd6GWxA.png" alt="a picture of a banner written readme" />
<h2>The purpose of a README file</h2>
<p>
A README file is an essential document that outlines the purpose of a project, installation instructions, usage guidelines, and details for contributions. It is a guide for users and developers to understand and interact with the project.
</p>
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank" >Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Created @ Tze Ming Ho 2025
</p>
</footer>
</body>
Expand Down
47 changes: 46 additions & 1 deletion Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,44 @@ As well as useful links to learn more */
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
--ink: color-mix(in oklab, var(--color) 5%, rgb(3, 3, 3));
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
--container: 1280px;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
header {
text-align: center;
color: rgb(1, 77, 77);
}

body {
background: var(--paper);
color: var(--ink);
font: var(--font);
background-color: rgb(239, 244, 247);
}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
text-decoration: none;
color: rgb(116, 72, 15);
border-radius: 25px;
border-color: green;
display: flex;
justify-content: center;
align-items: center;
}

a:hover {
background-color: rgb(116, 72, 15);
color: white;
transition: background-color 0.3s ease;
}

img,
svg {
width: 100%;
Expand All @@ -53,6 +73,12 @@ footer {
position: fixed;
bottom: 0;
text-align: center;
background-color: rgb(247, 247, 236);
width: 99%;
border: 1px solid;
border-color: green;
color: rgb(116, 72, 15);

}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand All @@ -76,6 +102,7 @@ Keeping things orderly and separate is the key to good, simple CSS.
*/
article {
border: var(--line);
border-radius: 15px;
padding-bottom: var(--space);
text-align: left;
display: grid;
Expand All @@ -85,5 +112,23 @@ article {
}
> img {
grid-column: span 3;

}
background-color: rgb(240, 240, 235);
border-color: green;
color: rgb(116, 72, 15);
}

img {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

#branches-img, #readme-img {
min-height: 200px;
max-height: 300px;
}

#branches-img {
object-fit: contain;
}