I’d appreciate feedback on improving my JavaScript logic, especially around input validation and efficient DOM manipulation.
Additionally, I’d love suggestions on making the UI/UX even more intuitive—perhaps through animations or better error handling. Tips on improving code readability and performance are also welcome.
I'd love feedback on the JavaScript logic—particularly whether the way I structured the data and handled DOM updates is efficient. Are there more optimal or modern approaches I could adopt?
Also, any tips on improving accessibility and performance for this kind of static dashboard would be greatly appreciated!
I'd appreciate any feedback on the following: JavaScript Efficiency & Structure: Is the JavaScript for handling form submission, validation, and state toggling (form vs. success message) clean and efficient? Are there more modern or robust patterns I could have used? CSS Best Practices for Responsiveness: While the layout works, are there any more elegant or standard ways to handle the desktop-to-mobile transition for this type of component? Any tips on managing the illustration's aspect ratio or display more effectively across views? Accessibility: I tried to use semantic HTML and appropriate labels. Are there any further accessibility improvements I could make to the form or the success message? For instance, regarding focus management after submission or when an error appears. HTML Semantics: Is the HTML structure as semantic as it could be for this component? Any general feedback on code organization or potential improvements would be greatly appreciated!
I'd appreciate any feedback on the following: JavaScript Efficiency & Structure: Is the JavaScript for handling form submission, validation, and state toggling (form vs. success message) clean and efficient? Are there more modern or robust patterns I could have used? CSS Best Practices for Responsiveness: While the layout works, are there any more elegant or standard ways to handle the desktop-to-mobile transition for this type of component? Any tips on managing the illustration's aspect ratio or display more effectively across views? Accessibility: I tried to use semantic HTML and appropriate labels. Are there any further accessibility improvements I could make to the form or the success message? For instance, regarding focus management after submission or when an error appears. HTML Semantics: Is the HTML structure as semantic as it could be for this component? Any general feedback on code organization or potential improvements would be greatly appreciated!
I would love feedback on how I could improve the visual hierarchy and color contrast for better readability. Also, suggestions on optimizing the layout for extremely large screens (like 4K) would be appreciated.
This project really opened my eyes on how forms works and how DOM in general works.
What challenges did you encounter, and how did you overcome them?Adding eventHandler to a button in a form and expect some input to behave in certain ways, i had to do a whole lot of research to come up with a solution.
What specific areas of your project would you like help with?None for now.
Hey Joel 👋, Great job on completing the Tip Calculator project! 🙌
Here’s what stood out to me:
What you did well:
The UI is clean and matches the design really well.
The functionality works smoothly across different tip percentages.
It's great to see it built with React — your component structure is clean and easy to follow.
Nice use of controlled inputs and real-time updates!
Suggestions for improvement:
You could add validation for when users leave fields empty or input zero values — maybe a small warning or disabled button.
Consider adding a reset button to clear all values.
Accessibility could be improved with labels or ARIA attributes for better screen reader support.
Hi Ilham 👋,
Great job on completing the Time Tracking Dashboard challenge! 🙌 I went through your solution and wanted to share a few thoughts that might help improve it even further:
🌟 What you did well: Clean Design Implementation: The UI closely matches the original design, and the responsiveness is well-handled across screen sizes.
React Usage: Your use of components keeps the code organized and scalable. Great separation of concerns.
Accessibility Tags: Nice to see some focus on accessibility—it's something many overlook!
💡 Suggestions for improvement: ARIA and Semantic Tags: While accessibility is tagged, there could be more use of semantic elements like <section>, <article>, or appropriate ARIA roles for better screen reader support.
Fetch Logic Optimization: Consider error handling and loading states when using fetch to make your app more robust for real-world scenarios.
Pure CSS Enhancements: You could explore using CSS variables for color and spacing to improve maintainability.
Reusable Components: Some of the cards share similar structure. You might further abstract and reuse components like <TimeCard /> with props for even cleaner code.
🙋♂️ Question: Have you considered using context or a global state for timeframe selection instead of lifting state? Could improve scalability if the project grows.
Overall, it’s a strong and thoughtful submission—well done! 👍
Happy coding! 😊
Great job on tackling this newsletter sign-up form challenge! It's a common component, and you've done well to implement the core features and different states. What I Liked: Visual Accuracy & Responsiveness: You've done a really nice job matching the desktop and mobile designs. The transition between the two-column layout and the mobile single-column (with the image on top) is smooth. The error and success states also look very close to the design. Clear HTML Structure: The HTML is semantic and well-organized, making it easy to understand the different parts of the component (content, illustration, form, success message). Using SVGs directly for the icons is a good choice for this project. CSS Implementation: Good use of CSS variables for colors – this makes it easy to manage the theme. Flexbox has been effectively used for layout, both for the main card structure and for smaller elements like the list items and label/error message alignment. The hover effect on the button with the gradient is a nice touch and matches common UI patterns. JavaScript Logic: The JavaScript for handling form submission, basic email validation, and toggling between the form and success states is clear and functional. Error messages are displayed appropriately, and the input field gets the correct error styling. The success message correctly displays the submitted email. Areas to Explore or Suggestions for Improvement: Accessibility Enhancements: Error/Success Message Announcements: For screen reader users, it would be beneficial to announce the error messages and the success message dynamically. You could achieve this by adding aria-live="polite" (or aria-live="assertive" for errors, if appropriate) to the span.error-message and the .success-message container. Focus Management: When an error appears after submission, consider programmatically setting focus to the email input field (or the first field with an error if there were multiple). After successful submission and the success message appears, consider where the focus should go. Perhaps to the "Dismiss message" button or the heading of the success message. When dismissing the success message, ensure focus returns to a logical place in the form, like the email input. CSS - Illustration Handling: While the gradient placeholder for the illustration works for this exercise, in a real-world scenario with the provided complex illustration, you'd likely use an SVG. It would be interesting to see how you'd handle embedding and styling that SVG to be responsive and maintain its aspect ratio, especially with the different border-radius requirements on mobile vs. desktop. The negative margin technique for the desktop illustration is clever for this layout! JavaScript - Minor Refinements: Email Validation: The regex for email validation is a good start for a challenge. For production, you might consider a more robust, commonly-used regex or a library, as email validation can be quite complex. Styling from JS: You're directly setting style.display in JS. This is fine for simple cases. For more complex state changes or if you had more styles to toggle, an alternative is to add/remove CSS classes that control the display and other visual properties. This keeps styling concerns more within the CSS. (e.g., a .is-hidden class). You do this well for the .error class on the input, so extending that pattern could be an option. Mobile Success Message Layout: On mobile, the success message is designed to have the "Dismiss message" button at the very bottom. Your CSS justify-content: space-between; on .success-message in the mobile media query, along with flex-grow: 1; on the paragraph and margin-top: auto; on the button, achieves this well! Just noting this is a good solution. Overall: This is a solid solution that meets the core requirements of the challenge very well. You've demonstrated a good understanding of HTML, CSS (including responsive design), and JavaScript for DOM manipulation and basic form handling. The points above are mostly enhancements or considerations for more complex, production-level scenarios. Keep up the great work! I'd be interested to know if you encountered any specific parts you found particularly challenging or any "aha!" moments during development. Best,
Great job on this solution! 🎉
✅ What you did well:
The layout is clean and responsive — well done using spacing and typography to make it readable.
I really like your attention to accessibility, especially using clear contrast and descriptive alt text (assuming based on the accessibility tag).
Using SolidJS is a unique choice — great to see a less common framework being used effectively.
💡 Suggestions for improvement:
Consider adding some subtle hover effects to buttons and interactive elements to improve user experience.
On smaller screens, the spacing around the testimonial could be slightly tighter for a better visual balance.
It might help to include a bit more semantic HTML (like <section> or <figure>) to improve structure and screen reader support.
Keep up the awesome work! Looking forward to seeing more projects from you. 🚀
