add solution #3933

rwlp · 2024-01-04T21:49:15Z

DEMO LINK
TEST REPORT LINK
[x ] Icon implemented using background-image CSS property
[ x] Inputs are written inside of 'form' tag with correctly passed attributes
[ x] All Typical Mistakes from BEM lesson theory are checked.
[ x] Code follows all the Code Style Rules ❗️

PS.:
-The 'npm test' is simpler than figma. but I tried to implement it more faithfully to figma.
-The figma mock has a text shadow in the small default search bar, but the test refuses when implemented.

EdPirro

Solid work @rwlp! And bonus points for the attention to details; your search bar looks identical to the Figma design 👏

I've noticed some minor improvements that I'll actually request you to go over for I believe fixing those issues will make this project simply perfect!

src/index.html

src/style.css

rwlp · 2024-02-22T15:40:02Z

Hi EdPirro, I work in issues, but appear conflitcts that I can't edit some parts of index.htm file. Let me know if I need to make some actions or more adjustments in code.

rwlp · 2024-02-24T14:42:53Z

Hi @EdPirro, if is possilbe return about the coments in styles.css ( lines 74 to 78) about rules in naming modifiers.
The convention(https://en.bem.info/methodology/naming-convention/#two-dashes-style) apparently accepts element/block--modifier-name--modifier-value(notice the double hyphens). You recomended another convention. Could you provide documentation you used?

pedro-ruas · 2024-02-26T17:46:14Z

src/index.html

-    <h1>Search bar airbnb</h1>
+
+  <body class="page__body">
+


No needed empty-line:

There's no need to add a line between a parent tag and it's first child, add empty lines between sibling elements

pedro-ruas · 2024-02-26T17:48:00Z

src/index.html

+        action="post"
+        class="form"
+        data-qa="big"
+        >


Mismatching indentation:

When opening a tag, be sure to match both ends of the tag in the same alignment. The correct way would be:

<form action="post" class="form" data-qa="big" >

pedro-ruas · 2024-02-26T17:50:14Z

src/index.html

+          class="icon-search icon-search--size-big form__search-button-big"
+          type="submit"
+          name="buttom search"
+        ></button>


Mismatching indentation:

Same as above, closing tag should match opening tag:

<button id="icon-search-big" class="icon-search icon-search--size-big form__search-button-big" type="submit" name="buttom search" > </button>

pedro-ruas · 2024-02-26T17:52:17Z

src/index.html

+          data-qa="keypress"
+          type="text"
+          placeholder="Try &quot;Los Angeles&quot;"
+        >


Missing closing tag:

I believe you forgot to add the closing tag to this input.

<input id="input-search" class="input-search input-search--size-big form__search-input-big" data-qa="keypress" type="text" placeholder="Try "Los Angeles"" > </input>

pedro-ruas · 2024-02-26T17:53:17Z

src/index.html

+          class="input-search input-search--size-small form__search-input-small"
+          type="text"
+          placeholder="Try &quot;Los Angeles&quot;"
+        >


Missing closing tag:

Same error as above

pedro-ruas · 2024-02-26T18:00:54Z

src/index.html

+        >
+        <button
+          id="icon-search-big"
+          class="icon-search icon-search--size-big form__search-button-big"


Wrong BEM naming:

If the Block is "form" and the Element is "search-button", why is it also called "icon-search" ?
Correct naming would look like: "form__search-button search-button search-button--size-big".

I'll make the chagens, in fact I use the worong DOM element to represent the button in project. Thank you for adivice.

pedro-ruas · 2024-02-26T18:01:34Z

src/index.html

+
+        <input
+          id="input-search"
+          class="input-search input-search--size-big form__search-input-big"


Wrong BEM naming:

Same issue as above.

pedro-ruas · 2024-02-26T18:02:33Z

src/index.html

+
+      <form
+        action="post"
+        class="form"


Missing Block parent:

Same naming as before, should contain parent block class here also: class="container__form form"

pedro-ruas · 2024-02-26T18:03:08Z

src/index.html

+      >
+        <button
+          id="icon-search-small"
+          class="icon-search icon-search--size-small form__search-button-small"


Wrong BEM naming:

Check the other comments, same issue happened before.

pedro-ruas · 2024-02-26T18:03:13Z

src/index.html

+
+        <input
+          id="small-search"
+          class="input-search input-search--size-small form__search-input-small"


Wrong BEM naming:

Check the other comments, same issue happened before.

rwlp · 2024-02-27T20:01:33Z

Hi everyone, I made the changes again.

Notice that the task says: This search bar will be part of big project.
So the classes blocks button, inputs and form, can be used in other codes
The elements classes only handle external configurations like positions, margins, etc.

I'm following the conventios thats rellies in oficial content on Mate Academy platform, please if have another conventions, I kindly ask you to send me documentation or content that guides the implementation of the aforementioned convention before carrying out the review. This helps me to be more agile in correcting tasks.

EdPirro

Great job, @rwlp! Great attention to details and following the documentation, responding to a change request is not always about making changes in your code, sometimes simply explaining your thinking process is enough and you did that very well!

I added just a little suggestion for you to keep in mind for the next tasks, if you have any questions about it, please ask them in the qna chat!

EdPirro · 2024-02-27T22:26:36Z

src/style.css

+.input-search--size--big::placeholder {
+  font-weight: 300;
+  color: #3D4E61;
+}
+
+.input-search--size--big:focus {
+  color: #3D4E61;
+  text-shadow: 0 4px 4px #00000040;
+}
+
+.input-search--size--small {
+  height: 42px;
+  padding-left: 33px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 19px;
+}
+
+.input-search--size--small::placeholder {
+  font-weight: 300;
+  color:#3D4E61;
+}


The styles for input-search--size--big::placeholder and input-search--size--small::placeholder are the same, which means with either modifier the input-seach block will have the same style; since input-search is always used with one of these modifiers maybe you should consider not making this style belonging to the modifier but to the actual input-search; that is:

.input-search::placeholder { font-weight: 300; color: #3D4E61; }

rwlp added 2 commits January 4, 2024 18:05

add solution

1e27aa8

add task solution again

04cead5

rwlp closed this Jan 29, 2024

rwlp reopened this Jan 29, 2024

rwlp closed this Jan 29, 2024

rwlp reopened this Jan 29, 2024

add task solution 3

947fd53

rwlp closed this Jan 29, 2024

rwlp reopened this Jan 29, 2024

rwlp added 2 commits January 29, 2024 17:20

add task solution

b4ee571

add task solution with better BEM and colors applied

ecb68f6

EdPirro suggested changes Feb 21, 2024

View reviewed changes

src/index.html Outdated Show resolved Hide resolved

src/index.html Outdated Show resolved Hide resolved

src/style.css Outdated Show resolved Hide resolved

correct issues

8b694ed

rwlp requested a review from EdPirro February 24, 2024 14:36

pedro-ruas suggested changes Feb 26, 2024

View reviewed changes

add corrections

e6dfe53

rwlp requested a review from pedro-ruas February 27, 2024 20:02

EdPirro approved these changes Feb 27, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add solution #3933

add solution #3933

rwlp commented Jan 4, 2024

EdPirro left a comment

rwlp commented Feb 22, 2024

rwlp commented Feb 24, 2024

pedro-ruas Feb 26, 2024

pedro-ruas Feb 26, 2024

pedro-ruas Feb 26, 2024

pedro-ruas Feb 26, 2024

pedro-ruas Feb 26, 2024

pedro-ruas Feb 26, 2024

rwlp Feb 27, 2024

pedro-ruas Feb 26, 2024

pedro-ruas Feb 26, 2024

pedro-ruas Feb 26, 2024

pedro-ruas Feb 26, 2024

rwlp commented Feb 27, 2024

EdPirro left a comment

EdPirro Feb 27, 2024

add solution #3933

Are you sure you want to change the base?

add solution #3933

Conversation

rwlp commented Jan 4, 2024

EdPirro left a comment

Choose a reason for hiding this comment

rwlp commented Feb 22, 2024

rwlp commented Feb 24, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rwlp commented Feb 27, 2024

EdPirro left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment