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 text input box where user can provide the topic for the tweet generation and two buttons:  

• One that generates only the tweet based on the topic.

• Second that generates the tweet and an image based on the tweet and the topic.

We’ll also render the output on the same HTML page so that we don’t lose our output. We will also add one more button (which is by default hidden until we get the answer back from the /generate-tweet and /generate-tweet-with-image APIs). This button will call the /post-tweet API to take the tweet and image (if generated) and post them to the Twitter account using the credentials generated. 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 topic for the tweet from the user. We add two buttons: first will call the /generate-tweet and other will call the /generate-tweet-with-image API. We add an empty <div> with id as loader to show the loader by setting a class attribute through JavaScript once ...