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

London | Saeid Heidari (ITP Jan) | Module-Onboarding | Week 2 | Form Controls #338

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

London | Saeid Heidari (ITP Jan) | Module-Onboarding | Week 2 | Form Controls #338

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
141a6da
HTML
persianquant Oct 29, 2024
4259c0e
CSS
persianquant Oct 29, 2024
818691d
Placeholder for <select> elements
persianquant Oct 29, 2024
b8ad647
Fixed href in result.html
persianquant Oct 29, 2024
5fc99f9
test
persianquant Nov 2, 2024
c31c820
Pattern removed
persianquant Nov 2, 2024
93b54a4
Button color changed
persianquant Nov 2, 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
2 changes: 2 additions & 0 deletions Form-Controls/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,5 @@ If you have done all these things and you would like a really big challenge, run
- Take a screenshot of your coverage stats.

Sanity check: this extension is tough! Try it in your own time and don't let it hold up your coursework submission.

TEEEEEEEEEEEEEEEEEEEEST
44 changes: 37 additions & 7 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,46 @@
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>
<form action="results.html" method="get">
<div>
<label for="name">Name <span>*</span></label>
<input type="text" placeholder="Your Name" name="Name" id="name" minlength="2" required>
</div>
<div>
<label for="email">Email <span>*</span></label>
<input type="email" placeholder="Email Address" name="Email" id="email" required>
</div>

<div>
<label for="tshirtcolor">Choose the T-Shirt Color</label>
<select name="T-shirt Color" id="tshirtcolor" required>
<option value="" disabled selected hidden>Choose Your Color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
</div>
<div>
<label for="tshirtsize">T-Shirt Size</label>
<select name="T-shirt Size" id="tshirtsize" required>
<option value="" disabled selected hidden>Choose Your T-Shirt 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>
<label for="date">Choose Delivery Date</label>
<input type="date" name="Delivery Date" id="date" min="2024-10-31" max="2024-11-30" required>
</div>
</div>
<button type=submit>Submit</button>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>By Saeid Heidari</h2>
</footer>
</body>

</html>
19 changes: 19 additions & 0 deletions Form-Controls/results.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Results</title>
</head>
<body>
<div id="results"></div>
<a href="index.html">Back to Form</a>
<script>
const resultList = document.getElementById("results");
new URLSearchParams(window.location.search).forEach((value, name) => {
resultList.append(`${name}:${value}`);
resultList.append(document.createElement("br"));
});
</script>
</body>
</html>
145 changes: 145 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,145 @@
/* Custom properties */
:root {
--primary-100: #FF7F50;
--primary-200: #dd6236;
--primary-300: #8f1e00;
--accent-100: #8B4513;
--accent-200: #ffd299;
--text-100: #000000;
--text-200: #2c2c2c;
--bg-100: #F7EEDD;
--bg-200: #ede4d3;
--bg-300: #c4bcab;
}

/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, sans-serif;
}

body {
background-color: var(--bg-100);
color: var(--text-200);
line-height: 1.6;
}

/* Header styles */
header {
background-color: var(--primary-300);
color: var(--bg-100);
padding: 2rem 0;
text-align: center;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(143, 30, 0, 0.2);
}

header h1 {
font-size: 2.5rem;
font-weight: 300;
}

/* Main content and form styles */
main {
max-width: 600px;
margin: 0 auto;
padding: 0 1rem;
}

form {
background-color: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(139, 69, 19, 0.15);
border: 1px solid var(--bg-200);
}

form div {
margin-bottom: 1.5rem;
}

label {
display: block;
margin-bottom: 0.5rem;
color: var(--accent-100);
font-weight: 500;
}

label span {
color: var(--primary-200);
}

input, select {
width: 100%;
padding: 0.8rem;
border: 2px solid var(--bg-200);
border-radius: 6px;
font-size: 1rem;
transition: all 0.3s ease;
background-color: var(--bg-100);
color: var(--text-100);
}

input:focus, select:focus {
outline: none;
border-color: var(--primary-100);
background-color: white;
box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.1);
}

input::placeholder {
color: var(--bg-300);
}

select {
cursor: pointer;
}

button {
background-color: var(--text-100);
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
width: 100%;
transition: background-color 0.3s ease;
box-shadow: 0 2px 4px rgba(255, 127, 80, 0.2);
}

button:hover {
background-color: var(--primary-200);
}

button:active {
background-color: var(--primary-300);
transform: translateY(1px);
}

/* Footer styles */
footer {
text-align: center;
padding: 2rem 0;
color: var(--accent-100);
margin-top: 2rem;
}

footer h2 {
font-size: 1.2rem;
font-weight: 400;
}

/* Responsive design */
@media (max-width: 480px) {
form {
padding: 1.5rem;
}

header h1 {
font-size: 2rem;
}
}