Skip to content
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

add two search bar #3782

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

OleksiiHolodok
Copy link

@OleksiiHolodok OleksiiHolodok commented Nov 16, 2023

  • 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 ❗️

Copy link

@anastasiia-tilikina anastasiia-tilikina left a comment

Choose a reason for hiding this comment

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

GJ!

let's make some improvements.

  1. check my comments.
  2. check input text styles. they are different in figma.

src/style.css Outdated
Comment on lines 26 to 27
margin-left: 26px;
margin-top: 25px;

Choose a reason for hiding this comment

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

since you're using flex you can center elements more easily) use flex properties (e.g. align-items)

src/style.css Outdated
}

.search__form:focus-within,
.search__form:focus-within .search__input {

Choose a reason for hiding this comment

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

use input:focus instead of form:focus

src/style.css Outdated
.search__form {
box-sizing: border-box;
display: flex;
height: 70px;

Choose a reason for hiding this comment

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

it is bad practice to hardcode height. use proper padding instead

Copy link

@loralevitska loralevitska left a comment

Choose a reason for hiding this comment

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

Almost done) Try to pass all tests. If you have any questions, please ask them in fe_chat and tag mentors. It will be faster, because your answers in GitHub will be visible to mentor only after you re-request review

  • pay attention to indents
    image

src/index.html Outdated
Comment on lines 20 to 23
<img
src="./images/Search.svg"
alt="search"
class="icon">

Choose a reason for hiding this comment

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

Suggested change
<img
src="./images/Search.svg"
alt="search"
class="icon">
<img
src="./images/Search.svg"
alt="search"
class="icon"
>

@OleksiiHolodok
Copy link
Author

OleksiiHolodok commented Nov 19, 2023

Tests passed without errors, when I used height. But my code was rejected and mentor told me that it is better to use paddings. When i use padding, I have error in code. Chat with mentors could not help)

Copy link

@anastasiiavorobiova anastasiiavorobiova left a comment

Choose a reason for hiding this comment

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

Great work!
Screenshot 2023-11-19 at 17 25 34
Check elements heights
Screenshot 2023-11-19 at 17 24 25
Screenshot 2023-11-19 at 17 24 41
Check focus styling

Copy link

@loralevitska loralevitska left a comment

Choose a reason for hiding this comment

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

Well done)
For improvement you can switch between reference and test tabs to recognize difference, now your text a bit righter than need
image

src/style.css Outdated
}

.search__input:focus::placeholder {
font-style: normal;

Choose a reason for hiding this comment

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

Remove redundant default value

Suggested change
font-style: normal;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants