Submitted 7 months ago

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

C H A R A N 🎯• 2,690

@0xabdul

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Advice generator app

HTML
CSS
JS
API

2junior

View challenge

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

@sivaprasath2004

Posted 5 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

Ragab Marza• 170

@rajabmaher

Posted 7 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.

C H A R A N 🎯• 2,690

@0xabdul

Posted 7 months ago

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

C H A R A N 🎯• 2,690

@0xabdul

Posted 7 months ago

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

Please log in to post a comment

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