-
-
Notifications
You must be signed in to change notification settings - Fork 95
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.
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-ITP - South Africa |Azharuddin Meyer | Module-User Focused Data-Form Controls | WEEK2 | #320
Changes from 11 commits
1a2efc9
d3a6585
ff0a999
884ae3e
33b6f24
9c05cdb
ea101ce
70c4ddb
f57d34c
b417a4f
83c5a82
9dabd3a
15120bc
1c99246
11729f7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,28 +1,95 @@ | ||
<!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"> | ||
<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> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
<title>My form exercise</title> | ||
<meta | ||
name="description" | ||
content="Learning how to make html forms using css" | ||
/> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<link rel="stylesheet" href="styles.css" /> | ||
<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=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" | ||
rel="stylesheet" | ||
/> | ||
</head> | ||
|
||
</main> | ||
<footer> | ||
<!-- change to your name--> | ||
<h2>By HOMEWORK SOLUTION</h2> | ||
</footer> | ||
</body> | ||
<body> | ||
<div class="container" | ||
<header> | ||
<h1>Product Pick</h1> | ||
</header> | ||
<main> | ||
<form class="form"> | ||
<div class="user-input"> | ||
<div class="name"> | ||
<label for="name">Name</label> | ||
<input | ||
type="text" | ||
name="name" | ||
id="name" | ||
placeholder="Username" | ||
required | ||
/> | ||
</div> | ||
<div> | ||
<label for="email">Email</label> | ||
<input | ||
type="email" | ||
name="email" | ||
id="email" | ||
placeholder="Email address..." | ||
required | ||
/> | ||
</div> | ||
|
||
</html> | ||
<div> | ||
<label for="color">Choose a color:</label> | ||
<select id="color" name="color" required> | ||
<option value="" disabled selected>Select a color</option> | ||
<option value="orange">Orange</option> | ||
<option value="green">Green</option> | ||
<option value="blue">Blue</option> | ||
</select> | ||
</div> | ||
|
||
<div> | ||
<label for="size">Choose a size:</label> | ||
<select id="size" name="size" required> | ||
<option value="" disabled selected>Select 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> | ||
|
||
<div> | ||
<label for="date">Choose a delivery date</label> | ||
<input | ||
type="date" | ||
min="2024-10-19" | ||
max="2024-11-16" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nice validations! however, the form currently allows me to submit without filling out this field. Could you fix that? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Added a required field for my date field |
||
name="date" | ||
id="date" | ||
/> | ||
</div> | ||
</div> | ||
|
||
<div class="btn"> | ||
<button class="submit">Submit</button> | ||
</div> | ||
</form> | ||
</main> | ||
<footer> | ||
<p>By Azharuddin Meyer</p> | ||
</footer> | ||
</div> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,146 @@ | ||
body { | ||
display: flex; | ||
justify-content: center; | ||
|
||
text-align: center; | ||
margin: 14rem; | ||
padding: 8rem; | ||
box-sizing: border-box; | ||
font-family: "Work Sans", sans-serif; | ||
font-optical-sizing: auto; | ||
font-style: normal; | ||
font-size: 1rem; | ||
background-image: url("https://images.unsplash.com/photo-1563291074-2bf8677ac0e5?q=80&w=1907&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); | ||
} | ||
|
||
html, | ||
body { | ||
height: 100%; | ||
margin: 0rem; | ||
} | ||
|
||
form { | ||
min-height: 40rem; | ||
padding: 2rem; | ||
text-align: left; | ||
font-weight: 300; | ||
margin: 2rem; | ||
background: #ffffff; | ||
max-width: 600px; | ||
border-radius: 8px; | ||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: flex-start; | ||
font-size: 18px; | ||
} | ||
|
||
.user-input { | ||
padding: 0.8rem 1rem; | ||
margin: 1.5rem 0; | ||
border-radius: 4px; | ||
outline: none; | ||
width: 100%; | ||
max-width: 400px; | ||
box-sizing: border-box; | ||
line-height: 5.5; | ||
} | ||
|
||
.submit { | ||
padding: 1rem; | ||
width: 7rem; | ||
border-radius: 5px; | ||
color: white; | ||
background-color: #c9184a; | ||
border: #c9184a; | ||
font-weight: 800; | ||
box-shadow: #c9184a 0px 2px 8px 0px; | ||
position: absolute; | ||
text-transform: uppercase; | ||
-webkit-animation-duration: 1s; | ||
animation-duration: 1s; | ||
-webkit-animation-fill-mode: both; | ||
animation-fill-mode: both; | ||
-webkit-animation-timing-function: ease-in-out; | ||
animation-timing-function: ease-in-out; | ||
animation-iteration-count: infinite; | ||
-webkit-animation-iteration-count: infinite; | ||
} | ||
|
||
.submit:hover { | ||
cursor: pointer; | ||
animation-name: bounce; | ||
-moz-animation-name: bounce; | ||
} | ||
.btn { | ||
padding: 14%; | ||
margin: 2rem; | ||
width: 7rem; | ||
} | ||
|
||
.footer { | ||
position: static; | ||
display: block; | ||
margin: auto; | ||
font-size: 1rem; | ||
padding: 10rem 1rem; | ||
} | ||
|
||
input:focus { | ||
border-color: #c9184a; | ||
box-shadow: #c9184a 0px 2px 8px 0px; | ||
} | ||
input { | ||
padding: 6px; | ||
border-radius: 3px; | ||
border: 1px solid black; | ||
margin: 2rem; | ||
} | ||
|
||
@media (max-width: 480px) { | ||
header h1 { | ||
font-size: 1.5em; | ||
text-align: center; | ||
} | ||
|
||
.btn { | ||
text-align: center; | ||
} | ||
.submit { | ||
display: block; | ||
margin: auto; | ||
} | ||
|
||
footer h2 { | ||
font-size: 0.9em; | ||
padding: 6px; | ||
} | ||
|
||
footer { | ||
padding: 8px; | ||
font-size: 0.8em; | ||
} | ||
} | ||
|
||
@keyframes bounce { | ||
0%, | ||
100%, | ||
20%, | ||
50%, | ||
80% { | ||
-webkit-transform: translateY(0); | ||
-ms-transform: translateY(0); | ||
transform: translateY(0); | ||
} | ||
40% { | ||
-webkit-transform: translateY(-30px); | ||
-ms-transform: translateY(-30px); | ||
transform: translateY(-30px); | ||
} | ||
60% { | ||
-webkit-transform: translateY(-15px); | ||
-ms-transform: translateY(-15px); | ||
transform: translateY(-15px); | ||
} | ||
} |
This file was deleted.
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What validations might we want to check for the name field?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi james, I added minlength and maxlength validations for my name field