-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
finished search bar #4488
base: master
Are you sure you want to change the base?
finished search bar #4488
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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);
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work!
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 ❗️