Develop by Kacper-Leman · Pull Request #795 · mate-academy/layout_html-form

Kacper-Leman · 2023-05-22T10:11:05Z

https://Kacper-Leman.github.io/layout_html-form/ - Demo Link
https://Kacper-Leman.github.io/layout_html-form/report/html_report/ - Test Report Link

DorotaLeniecDev

Fix formatting and indentations, check this checklist https://github.com/mate-academy/layout_html-form/blob/master/checklist.md

When the code is more readable after fixes we will continue with review

DorotaLeniecDev · 2023-05-22T13:51:04Z

src/index.html

+        <div>
+        Surname: <input type="text" name="Surname:">
+        </div>


Add proper labels
Fix formatting
Fix indentations

Suggested change

<div>

Surname: <input type="text" name="Surname:">

</div>

<div class="form__section_field">

<label for="surname">Surname: </label>

<input

type="text"

name="surname"

id="surname"

autocomplete="off"

>

</div>

Apply this pattern to all other fields
Remember to add spaces between sibling elements for better readability

Okey, I make fixes please to check again :)

DorotaLeniecDev

Few more changes needed

DorotaLeniecDev · 2023-05-23T10:31:32Z

src/index.html

+
+          <input
+            type="date"
+            name="date-birth"


Name attibute should be camelCase

Suggested change

name="date-birth"

name="dateBirth"

DorotaLeniecDev · 2023-05-23T10:32:14Z

src/index.html

+
+
+


Only one line space between siblings is needed

DorotaLeniecDev · 2023-05-23T10:32:41Z

src/index.html

+
+
+


DorotaLeniecDev · 2023-05-23T11:12:31Z

src/index.html

+          <textarea
+            name="comment"
+            id="comment"
+            cols="20"
+            rows="2"
+            autocomplete="off">
+          </textarea>


Fix formatting

DorotaLeniecDev · 2023-05-23T11:13:01Z

src/index.html

+          <select
+            name="recommend"
+            id="recommend"
+            autocomplete="off">
+


Fix formatting

Suggested change

<select

name="recommend"

id="recommend"

autocomplete="off">

<select

name="recommend"

id="recommend"

autocomplete="off"

>

DorotaLeniecDev · 2023-05-23T11:14:11Z

src/index.html

+        <legend>An interesting fact about you!</legend>
+        <div>


Add empty line between siblings

DorotaLeniecDev · 2023-05-23T11:14:22Z

src/index.html

+        <legend>Registration</legend>
+        <div>


Add empty line - double check if there are empty lines between siblings elements, do not add empty lines between parent and child

DorotaLeniecDev · 2023-05-23T11:21:53Z

src/index.html

+
+          <input
+            type="radio"
+            name="choice"


Lets make this name more descriptive so it is easier to use (in scenartio when form is being send)

Suggested change

name="choice"

name="lovesCats"

DorotaLeniecDev · 2023-05-23T11:22:07Z

src/index.html

+          <label for="yes">Yes</label>
+
+          <input type="radio"
+            name="choice"


Same here

Suggested change

name="choice"

name="lovesCats"

DorotaLeniecDev · 2023-05-23T11:24:27Z

src/index.html

+    <form action="https://mate-academy-form-lesson.herokuapp.com/create-application" class="form">
+      <fieldset>
+        <legend>Personal information</legend>
+        <div>


Be consistant and add class to all form fields wrappers. You can then specify the margins using pseudo selectors in css

All tips done I hope now its good.

DorotaLeniecDev

Few more for perfection :)

DorotaLeniecDev · 2023-05-23T11:25:34Z

src/index.html

+
+          <input
+            type="color"
+            name="colour"


Should be

Suggested change

name="colour"

name="color"

DorotaLeniecDev · 2023-05-23T14:57:13Z

src/index.html

+            autocomplete="off"
+            multiple
+          >
+


Remove space

DorotaLeniecDev · 2023-05-23T15:02:45Z

src/index.html

+          >
+        </div>
+
+        <div>


In my opinion best way is to add form-field class to all divs and in css you can remove margin-bottom in :last-child selector. This is more consistant. It is a separation of duites, that styles will determin how the markup looks.

DorotaLeniecDev · 2023-05-23T15:03:24Z

src/index.html

+          <input type="radio"
+            name="lovesCats"
+            id="no"
+            autocomplete="off"
+            value="No"
+          >


Fix formatting

Suggested change

<input type="radio"

name="lovesCats"

id="no"

autocomplete="off"

value="No"

>

<input

type="radio"

name="lovesCats"

id="no"

autocomplete="off"

value="No"

>

DorotaLeniecDev · 2023-05-23T15:04:09Z

src/index.html

+            id="recommend"
+            autocomplete="off"
+          >
+


remove space

DorotaLeniecDev

Good job :)

Kacper-Leman added 5 commits May 19, 2023 14:15

readme.md

80845d9

./src

f9d7dcc

./src

2ab53c4

./src

824f62c

./src

2687a6b

DorotaLeniecDev suggested changes May 22, 2023

View reviewed changes

Kacper-Leman added 2 commits May 23, 2023 10:54

Make fixes

f1ece48

Fix indentations

19ec1cd

Kacper-Leman requested a review from DorotaLeniecDev May 23, 2023 09:02

DorotaLeniecDev suggested changes May 23, 2023

View reviewed changes

Kacper-Leman added 2 commits May 23, 2023 14:07

Few more fixes with spacelines and formating

236588a

delete unnecessary class

91ab245

Kacper-Leman requested a review from DorotaLeniecDev May 23, 2023 12:19

DorotaLeniecDev suggested changes May 23, 2023

View reviewed changes

Fixes for perfection

b596522

Kacper-Leman requested a review from DorotaLeniecDev May 24, 2023 09:15

DorotaLeniecDev approved these changes May 24, 2023

View reviewed changes

-        <div>
-        Surname: <input type="text" name="Surname:">
-        </div>
+        <div class="form__section_field">
+          <label for="surname">Surname: </label>
+          <input
+            type="text"
+            name="surname"
+            id="surname"
+            autocomplete="off"
+          >
+        </div>

+                        >
+                      </div>
+                      <div>

Conversation

Kacper-Leman commented May 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DorotaLeniecDev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DorotaLeniecDev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DorotaLeniecDev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DorotaLeniecDev left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Kacper-Leman commented May 22, 2023 •

edited

Loading