neoG Camp 2023 waitlist is open

Need Help?

lessonFour: javascript in browser or vanillaJS

The name "javascript in browser" is super funny. JavaScript was exclusively for browsers before node came along. Since we started our first class using a CLI app that was run using node, this name is needed to differentiate.

what are we going to cover?

  1. Attaching events to HTML elements
  2. Taking user input in the browser
  3. querySelector()
  4. Showing output in the browser
  5. Making network calls to get relevant data.
  6. Error handling network calls

If you know all of this, this video is not for you. It's aimed at beginners.

what do you need for this class?

  1. VSCode or any code editor.
  2. Git to track your changes
  3. Browser to run your app, chrome preferred.
  4. PostMan to test the API call

ex01: setup

  1. create a new repo
  2. initialize index.html file
  3. put the title, and heading in place.
  4. initial commit, publish repo.

ex02: using javascript


  1. Two ways of using JS on client
  2. alert and prompt for output and input


  1. use external JS
  2. show prompt to get user data
  3. show alert box to give user output

ex03: wiring button click


  1. create a button in HTML
  2. reference Button using querySelector()
  3. add an event listener to button
  4. console "clicked" on click.


  1. querySelector()
  2. .addEventListener("click", callback) and click events
  3. concept of callbacks in javascript

ex04: wiring textarea input


  1. put a textarea input tag.
  2. reference that in javascript.
  3. read the value of the tag. You can do this only inside event. There are two events which you can listen to
    1. onchange on textarea, we will learn this method in next class while doing React
    2. onclick on button, let's do this now.
  4. console this value to complete the exercise. refresh and try few more times.


  1. Every element on the page is represented as a property of an object. Remember objects? Think of it like this:

     * this is just for simplification and understanding
    var htmlPageObject = {
      "input-text": <textarea></textarea>,
      "input-btn": <button></button>,

    This object is called Document Object Model (DOM) as it models the entire HTML document in an object. And thus, to access those properties we use methods like document.querySelector().

    If this seems too much to understand, ignore it, come back to it after you have done some web dev. A lot of experienced devs too don't know about it. Knowing is definitely better.

  2. Everything you do on a web page triggers an event. There are multiple events like onscroll onsubmit etc. and knowing about it will help you respond to user's needs. The more web dev you do, the more you'll know about these.

  3. The good thing about these events is that you can plug your own callback or functionality in each of these and introduce custom behavior. Think of the animation shown when user starts scrolling.

live exercise: querySelector

querySelector() works on the principles of CSS selectors. It selects and returns the first element which matches the query.

You can open this mdn doc for reference. And then let's do some exercises.

What will be the query you would write for each one below? Select the first...

  1. ... textarea tag.
  2. ... element with a class btn-primary.
  3. ... element with an id input-btn.
  4. ... input element with an attribute name='translator'.

read more

  1. Knowing this is extremely useful in web development. Useful in JS, in CSS and also in automated unit, integration, and e2e testing.
  2. More about querySelector() on this mdn doc.
  3. bonus (Optional) blog: write a blog about the selectors. Have some complex quizzes to test the learning.

ex05: wire a div to show output


  1. create an output div
  2. reference it in js
  3. use innerText to write to this div dynamically when button click happens


  1. innerText writes text.
  2. innerHTML write HTML directly.
  3. there are other methods like
    • creating a DOM element using document.createElement(),
    • or using document.createTextNode() to create textNode,
    • and then insert it using insertBefore() and appendChild(). Explore these pieces and write blogs on them when you understand this.

bonus (Optional) homework

We did CLI exercies around leap year and prime numbers. For practice you should make both these apps now in browser. It would be much more visual and easy to use! :)

what next?

We have a JS app that takes user input, does processing, and then shows an output! This is essentially what most apps do.

Think of posting a status on Facebook. It takes your status via the input box, you press the post button and then it shows the posted status below in the newsfeed.

However, it does one thing more: making a call to server. The server is where you do heavy processing, it's the place where you can save your data. This is the reason when you post something from your laptop you (and others) can see it on their mobile i.e. other clients too.

This is called client-server architecture in short. Client requests data, and or submits data. Server maintains data.

Meanwhile, there are some BaaS (Backend as a Service) which you can explore to store your data and do processing without setting up anything. See Firebase and AWS Amplify. These are two are the best and are mostly used in the industry.

For now, we will see how to make a network call from the browser and talk to server.

ex06: call a mock server (from Postman)


  1. Welcome Postman the industry standard GUI to test backend APIs by FE devs.
  2. Make sure that this server is up: tanay test server
  3. Fire a request from Postman to this API with query text="testing"
  4. check that output has text, translated text, and other fields.


  1. Read about HTTP methods: GET, POST, PUT, DELETE, etc.
  2. The call we are making is a GET call. It's used to get data from server
  3. We are using a mock API as the translation API is rate limited to 5 per hour.

live exercise

Call the server above with different text and see the contents of the text reflect back on what you sent.

Does this work for you?

ex07: call a mock server (from JS)


  1. Use fetch() in your browser to call the server from JavaScript.
  2. Use browser console to test this out.
  3. Change output and test again.


  1. Fetch is built in all modern browsers and can be used to talk the servers.
  2. Earlier xhr was used extensively, you can read about it online.
  3. Browser console is a good place to test something.

ex08: understand promises

fetch() call is essentially returning a promises. It says that you can go ahead with the execution and don't wait on me, I'll let you know when I get the data.

This is extremely imporant in browser. You don't want your user to not be able to click on something, or everything to stop when the browser is getting data. This is asynchronous programming.

How would we tell fetch() what to do with this data? By giving it a callback inside the .then() of promise.

NOTE Async programming, event loop, callbacks, promises, etc. these things take time to wrap our heads around. However, these are important concept. You don't need to understand it right away, concentrate on programming apps for now. But before going to any interview, make sure you know these.

ex09: wire fetch call in-app


  • move the fetch call to fire when button clicked
  • parse the data from the output.
  • update the output from .then() of the fetch call


  • server responses are never the only thing which you need. there's always extra data and information around. this is why POSTMAN and documentation tools like SWAGGER are useful for FE devs.

BONUS (Optional): Look into encodeURI() and use it to make sure the URL is encoded. Learn why encoding is needed.

ex10: error handling


  • make sure that API error is handled


  • .catch() takes a callback and the error is passed to as an argument to the callback.
  • API errors are not rare, knowing how to handle errors are useful when the data is coming from server.

ex11: replace the mock url


  • find the URL on
  • when everything works just replace the URL with the actual.


  • sometimes you work with mock APIs and then use PROD API in production. this is a good practice for that. generally, in real life we have env variables which tells the software where it is hosted and depending on the environment the API and many other settings are used.
  • think of payment site, to test it while developing will the developer always use real credit card to test the site? No, that's why there are fake CC.

bonus (optional) exercise: style it up

See the styling of and make your app look pretty like this.

The best way to style the app like this is to start from scratch and remove any styling we have done during this video.


  • for markSix you have to make this app, the same app which I made live.
  • for markSeven take any of the translation APIs on the website and use it to create your own fun translation app. Give it your own style, and maybe use some SVGs. Give it your own flair. And if you don't get any ideas don't do much just change the color and font and you'll have a new app.

stuck? need help?

If you have doubts anywhere during levelZero, we have a 21k+ strong developer community on Discord.

Go to Discord Server and ask doubts in the general-coding channel.