Let’s Build a CRUD Website with HTML, CSS, JavaScript, and an External API

In this article, we will give you a tutorial for creating a web application with just only basic HTML, CSS and JavaScript (based on Bootstrap 5) to perform CRUD operations. Well, CRUD operations are the four basic operations of manipulating data including Create/Construct, Read, Update and Delete. Furthermore, our CRUD operations will perform by the use of an external API from MeCallAPI.com. If you want to try a mockup API for CRUD and authentication operations, feel free to check on the website.

https://www.mecallapi.com/

You can also check an example of what we want to achieve in this article here: https://www.mecallapi.com/crud/

https://www.mecallapi.com/crud/

Software Installation

You only need a Text Editor/IDE (VS Code, Notepad, etc.) and a web browser (Chrome, Firefox, Edge, etc.) to do this tutorial!

💡 Efficient methods to make HTTP requests in JavaScript:

Mastering API Requests in JavaScript: A 2024 Guide to Fetching Data

👉 To read more such acrticles, sign up for free on Differ.

Let’s Code! (HTML and CSS)

Staring for the HTML which are documents designed to be displayed in a web browser. There are more than a hundred of HTML elements you can choose to put on your HTML file and make the magic happen.

Create index.html with the following links:

• Bootstrap 5 framework to make your life easier to create a responsive web (line 9 and 54)
• Sweetalert for easily creating nice popups using JavaScript (line 53)
• index.css for defining extra CSS (Cascading Style Sheets) to style your index.html in addition from the Bootstrap (line 13)
• index.js for JavaScript using in index.html to call API for CRUD operations (line 52)

Create index.css to define extra CSS (Cascading Style Sheets) for your index.html in addition from the CSS provided by Bootstrap.

Read operation (JavaScript)

Create file index.js to call an API for CRUD operations starting from Read.
API URL: https://www.mecallapi.com/api/users
Method: GET

To read data with JavaScript, we will use AJAX (Asynchronous JavaScript And XML) technique to have our web site update asynchronously. Concretely, we will have data exchange using API in the background. Thus, the data is retrieved, we will have our web page updated without doing a refresh.

We will use XMLHttpRequest to call an API for retrieving data in JSON and display/update such data on the web page. To update the data on the web page, we will manipulate HTML DOM (Document Object Model). In our code, we will update the data in table by referring to the id of the HTML data table element, namely (mytable) in line 21.

Open index.html on a web Browser, you will see the result:

Data from the API showing

Create operation (JavaScript)

API URL: https://www.mecallapi.com/api/users/create
Method: POST
Sample body (JSON):

{
    "fname": "Cat",
    "lname": "Chat",
    "username": "cat.chat@mecallapi.com",
    "email": "cat.chat@mecallapi.com",
    "avatar": "https://www.mecallapi.com/users/cat.png"
}

Add the following code in index.js

Refresh index.html and try to perform the create operation:

Click Create

Input data

New data is added

UPDATE operation (JavaScript)

API URL: https://www.mecallapi.com/api/users/update
Method: PUT
Sample body (JSON):

{
    "id": 11,
    "fname": "Cat",
    "lname": "Gato",
    "username": "cat.gato@mecallapi.com",
    "email": "cat.gato@mecallapi.com",
    "avatar": "https://www.mecallapi.com/users/cat.png"
}

Add the following code in index.js

Refresh index.html and try to perform the update operation:

Edit the newly added user

Input data

Data is updated

DELETE operation (JavaScript)

API URL: https://www.mecallapi.com/api/users/delete
Method: DELETE
Sample Body (JSON):

{
    "id": 11
}

Add the following code in index.js

Refresh index.html and try to perform the delete operation:

Delete the newly added user

Popup is showing

Data is deleted

Conclusion

That’s a wrap! Hopefully, this tutorial will help you understanding the basic of developing web application by using just HTML, CSS, and JavaScript. With the basic that you have, I strongly believe that you will be able to faster adopt popular frameworks in the market, such as, React, Angular, Vue. And in some cases, you might not need to use those frameworks at all.

Article by Karn Yongsiriwit, Ph.D. College of Digital Innovation Technology, Rangsit University

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: CoFeed | Differ
• More content at PlainEnglish.io