Display Random Advice Using Advice Slip JSON API
If you’re looking for a fun and simple way to practice working with APIs in JavaScript, building a random advice generator is a great place to start. In this post, we’ll walk through how to fetch and display random advice using the Advice Slip JSON API with a clean HTML, CSS, and JavaScript setup.
Project Overview
The goal of this project is simple:
- Fetch random advice from an external API
- Display it on the page
- Allow users to get new advice with a button click
This is a perfect beginner-friendly project that introduces you to:
- Fetch API
- DOM manipulation
- Event handling
Tutorial
HTML structure
We start with a clean and minimal HTML layout:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Advice Slip API</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
<div id=”results”></div>
<button class=”btn” id=”getData”>Get Advice</button>
</div>
<script src=”app.js”></script>
</body>
</html>Key elements:
- #results: Where the advice will be displayed
- #getData: Button to fetch new advice
Styling with CSS
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap’);
:root {
–main-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
place-items: center;
text-align: center;
height: 50vh;
width: 700px;
max-width: 80%;
margin: 0 auto;
}
#results p{
font-size:20px;
font-family: ‘Poppins’, sans-serif;
}
.btn {
background-color: teal;
padding: 10px;
display: block;
border: 0;
border-radius: 5px;
color: #fff;
outline: 0;
box-shadow: var(–main-shadow);
cursor: pointer;
transition: all .2s ease-in;
width: 100px;
}
.btn:hover {
background-color: green;
color: yellow;
}
#results {
padding: 20px;
box-shadow: var(–main-shadow);
margin-bottom: 30px;
}JavaScript Logic
const resDiv = document.querySelector(‘#results’);
const resBtn = document.querySelector(‘#getData’);
resBtn.addEventListener(‘click’, () => {
getAdvice();
});
window.onload = () => {
getAdvice();
};
function getAdvice() {
fetch(‘ https://api.adviceslip.com/advice’).then(response => {
return response.json();
}).then(adviceData => {
const Adviceobj = adviceData.slip;
resDiv.innerHTML = `<p>${Adviceobj.advice}</p>`;
}).catch(error => {
console.log(error);
});
}How It Works
1. Fetching Data
We use fetch() to request data from:
https://api.adviceslip.com/advice
2. Handling the Response
The API returns JSON like this:
{
“slip”: {
“id”: 123,
“advice”: “Always be kind.”
}
}3. Updating the DOM
We display the advice using:
resDiv.innerHTML = `<p>${Adviceobj.advice}</p>`;4. Event Handling
- On page load → advice is shown automatically
- On button click → new advice is fetched
Possible Improvements
- Add a loading indicator
- Display error messages to users
- Add animations
- Copy advice to clipboard
- Save favorite advice
Final Thoughts
This small project shows how powerful JavaScript can be when working with APIs. With just a few lines of code, you can build dynamic and interactive applications.
Try expanding it further into a motivational app or adding new features to make it your own. Happy coding!
account_box Author: KTim
date_range Date: 18th, March 2026
access_time Time: 7:54 am
remove_red_eye Views: 31 Views