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.

Sign up for GitHub

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

Jump to bottom

DEVELOP #4383

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

DEVELOP #4383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3d195ec
add task solution
Yatsomo Jul 18, 2024
8aa1644
add task solution
Yatsomo Jul 19, 2024
94831f3
add task solution
Yatsomo Jul 19, 2024
a253b54
add task solution
Yatsomo Jul 19, 2024
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
4 changes: 2 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ ___

❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:

- [DEMO LINK](https://<your_account>.github.io/layout_search-bar-airbnb/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_search-bar-airbnb/report/html_report/)
- [DEMO LINK](https://Yatsomo.github.io/layout_search-bar-airbnb/)
- [TEST REPORT LINK](https://Yatsomo.github.io/layout_search-bar-airbnb/report/html_report/)

❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.

Expand Down
34 changes: 24 additions & 10 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,30 @@
/>
</head>
<body>
<input
type="text"
data-qa="keypress"
placeholder="Try “Los Angeles“"
/>
<form
class="searchbar"
data-qa="big"
>
<input
class="searchbar__input searchbar__big"
Copy link

Choose a reason for hiding this comment

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

Its great case to use modifier class name like this searchbar__input searchbar__input--big

type="text"
name="searchbar__bar searchbar__big"
Copy link

Choose a reason for hiding this comment

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

This is weird value for name property. It is primarily used in form elements to identify input fields when they are submitted to a server.

placeholder="Try “Los Angeles“"
data-qa="keypress"
/>
</form>

<input
type="text"
data-qa="hover"
placeholder="Try “Los Angeles“"
/>
<form
class="searchbar"
data-qa="small"
>
<input
class="searchbar__input searchbar__small"
type="text"
name="searchbar__bar searchbar__small"
placeholder="Try “Los Angeles“"
data-qa="keypress"
/>
</form>
</body>
</html>
63 changes: 63 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,64 @@
/* add styles here */

@font-face {
font-family: Avenir;
src: url(fonts/Avenir-Book.ttf);
font-weight: 300;
}

@font-face {
font-family: Avenir;
src: url(fonts/Avenir-Heavy.ttf);
font-weight: 900;
}

.searchbar {
margin: 20px 0;
Copy link

Choose a reason for hiding this comment

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

In this task its okay. But remember that if you want to configure the external geometry or positioning of a block, use separate classes or mix-ins to separate external properties (positioning, margins) from internal properties (padding). This approach helps avoid conflicts between element styles.

}

.searchbar__input {
width: 100%;
background-image: url('./images/Search.svg');
background-repeat: no-repeat;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 8px rgba(61, 78, 97, 0.1);
outline: none;
box-sizing: border-box;
border: 1px solid #e1e7ed;
font-family: Avenir, sans-serif;
}

.searchbar__input::placeholder {
color: #3d4e61;
Yatsomo marked this conversation as resolved.
Show resolved Hide resolved
}

.searchbar__big {
Copy link

Choose a reason for hiding this comment

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

try to use modifier instead

height: 70px;
background-position: 25px 24px;
background-size: 19px 19px;
padding-left: 62px;
font-size: 16px;
line-height: 22px;
}

.searchbar__small {
height: 42px;
background-position: 12px 14px;
Copy link

Choose a reason for hiding this comment

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

it should be 13px 15px

Copy link
Author

Choose a reason for hiding this comment

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

When its like that the test comes back negative. Should I still change it?

Copy link

Choose a reason for hiding this comment

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

If it fails test then don't change it.

background-size: 11px 11px;
padding-left: 33px;
font-size: 14px;
line-height: 19px;
}

.searchbar__input:hover {
box-shadow: 0 3px 8px rgba(61, 78, 97, 0.2);
}

.searchbar__input:focus {
border-radius: 3px;
font-weight: 900;
background-image: url(images/Search.svg)
linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
background-repeat: no-repeat;
}
Loading