How to Create a Simple Web App Using JavaScript

PSA: JavaScript (JS) is dangerously addicting. So addicting that in my spare time, I develop random web apps to humor myself and of course, to practice some JS coding skills. JavaScript, just like any foreign language, may at first seem somewhat daunting to learn (who is this anyways? and why doesn’t it like me?). However, remember:

Insert another cliché here.

We can start making a basic, interactive web app using JS. Let’s also have a goal to fulfill this in about 20 lines of code. Ready? Let’s go!

What We’re Building

Let’s build a web app that serves as a daily self-motivator and tool to brighten up your mood. I got it. An app that shows you a random Kanye quote along with an option of a random cat photo. Genius!

To implement this idea, we can use 2 different API’s (application programming interface) that will help with the backend, 1) Kanye.Rest and 2) The Cat API

https://kanye.rest

TheCatAPI - Cats as a Service, Everyday is Caturday.

The App

Open your preferred text editor (I use VS Code) and create a repository with 2 files: index.js and index.html. The index.js file is where all your JS code goes. The index.html file holds the structure and format of your webpage.

Since we are building a simple web app, we won’t be using any advanced CSS formatting or designing here. The main structure of your HTML file will look like this:

In the HTML file, be sure to have this line of code:

<script defer src="src/index.js" charset="utf-8"></script>