Solution the challenger search-bar airbnb #4604
Conversation
MannyShussan
commented
Nov 17, 2024
MannyShussan
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Thank you for your hard work on this project! 😊 While you've made great progress, there are a few critical issues that need to be addressed to meet the core requirements:
-
HTML Structure and Attributes: The
data-qaattributes are incorrectly assigned, which affects the functionality of identifying the forms correctly. This needs to be corrected to ensure proper functionality. -
CSS Styling: The
.htmlselector is incorrect if the intention is to style the HTML element. It should behtmlwithout the dot. Additionally, the CSS does not ensure that the search bar stretches the full width of the container, which is a core requirement. -
Form Action Attribute: The
actionattribute in the form tag is set to 'post', which is not a valid URL. This needs to be changed to a proper URL or left empty if the form submission is managed by JavaScript.
Please address these issues to ensure the functionality and requirements are fully met. Keep up the great work, and I'm confident you'll get it right! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.
src/index.html
Outdated
| <div class="inputs"> | ||
| <form | ||
| class="inputs__form" | ||
| action="post" |
There was a problem hiding this comment.
The action attribute in the form tag should specify a URL where the form data will be sent. Currently, it is set to 'post', which is incorrect. Consider changing it to a valid URL or leaving it empty if the form is handled by JavaScript.
src/index.html
Outdated
| </form> | ||
| <form | ||
| class="inputs__form" | ||
| action="post" |
There was a problem hiding this comment.
Similar to the previous form, the action attribute should specify a URL. 'post' is not a valid URL. Adjust this to a proper URL or leave it empty if the form submission is managed by JavaScript.
src/style.css
Outdated
| font-weight: 400; | ||
| } | ||
|
|
||
| .html { |
There was a problem hiding this comment.
The selector .html seems to be incorrect if the intention is to style the HTML element. It should be html without the dot, as .html targets a class named 'html'.
There was a problem hiding this comment.
Thank you for your submission! 🎉 While there are a few critical issues that need attention, such as the incorrect assignment of data-qa attributes and the invalid action attribute in the form tag, your progress is commendable. The CSS improvements are on the right track, but ensure that the search bars stretch the full width of their containers. These adjustments are crucial for the functionality and requirements of your project. Please review the comments to enhance your code and learn from this experience. Keep up the good work and continue improving! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <form | ||
| class="inputs__form" | ||
| action="index.html" | ||
| data-qa="keypress" |
There was a problem hiding this comment.
The data-qa attribute is incorrectly assigned as 'keypress'. Ensure that the data-qa attribute correctly identifies the form as per the requirements.
| <form | ||
| class="inputs__form" | ||
| action="index.html" | ||
| data-qa="small" |
There was a problem hiding this comment.
The data-qa attribute is incorrectly assigned as 'small'. Ensure that the data-qa attribute correctly identifies the form as per the requirements.
| <div class="inputs"> | ||
| <form | ||
| class="inputs__form" | ||
| action="index.html" |
There was a problem hiding this comment.
The action attribute is set to 'index.html', which is not a valid URL for form submission. Consider changing it to a proper URL or leaving it empty if the form submission is managed by JavaScript.
| </form> | ||
| <form | ||
| class="inputs__form" | ||
| action="index.html" |
There was a problem hiding this comment.
The action attribute is set to 'index.html', which is not a valid URL for form submission. Consider changing it to a proper URL or leaving it empty if the form submission is managed by JavaScript.
| } | ||
|
|
||
| .inputs__bigInput { | ||
| width: 100%; |
There was a problem hiding this comment.
Ensure that the .inputs__bigInput stretches the full width of the container. The current width: 100%; should achieve this, but verify it in the context of the container's styling.
| } | ||
|
|
||
| .inputs__smallInput { | ||
| width: 100%; |
There was a problem hiding this comment.
Ensure that the .inputs__smallInput stretches the full width of the container. The current width: 100%; should achieve this, but verify it in the context of the container's styling.
