How can I make Advice Slip API into a Fully Functional Web App

Ammar Habib (HTML, CSS)

12 months ago

How can I make Advice Slip API into a Fully Functional Web App

We will build a simple web application that utilizes the Advice Slip API to provide users with random advice based on a word they input. This project will demonstrate how to integrate an API into a web application, manage user input, and display results dynamically.

Project Overview

The web app will have the following features:

An input field for users to enter a word.
A button to submit the word.
A section to display the random advice retrieved from the API based on the word.

Technologies Used

HTML: To structure the web app.
CSS: For styling the app.
JavaScript: To handle user interactions and API requests.

Setting Up the Project

File Structure

Create a folder for your project and set up the following file structure:

javascript

advice-app/
│
├── index.html
├── style.css
└── script.js

HTML (index.html)

Let’s start by creating the basic structure of our web app with HTML.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advice Slip App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Get Random Advice</h1>
        <input type="text" id="inputWord" placeholder="Type a word...">
        <button id="submitButton">Get Advice</button>
        <p id="adviceOutput"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css)

Now, let’s add some basic styling to make our app look nice.

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-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
    padding: 10px;
    margin-top: 10px;
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
    border: none;
    background-color: #28a745;
    color: white;
    border-radius: 4px;
}

button:hover {
    background-color: #218838;
}

#adviceOutput {
    margin-top: 20px;
    font-size: 1.2em;
    color: #555;
}

JavaScript (script.js)

Finally, we will write the JavaScript code to handle the API request and the user interactions.

javascript

document.getElementById('submitButton').addEventListener('click', function() {
    const inputWord = document.getElementById('inputWord').value;
    fetchAdvice(inputWord);
});

function fetchAdvice(word) {
    const url = `https://api.adviceslip.com/advice/search/${word}`;

    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            const advice = data.slips ? data.slips[0].advice : 'No advice found. Try another word!';
            document.getElementById('adviceOutput').innerText = advice;
        })
        .catch(error => {
            document.getElementById('adviceOutput').innerText = 'Error fetching advice: ' + error.message;
        });
}

Explanation of the Code

HTML Structure

The HTML sets up a simple interface with an input field, a button, and a paragraph to display the advice.

CSS Styling

The CSS styles the body, container, input, and button to improve the visual appeal of the app.

JavaScript Functionality

The JavaScript adds an event listener to the button. When clicked, it retrieves the value from the input field and calls the fetchAdvice function.
The fetchAdvice function constructs the API URL with the input word and makes a fetch request to the Advice Slip API.
It handles the response, checking if advice is available and updating the DOM to display the advice or an error message.

Running the App

To run the app, simply open the index.html file in a web browser. You can type a word into the input field and click the button to receive random advice related to that word.

Conclusion

In this article, we successfully turned the Advice Slip API into a fully functional web app. Users can input a word and receive relevant advice dynamically. This project demonstrates the basics of HTML, CSS, and JavaScript integration with an external API, paving the way for more complex applications in the future. Happy coding!