Just Do It Already — Conquering Javascript Line by Line.

Ada Menu demo

Step 1 — Build your page’s skeleton

We all know that HTML is the building block of any webpage application so you cant fully appreciate Javascript without knowing some HTML. To be frank this was my first time building one from scratch which wasn’t too bad. You just have to know what you want your page to look like and you’re good. Thank God for Google so you can look up a page you might want to mimic and make it your own.

index.html

Step 2 — Customizing your CSS

Once I finished up my HTML page I proceeded to make this pleasing to the eye. This was something I also avoided because it just seemed intimidating as well but we all like pretty things, don’t we? So I looked at one of my old labs and tried to figure out where to start from. Aesthetics has never really been my strong point in general so I needed a guide, played around with it to get it to my liking. Below is what my code looked like. I had to remember to link my style.css file to my HTML.

style.css
The result of my CSS- nothing fancy

Step 3 — JavaScript

This is why we are here! So to start I created a json database called dishes.json. I need a way to play around with my seed data, thankfully javascript has a fake backend server that allows me to see what I’m doing in my frontend.

Some dishes to start off with.
to run my server I used json-server --watch dishes.json. it gives me a link where I can fetch my data from: "http://localhost:3000/dishes/"
fetching my data
getting it onto the page
creating a new dish

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kosi Akporji

Kosi Akporji

A Pharmacist turned Software Engineer #changethings