Skip to content

Sheffield | 3 May-2025 | Xiayidan Abuduxukuer | Form Controls #705

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Sheffield | 3 May-2025 | Xiayidan Abuduxukuer | Form Controls #705

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2c85eb2
Complete Form Controls task with validated form
Shayida999 Jun 5, 2025
8dcef29
Fix: moved wireframe code to Wireframe folder and deleted extra folder
Shayida999 Jun 5, 2025
5f6bc53
Clean: removed wireframe-task and restored original Wireframe files f…
Shayida999 Jun 6, 2025
aa35b5f
Fix: added pattern to prevent whitespace-only names
Shayida999 Jun 6, 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
68 changes: 64 additions & 4 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,76 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<title>Selling Clothes</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>

<header>
<h1>Product Pick</h1>
<h1>T-Shirt Order Form</h1>
</header>


<main>
<form>
<form id="TshirtOrderForm" novalidate>

<label for="CustomerName">Name:</label>

<input
type="Text"
id="CustomerName"
name="CustomerName"
required
minlength="2"
aria-describedby="NameHelp"
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently a user can enter a name consisting of only space characters (e.g., " "). Can you enforce a stricter validation rule using the pattern attribute to disallow any name that contains only space characters?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi CJ.

I have now:

Removed the wireframe-task folder
Restored the correct Wireframe files from main
Added a pattern to the name input to block whitespace-only names

Is everything ok now?? Thank you



<small id="NameHelp">Please enter your full name (min 2 characters).</small>
<br/><br/>

<label for="CustomerEmail">Email:</label>
<input
type="Email"
id="CustomerEmail"
name="CustomerEmail"
required
aria-describedby="Email"
/>

<small id="Email">Please enter a valid email address.</small>
<br/><br/>


<fieldset>
<legend>T-Shirt Colour (choose one):</legend>

<input type="radio" id="colorRed" name="color" value="Red" required />
<label for="colorRed">Red</label>

<input type="radio" id="colorBlue" name="color" value="Blue" />
<label for="colorBlue">Blue</label>

<input type="radio" id="colorGreen" name="color" value="Green" />
<label for="colorGreen">Green</label>
</fieldset>
<br/>

<!-- T-shirt Size -->
<label for="sizeSelect">Size:</label>
<select id="sizeSelect" name="size" required>
<option value="">Select 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>
<br/><br/>

<button type="submit">Submit</button>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
Expand All @@ -21,7 +81,7 @@ <h1>Product Pick</h1>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>By Xiayidan</h2>
</footer>
</body>
</html>
45 changes: 45 additions & 0 deletions Form-Controls/wireframe-task/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>📄 Wireframe Explorer 📄</h1>
<p>a two-dimensional skeletal outline of a webpage or app.</p>
<hr />
</header>

<main>
<article>
<img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210328185457/How-To-Create-a-Wireframe-in-Software-Design.png" alt="Wireframe design showing page layout" />
<h2>WireFrame</h2>
<p>A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.</p>
<a href="https://en.wikipedia.org/wiki/Website_wireframe" target="_blank" rel="noopener noreferrer">Read more</a>
</article>

<article>
<img src="https://gcapes.github.io/git-course/fig/feature-branches.svg" alt="Diagram showing Git feature branches" />
<h2>Git Branch</h2>
<p>In Git, branching allows developers to create independent lines of development, diverging from the main project line and working on new features or bug fixes without affecting the primary codebase.
It's like creating a separate "parallel universe" for your code, enabling parallel development efforts.</p>
<a href="https://learngitbranching.js.org/" target="_blank" rel="noopener noreferrer">Learn Git Branching</a>
</article>

<article>
<img src="https://i.ytimg.com/vi/jeOfS90Flf8/maxresdefault.jpg" alt="YouTube screenshot explaining README file usage" />
<h2>ReadMe</h2>
<p>A README file is a plain text file, often used in software repositories or when sharing datasets, that provides a brief introduction and explanation of the project or data.
You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.</p>
<a href="https://www.makeareadme.com/" target="_blank" rel="noopener noreferrer">Read more</a>
</article>
</main>

<footer>
<p>&copy; 2025 CodeYourFuture — All rights reserved.</p>
</footer>
</body>
</html>
166 changes: 166 additions & 0 deletions Form-Controls/wireframe-task/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
:root {
--paper: white;
--ink: color-mix(in oklab, var(--color) 5%, black);
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid black;
--container: 1000px;
}

html, body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}

body {
background: linear-gradient(to right, #e0f7fa, #e1f5fe);
color: black;
font: var(--font);
min-height: 100vh;
}

header {
text-align: center;
padding: var(--space) 0;
}

header hr {
border: none;
border-top: 1.5px solid black;
width: 55%;
}

header p {
margin-bottom: 0.2rem;
}

h1, h2 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
margin-top: 1rem;
margin-bottom: 0.5rem;
font-weight: 600;
}

h1:hover {
color: purple;
transition: color 0.3s ease;
}

h1 {
font-size: 2rem;
}

h2 {
font-size: 1.5rem;
}

main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
flex: 1;
padding-bottom: 40px;
}

main > *:first-child {
grid-column: span 2;
padding: var(--space);
}

main > article:first-child h2,
main > article:first-child p {
font-size: 0.95rem;
}

a {
padding: 6px 12px;
font-size: 0.85rem;
background-color: #007acc;
color: white;
text-decoration: none;
border-radius: 4px;
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: var(--space);
max-width: fit-content;
transition: background-color 0.2s ease;
}

a::after {
content: '▶';
font-size: 1rem;
margin-left: 2px;
}

a:hover {
background-color: #005f99;
}

img,
svg {
width: 100%;
object-fit: cover;
}

article {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border-radius: 8px;
padding-bottom: var(--space);
text-align: left;
padding: var(--space);
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background-color: rgba(255, 255, 255, 0.3);
}

article > * {
grid-column: 2 / 3;
}

article > img {
grid-column: span 3;
max-height: 300px;
}

footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.9);
text-align: center;
padding: 1.5px 2px;
border-top: 1px solid #ccc;
font-size: 0.80rem;
font-weight: 400;
z-index: 1000;
}

@media (max-width: 600px) {
img {
max-height: 200px;
}

main {
grid-template-columns: 1fr;
padding: 0 var(--space);
padding-bottom: 0;
}

main > *:first-child {
grid-column: auto;
}

footer {
font-size: 0.80rem;
position: static;
}
}
40 changes: 26 additions & 14 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,38 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<h1>📄 Wireframe Explorer 📄</h1>
<p>a two-dimensional skeletal outline of a webpage or app.</p>
<hr />
</header>

<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
<img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210328185457/How-To-Create-a-Wireframe-in-Software-Design.png" alt="Wireframe design showing page layout" />
<h2>WireFrame</h2>
<p>A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.</p>
<a href="https://en.wikipedia.org/wiki/Website_wireframe" target="_blank" rel="noopener noreferrer">Read more</a>
</article>

<article>
<img src="https://gcapes.github.io/git-course/fig/feature-branches.svg" alt="Diagram showing Git feature branches" />
<h2>Git Branch</h2>
<p>In Git, branching allows developers to create independent lines of development, diverging from the main project line and working on new features or bug fixes without affecting the primary codebase.
It's like creating a separate "parallel universe" for your code, enabling parallel development efforts.</p>
<a href="https://learngitbranching.js.org/" target="_blank" rel="noopener noreferrer">Learn Git Branching</a>
</article>

<article>
<img src="https://i.ytimg.com/vi/jeOfS90Flf8/maxresdefault.jpg" alt="YouTube screenshot explaining README file usage" />
<h2>ReadMe</h2>
<p>A README file is a plain text file, often used in software repositories or when sharing datasets, that provides a brief introduction and explanation of the project or data.
You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.</p>
<a href="https://www.makeareadme.com/" target="_blank" rel="noopener noreferrer">Read more</a>
</article>
</main>

<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>&copy; 2025 CodeYourFuture — All rights reserved.</p>
</footer>
</body>
</html>
Loading