How to do wiring in VanillaJS

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.

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

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! | View Source Code
2. Yoda Translator: See it in action! | View Source Code

That's all for this one! You can check out my other blogs here.
Do tell me in the comments if you would like the next blog to be on ReactJS!

You can follow me on Twitter and LinkedIn.

Comments

[Tarandeep Singh]

Thank you for sharing this! 😄 And yes there's no particular reason here to use innerText instead of textContent as both will work just fine. However, it's important to know the difference:

textContent gets the content of all elements, including and <style> elements. In contrast, innerText only shows “human-readable” elements. textContent returns every element in the node. In contrast, innerText is aware of styling and won’t return the text of “hidden” elements.</p>

[Pablo Tejada]

This would be the original wiring :)

<script>
function clickEventHandler() {
   alert('Clicked')
}
</script>

<button onclick="clickEventHandler()">Click</button>

[artydev]

The problem, with this approach, it is that 'clickEventHandler' is attached to the Window object.

[Pablo Tejada]

Is a peace of history 😀

[Tarandeep Singh]

Thanks for sharing Pablo 😄

[artydev]

Great you like vanille JS ?
Look my series on building a TodoList app in Javascript

Regards

[Tarandeep Singh]

Thanks for sharing!😀