finished search bar #4488
finished search bar #4488
Conversation
There was a problem hiding this comment.
Great job on your code! 🌟 There are a few minor issues like the typo in the box-shadow value, fixed container sizes, and consistency with margins, but these don't significantly impact the functionality or security of your code. Just remember to keep an eye on these details for future projects to ensure your code is as clean and maintainable as possible. Keep up the good work! 👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <form class="form"> | ||
| <label | ||
| for="big-bar" | ||
| class="form__label-big" | ||
| ></label> | ||
|
|
||
| <input | ||
| type="text" | ||
| data-qa="hover" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| <input | ||
| type="text" | ||
| data-qa="big" | ||
| placeholder="Try “Los Angeles“" | ||
| class="form__bar form__bar--big" | ||
| id="big-bar" | ||
| /> | ||
|
|
||
| <label | ||
| for="small-bar" | ||
| class="form__label-small" | ||
| ></label> | ||
|
|
||
| <input | ||
| type="text" | ||
| data-qa="small" | ||
| placeholder="Try “Los Angeles“" | ||
| class="form__bar form__bar--small" | ||
| id="small-bar" | ||
| /> |
There was a problem hiding this comment.
Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading. But don't add them between parent and child elements. In this case, there should be an empty line between the label and input elements, but not between the form and the first label.
| body { | ||
| margin-top: 20px; | ||
| } |
There was a problem hiding this comment.
Be consistent with your margins (Add only top or bottom, but not both). It's better to avoid potential margin collapse issues by sticking to either top or bottom margins for elements. Consider removing the margin-top from the body and applying it to the first element within the body if necessary.
| box-sizing: border-box; | ||
| border: 1px solid #e1e7ed; | ||
| border-radius: 4px; | ||
| font-family: Avenir, Helvetica, sans-serif; |
There was a problem hiding this comment.
Remember to use fallback fonts - alternative font-family in case the main one doesn't work. It's recommended to have a generic font family as a fallback in case the primary font fails to load. In this case, 'sans-serif' is already present, which is good practice.
| font-weight: 400; | ||
| } | ||
|
|
||
| .form__bar--big { |
There was a problem hiding this comment.
Don't fix container size (if there is no such a requirement). Setting a fixed height on input fields can make them less flexible. Consider using padding and letting the content dictate the size of the input field.
| box-shadow: 0 1px 8px 0 #3d4e611a; | ||
| } | ||
|
|
||
| .form__bar--small { |
There was a problem hiding this comment.
Don't fix container size (if there is no such a requirement). As with the previous comment, consider using padding instead of a fixed height to allow the content to dictate the size of the input field.
| .form__bar--big:focus { | ||
| outline: none; | ||
| background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); | ||
| box-shadow: (0 4px 4px #3d4e6133); |
There was a problem hiding this comment.
There seems to be a typo in the box-shadow value. The correct syntax for box-shadow does not include parentheses around the values. It should be box-shadow: 0 4px 4px rgba(61, 78, 97, 0.2);.
DEMO LINK
TEST REPORT LINK
Icon implemented using background-image CSS property
Inputs are written inside of 'form' tag with correctly passed attributes
All Typical Mistakes from BEM lesson theory are checked.
Code follows all the Code Style Rules ❗️