How to Build a Simple Web Apps using JavaScript

How to Build a Simple Web Apps using JavaScript

In this post, we'll discuss How to Build a Simple WebApp 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:

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

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:

This is image title

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

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

The “defer” informs the browser to wait until the page loads to run the JavaScript.

Next, we should create a div where the Kanye quote will be placed. Let’s give this div an id called “quotes.” That way, we can easily find this div with this specific id when we need it.

Pro-Tip: It’s always best to add id’s to your important HTML tags, especially the ones that you know you will need to grab and call on in your code. It is easier to find HTML elements by “id” than class name because id’s HAVE to be unique!

This is image title

We should make a button that when clicked, will display a random cat photo on the browser. The button will have an id of “give-cat.”

This is image title

Lastly, create a div with an id of “cat-pic”, which will hold the cat photo.

This is image title

Now, let’s go to index.js file and start coding JS!

Use the Kanye API to Fetch Kanye Quotes

The first step we should is find the div where the quote will be placed and declare it as a variable. We can do this by typing:

let quotesDiv = document.getElementById('quotes')

In order to retrieve data from the Kanye and Cat API’s, we need to utilize the fetch function. For this first part, we are sending a GET request to the Kanye API.

This is image title

The fetch returns an object as the response from the request. We call the .json () method on the response to parse the response text as JSON.

This is image title

Next, we do another .then(). Here we receive the JSON object that we can finally use to manipulate the DOM! We can call this new JSON object quote.

This is image title

Remember that quotesDiv variable we declared earlier? We need to use it here now. In order for us to append this quote to the DOM, we can call the innerHTML property on quotesDiv.

Taking a look at how the JSON object looks like, we can see that quote is also a key.

This is image title

Thus, we write:

This is image title

The whole block of code should look like this:

This is image title

Awesome! On to the next deliverable!

Use the Cat API to Fetch Cat Pictures

We now need to add onclick functionality to the button. Grab the button by finding it by the id and declare it as a variable called catButton.

let catButton = document.getElementById('give-cat')

Next, we need to add an event listener to the button. The event listener takes two arguments: 1) the event 2) a callback function to handle the event.

catButton.addEventListener("click", evt => {

Before we do the fetch, let’s designate the part of the DOM where the cat photo should go. Find the div with the id “cat-pic” and declare it as a variable.

let catDiv = document.getElementById('cat-pic')

Now, we make a GET request to the Cat API. In the last .then(), we have to do a forEach method on the JSON response since it is an array.

This is image title

We call the innerHTML property on the catDiv. Let’s insert a cute header and an image tag for the picture. “URL” is a key in the response object, so we need to use it here in order to display the image.

This is image title

Let’s go back to our code and take a final look at it.

This is image title

It appears that we also accomplished our goal of completing this task in about 20 lines of code!

The more practice you have with JavaScript, the more fluent you will become in the language (obvs). Try and google “fun APIs” to use for your next creative project. Who knows? Maybe you’ll end up creating the next Instagram.

Thank you for reading!

javascript API webdev coding

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top 10 API Security Threats Every API Team Should Know

Learn what are the most important API security threats engineering leaders should be aware of and steps you can take to prevent them

What Are Good Traits That Make Great API Product Managers

What is API product management and what can you be doing to be a better API product manager — get aligned with SaaS and enterprise software requirements. This guide lays out what is API product management and some of the things you should be doing to be a good product manager.

Consume Web API Post method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will discussed about how to consume Web API Get method and display records in the ASP.NET View. Here, ...

Consume Web API Get method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will discussed about How to Consume Web API Get method in ASP NET MVC. Blog : http://aspdotnetexplorer...

Consume Web API Put method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, we learned how to consume Web API Get and Post methods in the ASP.NET View. Here, we will see how to con...