## Introduction Hello, fellow developers! Today, I am excited to share a fun and simple project that I recently worked on: an Advice Generator website. This project fetches random pieces of advice from an external API and displays them on a webpage. It's a great way to practice working with APIs and building interactive web applications. ## Project Overview The Advice Generator website is a straightforward application that allows users to get random advice at the click of a button. It uses the [Advice Slip API](https://api.adviceslip.com/advice) to fetch advice and display it on the webpage. ## Features - **Fetches Advice**: Retrieves random advice from the Advice Slip API. - **Displays Advice**: Shows the advice along with an advice number. - **Interactive Button**: Users can fetch new advice by clicking a button. ## Technologies Used - **HTML**: For the structure of the webpage. - **CSS**: For styling the webpage. - **JavaScript**: For fetching data from the API and updating the DOM. ## Project Structure Here's a quick look at the project structure: ``` Advice-Generator/ ├── index.html ├── style.css └── script.js ``` ## Installation To get started with the project, follow these steps: 1. **Clone the repository**: ```bash git clone https://github.com/abhishekgurjar-in/Advice-Generator.git ``` 2. **Open the project directory**: ```bash cd Advice-Generator ``` 3. **Run the project**: - You can either run it on a local server or simply open the `index.html` file in a web browser. ## Usage 1. **Open the website** in a web browser. 2. **Click the "Get Advice" button** to fetch a new piece of advice. 3. **Enjoy the wisdom**! ## Code Explanation ### HTML The HTML file contains the basic structure of the webpage, including a button to fetch advice and a section to display the advice. ```html Advice Generator

Advice Generator

Click the button to get a piece of advice!

``` ### CSS The CSS file styles the webpage to make it visually appealing. ```css body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .container { text-align: center; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } button { padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #007BFF; color: #fff; border: none; border-radius: 5px; margin-top: 20px; } button:hover { background-color: #0056b3; } ``` ### JavaScript The JavaScript file fetches advice from the API and updates the DOM. ```javascript document.getElementById('adviceBtn').addEventListener('click', fetchAdvice); function fetchAdvice() { fetch('https://api.adviceslip.com/advice') .then(response => response.json()) .then(data => { document.getElementById('advice').innerText = `Advice #${data.slip.id}: ${data.slip.advice}`; }) .catch(error => { console.error('Error fetching advice:', error); }); } ``` ## Live Demo You can check out the live demo of the Advice Generator website [here](https://abhishekgurjar-in.github.io/Advice-Generator/). ## Conclusion Building the Advice Generator website was a fun and educational experience. It helped me practice working with APIs and building interactive web applications. I hope you find this project as enjoyable and informative as I did. Feel free to clone the repository and play around with the code. Happy coding! ## Credits - This project uses the [Advice Slip API](https://api.adviceslip.com/). ## Author - **Abhishek Gurjar** - [GitHub Profile](https://github.com/abhishekgurjar-in)

advicegenerator

Building a Advice Generator

Join Our Newsletter. No Spam, Only the good stuff.