Advice generator app (MVC architecture, ES6 classes and modules)
Design comparison
Solution retrospective
I do not have any questions but I must say that I learned quite a lot with this project.
A couple of things I learned are
- How to work with ES6 classes and modules
- How to work with a zero configuration build tool such as Parcel
- How to implement the MVC (model-view-controller) architecture in JavaScript
- How to implement the Publisher-Subscriber pattern
- How to write documentation for functions
- How to implement a project configuration file and use it throughout the project
Another thing I created as well is a flowchart. This is something I learned from a previous course I followed on Udemy (so I decided to create one on my own this time).
Feedback on the implementation of the MVC architecture as the error handling is welcome.
----------
As a sidenote: as soon as the user presses the button, the button disables for 2 seconds. The API returns the same advice within that time period and this might confuse the user if the user presses the button again.
Community feedback
- @bisoladevPosted about 1 year ago
Great job! I would suggest adding a loading state to help the users be more patient during the latency period of 2 seconds. Other than that, I think it was an awesome work!
Marked as helpful1@YariMorcusPosted about 1 year agoHi @bisoladev,
First of all, it seems like I owe you an apology (so hereby!). I completely forgot to answer your feedback after not having the time to respond to it immediately.
The loading state is indeed a good idea I haven't thought about. My idea is then to not disable the button for 2 seconds, but to show the loading spinner (in the card) right after the user presses the button within those 2 seconds.
What do you think about this?
PS: Thank you for the reminder (the notification of you liking this solution) @thenihilistdev
2@avinnoPosted about 1 year ago@YariMorcus I love that idea! Can't wait to see it if you update it!
0@YariMorcusPosted about 1 year ago@thenihilistdev,
I put it on my todo list so I will definitely update it (always striving for the best result 😀).
1@bisoladevPosted about 1 year agoHi! Totally understand ....Yeah that works...will check back to see your implementation of it ..good job!😁@YariMorcus
2@YariMorcusPosted about 1 year ago@bisoladev @thenihilistdev
I updated the solution with the loading spinner. If the user now presses the button within 2 seconds, the loading spinner will render. I did decide to keep the button disabled because of two reasons:
- It otherwise introduced a bug.
- I personally found it more clear to disable it instead of it being enabled.
The disabled button will (of course) be enabled again after those seconds (with the new advice).
I do have to admit that I had some trouble implementing it in code (I did had an idea of what I had to do in my head).
Update: I just found a bug only applicable to Firefox. Somehow Firefox gets stuck in setTimeout and therefore keeps showing the loading spinner. I am currently looking for a solution but have not found one yet.
2@YariMorcusPosted about 1 year ago@bisoladev @thenihilistdev,
I managed to fix the bug in Firefox by adding
{ cache: 'no-cache' }in the configuration object offetch(). Somehow Firefox (and Firefox only) kept caching the previous advice even if it was well over 2 seconds. This caused the loading spinner to rerender and create a loop of API calls.I am still not sure why this only happens in Firefox but hey I got it working haha.
2@bisoladevPosted about 1 year agoWow awesome! There is always something new to learn on every challenge ..Going to test mine on firefox also ..Thank you@YariMorcus
2
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord