loading...

Writing a searchable “database” with pure HTML, CSS, and JS

micahlt profile image Micah Lindley Updated on ・3 min read

This is how I created https://micahlt.github.io/renart/.

About a week ago, I found myself in a difficult situation at school. I had an AP European History assignment that required me to find lots of information about Renaissance artwork. I thought to myself, “there should just be a basic database that contains this info.”

After finishing the assignment at 12am, I was determined to find a solution for posterity that might encounter the same problem. I love HTML and CSS and don’t know SQL (or any of its derivatives) so I needed to build a “database” with pure HTML and CSS (and possibly a little JavaScript). Here’s what I came up with with my own knowledge and some stuff I scrounged from Stack Overflow.

Starting off, I created a new GitHub repository. I created an index.html file, starting off with the basic syntax:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>My Database</title>
<style>
</style>
</head>
<body>
</body>
</html>

Next, I made a simple input box.

<input type="text" onkeyup="searchFunction()" placeholder="search here" title="search">

If you’re not familiar with what’s happenning here, we’re creating a default input text box and adding the placeholder text “search here”. The onkeyup specifies that we’re going to call a JavaScript function when the enter key is pressed and the input has a value.

After this, I created a table:

<table align = "center">
<tr class = "header">
<th style="width:25%;">Title</th>
<th style="width:25%;">Artist</th>
<th style="width:25%;">Commisioner</th>
<th style="width:25%;">Completed</th>
</tr>
</table>

Basically what I’m doing here is building the header for the table. This won’t be searchable because of how the JavaScript will be written. I’m also centering the table. After this, I just added some rows using another <tr> element after the heading.

<tr>
<td>The Annunciation</td>
<td>Fra Angelico</td>
<td>Cosimo de' Medici</td>
<td>1446</td>
</tr>
</table>

You can add your own data in each column (<td>). Now, the next part was hard for me. I like to focus on HTML and CSS, but I like to pretend that JavaScript doesn’t exist. It just seems complicated compared to Python and Ruby. I scrolled Stack Overflow for a while until I found the perfect script:

<script>function artFunction() {
// Declare starting variables
var input = document.getElementById("artInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("artTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through rows
for (var i = 0; i < trs.length; i++) {
// Define the cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
}
</script>

Just add this at the bottom of your <body>. I can’t even hope to explain how this works. Now you’re done! This honestly isn’t the best way to keep a database, because your HTML page will just grow with every item you add. However, it works if you don’t want to learn SQL.

TL;DR- If you want to build a “database” without SQL, visit https://github.com/micahlt/renart and check out the art.html file.

Discussion

pic
Editor guide
Collapse
ske66 profile image
Mark Barton

Cool wee project! I would recommend using json to store and load data, that way its maybe a bit easier to handle. You could use a tool like Firebase with used a Realtime JSON Database. Very easy to setup and use if you dont like SQL

Collapse
micahlt profile image
Micah Lindley Author

Cool! Yeah, this is just a small project that I didn’t want to spend much time on. I probably could use Firebase if this were to become a larger project. The longer the HTML document, the longer the load time is and that’s not UX-friendly. So Firebase is a good option. :)

Collapse
rishirajpurohit profile image
Rishiraj Purohit

please consider creating a gist on GitHub and link it here so reading the code is pleasure.

Collapse
micahlt profile image
Micah Lindley Author

Okay! I’ve never posted on Dev before, so I wasn’t sure how this worked. 😀

Collapse
rishirajpurohit profile image
Rishiraj Purohit

welcome to the community, I hope my comment wasn't harsh, I thought you would love gist feature of GitHub and how it looks when posted at other places. I am new as well so 🙄🙄, I don't know.

Thread Thread
micahlt profile image
Micah Lindley Author

Oh, you're fine! I know about Gist; I just didn't get around to creating one for this project. 😊

Thread Thread
alvaromontoro profile image
Alvaro Montoro

You don't need to create one for the article. Use three back ticks (`) instead of one at the beginning and end of your code, then it will be formatted as a block instead of inline, and it will look much nicer :)

Thread Thread
micahlt profile image
Micah Lindley Author

Really? Nice; I’m not very familiar with Markdown.

Collapse
jeklah profile image
Jeklah

This is really cool project and interesting to see how you went about making a dB without SQL.
However I do suggest you learn SQL and convert this project to an SQL version so it can handle growth, like you said there should be a dB with this kind of info! Also SQL is pretty easy to learn the basics :)

Collapse
micahlt profile image
Micah Lindley Author

It is easy to learn (and I actually know a little tiny bit) but I wanted to see if I could do it with just HTML, CSS, and JS. :)

Collapse
jeklah profile image
Jeklah

Well you did it! Nice job!
Bonus points: get it working as fast as an SQL version xD

Thread Thread
micahlt profile image
Micah Lindley Author

Lol! 。◕‿◕。

Collapse
andjar profile image
andjar

Check out tiddlywiki.com (open source) that is also HTML/js/css and a single, stand-alone file but lets you create a lightweight wiki directly in your browser with incredibly flexible macros and filtering functions!

Collapse
12944qwerty profile image
12944qwerty

GREAT! Now I can use this for my AP Euro exam too! 😁👍

Collapse
micahlt profile image
Micah Lindley Author

Lol! Feel free to check it out, and if you want to add some art yourself, make a pull request on GitHub and I’ll merge it! Good luck on your exam! :)

Collapse
12944qwerty profile image
12944qwerty

I'll add some more things when I need to....

Great job BTW👍

Also, art.html isn't really a template for making a different database....

Thread Thread
micahlt profile image
Micah Lindley Author

It wasn’t really meant to be a template- it’s mean to be the website! 😄 I just meant that it can be used as a template if you change some things (such as the width and number of columns).

Thread Thread
12944qwerty profile image
Collapse
micahlt profile image
Micah Lindley Author

Hey, I see you’re on Scratch! Me too! scratch.mit.edu/users/-Archon-

Collapse
vlasales profile image
Collapse
micahlt profile image
Micah Lindley Author

JSON is... complicated to work with. And HTML5 web storage is only for the local user. The goal of this project was to have a standing, unchangeable database.

Collapse
taufik_nurrohman profile image
Taufik Nurrohman

Uglier in the HTML source, but definitely faster:

redotheweb.com/2013/05/15/client-s...

Collapse
micahlt profile image
Micah Lindley Author

Interesting... I’ll look into that. Pretty cool!

Collapse
morningglory2905 profile image
morningGlory

Really cool!!!

Collapse
aliglelo profile image
Tech Master

hello,
I recently visited your project and I think you have done a good effort
I also opened a pull request in order to make it more good
I hope you like it

Collapse
adelekespeed profile image
adeleke-speed

This is a good read. Absolutely loved it! Well done.

Collapse
micahlt profile image
Micah Lindley Author

Thanks! That’s really encouraging, because this is my first post.