Skip to content
Open
46 changes: 43 additions & 3 deletions Form-Controls/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,49 @@ <h1>Product Pick</h1>
<main>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<!-- requirements,
customer name, must have at least two characters
Customers email must have format text@text.text
Colour choice, must be one of red, blue or green
Size choice must be Xs, S, M, L, XL, XXL
-->

<div>
<!-- Name: at least 2 characters -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required pattern=".{2,}" title="Name must be at least 2 characters long">
</div>
<div>
<!-- Email: basic format text@text.text -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$" title="Enter a valid email like user@example.com">
</div>
<div>
<!-- Colour choice: red, blue, green -->
<label for="colour">Colour:</label>
<select id="colour" name="colour" required>
<option value="">Select a colour</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<div>
<!-- Size choice: XS, S, M, L, XL, XXL -->
<label for="size">Size:</label>
<select id="size" name="size" required>
<option value="">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>


<button type="submit">Submit</button>
</form>
</main>
<footer>
Expand Down
4 changes: 2 additions & 2 deletions Wireframe/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Wireframe Webcode Assignment</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
Expand All @@ -30,4 +30,4 @@ <h2>Title</h2>
</p>
</footer>
</body>
</html>
</html>
6 changes: 6 additions & 0 deletions Wireframe/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ body {
color: var(--ink);
font: var(--font);
}

header{
text-align: center;
padding: calc(var(--space) * 2) var(--space);
}

a {
padding: var(--space);
border: var(--line);
Expand Down
Loading