Skip to content
Submitted 9 months ago

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

C H A R A N 🎯•2,670
@0xabdul
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

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.

Community feedback

  • Sivaprasath•2,520
    @sivaprasath2004Posted 7 months ago

    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
    0
  • Ragab Marza•170
    @rajabmaherPosted 8 months ago

    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.

    0
    C H A R A N 🎯•2,670
    @0xabdulPosted 8 months ago

    @rajabmaher you learn 30 days javascript on Asabeneh github and we learn form beginner to advance

    1
    C H A R A N 🎯•2,670
    @0xabdulPosted 8 months ago

    @rajabmaher the advice generator app this is my first js projects i'm also learn little bit javascript

    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