I like that I could use the API when I was creating the website, but I would definitely program it differently in CSS next time.
What challenges did you encounter, and how did you overcome them?It was a simple and fun challenge, so I didn't encounter any major obstacles while programming it.
Feedback wellcome 😃
Great job on completing the challenge! The output is working as expected, but there are some areas for improvement:
API Call Duplication: Currently, there's an API call in both the AdviceBox and QuoteButton components. Recommendation: Create a single util function for the API call and reuse it in both places.
Loading State: Add a loading effect while fetching new advice. Disable the button during the fetch to prevent multiple simultaneous requests.
Error Handling: Implement error state handling to prevent app crashes if the API request fails.
Implementing these changes will enhance the app's efficiency, user experience, and robustness.
Hello there,
Great work on completing the project using vanilla JavaScript! I discovered a bug that requires fixing. It occurs in the month input field. When you enter an invalid month, it shows an error in the day input field, even if the day is valid. To replicate the bug, fill in all the input fields and enter an invalid month in the month field. Additionally, another bug occurs when you enter "1" in the month field. It displays as invalid but still shows the correct age below as well. There might be a logic issue causing these problems. Please investigate and figure out why this is happening. I hope you find my feedback helpful.
Thanks!
Firstly, great job on designing a decent UI for the desktop view! However, it's important to remember that with the increasing usage of mobile devices, having a good UI for mobile view is equally essential.
I understand that designing for mobile can be challenging, but there are certain suggestions that can help to improve the mobile UI:
1 - Simplify the layout: Mobile screens are smaller, so it's important to simplify the layout to make it easier to navigate. Reduce the number of elements and prioritize the most important ones.
2 - Make it responsive: Ensure that the design is responsive and adjusts to the screen size of different devices. This will help to maintain consistency across different devices.
3 - Use larger fonts: Make sure the fonts used are legible on smaller screens. Use larger fonts to improve readability.
4 - Test it on multiple devices: Finally, make sure to test the mobile UI on multiple devices to ensure that it works well across different platforms and screen sizes.
I hope these suggestions help in improving the mobile UI. Keep up the good work.
Hello there,
Great work with using Vanilla JS building this project, While reviewing your work, I noticed a few areas that could benefit from improvement in the CSS section. In particular, the way you centered the container could be optimized by using flexbox instead of absolute positioning, which can lead to issues with the mobile view.
Absolute positioning can cause problems on mobile devices as the elements can become too small to read or interact with. Additionally, it can be challenging to position elements accurately when the screen size changes.
Therefore, I suggest using flexbox to center your container, which will ensure your design is responsive and adapts to different screen sizes. Flexbox is a powerful tool for controlling the layout of elements and is particularly useful for creating responsive designs.
Thanks
Hello there,
Great job on attempting to break down the form into separate components! While it can be challenging to manage the communication between components, it's definitely a good practice to break down the form into smaller, reusable components.
In terms of managing forms, one popular approach is to use libraries such as Formik and Yup. Formik simplifies the process of managing form state and validation, while Yup provides a declarative way to validate the data. By using these libraries, you can simplify your code and avoid the need to handle form state and validation manually.
Thanks,
Hello there,
Great job with using React to build this project, I love the UI and responsiveness. However, I would like to provide you with some feedback that could enhance the project's overall usability. In particular, I noticed that the calculator lacks date validation, which could result in inaccurate or nonsensical information being displayed. Specifically, when users input dates in an incorrect format, such as "34/100/2300," the calculator should display red errors or warnings indicating that the input is invalid.
To address this issue, I suggest implementing libraries such as Yup and Formik, which can assist in validating the date form and ensuring accurate results are displayed.
I hope you find my feedback useful in further improving its quality.
