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 - JavaScript, Sass, BEM

#fetch#sass/scss#accessibility
Hoshikoโ€ข 180

@oliwiakramm

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


๐Ÿ‘ฉโ€๐Ÿ’ปMy solution to this challenge๐Ÿ‘ฉโ€๐Ÿ’ป

First time using API in a project.

Additional things:

  • button is disabled for 2 seconds after fetching an advice
  • advice text animation

Thank you for any feedback ๐Ÿ˜

Community feedback

Fatโ€ข 850

@Fahatmah

Posted

I like the animation on the text โ˜บ like one of the best way to make users see that there is something changed after they clicked the button.

0

Hoshikoโ€ข 180

@oliwiakramm

Posted

@Fahatmah Thanks ๐Ÿ˜ I'm glad you like it

0
Fatโ€ข 850

@Fahatmah

Posted

@oliwiakramm I'd like to have an advice on how can you almost achieve that pixel perfect output ๐Ÿ˜„

0
Hoshikoโ€ข 180

@oliwiakramm

Posted

@Fahatmah

I use a chrome extension called PerfectPixel

1
Shalom2935โ€ข 420

@Shalom2935

Posted

beautiful but there is a problem with the animation.

0

Hoshikoโ€ข 180

@oliwiakramm

Posted

@Shalom2935 which is ?

0
Shalom2935โ€ข 420

@Shalom2935

Posted

@oliwiakramm after the first translation, the second one will start before fetching the new advice, so the same text is going up and down then disappearing.

0
Hoshikoโ€ข 180

@oliwiakramm

Posted

@Shalom2935 I tested it in 3 browsers and I don't see it, so idk what the problem is ๐Ÿคทโ€โ™€๏ธ

0
Shalom2935โ€ข 420

@Shalom2935

Posted

@oliwiakramm so my browser might be at fault

0

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