Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

Manchester | Bestun-Mohammedi | Module-User-Focused-Data | Week1 | form-controls #328

Closed
wants to merge 2 commits into from
Closed

Manchester | Bestun-Mohammedi | Module-User-Focused-Data | Week1 | form-controls #328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
09c4ce2
form-controls
bestunmoh Nov 30, 2024
f8cbb90
Merge remote-tracking branch 'upstream/main' into Form-control-Bestun…
bestunmoh Nov 30, 2024
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
57 changes: 43 additions & 14 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My form exercise</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T-Shirt Order Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>T-Shirt Order Form</h1>
</header>

<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>
<form id="tshirt-form" novalidate>
<!-- Customer Name -->
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required minlength="2" placeholder="John Doe">

<!-- Customer Email -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required placeholder="[email protected]">

<!-- T-Shirt Color -->
<fieldset>
<legend>Select T-Shirt Color:</legend>
<label><input type="radio" name="color" value="Red" required> Red</label>
<label><input type="radio" name="color" value="Blue" required> Blue</label>
<label><input type="radio" name="color" value="Green" required> Green</label>
</fieldset>

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

<!-- Delivery Date -->
<label for="delivery-date">Delivery Date (within 4 weeks):</label>
<input type="date" id="delivery-date" name="delivery-date" required>
Copy link
Member

Choose a reason for hiding this comment

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

What validations could you add to meet the acceptance criteria? Validations added as an attribute to limit the range of this date picker?

Copy link
Author

Choose a reason for hiding this comment

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

Hi . i added some new attribute.

Copy link
Member

Choose a reason for hiding this comment

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

Hi @bestunmoh I can't see an update here. Have you pushed your changes to your branch on GitHub?


<!-- Submit Button -->
<button type="submit">Place Order</button>
</form>
</main>

<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<p>By Bestun Mohammedi</p>
</footer>
</body>

</html>
</html>
55 changes: 55 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

header, main, footer {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #fff;
}

h1 {
text-align: center;
}

form {
display: flex;
flex-direction: column;
gap: 15px;
}

label {
font-weight: bold;
}

input, select, button {
padding: 10px;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #2bb7dd;
}

input:focus, select:focus, button:focus {
outline: 2px solid #007BFF;
}

button {
background-color: blue;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

fieldset {
border: 1px solid #ccc;
padding: 10px;
}