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: Hosted on github pages
- Semantic HTML5 markup
- CSS
- JavaScript
It was fun incorporating JavaScript into my project. Initially, I was testing out my site in firefox, where the advice would not reset and randomise due to the .fetch()
command accessing the cache. To combat this, i changed some of the optional settings for the command:
function get(url) {
/* optional settings have to be passed in as an object, I only chose to change how the fetch command accesses the cache - so only that setting is mentioned in the object */
return fetch(url, {cache: 'no-store'}).then((resp)=>resp.json());
}
Working with the fetch API was a great learning experience which I hope will allow me to use other 3rd party APIs in the future.
I also encountered some issues with using document.querySelector()
since it would always return null
when used in the script and the result i wanted in the dev console. I later discovered that this was due to the script loading before the html - meaning that the querySelector()
wouldn't have found anything. To combat this, I only used the querySelector()
once the site had loaded.
function onLoad() {
// run after the html loads
adviceNum = document.querySelector('#advice-number');
adviceContent = document.querySelector('#advice-text');
// so that there is already a piece of advice there
generateAdvice();
}
document.addEventListener("DOMContentLoaded", onLoad);
- W3schools - Helped me with styling certain elements
- MDN web docs - Helped me a lot with the fetch API and a great general reference
- Frontend Mentor - @SushiOnToast
- CodePen - @SushiOnToast
- CodeWars - @SushiOnToast