@caarlosdamian
Posted
Hello John Good job on completing the challenge ! I have some feedback for you if you want to improve your code.
HTML:
Use the <main> tag to wrap all the main content of the page instead of the <div class="container"> tag. With this semantic element you can improve the accessibility of your page.
You can use an </hr>
instead of and img on line 32-34 index.html
Javascript:
Function randomNum
takes to two parameters but you dont pass those instead you defined in the body of the function remove the parameters and change the function like this
function randomNum() {
let min = 1;
let max = 224;
return Math.floor(Math.random() * (max - min + 1) + min);
}
Instead of repeat yout code you can just create a function that fetch the data and jus call it with the randomNumber like fetchData(randomNum())
as well use template strings on your url string you can read more about it here Template_literals
const fetchData = (ranNum) => {
fetch(
`https://api.adviceslip.com/advice/${ranNum}`
).then(response => {
return response.json();
}).then(adviceData => {
const adviceObj = adviceData.slip;
id.innerText = adviceObj.id;
id.style.letterSpacing = '3rem;';
advice.innerText = '"' + adviceObj.advice + '"';
advice.style.fontWeight = '900';
advice.style.fontSize = '1.8rem';
}).catch(error => {
console.log(error);
});
}
I hope you find it useful! 😄
Happy coding!
Marked as helpful