Just Do It Already — Conquering Javascript Line by Line.
If you know me well enough you will know these two key things about me. First of all, I am Nigerian(Igbo to be exact).Secondly, I love to cook especially my local dishes(yesss to rice and stew!). Ok enough about me, let’s get to the point of this post. At the Flatiron School my instructors always reiterate, the best way to learn is by doing… make a mini project. So I decided to put that into action this time around relearning Javascript. My focus in this post is to show you how I built my basic SPA(Single Page Application) called Ada’s Menu.
The last time I took Javascript it was intimidating but this time around I’m able to face Javascript in the face and say “Show me what you got!”. So during my break I found some cool Javascript projects that helped me solidify the basics I struggled with prior. So after that, I decided to create something simple.
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.
In case you were wondering, <script tags> are on the bottom of my body tags. Add your classes and id’s as you like not only to help with CSS but to help you grab things off the DOM(Document Object Model). Once I finished up my HTML page I proceeded to make this pleasing to the eye.
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.
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.
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/"Now that my server is up and running I can start to build my page brick by brick with the following codes below:
This my friends, completes my menu. I’m glad I took the plunge and did this mini project. It definitely helped me get over my fears of JS. Initially, Javascript can be intimidating but if you take the time without the stress, of course, to dissect it as you’re learning , it makes it all the more bearable. Just to think that 6 months ago I wasn’t able to do any of this. It’s not much but its something and we have to learn to celebrate the small wins. Now I can say to Javascript:
Now that I have passed my Javascript assessment. I am excited to enter my 4th Module at Flatiron to see what ReactJs has to offer.
Thank you all for reading!
