A HTML CSS JavaScript Front End CRUD Table

Updated on 20th June, 2024: The post's cover image is replaced with a picture I had created (with the photo I had shot).

---

This is an example of HTML, CSS and JavaScript front end browser app. The GUI (Graphical User Interface) is a HTML table with a list of items. There are a set of buttons to perform CRUD (Create, Read, Update, Delete) operations on the items in the table.

The data in the HTML table are a set of rows, each row representing an item. Each item has the properties - name and quantity.

There is no back end program for this app - no web server or a database.

All you need is a browser and a text editor to copy the code (linked this post as GitHub Gist) into and run the app.

Here is a screen shot of the GUI as seen in a browser:

---

The Data

The data for this app is stored in a JavaScript array. This array acts as a database and we perform CRUD operations on this data. The JavaScript Array methods are used for this purpose. These are - push, forEach, splice and splice for the four operations respectively.

The app allows modifying the quantity value in an update operation.

The sample data looks like this:

const data = [
    { name: "Paper", quantity: 20 },
    { name: "Pencils", quantity: 8 },
    { name: "Paper-clips", quantity: 100 },
    ....
]

---

The Code

The app has three front end code components - HTML, CSS and JavaScript. Each has their respective mark-up or code defined in three files - app.html, app.css and app.js.

The HTML and CSS provide the static GUI content for the app. The JavaScript defines the initial data, the listeners for the buttons in the user interface. These listener functions drive the logic for the user actions - for example, when a button is clicked.

A status message shows user action messages like, "Selected the row 2", "Added a new item", etc.

The HTML has the GUI widgets. A HTML table, and buttons for Add, Update and Delete item actions on the table. There are also buttons for Clear (clears the table row selection, status message and input text). The First and Last buttons navigate to the respective rows in the table.

A radio button for each row in the table allows selecting a specific row. This is used for updating or deleting a selected item from the table.

At the start of the app all the data from the JavaScript array is read and loaded into the table. Then you can perform any actions as you need.

---

Conclusion

That is the front end code (we called it the app in this post) without the back end program. The back end or server side program can be a NodeJS /JavaScript, Java, Python, etc., application. That back end app would have, in general, a web server and a database. An example of such an app is an article on this website: Programming a NodeJS App.

Here is the link to the GitHub Gist for this app's source.

---