add task solution #4542
add task solution #4542
Conversation
There was a problem hiding this comment.
Great work so far! 😊 However, there are a few areas that need some adjustment. Please correct the background-color property in the :focus and :active states of the .form__input class. Also, consider adding a submit button and a more descriptive title for your page. Keep it up! 👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <form | ||
| action="submit" | ||
| class="form" | ||
| > | ||
| <input | ||
| type="text" | ||
| data-qa="big" | ||
| placeholder="Try “Los Angeles“" | ||
| class="form__input form__input_big" | ||
| /> | ||
|
|
||
| <input | ||
| type="text" | ||
| data-qa="hover" | ||
| placeholder="Try “Los Angeles“" | ||
| /> | ||
| <input | ||
| type="text" | ||
| data-qa="small" | ||
| placeholder="Try “Los Angeles“" | ||
| class="form__input form__input_small" | ||
| /> | ||
| </form> |
There was a problem hiding this comment.
Your form lacks a submit button. Even though it's not explicitly stated in the task, it's a good practice to include one in your form. Without it, users won't be able to submit the form.
| <input | ||
| type="text" | ||
| data-qa="big" | ||
| placeholder="Try “Los Angeles“" | ||
| class="form__input form__input_big" | ||
| /> |
There was a problem hiding this comment.
The data-qa attribute is used for testing purposes. If you're not using it for testing, it's better to remove it.
| <input | ||
| type="text" | ||
| data-qa="small" | ||
| placeholder="Try “Los Angeles“" | ||
| class="form__input form__input_small" | ||
| /> |
There was a problem hiding this comment.
The value of the placeholder attribute is the same for both inputs. It's better to use different placeholders for different inputs to avoid confusion for the users.
src/style.css
Outdated
|
|
||
| .form__input:focus { | ||
| outline: none; | ||
| background-color: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); |
There was a problem hiding this comment.
The background-color property doesn't accept linear-gradient as a value. You might have wanted to use the background-image property instead.
src/style.css
Outdated
| } | ||
|
|
||
| .form__input:active { | ||
| background-color: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); |
There was a problem hiding this comment.
Same issue here, the background-color property doesn't accept linear-gradient as a value. You should use the background-image property.
There was a problem hiding this comment.
Great work on the HTML and CSS structure! The code is clean and well-structured, which makes it easy to understand and maintain. However, there are some areas that need improvement. Particularly, the title of your HTML document should be more descriptive. Also, remember to include the alt attribute in your input tags for better accessibility. Lastly, the action attribute of the form tag should contain a valid URL. Keep these points in mind for your future projects. Keep up the good work and continue learning! 👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <form | ||
| action="submit" | ||
| class="form" | ||
| > |
There was a problem hiding this comment.
The action attribute of the form tag is supposed to contain the URL where the form data is sent to. In your case, submit is not a valid URL. If you don't have a specific URL to send the form data to, you can just leave this attribute out.
| type="text" | ||
| data-qa="big" | ||
| placeholder="Try “Los Angeles“" | ||
| class="form__input form__input_big" |
There was a problem hiding this comment.
The alt attribute is missing in your input tags. Although it's not mandatory, it's a good practice to include it as it improves accessibility. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
| type="text" | ||
| data-qa="small" | ||
| placeholder="Try “Los Angeles“" | ||
| class="form__input form__input_small" |
There was a problem hiding this comment.
The alt attribute is missing in your input tags. It's a good practice to include it as it improves accessibility. The alt attribute provides alternative information for an image if a user for some reason cannot view it.
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 MistakesfromBEMlesson theory are checked.Code follows all the Code Style Rules ❗️