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

im trying #4540

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

im trying #4540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a64e482
im trying
kami2693 Oct 15, 2024
14b1d8a
solving problems
kami2693 Oct 16, 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
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Test

on:
pull_request:
branches: [ master ]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [20.x]

steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm test
- name: Upload HTML report(backstop data)
if: ${{ always() }}
uses: actions/upload-artifact@v2
with:
name: report
path: backstop_data
9 changes: 5 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,12 @@
"keywords": [],
"author": "Mate Academy",
"license": "GPL-3.0",
"dependencies": {},
"devDependencies": {
"@linthtml/linthtml": "^0.9.6",
"@mate-academy/backstop-config": "latest",
"@mate-academy/bemlint": "latest",
"@mate-academy/linthtml-config": "latest",
"@mate-academy/scripts": "^1.8.6",
"@mate-academy/scripts": "^1.9.12",
"@mate-academy/stylelint-config": "latest",
"backstopjs": "6.3.23",
"jest": "^29.7.0",
Expand Down
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://kami2693.github.io/layout_search-bar-airbnb/)
- [TEST REPORT LINK](https://kami2693.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
33 changes: 22 additions & 11 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,28 @@
href="style.css"
/>
</head>
<body>
<input
type="text"
data-qa="keypress"
placeholder="Try “Los Angeles“"
/>
<body class="body">
Copy link

Choose a reason for hiding this comment

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

The class name body doesn't represent the meaning of the content. Consider using a more descriptive class name that represents the role or purpose of the element in the context of the interface.

<form
data-qa="big"
action="#"
>
<input
class="search_input_big form"
Copy link

Choose a reason for hiding this comment

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

The class name search_input_big form could be improved. Avoid using tag names in class names (like form). Also, avoid specifying styles in class names (like big). Instead, consider something like search-input search-input--large.

type="text"
data-qa="keypress"
placeholder="Try “Los Angeles“"
/>
Comment on lines +24 to +29
Copy link

Choose a reason for hiding this comment

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

The input elements are missing the name attribute. This attribute is important for accessibility and for data submission.

</form>

<input
type="text"
data-qa="hover"
placeholder="Try “Los Angeles“"
/>
<form
data-qa="small"
action="#"
>
<input
class="search_input_small form"
Copy link

Choose a reason for hiding this comment

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

The class name search_input_small form could be improved. Avoid using tag names in class names (like form). Also, avoid specifying styles in class names (like small). Instead, consider something like search-input search-input--small.

type="text"
placeholder="Try “Los Angeles“"
/>
Comment on lines +35 to +40
Copy link

Choose a reason for hiding this comment

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

The input elements are missing the name attribute. This attribute is important for accessibility and for data submission.

</form>
</body>
</html>
102 changes: 101 additions & 1 deletion src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,101 @@
/* add styles here */
@font-face {
font-family: Avenir;
src: url('./fonts/Avenir-Book.ttf');
font-weight: normal;
font-style: normal;
}

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

@font-face {
font-family: Avenir;
src: url('./fonts/Avenir.ttc');
font-weight: 400;
font-style: normal;
}

.body {
font-family: Avenir, Arial, Helvetica, sans-serif;
}
Copy link

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 is usually a good practice to provide a list of similar fonts that the browser can fall back to in case the primary font fails to load. This ensures that your website will still look good, even if the font files are not available for some reason.

Copy link

Choose a reason for hiding this comment

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

Don't use tag names for styling (except html and body). It's better to style all elements using .classes and if needed with :pseudo-classes, pseudo-elements and [attributes]. In your case, .body and .form look like tag selectors, but they are actually class selectors. It's a bit confusing and it's better to avoid such class names.


.form {
font-family: Avenir, Arial, Helvetica, sans-serif;
display: block;
margin-top: 20px;
outline: none;
Copy link

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). To avoid potential margin collapse. Here you've added a margin-top to your .form element. Make sure that you're not adding margin-bottom to the elements above this one.

color: #3d4e61;
border: 1px solid #e1e7ed;
border-radius: 4px;
box-shadow: 0 1px 8px 0 #3d4e611a;
width: 100%;
box-sizing: border-box;
}
Copy link

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). Let the content size dictate it. To avoid overflow or accidental scroll bar. Here, you have set the width of the .form element to 100%. This is fine if you want the form to take up the full width of its parent, but be careful not to set fixed heights on containers unless necessary, as this can lead to overflow issues.


.search_input_big {
font-size: 16px;
background: url(images/Search.svg) no-repeat;
background-size: 19px;
box-sizing: border-box;
background-position: 26px center;
padding-left: 62px;
height: 70px;
background-color: #ffff;
}

.search_input_small {
font-size: 14px;
box-shadow: 0 1px 8px 0 #3d4e611a;
background: url(images/Search.svg) no-repeat 13px center/11px 11px;
height: 42px;
padding-left: 33px;
}

.form::placeholder {
color: #3d4e61;
}

.form:focus {
background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
background-image: url(images/Search.svg);
background-repeat: no-repeat;
background-size: contain;
text-shadow: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.form:hover {
box-shadow: 0 3px 8px 0 #3d4e6133;
background-image: url(images/Search.svg);
background-repeat: no-repeat;
background-position: 26px center;
}

.search_input_big:focus {
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
background:
url(images/Search.svg) no-repeat 26px 25px/19px 19px,
linear-gradient(180deg, transparent, #f6f6f7);
}

.search_input_big:hover {
background-color: #ffff;
box-shadow: 0 3px 8px 0 #3d4e6133;
}

.search_input_small:focus {
border: 1px solid #e1e7ed;
text-shadow: none;
background:
url(images/Search.svg) no-repeat 13px center/11px 11px,
linear-gradient(180deg, transparent, #f6f6f7);
}

.search_input_small:hover {
box-shadow: 0 3px 8px 0 #3d4e6133;
text-shadow: none;
background-position: 13px;
}
Loading