Handling User Input and Building API Endpoints with FastAPI

Welcome to the third lesson of our course, where we will focus on handling user input and making API calls in our AI Short Story Generator web application.

In previous lessons, we set up the basic HTML structure and styled the interface to make it visually appealing. However, our application is still static — clicking buttons doesn't do anything, and there's no way to switch between tabs or generate stories. This is where JavaScript comes in. JavaScript is the programming language that brings web pages to life by adding interactivity and dynamic behavior.

Now, we will dive into the functionality that allows users to interact with the client-side application and generate stories. This lesson will guide you through implementing tab navigation, creating a story generation function, and making API calls to interact with the backend. By the end of this lesson, you will have a solid understanding of how to handle user input and integrate API calls into your web application.

Our application has two main tabs: "Generate Story" and "View History." We need to implement a function that will show the selected tab and hide the others when a user clicks on a tab button.

Let's create a file named script.js in the static folder of our FastAPI application. This is the same folder where we placed our style.css file in the previous lesson.

app/
├── templates/
│   └── index.html
├── static/
│   ├── style.css
│   └── script.js
└── main.py

Let's start by implementing tab navigation, which allows users to switch between different sections of the application. We will write the openTab function in script.js.

First, we need to gather all elements with the class tab-content. This will allow us to loop through each element and hide them initially. Here's how you can do it:

function openTab(tabName) {
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.style.display = 'none';
    });

In this code snippet, document.querySelectorAll('.tab-content') selects all elements with the class tab-content. We then use the forEach method to loop through each element and set its display style to 'none', effectively hiding all tabs.

Next, we need to display the selected tab. We can achieve this by using document.getElementById to select the element with the provided tabName and set its display style to 'block':

    document.getElementById(tabName).style.display = 'block';
}

This line of code selects the element with the ID matching tabName and sets its display style to 'block', making it visible to the user.

This approach is also backward compatible and scalable. If you decide to add more .tab-content divs in the future (for example, to introduce new tabs), you won't need to change this function. It will automatically hide all tab content sections and only display the one corresponding to the selected tab. This makes it easy to extend your application with additional tabs without modifying your JavaScript logic.

By combining these steps, we create a function that effectively manages tab navigation, allowing users to switch between different sections of the application.