Writing a searchable “database” with pure HTML, CSS, and JS
Tags: html, css, javascript, showdev
Published: 2019-08-23 20:24:35

> This is how I created [https://micahlt.github.io/renart/](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](https://github.com/micahlt/renart) and check out the `art.html` file.**