Image for post
Image for post
( Vanilla — having no special or extra features; ordinary or standard. )

How I made my first project using Vanilla JavaScript

“What is Vanilla JavaScript?”

You may ask. Vanilla JavaScript is just regular plain old fashion JavaScript — without the use of any libraries or frameworks. Frameworks and Libraries allows users (pre-dominantly programmers/developers) to utilize pre-set functions/methods into their JavaScript project to make their lives easier, and to make their code “dry-er”.

“Why did you do that, and not make it easier for yourself?”

Well, if you haven’t read my previous blog before, I’m currently in school at Juno College for an immersive Web Development bootcamp. In this camp there is a lot of content taught to you in a short period of time, and you’re expected to apply these concepts to your projects short after being taught. However, back then it was harder to differentiate the use of several concepts, such as Vanilla Javascript and JQuery Library.

“Whats the difference between the two?”

“Is that a one JQuery function or a regular JS function?”

“Why do we drive in a parkway and park in a drive way?”

Those were the questions I asked myself.

The last time I was physically present in class, we were introduced to JQuery library and then the quarantine happened. Like many other institutions, school was put on pause until further notice. As a result, I was left confused with all of these questions, and I could not properly distinguish the difference between these two concepts for the next 3 weeks. Be that as it may, this break turned out to be a blessing in disguise.

“Why was it a blessing in disguise?”

I ended up utilizing the time during this break to understand the core principles of JavaScript before trying to use JavaScript Frameworks and Library shortcuts, and the results were better than I had expected. Breaking down the simple concepts of JavaScript alone and creating something from just that, had allowed me to slowly understand it in detail and create functions that work in a larger scale than I was able to before.

Did you know you can do this using Vanilla JS?

Image for post
Image for post

You can actually get your computer to speak to you with a simple code:

const sayOutLoud = new SpeechSynthesisUtterance(‘hello, Miguel’)

window.speechSynthesis.speak(sayOutLoud);

I was shocked when my computer greeted me when the page loaded. Try it out, turn up your volume.

Also, you don’t need JQuery to select elements in the DOM, as an additional option:

document.querySelectorAll(‘.exampleClass’);

This will allows you to go into the DOM (document), scan for all selectors (using querySelectorAll) with the class name of “.exampleClass”. This code will link the two together. You can also select elements by its ID, tags, etc. The same as you would JQuery. This is just another method to use incase you didn’t want to/know how to use their library.

“So now what?

Now I have finally been able to complete my third project, which is fully functional, and created solely by me using only Vanilla JavaScript. By doing it this way, I can confidently move on to the use of other JS libraries with a better understanding for the future. Using JQuery or other Libraries in my next project will be much easier for me to grasp and apply, while understanding the difference between the concepts. I personally would recommend learning Vanilla JavaScript before throwing any frameworks and libraries into the mix. At the end of the day, I thoroughly enjoyed the process of creating Project #3 at Juno College, and I can’t wait to see what we have in store for us in the future!

- Miguel Cabrera

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