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

CYF-London | Pooriya Ketabi | Module-User-Focused-Data | WEEK 2 #314

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

CYF-London | Pooriya Ketabi | Module-User-Focused-Data | WEEK 2 #314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b92584b
html base created
PooriyaKTB Nov 6, 2024
94241cc
2nd html base created
PooriyaKTB Nov 6, 2024
897ffbe
styles added
PooriyaKTB Nov 6, 2024
4a1d74e
Changes Applied
PooriyaKTB Nov 23, 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
102 changes: 93 additions & 9 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,109 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My form exercise</title>
<meta name="description" content="">
<meta name="description" content="T-shirt order">
<meta name="keywords" content="Form, T-shirt, Product pick, Order">
<meta name="author" content="Pooriya">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>

<h2>Please fill carefully</h2>
<form action="results.html" method="GET" enctype="multipart/form-data" autocomplete="on">
<!-- Getting name -->
<div id="name_inp">
<label for="name">Name: <span>*</span></label>
<input type="text" name="Name" id="name" placeholder="Name" pattern="[a-zA-Z]+" minlength="2" title="Only letters" required>
</div>
<!-- Getting Email -->
<div id="mail_inp">
<label for="email">E-mail: <span>*</span></label>
<input type="email" name="Email" id="email" placeholder="Email" pattern="[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$" title="Full email address" required>
</div>
<!-- Default model name for better result -->
<div id="model_box">
<label for="model">Model: <span>*</span></label>
<input type="text" name="Model" id="model" value="£49.99 Cotton T-shirt" disabled>
</div>
<!-- Choose Color -->
<div id="color_box">
<p>Color: <span>*</span></p>
<label for="black">⚫ Raven Black ⚫</label>
<input type="radio" name="Color" id="black" value="Raven Black" required><br>
<label for="white">⚪ Frost White ⚪</label>
<input type="radio" name="Color" id="white" value="Frost White" required><br>
<label for="brown">🟤 Mocha Brown 🟤</label>
<input type="radio" name="Color" id="brown" value="Mocha Brown" required><br>
<label for="red">🔴 Garnet Red 🔴</label>
<input type="radio" name="Color" id="red" value="Garnet Red" required><br>
<label for="blue">🔵 Marine Blue 🔵</label>
<input type="radio" name="Color" id="blue" value="Marine Blue" required><br>
<label for="green">🟢 Jade Green 🟢</label>
<input type="radio" name="Color" id="green" value="Jade Green" required><br>
</div>
<!-- Getting quantity -->
<div>
<label for="quantity">Quantity: <span>*</span></label>
<input type="number" id="quantity" name="Quantity" min="1" max="10" step="1" value="1">
</div>
<!-- getting size -->
<div id="size_box">
<label for="size">Size: <span>*</span></label>
<select name="size" id="size" size="1" required>
<option value="" disabled selected>Please select your size</option>
<option value="X-Small">X-Small</option>
<!-- Sorry no more Small size left, So it's disable -->
<option value="Small" disabled>Small</option>
<option value="Medium">Medium</option>
<!-- Here I put options with different way to test -->
<option label="Large" value="Large"></option>
<option label="X-Large" value="X-Large"></option>
<option label="XX-Large" value="XX-Large"></option>
</select>
</div>
<!-- Setting delivery date -->
<div id="delivery">
<label for="date">Delivery date: <span>*</span></label>
<input type="date" name="Date" id="date" min="2024-11-01" max="2024-11-28" required>
</div>
<!-- Uploading receipt -->
<div id="file">
<label for="receipt" class="file">Upload your receipt</label>
<input type="file" name="File" id="receipt">
</div>
<!-- Further information -->
<div id="detail_box">
<label for="detail">Details</label>
<textarea class="inp-box" name="Detail" id="detail" placeholder="Feel free to write here"></textarea>
</div>
<!-- agreements section -->
<section>
<div id="agree_box">
<h3>Agreement Summary</h3>
<label for="agreement">I've read and accept the agreement. <span>*</span></label>
<input type="checkbox" id="agreement" required><br>
<label for="offer">I'm happy to get special offers via email. <span>*</span></label>
<input type="checkbox" id="offer" required>
</div>
</section>
<!-- Default customer number for better result -->
<input type="hidden" name="Customer number" id="hidden" value="5013">
<!-- buttons for submit or reset form -->
<fieldset id="btn">
<button class="btn" type="reset">Reset</button>
<button class="btn" type="submit">Submit</button>
</fieldset>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>By <a href="https://github.com/PooriyaKTB">Pooriya</a></h2>
</footer>
</body>

</html>
32 changes: 32 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,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Order placed">
<meta name="keywords" content="Result, T-shirt, Done, Order, Confirm, Placed">
<meta name="author" content="Pooriya">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>Order placed</title>
</head>
<body>
<header>
<h1>Your order has been placed successful🎉</h1>
</header>
<main>
<div id="results"></div>
<!-- I found this script on Stack Overflow to get values of names, then show them and put break between each one -->
<script>
const resultList = document.getElementById("results");
new URLSearchParams(window.location.search).forEach((value, name) => {
resultList.append(`${name}: ${value}`);
resultList.append(document.createElement("br"));
});
</script>
<a href="index.html" class="btn">Back</a>
</main>
<footer>
<h2>By <a href="https://github.com/PooriyaKTB">Pooriya</a></h2>
</footer>
</body>
</html>
148 changes: 148 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,148 @@
body{
font-family: questrial, sans-serif;
font-weight: 600;
font-size: 1.2rem;
text-align: center;
margin: 0;
background: linear-gradient(to bottom right,#364958, #55828B);
text-shadow: 0 0 5px whitesmoke;
}

header{
margin: 0;
padding: 1vw;
background: conic-gradient(#87BBA2, #3B6064);
box-shadow: 0 0 15px black;
}

main{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}

h1{
font-size: 3rem;
}

label, p{
display: block;
margin: 1.5rem;
font-weight: 900;
}

input, select, .inp-box{
font-family: inherit;
height: 2rem;
font-size: 1rem;
font-weight: bold;
text-align: center;
border: solid 2px #001B2E;
border-radius: 30px;
background: #FFEFD3;
vertical-align: middle;
}

input:focus, .inp-box:focus{
color: #87BBA2;
background: #001B2E;
}

.inp-box{
padding: 2vw 3vw;
height: 10rem;
font-size: 1.2rem;
}

#receipt{
display: none;

}

.file{
cursor: pointer;
display: inline-block;
margin: 2vw auto;
padding: 1vw 2vw;
border-radius: 30px;
background: #3B6064;
box-shadow: 0 0 10px black;
}

.file:hover{
color: #87BBA2;
text-shadow: 0 0 3px black;
background: #001B2E;
}

div{
margin: 2vw auto;
padding: 2vw 2vw;
border: outset 3px #FFEFD3;
border-radius: 40px;
background: radial-gradient(#8f96a1,#3B6064);
box-shadow: 0 0 15px black;
}

#color_box{
display: flex;
flex-direction: column;
align-items: center;
line-height: 0.3rem;
}

#color_box input{
transform: scale(1.5);
}

#size_box{
display: block;
margin: 0 auto;
}

.btn{
font: inherit;
height: 1rem;
padding: 1rem 2rem;
padding-bottom: 2rem;
margin: 0 2vw;
border: solid 2px wheat;
border-radius: 30px;
background: #3B6064;
color: #FFEFD3;
text-shadow: 0 0 5px black;
box-shadow: 0 0 20px black;
}

.btn:hover{
color: #001B2E;
background: #87BBA2;
}

span{
color: #d60c0c;
}

#agree_box label{
display: inline;
}

fieldset{
border: none;
}

a{
text-decoration: none;
color: #87BBA2;
text-shadow: 0 0 10px black;
}

footer{
margin: 2vw 0 0 0;
bottom: 0;
padding: 1vw;
position: relative;
background: linear-gradient(90deg, #87BBA2, #3B6064);
box-shadow: 0 0 15px black;
}