DEV Community

Cover image for How to do wiring in VanillaJS
Tarandeep Singh
Tarandeep Singh

Posted on

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.
circuit image

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

minion translator app image

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.

Discussion (8)

Collapse
lukeshiru profile image
LUKESHIRU

Is there a particular reason to use innerText instead of textContent? Other than that, I think I would use arrow functions more heavily, and stuff like URL to make it easier/safer:

/** @type {typeof document.querySelector} */
const $ = document.querySelector.bind(document);

// We use the `URL` class here, instead of just a string.
const endpoint = new URL(
    "https://api.funtranslations.com/translate/minion.json"
);

/**
 * Fetch that always parses to `json`.
 *
 * @param {RequestInfo} input
 * @param {RequestInit} [init]
 */
const fetchJSON = (input, init) => fetch(input, init).then(res => res.json());

// Every time the input changes, with set the `text` search parameter of `endpoint`.
$("#txt-input").addEventListener("input", event =>
    endpoint.searchParams.set("text", event.currentTarget.value)
);

// When we click on the button, we use `fetchJSON` with the current value of `endpoint`.
$("#btn-translate").addEventListener("click", () =>
    fetchJSON(endpoint.toString())
        .then(
            ({ contents: { translated } }) =>
                ($("#output").textContent = translated)
        )
        .catch(console.error)
);
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
tarandeep_singh profile image
Tarandeep Singh Author • Edited

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>

Collapse
artydev profile image
artydev

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

Regards

Collapse
tarandeep_singh profile image
Tarandeep Singh Author

Thanks for sharing!😀

Collapse
ptejada profile image
Pablo Tejada • Edited

This would be the original wiring :)

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

<button onclick="clickEventHandler()">Click</button>
Enter fullscreen mode Exit fullscreen mode
Collapse
artydev profile image
artydev • Edited

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

Collapse
ptejada profile image
Pablo Tejada

Is a peace of history 😀

Collapse
tarandeep_singh profile image
Tarandeep Singh Author

Thanks for sharing Pablo 😄