DEV Community

Micah Lindley
Micah Lindley

Posted on • Updated on

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

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.

Top comments (30)

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

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
 
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

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

Lol! 。◕‿◕。

Collapse
 
ri5hirajp 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

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

Collapse
 
ri5hirajp 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

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

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

Collapse
 
12944qwerty profile image
12944qwerty

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

Collapse
 
micahlt profile image
Micah Lindley

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

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
12944qwerty

Ah....

Collapse
 
micahlt profile image
Micah Lindley

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

Collapse
 
andjar profile image
andjar • Edited

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
 
mahrosh27 profile image
mahrosh

hi, im abit confused on the last part on which you link the stack overflow. I have made a few html websites each with its own separate page on microsoft visual studio. Would it be best to add the same stack overflow on each of the codes i have made? Shall i do a separate github for each code? xx

Collapse
 
notizzio profile image
Notizzio

That's really a very very great work! btw how i can make the table header visible when i search?

Collapse
 
micahlt profile image
Micah Lindley

Hmmm... That's an interesting question. There's a lot of stuff I would change if I was to rebuild this project since my knowledge of the web has increased many times since I wrote this. A fixed header would be one of the things I'd add. Probably the easiest way would be to separate the header into a different table in the HTML, though it would be cleaner to add some JS logic that simply unshifts the first row of the table to the actual results.

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
 
morningglory2905 profile image
morningGlory

Really cool!!!

Collapse
 
vlasales profile image
Vlastimil Pospichal
Collapse
 
micahlt profile image
Micah Lindley

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.