How to do wiring in VanillaJS
Tags: javascript, beginners, webdev
Published: 2021-08-09 23:46:54

After an unbelievable start to my blogging journey, with my first two blogs crossing over 120+ bookmarks combined, here I am with my third blog! This time around we are going to touch on the basics of JavaScript.

"VanillaJS" is a term that developers use to describe regular JavaScript. It means using the inbuilt JavaScript methods and objects without any additional libraries or frameworks.

###Why VanillaJS?
So why use VanillaJS instead of libraries or frameworks? Well, we gotta admit libraries like ReactJS are just amazing but VanillaJS is faster than any other JavaScript framework because it has fewer overheads. Moreover, Using frameworks or libraries in JS is a little like using Bootstrap or Tailwind in CSS, we might miss out on the fundamentals, it eliminates control over your abilities to solve the problem in a different most probably in a better way. For beginners, it's better to start off with VanillaJS and then shift to any framework with the confidence of knowing what actually is going on in that framework!

###What is wiring?
Wiring is basically connecting different components with a wire. Pretty much like we did in electric circuits while studying physics! Remember connecting a bulb, switch and battery using a wire? That's it! So connecting different code components like input, output and processing is what we are aiming for.
![circuit image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejdn2b8folbqi9vi77mc.jpg)

###Wiring a Button
1. Create a button in HTML & give it an id `<button id="btn-click">Click</button>`
2. Refer button using `querySelector()` in "app.js" `var btnClick = document.querySelector("#btn-click");`
3. Add event listener to button `btnClick.addEventListner("click", function clickEventHandler() {
})`
If you are an absolute beginner then do read about the querySelector(), event listener & callbacks in JavaScript at [MDN Docs](https://developer.mozilla.org/en-US/)

###Wiring a textarea input
1. Create a `textarea` input tag & give it an id `<textarea id="txt-input"></textarea>`
2. Now refer it in js file `var txtInput = document.querySelector("#txt-input");`
3. Read the `value` of the tag. You can do this only inside event. For this we are using the same event listener we wrote in 3rd point of 'Wiring a Button' `btnClick.addEventListner("click", function clickEventHandler() { txtInput.value;
})`

###Wiring a div to show output
1. Create an output `div` with an id `<div id="output"></div>`
2. Refer it in js `var outputDiv = document.querySelector("#output");`
3. Use `innerText` to write to this div dynamically when button click happens `btnClick.addEventListner("click", function clickEventHandler() { outputDiv.innerText = txtInput.value;
})`

Now our wiring is complete and the web app is ready to take input in `textarea` and `onclick` of a button it'll show output in our output `div` element.

Using this simple concept I have made two fun translator web apps:
1. Minion Translator: [See it in action!](https://minions-bananas.netlify.app/) | [View Source Code](https://github.com/Tarandeep-s1ngh/Banana-language-translator)
2. Yoda Translator: [See it in action!](https://yodatalks.netlify.app/) | [View Source Code](https://github.com/Tarandeep-s1ngh/Yoda-Speak-Translator)

![minion translator app image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quwf8b6zrmjqai2jue9w.jpg)

That's all for this one! You can check out my other blogs [here.](https://dev.to/tarandeep_singh)
Do tell me in the comments if you would like the next blog to be on ReactJS!

You can follow me on [Twitter](https://twitter.com/Tarandeep_s1ngh) and [LinkedIn](https://www.linkedin.com/in/tarandeep-s1ngh/).