This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Generate a new piece of advice by clicking the dice icon
- Solution URL: https://github.com/jeeheezy/FEM-Advice-Generator-App
- Live Site URL: https://jeeheezy.github.io/FEM-Advice-Generator-App/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Javascript
This exercise was a good way of learning what APIs are and how specifically the Fetch API works to call the slip advice API provided. It was also a good lesson on dealing with Promises and making use of then or async functions with await to be able to work with the resolved or rejected Promises.
Promises are still confusing, as are asynchronous functions, so I'd like to keep learning on how they work and how to effectively use them. Additionally, working with APIs I'm sure will be a big portion of any future development so I'd like to get familiar with how to work with different APIs and implementing them into projects.
-
MDN Web Docs for Using Fetch API - This page on using the Fetch API helps understand much of what's possible and gives plenty of examples to help understand what they are explaining. While there's much that was not applied in this project, I specifically found the "Checking that the fetch was successful" portion of the document helpful.
-
ChatGPT 3.5 - ChatGPT is a good great resource when trying to understand where to begin and why something might be written the way it is. It was particularly helpful for me this time around in undestanding async/await, as well as how the .json method works since at first glance it seemed like an object but the documentations stated it was a promise.