Skip to content
Submitted 10 months ago

Advice-generator-App HTML, CSS, JavaScript 😃

Marley Semende•570
@Marley-Semende
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi Frontend Mentor Community 👋🏾. I've completed another challenge! I enjoyed building this advice-generator-app with :

  • 🚀Semantic HTML
  • 🚀CSS Flexbox
  • 🚀JavaScript fetch API

For smaller screen sizes 📲, I've added @media query to handle the layout and styling

Things I learnt building this project:

  • Using async programming to fetch and handle data from the AdviceSlip Advice API 👨🏾‍💻
  • Adding an addEventListener() that handled the advice display on button click. Feel free to leave me feedback on my code. Happy coding :)

Community feedback

  • Edwin Mugo•170
    @EdwinMugoPosted 10 months ago

    Amazing work on this one

    1
    Marley Semende•570
    @Marley-SemendePosted 10 months ago

    @EdwinMugo Hi 👋🏾. thank you so much much for the feedback. i appreciate it 🫶🏾

    0
  • Theunis•210
    @theYuunPosted 10 months ago

    Awesome! However, consider some smooth transitions between different quotes, like text cross-fading and also adding a transparency transition to the hover effect on the dice button.

    0

Please log in to post a comment

Log in with GitHub

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