Building a Simple Quote of the Day Display with HTML, CSS, and a Public API

Creating a simple “Quote of the Day” display is a fantastic beginner project for web developers. It allows you to practice fundamental web technologies like HTML, CSS, and JavaScript, while also introducing you to the power of integrating external data using APIs. This project is not just about showing a quote; it’s about making your web page dynamic and fetching fresh content automatically.

Why build a Building a Quote of the Day Display?
Static websites are fine for information that rarely changes, but for something like a daily quote, you need a way to update the content without manually editing the HTML every single day. This is where JavaScript and public APIs come into play. An API (Application Programming Interface) acts as a messenger, allowing your web page to request data from another server (in this case, a server hosting a collection of quotes) and receive it back to display on your page.

[Hint: Insert image/video showing a simple Quote of the Day display interface]

Let’s break down the components needed for Building a Quote of the Day Display:

1. HTML (HyperText Markup Language): This forms the structure of your web page. You’ll need containers to hold the quote text and the author’s name.
2. CSS (Cascading Style Sheets): This controls the appearance. You’ll use CSS to style the quote, the author, the background, and perhaps add some visual flair to make the display appealing.
3. JavaScript: This is the dynamic part. JavaScript will be responsible for:
   • Fetching a quote from a public API when the page loads.
   • Updating the HTML elements with the fetched quote and author.
   • Optionally, adding functionality like a button to get a new quote or displaying a new quote automatically each day.
4. Public API: A service on the internet that provides quote data in a structured format (like JSON).

Setting Up the HTML Structure

First, you’ll create an `index.html` file. This file will contain the basic structure.

“`html

“`
This HTML sets up a container div, placeholders for the quote and author (using `span` and `div` with IDs), and a button. We’ve linked a CSS file (`style.css`) and a JavaScript file (`script.js`). Note the use of IDs (`quote`, `author`, `new-quote-btn`) – these are crucial for JavaScript to select and manipulate these elements. We also included placeholder text “Loading…” which will be replaced by the fetched quote.

Styling with CSS

Next, create a `style.css` file to make your quote display look presentable. You can get creative here, but here’s a simple example to get you started:

“`css
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
font-family: sans-serif;
margin: 0;
}

.quote-container {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 600px;
width: 90%;
}

.quote-text {
font-size: 1.5em;
margin-bottom: 20px;
color: #333;
}

.quote-text i {
font-size: 0.8em;
}

.quote-author {
font-size: 1em;
color: #555;
margin-bottom: 30px;
font-style: italic;
}

#new-quote-btn {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s ease;
}

#new-quote-btn:hover {
background-color: #0056b3;
}
“`
This CSS centers the content, styles the container, quote text, author, and the button. You can customize these styles extensively to match your design preferences.

Using JavaScript and a Public API

The core functionality comes from JavaScript. You need to fetch data from a public API and update the HTML.

To understand how to interact with external services like a quote API, check out our guide on How to Use a Public API: A Beginner’s Step-by-Step Example.

Many free quote APIs are available. For this example, we’ll use the Type.fit API (https://type.fit/api/quotes), which provides a simple JSON array of quotes.

Create a `script.js` file:

“`javascript
const quoteText = document.getElementById(‘quote’);
const quoteAuthor = document.getElementById(‘author’);
const newQuoteBtn = document.getElementById(‘new-quote-btn’);

// Function to fetch a new quote
async function getQuote() {
const apiUrl = ‘https://type.fit/api/quotes’; // URL of the quote API

try {
const response = await fetch(apiUrl); // Fetch data from the API
const data = await response.json(); // Parse the JSON response

// Select a random quote from the array
const randomIndex = Math.floor(Math.random() data.length);
const randomQuote = data[randomIndex];

// Update the HTML elements with the quote and author
quoteText.textContent = randomQuote.text;
quoteAuthor.textContent = `- ${randomQuote.author || ‘Unknown’}`; // Use ‘Unknown’ if author is null

} catch (error) {
console.error(‘Error fetching quote:’, error);
quoteText.textContent = ‘Failed to load quote.’;
quoteAuthor.textContent = ‘- Error’;
}
}

// Event listener for the button
newQuoteBtn.addEventListener(‘click’, getQuote);

// Fetch a quote when the page loads
getQuote();
“`

[Hint: Insert image/video showing the code editor with the JavaScript file]

Let’s break down the JavaScript:

1. Selecting Elements: We get references to the HTML elements where the quote, author, and button are using `document.getElementById`.
2. `getQuote()` Function:
This `async` function handles fetching the data.
`apiUrl` stores the address of the Type.fit API.
`fetch(apiUrl)` makes an HTTP request to the API endpoint. `await` pauses execution until the response is received.
`response.json()` parses the response body as JSON. Again, `await` waits for the parsing to complete.
The Type.fit API returns an array of quotes. We calculate a random index to pick a random quote from the array.
We access the `text` and `author` properties of the selected quote.
`quoteText.textContent` and `quoteAuthor.textContent` update the text displayed in the corresponding HTML elements. We add a “-” before the author’s name and use “Unknown” if the API doesn’t provide an author.
A `try…catch` block is used for basic error handling, in case the API request fails.
3. Event Listener: `newQuoteBtn.addEventListener(‘click’, getQuote)` attaches a click event listener to the button. When the button is clicked, the `getQuote` function is called.
4. Initial Call: `getQuote()` is called once outside the function definition and listener, so a quote is displayed as soon as the page loads.

[Hint: Insert image/video demonstrating the working Quote of the Day display in a browser]

That’s it! You now have a simple, functional “Quote of the Day” web display that fetches dynamic content from a public API using HTML, CSS, and JavaScript.

Extending Your Project

You can enhance this project further:

Add Social Sharing: Include buttons to tweet or share the quote on other platforms. You would need to construct the sharing URL based on the current quote text and author.
Daily Quote: Instead of a random quote on each load, you could potentially store the current day’s quote in `localStorage` or use an API that specifically supports a “Quote of the Day” feature (though many simple APIs provide random quotes).
More Styling: Improve the visual design with different fonts, colors, backgrounds, or animations.
Error Messages: Provide more user-friendly error messages if the API fails to load.

Conclusion

Building a Quote of the Day Display is an excellent way to solidify your understanding of how front-end web technologies interact with external data sources via APIs. It’s a practical project that demonstrates fetching, processing, and displaying dynamic content – skills crucial for building modern web applications. Start with this simple version and explore the many ways you can expand upon it!