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.
The UI is impressive, and I like everything about it, but I believe its performance could be improved by implementing debounce. Debounce is a technique used to limit the frequency of a function call by ensuring that it runs only after a certain amount of time has passed since the last invocation. In the context of the UI, it could prevent delayed advice from being displayed in cases where a subsequent request is made before the previous one is completed.
Hello there,
The design is impressive, but I noticed the issue when hovering over the button, the color changes as expected, but if I hover over the numbers within the button, the hover effect disappears and the button reverts to its default color. You can update the code to ensure that the hover color persists when hovering over the numbers within the button as well. Also it does not work when clicking the button to select the rating, but only works when click on the number within the button.
Hello,
I appreciate your feedback regarding the menu button and the header Image. I understand that it is not functioning properly on the tablet screen but is working on the mobile screen. I am aware of the issue and I know how to resolve it. Thank you for bringing this to my attention.
Hello,
I appreciate your work, as the design and functionality are both impressive. However, there is room for improvement in the mobile design. It would also be beneficial to truncate the original link when displaying it in the list. This would allow the large link to be shown in just one line, as lengthy links can cause design problems and make it less visually appealing. This is currently happening in the mobile design.
The truncate code I used in my code -
function truncateText(text, maxLength, append = "...") {
if (text.length > maxLength) {
return text.slice(0, maxLength) + append;
} else {
return text;
}
}
I like the UI and other stuff, however, implementing debounce would enhance its performance. The reason is that when receiving advice through a request if a subsequent request is made before the previous one is completed, the new advice will not be displayed immediately. To rectify this, a loading effect can be integrated into the button or other suitable location to prevent users from sending multiple requests simultaneously.
The UI/UX is fantastic and I'm really enjoying it. However, instead of using ternary conditions throughout the code for the theme colors, which can be confusing, you might want to consider using Tailwind CSS for the dark mode colors. It's totally up to you, of course, and if you find the ternary conditions easier to work with, that's fine. Additionally, you could choose to store the user's preferred theme mode in Local Storage so that they don't have to switch to dark mode every time they use the app.
Hey, I just checked and discovered that every time I click the button it does not show me new advice. To fix this you can use the boolean isLoading state to check if the advice is isLoading and add a loading animation and disabled the button while the isLoading is true, add debounce so you can show the data every time you click the button. because right now when I click the button I make another request when the previous one is not even completed you can fix it by using this method.
