Adding the History Tab | CodeSignal Learn

Adding the History Tab | CodeSignal Learn

Introduction

Welcome to this lesson on adding a history tab to your AI Short Story Generator web application. In previous lessons, you set up the basic HTML structure, styled the interface, and implemented user input handling and API calls. Now, you will enhance your application by allowing users to view previously generated stories through a dedicated history tab. This feature will improve the user experience by making it easy to revisit and review past stories, and will lay the groundwork for more advanced features in the future.

Updating the HTML Structure for History Tab

To begin, let's update the index.html file to include the necessary UI elements for the history tab. This will allow users to load and view previously generated stories. First, add a button for "Load Previous Stories." This button will trigger the function to fetch the story history. Here's how you can add it: HTML <button id="history-button" onclick="fetchHistory()">Load Previous Stories</button> Next, include a paragraph element for the loading message. This message will be displayed while the stories are being fetched: HTML <p id="history-loading-message" style="display: none;">Loading history... Please wait.</p> When working with web applications that make API calls, it's crucial to provide users with clear feedback about what's happening behind the scenes. Without proper loading indicators, users might wonder if their action was registered or if the application is frozen. Similarly, without proper error handling, users might be left confused when something goes wrong. Finally, add an empty div for the story history container. This is where the fetched stories will be displayed: HTML <div id="history-container"></div> By setting the correct element IDs (history-button, history-loading-message, history-container), you ensure that these elements can be easily accessed and manipulated using JavaScript.

Initializing the `fetchHistory()` Function

Now, let's create and initialize the fetchHistory() function in app/static/script.js . This function will handle the process of fetching and displaying the story history. Start by retrieving the DOM elements for the loading message, button, and container using their IDs: JavaScript const historyLoadingMessage = document.getElementById('history-loading-message'); const historyButton = document.getElementById('history-button'); const historyContainer = document.getElementById('history-container'); Next, update the UI to show the loading message and hide the button. This provides immediate feedback to the user that the application is processing their request: JavaScript historyLoadingMessage.style.display = 'block'; historyButton.style.display = 'none'; historyContainer.innerHTML = ''; By clearing the container's content, you ensure that any previous stories are removed before new data is loaded.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Implementing the API Call and UI Feedback

With the UI prepared, let's implement the API call to fetch the story history. We'll use the fetch API to send a GET request to the /api/get_stories endpoint. Start by making the API call: fetch('/api/get_stories') Next, handle the promise chain to process the response. In the first then() callback, toggle the UI back to its original state after the API call completes: .then(response => response.json()) .then(data => { historyLoadingMessage.style.display = 'none'; historyButton.style.display = 'block'; }) This ensures that the loading message is hidden and the button is shown again, providing a seamless user experience.

Handling API Response Data

Now, let's extend the then() callback to handle the response data. This involves checking if the returned stories array is empty and updating the history container accordingly. First, check if the stories array is empty: if (data.stories.length === 0) {historyContainer.innerHTML = '<p>No stories found.</p>'; return;} If stories are found, iterate over them, create pre elements, and append them to the container: data.stories.forEach(story => {const pre = document.createElement('pre'); pre.textContent = story.story; historyContainer.appendChild(pre);}); This approach dynamically creates and displays the story history based on the API data.

Enhancing Error Handling

To ensure robustness, let's add error handling to the fetchHistory() function. This involves adding a catch() block to handle any errors that may occur during the API call. In the catch() block, hide the loading message, show the button, and display an alert message informing the user of the error: .catch(error => {historyLoadingMessage.style.display = 'none'; historyButton.style.display = 'block'; alert('Error fetching story history. Please try again.'); console.error('Error:', error);}); By logging the error to the console, you can easily debug any issues that arise.

JavaScript

.catch(error => {
    historyLoadingMessage.style.display = 'none';
    historyButton.style.display = 'block';
    alert('Error fetching story history. Please try again.');
    console.error('Error:', error);
});