@CHBNDJ
What are you most proud of, and what would you do differently next time?
none
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
Latest solutions
Latest comments
- P@barka-dev
Great job on completing the challenge! There are just a few suggestions to help improve the implementation:
Semantic Elements: Consider using more semantic elements rather than relying on
<div>for structuring your component. For example, instead of using<div>to create the rating options, you could use<input type='radio'/>to enhance accessibility and clarity.Alignment: To improve the alignment of your component, you might want to use Flexbox to center the elements on the screen. A structure like this would work well:
.container { display: flex; justify-content: center; align-items: center; height: 100%; }This will ensure the component is centered both horizontally and vertically.
Active State Styling: I noticed that the active style is not being applied to the selected option until the mouse moves out. It would be great to have the active style update immediately upon selection to improve user interaction.
Keep the great work, and happy coding :)
Marked as helpful - P@roidzuhWhat are you most proud of, and what would you do differently next time?
React, Tailwind CSS, mobile-first approach
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?Any feedback is welcome!
P@barka-devGreat job on this project! It's very close to the design that was provided. I do have a few comments :
1- The hover effect on the buttons doesn't seem to be working as expected. 2- The progress bar color doesn't change when switching to dark mode. 3- In dark mode, after refreshing the page, the theme switcher resets to the left, even though the site remains in dark mode. This causes the switcher to function in reverse (switcher on the left = dark mode / switcher on the right = light mode).
Keep up the good work, and happy coding :)
Marked as helpful - P@sikulamartinP@barka-dev
Great job on this project! There are just a couple of areas that could be improved to make it even better:
1- It would be great if you could handle the case when the number "0" is entered in the "Number of People" field, as it currently results in "NaN" or "Infinity" being displayed in the result.
2- Consider using more semantic HTML elements, especially in form controls, to enhance the accessibility of your page. For instance, using <input type="radio"/> for the tips might be more appropriate than using <button>.
Keep up the great work, and happy coding! 😊
Marked as helpful - P@fsahinbasP@barka-dev
Great work on the project! Just a couple of things to improve: focus on aligning components and adjusting spacing between elements. Also, using semantic HTML elements like <article> and <section> instead of <div> is important for accessibility. These elements help screen readers and assistive technologies understand your content better, making your site more accessible to everyone. and last thing, i noticed that the small icon in the top right corner of the cards is missing in production. This might be due to an incorrect path. Try adding "./" before the icon path, like "url(./images/icon-work.svg)".
Keep up the good work, and happy coding!
Marked as helpful - @Cristal32P@barka-dev
Good job, and there are just a few more things to address to complete the project. for example:
1- The error message doesn't appear when the email is invalid, and the input field should change to red, as shown in the design. 2- The overall size of the component is larger than expected. 3- The corners should remain square (not rounded) on the mobile version.
Keep up the good work, and happy coding!
Marked as helpful - P@AdamullaOsasP@barka-dev
Great job! It's very close to a perfect match. I do have a few suggestions: 1- Consider using more semantic HTML elements instead of relying heavily on <div>. 2- The image could use a bit more adjustment in terms of positioning to match what you have on the design. 3- The share icon doesn’t change its color when clicked, as shown in the provided design.
Keep up the good work, and happy coding!
