Design comparison
Solution retrospective
Hi everyone!!
this is my first time i use 3rd part API in a project let me know if i make it correctly!!
would really appriciate any type of feedback!!
thak you!!!
Community feedback
- @RalfiSlaskPosted about 1 year ago
Hello!
Here are some things i think you can improve in your project:
CSS:
-
Would suggest having the height 100% in body, html and main so that your background color covers the whole page.
-
Have spacing between your selectors so it is easier to read.
JS:
-
Instead of using an XMLHttpRequest try using the newer more modern way using fetch.
-
Object deconstructuring. Instead of having to type out each name like data.slip.advice // data.slip.id you can write as const { advice, id } = data.slip which is the same as creating two variables const advice = data.slip.advice and const id = data.slip.id.
-
Template literals. Instead of writing text.textContent = '"' + advice.slip.advice + '"';. You can use `` and inside these you can type your variables using ${variable}.
try { const response = await fetch("https://api.adviceslip.com/advice") const data = await response.json(); const { advice, id } = data.slip; text.textContent = `"${advice}"`; adviceId.textContent = `ADVICE # ${id}`; } catch (error) { console.log(error) } } fetchData(); button.addEventListener("click", fetchData)
Marked as helpful0@boris2912Posted about 1 year ago@RalfiSlask thanks a lot really appriciate your advices!!
0 -
Please log in to post a comment
Log in with GitHubJoin 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