Skip to content
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

Jump to bottom

WestMidlands | Danial Bashirzadeh | Module-User-Focused-Data: [ Form-Controls ] | WEEK 2 #213

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
+133 −4
Open

WestMidlands | Danial Bashirzadeh | Module-User-Focused-Data: [ Form-Controls ] | WEEK 2 #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a14bc86
Add customer name input field with validation
bashirzadehdanial Oct 14, 2024
e94d420
Add customer email address input field
bashirzadehdanial Oct 14, 2024
e7b20e1
Add T-shirt color selection to form
bashirzadehdanial Oct 14, 2024
72f584b
Add T-shirt size selection to form
bashirzadehdanial Oct 14, 2024
34e6b0b
Add delivery date input field
bashirzadehdanial Oct 14, 2024
fa79291
Add semantic structure of HTML
bashirzadehdanial Oct 14, 2024
8db7e1a
Add body styles for overall layout
bashirzadehdanial Oct 14, 2024
553a1a3
Add CSS for form layout and design
bashirzadehdanial Oct 14, 2024
c13c65b
Add submit button and CSS styles for centering and sizing
bashirzadehdanial Oct 14, 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
56 changes: 52 additions & 4 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,63 @@
<h1>Product Pick</h1>
</header>
<main>
<section>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
<fieldset>
<legend>Customer Information</legend>
<!-- Customer Name -->
<div>
<label for="name" >Customer Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" pattern="[A-Za-z\s]" required>
</div>
<!-- Customer Email -->
<div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="Enter your Email Address" required>
</div>
</fieldset>
<fieldset>
<legend>Order Details</legend>
<!-- T-Shirt Color -->
<div>
<label for="color">T-Shirt Color:</label>
<select id="color" name="color" required>
<option value="">Choose a color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<!-- T-Shirt Size -->
<div>
<label for="size">T-Shirt Size:</label>
<select id="size" name="size" required>
<option value="">Choose 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>
<!-- Delivery Date -->
<div>
<label for="date">Preferred Delivery Date:</label>
<input type="date" id="date" name="date" required >
</div>
</fieldset>
<!-- Submit Button -->
<div>
<input type="submit" value="Submit Order">
</div>
</form>
</section>

</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>

<h2>Danial Bashirzadeh</h2>
</footer>
</body>

Expand Down
81 changes: 81 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,81 @@
body{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #e4e1e1;
}

header {
background: #007BFF;
color: white;
padding: 20px;
text-align: center;
}

main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 8px;
}

fieldset {
border: 2px solid #007BFF;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}

legend {
font-weight: bold;
color: #007BFF;
}

label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="date"],
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

footer {
text-align: center;
padding: 10px;
background: #007BFF;
color: white;
position: relative;
bottom: 0;
width: 100%;
}

input[type="submit"] {
background-color: #3ba80c;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
width: 40%;
}

input[type="submit"]:hover {
background-color: #0056b3;
}

form > div {
display: flex;
justify-content: center;
}