Skip to content

Commit 7b0578c

Browse files
TaliaKucukTaliaKucuk
committed
used prettier code formatter to make code readable
1 parent e07dc56 commit 7b0578c

2 files changed

Lines changed: 95 additions & 94 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
99

10-
<link rel="stylesheet" href="style.css">
10+
<link rel="stylesheet" href="style.css" />
1111
</head>
1212
<body>
1313
<header>
@@ -17,48 +17,49 @@ <h1>Product Pick</h1>
1717
<form>
1818
<div>
1919
<label for="name">Name:</label>
20-
<input type="text" id="name" name="customers_name" required pattern=".*\S.*\S.*">
21-
</div>
22-
<!-- 1. What is the customer's name? I must collect this data and
23-
it contains at least two non-space characters. -->
24-
<div><label for="mail">Email:</label>
25-
<input type ="email" id="mail" name="customers_email" required></div>
26-
<!-- 2. What is the customer's email? I must make sure the email is valid.
27-
Email addresses follow a consistent pattern.-->
28-
<div>
29-
<label for="colour">Colour:</label>
20+
<input
21+
type="text"
22+
id="name"
23+
name="customers_name"
24+
required
25+
pattern=".*\S.*\S.*"
26+
/>
27+
</div>
28+
29+
<div>
30+
<label for="mail">Email:</label>
31+
<input type="email" id="mail" name="customers_email" required />
32+
33+
<div>
34+
<label for="colour">Colour:</label>
3035

31-
<select id="colour" name="tshirt_colour" required>
32-
<option value="" selected disabled>Choose a colour</option>
33-
<option value="pink">Pink</option>
34-
<option value="yellow">Yellow</option>
35-
<option value="black">Black</option>
36-
</select>
37-
</div>
38-
<!--3. What colour should this T-shirt be? I must provide 3 options.
39-
How will I ensure they do not choose other colours?-->
40-
<div>
41-
<label for="size">Size:</label>
36+
<select id="colour" name="tshirt_colour" required>
37+
<option value="" selected disabled>Choose a colour</option>
38+
<option value="pink">Pink</option>
39+
<option value="yellow">Yellow</option>
40+
<option value="black">Black</option>
41+
</select>
42+
</div>
43+
44+
<div>
45+
<label for="size">Size:</label>
4246

43-
<select id="size" name="tshirt_size" required>
44-
<option value="" selected disabled>Choose a size</option>
45-
<option value="XS">XS</option>
46-
<option value="S">S</option>
47-
<option value="M">M</option>
48-
<option value="L">L</option>
49-
<option value="XL">XL</option>
50-
<option value="XXL">XXL</option>
51-
</select>
52-
</div>
53-
<!-- 4. What size does the customer want? I must provide the following 6 options:
54-
XS, S, M, L, XL, XXL-->
55-
<div class="button">
56-
<button type="submit">Submit</button>
57-
</div>
47+
<select id="size" name="tshirt_size" required>
48+
<option value="" selected disabled>Choose a size</option>
49+
<option value="XS">XS</option>
50+
<option value="S">S</option>
51+
<option value="M">M</option>
52+
<option value="L">L</option>
53+
<option value="XL">XL</option>
54+
<option value="XXL">XXL</option>
55+
</select>
56+
</div>
57+
58+
<div class="button">
59+
<button type="submit">Submit</button>
60+
</div>
5861
</form>
5962
</main>
60-
<footer>
61-
Talia Kucuk
62-
</footer>
63+
<footer>Talia Kucuk</footer>
6364
</body>
6465
</html>

‎Form-Controls/style.css‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,55 @@
11
body {
2-
font-family: Arial, sans-serif;
3-
background-color: #f4f4f4;
4-
margin: 0;
5-
}
6-
7-
header,
8-
footer {
9-
text-align: center;
10-
padding: 1rem;
11-
}
12-
13-
main {
14-
display: flex;
15-
justify-content: center;
16-
}
17-
18-
form {
19-
background-color: white;
20-
padding: 2rem;
21-
margin-top: 2rem;
22-
width: 320px;
23-
border-radius: 10px;
24-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
25-
}
26-
27-
form div {
28-
margin-bottom: 1rem;
29-
}
30-
31-
label {
32-
display: block;
33-
margin-bottom: 0.4rem;
34-
font-weight: bold;
35-
}
36-
37-
input,
38-
select,
39-
button {
40-
width: 100%;
41-
padding: 0.6rem;
42-
box-sizing: border-box;
43-
}
44-
45-
button {
46-
background-color: black;
47-
color: white;
48-
border: none;
49-
border-radius: 5px;
50-
cursor: pointer;
51-
}
52-
53-
button:hover {
54-
background-color: #333;
55-
}
2+
font-family: Arial, sans-serif;
3+
background-color: #f4f4f4;
4+
margin: 0;
5+
}
6+
7+
header,
8+
footer {
9+
text-align: center;
10+
padding: 1rem;
11+
}
12+
13+
main {
14+
display: flex;
15+
justify-content: center;
16+
}
17+
18+
form {
19+
background-color: white;
20+
padding: 2rem;
21+
margin-top: 2rem;
22+
width: 320px;
23+
border-radius: 10px;
24+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
25+
}
26+
27+
form div {
28+
margin-bottom: 1rem;
29+
}
30+
31+
label {
32+
display: block;
33+
margin-bottom: 0.4rem;
34+
font-weight: bold;
35+
}
36+
37+
input,
38+
select,
39+
button {
40+
width: 100%;
41+
padding: 0.6rem;
42+
box-sizing: border-box;
43+
}
44+
45+
button {
46+
background-color: black;
47+
color: white;
48+
border: none;
49+
border-radius: 5px;
50+
cursor: pointer;
51+
}
52+
53+
button:hover {
54+
background-color: #333;
55+
}

0 commit comments

Comments
 (0)