Skip to content
Submitted over 1 year ago

Advice generator app using [ Html & Css & Js & Api ] 🚀

accessibility, animation
C H A R A N 🎯•2,670
@0xabdul
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Advice Generator App 🎲

Description: 📃

  • The Advice Generator App provides users with random pieces of advice or quotes to inspire, motivate, or provide guidance. The app is built using HTML, CSS, and JavaScript.

Features: 🪁

  • Random Advice Generation: The app fetches random advice or quotes from an external API and displays them on the web page. User Interface: The app has a simple and intuitive user interface designed using HTML and styled with CSS to enhance the user experience. Button Interaction: Users can click a button to generate a new random advice or quote, which is dynamically updated on the page without requiring a page refresh. Responsive Design: The app is designed to be responsive, ensuring a consistent and optimal user experience across various devices and screen sizes.

API: 🧭

  • The app utilizes an external API to fetch random advice or quotes. The API endpoint is integrated into the JavaScript code to retrieve data dynamically.

Technologies Used: 🛠️

  • HTML: Used to structure the web page and define the layout.

  • CSS: Used to style the HTML elements and enhance the visual presentation of the app.

  • JavaScript: Used to handle user interactions, fetch data from the API, and update the DOM dynamically.

  • External API: Integrated to fetch random advice or quotes for display on the app.

Code

Please log in to post a comment

Log in

Community feedback

  • Sivaprasath•2,500
    @sivaprasath2004

    Hello, I would like to extend my congratulations on completing this challenge.

    • I will see your solution the design is amazing.
    • I will suggestion for your solution make sure it is used for user solution.
    • Adjust your solution dise Component.
    • In javascript the dise component clicked If you will use classList.add and then to apply image size increase.
    #dise img{
  height:5rem;
  width:5rem ; 
}
    Marked as helpful
  • Ragab Marza•170
    @rajabmaher

    i startes learning js and i'm good at solving problems on codewars and i'm getting better on it, but i have a problem whit learning DOM , do you know a good place to learn it.

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