Developed task by LittleMazur · Pull Request #5419 · mate-academy/layout_search-bar-airbnb

LittleMazur · 2026-04-30T14:38:40Z

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

mateacademy-ai-mentor

Review Summary

This implementation has critical violations of task requirements that must be fixed before approval. The most significant issues are: (1) Search bar containers use <div> instead of <form> tags, violating checklist item #6 and the explicit requirement that "Inputs are written inside of 'form' tag"; (2) The data-qa="big" and data-qa="small" attributes are placed on <input> elements when they should be on the parent <form> elements; (3) The required data-qa="keypress" attribute is missing from the big search input; (4) Search bars don't stretch to full width — add width: 100% to .search-bar__item class; (5) Font-family declaration is missing a fallback font. Additionally, visual regression tests are failing with 4-5% differences, likely caused by these structural issues. Please fix all five data-qa related problems first, then ensure search bars have width: 100%, and add a fallback font like Arial, sans-serif to the font-family.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-04-30T14:40:35Z

+  src: url('fonts/Avenir-Heavy.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;


Checklist violation: 'Inputs are written inside of 'form' tag' - The inputs are inside a <div> instead of <form> tags. Each search bar should be wrapped in a <form> element with the appropriate data-qa attributes.

mateacademy-ai-mentor · 2026-04-30T14:40:36Z

+}
+
+.search-bar {
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;


Task requirement violation: 'add attribute data-qa="keypress" to input in big search form' - This attribute is missing from the big input element.

mateacademy-ai-mentor · 2026-04-30T14:40:36Z

+
+.search-bar__item {
+  box-shadow: 0 1px 8px rgba(61, 78, 97, 0.1);
+  border: 1px #e1e7ed solid;
+  color: #3d4e61;


Task requirement violation: 'search bar must stretch the full width' - Inputs are missing width: 100% property. Add width: 100% to .search-bar__item class to make them stretch to full width.

mateacademy-ai-mentor · 2026-04-30T14:40:36Z

+body {
+  font-family: Avenir, sans-serif;


Checklist item #12 violation: 'Remember to use fallback fonts' - The font-family declaration should include a fallback. Consider: font-family: 'Avenir', Arial, sans-serif;

mateacademy-ai-mentor · 2026-04-30T14:40:36Z

-      data-qa="keypress"
-      placeholder="Try “Los Angeles“"
-    />
+    <div class="search-bar">


This violates checklist item #6 (Use semantic tags) and the requirement 'Inputs are written inside of form tag'. Use <form> instead of <div> for the container.

mateacademy-ai-mentor · 2026-04-30T14:40:36Z

+      <input
+        type="text"
+        data-qa="small"
+        placeholder="Try “Los Angeles“"
+        class="search-bar__item search-bar__item--small"


The data-qa="small" attribute should be on the <form> element, not on <input>. According to requirements: 'add attribute data-qa="small" for small search form'.

mateacademy-ai-mentor · 2026-04-30T14:40:36Z

+      <input
+        type="text"
+        data-qa="big"
+        placeholder="Try “Los Angeles“"
+        class="search-bar__item search-bar__item--big"


Missing required attribute data-qa="keypress" on this input. Requirements state: 'add attribute data-qa="keypress" to input in big search form'.

mateacademy-ai-mentor · 2026-04-30T14:40:36Z

+        type="text"
+        data-qa="big"
+        placeholder="Try “Los Angeles“"
+        class="search-bar__item search-bar__item--big"
+      />



Search bar doesn't stretch to full width. Requirement states 'search bar must stretch the full width'. Add width: 100% to make it stretch.

mateacademy-ai-mentor · 2026-04-30T14:40:36Z

+      <input
+        type="text"
+        data-qa="big"
+        placeholder="Try “Los Angeles“"
+        class="search-bar__item search-bar__item--big"


The input element with data-qa="big" is missing the required name attribute. Forms should have correctly passed attributes including a name for the input.

mateacademy-ai-mentor · 2026-04-30T14:40:36Z

+      <input
+        type="text"
+        data-qa="small"
+        placeholder="Try “Los Angeles“"
+        class="search-bar__item search-bar__item--small"


The input element with data-qa="small" is missing the required name attribute. Forms should have correctly passed attributes including a name for the input.

mateacademy-ai-mentor

Review Summary

This is an educational approval to help you progress while learning. Great job implementing both search bars with proper form structure, data-qa attributes, and the 20px gap between them. The hover and focus states, font fallbacks, and BEM naming convention are all well done. However, there are two things to address: remove the unnecessary data-qa="hover" attribute from the small input (only data-qa="keypress" on the big input was required), and replace the * selector for box-sizing: border-box in your CSS with a more specific approach like applying it directly to form elements. Also, keep an eye on the 80-character line limit for the viewport meta tag in index.html. These are minor fixes that will make your code more professional and performant.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Rate AI review example ↩

mateacademy-ai-mentor · 2026-04-30T20:01:33Z

+    >
+      <input
+        class="form__input form__input--small"
+        name="search"
+        type="text"


The data-qa="hover" attribute on the small search input is not required by the task specification. The task only specifies data-qa="keypress" for the big search input. This extra attribute may cause test failures.

mateacademy-ai-mentor · 2026-04-30T20:01:33Z

+
+  box-sizing: border-box;


This uses the * selector which violates checklist item #17: "Don't use * selector (it impacts performance)". Consider using html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } approach or apply box-sizing directly to form elements instead.

mateacademy-ai-mentor · 2026-04-30T20:01:34Z

+}
+
+@font-face {


This line exceeds 80 characters, violating checklist item #8. The viewport content attribute is too long. Consider breaking it into multiple lines for better readability.

Developed task

93118cd

mateacademy-ai-mentor suggested changes Apr 30, 2026

View reviewed changes

mazurolexandr-png added 2 commits April 30, 2026 17:51

solved problems

0579123

resolving problems

2ca7231

LittleMazur closed this Apr 30, 2026

LittleMazur reopened this Apr 30, 2026

LittleMazur requested a review from mateacademy-ai-mentor April 30, 2026 19:59

mateacademy-ai-mentor approved these changes Apr 30, 2026

View reviewed changes

		}

		@font-face {

Conversation

LittleMazur commented Apr 30, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants