Design comparison
Solution retrospective
At first, I used basic CSS Styling because it's more convenient for small projects. But we decided to change to Tailwind CSS, hoping that we can learn more by doing it. I have trouble with styling the glowing hover button using Tailwind CSS, also I'm sure I still can make the JavaScript code simpler but still don't understand how to do it.
Community feedback
- @pperdanaPosted over 1 year ago
Hi, Congratulations on successfully completing the challenge!
π Simplify javascript code
Here's my suggestion to simplify your code:
async function getAdvice() { const response = await fetch("https://api.adviceslip.com/advice"); const data = await response.json(); document.getElementById("advice-id").innerHTML = `A D V I C E # ${data.slip.id}`; document.getElementById("advice-word").innerHTML = data.slip.advice; } getAdvice();
This code uses
async
orawait
instead of.then()
to handle the response data from the API request. It also uses template literals to update the HTML content of the elements.Also I have some additional recommendations for your code that I think you'll find interesting and valuable
π Add
<main>
tag as semantic HTML in code-
The
<main>
tag is a semantic HTML element that is used to define the main content of a web page. -
The
<main>
tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.
for example code:
<main> <div class='container'> <h1>Article Title</h1> <p>Article content goes here...</p> ....................... </div> </main>
In the example above, the
<main>
tag is used to wrap the<div>
tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the<main>
tag is the most important and relevant content on the page.I hope you found this helpful!
Happy codingπ€
Marked as helpful1 -
- @Matheu46Posted over 1 year ago
an easy way to turn your javascript code simpler is call the function once, so you don't have to make fetch two times in the code
function getAdvice() { fetch("https://api.adviceslip.com/advice") .then((response) => response.json()) .then((data) => { console.log(data) document.getElementById("advice-id").innerHTML = "A D V I C E # " + data.slip.id; document.getElementById("advice-word").innerHTML = data.slip.advice; }) } getAdvice()
the code will generate a phrase when the website is opened, just like your first fetch
Marked as helpful1 - @Godstime01Posted over 1 year ago
To add the glowing effect on the button, a box shadow on hover will do the trick.
<button class="hover:shadow-md ..." />
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