JAVASCRIPT

Learn Javascript – Build a simple Javascript web app (Update DOM)

learn javascript
Written by encodedBicoding

learn javascript

Javascript is a very interesting language, and today we will learn Javascript by building a simple Javascript web app called ‘update DOM’.

Learning any programming language is not easy, it often takes time and practice and sometimes, a good mentor. I happen to mentor a few engineers in Lagos, Nigeria.

To learn javascript, this tutorial requires you to have prior knowledge of HTML and CSS, as I will not cover how the HTML and CSS code works. If you do not have prior knowledge on the above languages, I recommend that you go through my teachings on the said languages. Follow the series How to become a full stack engineer in less than 6 months.

Lets Begin to learn javascript…

learn javascript update dom image one

Steps to Begin…

    • create a new folder on your machine and name it update_DOM.
    • open the folder wit your favorite text editor.
    • inside the update_DOM folder, create 3 files: index.html, style.css, main.js

I assume you already know how to link CSS files with your HTML files, to link JS files with your HTML file, add the following code snippet at the bottom of the body tag.

It is ideal to add your JS files there because most times the JS code will depend on DOM element you have to dynamically create and could throw an error if the JS code reads before the body tag.

code snippet: <script type='text/javascript' async src='main.js'></script>

Your code files should look like the images below…

HTML

learn javascript html code snippet

CSS

learn javascript css code snippet

JS

learn javascript javascript code snippet

 

Let us explain the JS code…

I want to assume your code is properly styled and works well. If it doesn’t, share the problems on the comment section.

We created a function named startApp, this function holds all the variables needed in the app in it’s scope.

The main components of the app are…

  1. Input field: This is where we will type what will be updated on the screen.
  2. Submit button: This button is the call to action button.
  3. Screen: Receives what to be updated.
  4. Clear button: Clears the screen and the input field.

document.querySelector helps us selects a DOM element so we can perform some javascript manipulation on them. This manipulation includes, but not limited to, ability to add a click event on the DOM element.

we then declare a value variable which will hold the value of the input field. Using document.querySelector on the input field enables us add event listeners on the input field.

it is worthy of note that almost everything that happens on a website is event driven. you have to do something for something to happen.

The Input Field

We listen for a keyup event on the input field, a keyup event simply means when you type on it, every time you release the key register the value you typed in. There are many key events available at your disposal.

In this case, every time we type into the input field, we assign the value we have type to the variable called value. We did this this way, so we can make the value relative to the entire startApp scope so that the button can have access to it.

The Button

Since the button has access to the value variable, we can check if it empty as we click on it, and if it is empty, we alert an error message that reads ‘Please insert something to display‘. 

If value is not empty, we create a new paragraph element, give it a class attribute and assign it’s innerHTML value to that of the value variable.

we also check if the screen already displayed something, if it does, we empty the screen, and appends the paragraph we created to the screen.

 

The Clear Button

What this just does is to remove every value on the screen and the input field.

 

Have any questions? use the comment area.

 

About the author

encodedBicoding

Software Engineer || Tech Enthusiast.
Ex @andela
Github: https://github.com/encodedBicoding
Geek Name: EncodedBicoding
Real Name: Dominic Isioma Olije

2 Comments

Leave a Comment