Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice-generator-app using Fetch API in JS

Hibi4 210

@Hibi4

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I didn't get to make the height divide the button in the middle like what was on the design picture. **Any help is welcome. **

For the rest, everything works correctly.

Community feedback

P

@JlordS32

Posted

Congrats on completing this challenge Hibi4. A couple of suggestions that I can maybe add to your solution:

You can try adding padding: 0 30px for your div_advice just so it looks a little nicer and also add 'box-shadow: 0px 0px 30px -3px #52FFA8;' for the class .dice_icon_logo to give that green shadow effect as the design suggested and make sure that it only happens on hover.

I have also noticed that the quote never loads on page reload, you can maybe try invoking the function you've created generateAdvice() at the bottom of your main.js, make sure to wrap it in DOMContentLoaded listener so it only calls the function on page reload. It should look something like this:

document.addEventListener('DOMContentLoaded', () => {
   generateAdvice()
})

Overall, you're doing pretty great! You're off in a good start my friend. Happy coding!

Marked as helpful

0

Hibi4 210

@Hibi4

Posted

Hi Jaylou

Thank you for your help.

You not only answered my question, but you also allowed me to improve my code by offering me new suggestions.

0

Account Deleted

try this for button ->

.main {
   add position: relative;
}

.btn {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%,50%);
}
0

Hibi4 210

@Hibi4

Posted

Hi Abdullah

Thank you for your comment. Your solution helps me to resolve my problem.

2

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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