DEV Community

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

Micah Lindley on August 23, 2019

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

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

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

Collapse
 
adelekespeed profile image
adeleke-speed

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

Collapse
 
micahlt profile image
Micah Lindley

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