Build the Web Layout to Finish the App

Create an HTML page for our app

Let’s add an HTML page where we’ll have a search box to provide a question and a button to hit the /ask-question API. We’ll also render the output on the same HTML page so that we don’t lose our output. We will also add a button (which is by default hidden until we get the answer back from the API) that will copy the answer to our clipboard. Let’s take a look at the HTML and CSS for a simple design of our HTML page.

Code explanation:

Let’s briefly discuss the HTML and CSS code.

• The HTML code consists of a heading and the title of our project. Then we add an input tag to accept the question from the user. We add one button that call the /ask-question API. Then, we add a text area that will be used to render the response from the API and a hidden button to copy the response to clipboard (by manipulating DOM elements).

• The CSS code is pretty easy to understand. We apply different stylings to all the HTML elements so that the web page looks clean and is easy to use.

Create the script file to call the API

We have our API and the web page ready. But we’re missing one important component, i.e., the JavaScript code that calls the API and displays the result on the web page when a button is clicked. We’ll follow the steps ...