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.
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 to fetch advice and display it on the webpage.
Here's a quick look at the project structure:
Advice-Generator/ ├── index.html ├── style.css └── script.js
To get started with the project, follow these steps:
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Advice-Generator.git
Open the project directory:
cd Advice-Generator
Run the project:
The HTML file contains the basic structure of the webpage, including a button to fetch advice and a section to display the advice.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Advice Generator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Advice Generator</h1> <p id="advice">Click the button to get a piece of advice!</p> <button id="adviceBtn">Get Advice</button> </div> <script src="script.js"></script> </body> </html>
The CSS file styles the webpage to make it visually appealing.
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; }
The JavaScript file fetches advice from the API and updates the DOM.
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); }); }
You can check out the live demo of the Advice Generator website here.
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!
The above is the detailed content of Building an Advice Generator Website. For more information, please follow other related articles on the PHP Chinese website!