Skip to content
This repository was archived by the owner on Oct 2, 2024. It is now read-only.

London10-Afsha-Hossain-HTML/CSS-Week2 #242

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

London10-Afsha-Hossain-HTML/CSS-Week2 #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7465358
Completed the form task
Afsha10 Mar 15, 2023
ba5260f
Made it 100 percent accessible
Afsha10 Mar 15, 2023
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You've added a bunch of files from your repo that shouldn't be here. Usually this happens when you do git add . . This is not a good way to add your files with git. Add your files one by one, individually and with purpose.

Later in the course, you might have 5,000 files or more (node modules) that should not be committed. Imagine the mess!

}
3 changes: 3 additions & 0 deletions Form-Controls/.vscode/settings.json
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this file please.

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
53 changes: 53 additions & 0 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,59 @@ <h1>Product Pick</h1>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
<fieldset class="validate-account">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of fieldset.

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
</fieldset>

<section class="select-colour">
<label for="color-picker">Choose your t-shirt colour from the three available colours</label>
<input type="color" list="presets" id="color-picker">
<datalist id="presets">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love a datalist!

<option value="#FF0000">Red</option>
<option value="#FFFF00">Yellow</option>
<option value="#6699cc">Blue</option>
</datalist>
</section>

<section class="select-size">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You've used section here and not fieldset. Can you talk through why?

<div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here you've used a bunch of divs. What are these divs doing in the code? What effect do they have?

Something special happens with fieldset and radio inputs. Can you find out what?

<p>Choose your t-shirt size:</p>
<input type="radio" id="XS" name="size" value="XS">
<label for="XS">XS</label>
</div>
<div>
<input type="radio" id="S" name="size" value="S">
<label for="S">S</label>
</div>
<div>
<input type="radio" id="M" name="size" value="M">
<label for="M">M</label>
</div>
<div>
<input type="radio" id="L" name="size" value="L">
<label for="L">L</label>
</div>
<div>
<input type="radio" id="XL" name="size" value="XL">
<label for="XL">XL</label>
</div>
<div>
<input type="radio" id="XXL" name="size" value="XXL">
<label for="XXL">XXL</label>
</div>
</section>

<section class="select-delivery-date">
<label for="date">Date of Delivery</label>
<input type="date" name="date" id="date" min="2023-03-16" max="2023-04-13">
</section>


</form>

</main>
Expand Down
31 changes: 31 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,31 @@
body {
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
color: black;
font-size: 30px;
margin: 2rem;
background-color:blanchedalmond;
}

.select-colour {
font-size: 1.5 rem;
padding: 1rem;
margin: 1rem;
}

.select-size {
font-size: 1.5 rem;
padding: 1rem;
margin: 1rem;
}

.validate-account {
font-size: 1.5 rem;
padding: 1rem;
margin: 1rem;
}

.select-delivery-date {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like you've applied the same styles to all these classes. Is there a way you could apply one style to all the classes? What does "class" actually mean?

font-size: 1.5 rem;
padding: 1rem;
margin: 1rem;
}