Fancy stuff: HTML + JavaScript

Photo by Florian Olivo on Unsplash

I will get straight to the topic.

In very simple terms, HTML provides a static structure to a web page and JS does the dynamic tasks.

As a hardware engineer, you are not expected to make production level web pages. Just slap some basic HTML and some JS together and you have something much much better than your regular way of documentation.

Let’s learn with some easy examples.

This is an example of a simple html page with some links.

Copy paste the code into a text file, save it with .html extension and open with Chrome.

This is how it looks like when you open it.

demo html

So what we did here is, created the main header with <h2> tag, then a sub header with <h3> and <h4>.

Then we added some links to other websites and gave those some meaningful names. That’s it.

And the contact part was just for fun.

Feel free to change the websites, the headers and see how easy it is.

Sometimes this is all you might want to do.

And sometimes you want to do something more fun. Like dynamically populate a table from text file.

This is the full code to achieve that. One thing to note here is, Chrome might block access to the file, because it is not very safe from a browser security point of view. So as long as your file is in the same domain, it should be fine.

This is how the text file looks like:

cats
dogs
insects

Enjoy the free code. I have added comments wherever needed, but rest of it is pretty straightforward and the parts which you don’t understand, you can just copy paste!

https://gist.github.com/asjain/6107fb6ecfde7b4d2cf884f4677c3c6e

(Somehow this gist is not showing up here, just click on it, it will take you to my github)

This is how the output table looks like

Now all you need to do is update that text file and the table will be dynamically populated. This is very useful when other team members don’t need to learn html and they can still benefit by just changing the text file