This content originally appeared on DEV Community and was authored by Tarandeep Singh
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
- Create a button in HTML & give it an id
<button id="btn-click">Click</button> - Refer button using
querySelector()in "app.js"var btnClick = document.querySelector("#btn-click"); - 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
- Create a
textareainput tag & give it an id<textarea id="txt-input"></textarea> - Now refer it in js file
var txtInput = document.querySelector("#txt-input"); - Read the
valueof 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
- Create an output
divwith an id<div id="output"></div> - Refer it in js
var outputDiv = document.querySelector("#output"); - Use
innerTextto write to this div dynamically when button click happensbtnClick.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:
- Minion Translator: See it in action! | View Source Code
- 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.
This content originally appeared on DEV Community and was authored by Tarandeep Singh
Tarandeep Singh | Sciencx (2021-08-09T23:46:54+00:00) How to do wiring in VanillaJS. Retrieved from https://www.scien.cx/2021/08/09/how-to-do-wiring-in-vanillajs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.