Manipulating Document Object Model | CV Building | To-Do App

I made a to-do app using the concepts of JavaScript

Hello guys! I hope you all are doing good. So, here I am in the 6th week of jadu learning MERN-Stack development. We already started JavaScript in the previous week and this week we are getting deeper into it.

15/03/2021

Following are the topics we covered in today’s class.

• Functions
• Primitive variables
• Non-primitive variables
• Document Object Model Manipulation
• Event Listener

Functions

Functions make our code readable, reusable, and less error-prone. If we have 10 lines of code that are repeating 3 times in our program in different places, we can put those lines in a function and only call the function when needed. This way we only have to write 3 lines of calling the function without writing 30 lines of code.

We can also pass arguments to functions. Arguments are dynamic values that we want to give to a function while calling it.

A function also has a return type. If we do not write the return type then by default it is set to undefined.

Below is an example of a function. This function needs 2 arguments, the first number, and the second number from a user, and add those numbers. After adding it return the sum of those numbers to the user.

function add(num1, num2)
{
sum = num1 + num2;
return sum;
}

Primitive variables

Primitive variables are those variables that are referred by value. In this type of variable if we assign a variable to another variable then the value of the first variable is assigned to the other one. If the first variable’s value changed then the other variable value does not affect because the other variable is pointing towards the value of the first variable. For example, if we have the following code.

Name = “any”;

Name2 = Name; // here name2 will point to “any” the value, not the Name itself.

If the value of Name changed then Name2 will not be updated and have the same value of “any”.

Integer, String, and Boolean data types are primitive variables.

Non-primitive variables

Non-primitive variables are those variables that are referred by reference. In this type of variable if we assign a variable to another variable then the address of the first variable is assigned to the other one. If the first variable’s value changed then the other variable value also affects because the other variable is pointing towards the address of the first variable.

Arrays, objects, and functions are non-primitive variables.

Document Object Model (DOM) Manipulation

So, If I put it simply then DOM manipulation is to change the document object model or HTML and CSS of a webpage using JavaScript. We can change anything of the DOM using JavaScript. We can create HTML tags, change CSS properties, and manipulate our webpage with the help of JavaScript.

In order to change an HTML element, we first target either it’s id, class or tag and access it. We can target an element using the following built-in functions.

• querySelector
• getElementById
• getElementsByClassName

In the querySelector function, we can target an element either by its id, by class name, or tag. This will return us the targeted element and we can further change its properties.

In getElementById, we can only access an element via its id. Using the id of an element we can target and access it by this function and manipulate it.

In getElementsByClassName we can only access and element via its class. We know that more than one HTML tags have the same class, and therefore this function returns a list of all the elements that have a class.

Event Listeners

If we want to do some action when a button is pressed on a webpage then we can use Even Listeners. Not only a button but if a text box text is changing then we can also use an event listener to track that. There are several even listeners in JavaScript that come into handy when needed.

16/03/2021

First of all, I wanted to tell you that I made a to-do list app using the knowledge I learned from Jadu. This app is purely made in HTML, CSS, and JavaScript. I am so excited about developing small stuff using JavaScript.

And also I bought a football to do some exercise. Exercise is very good for physical health as well as mental health. So till now, my routine was to sit in front of my laptop from morning till evening but now I have time to play some football. This football idea was shared by a jadu fellow in our community session and learning from others is super beneficial.

Now coming to today’s class, we learned about CV building. It is very important for people to create good CVs and write the most relevant things in that.

So, A resume or CV is a one-to-two-page document that presents information about your professional experience, educational background, and skills. A resume is a document that simply presents a person to the world or recruiters. These days recruiters are using both CVs and Resume words interchangeably so It is actually the same thing.

Just like a resume is important, a cover letter is also important. A cover letter is a summary of your professional background and requests to take you to the interview. Both of these are super important while applying for a job.

19/03/2021

I learned in today’s class that we can also use classes and objects in JavaScript just like other languages. But behind the scenes in JavaScript classes are functions as well but classes help to organize our code and increase readability like functions.

In other languages when we define a constructor for a class, the constructor has the same name of that class but in JavaScript, it is totally different, and I think it is better because the constructor has the name “constructor”. This helps developers to understand code more easily.

So, today I also learned about the local storages of the browser which we can use to save any data permanently using JavaScript. Even if we close our browsers and restart the PC, the data still remains, so basically, these local storages are like a database. I made a signup and login page already and now I am thinking to update these pages with these local storages so when a user will sign up then he/she can also sign in later. And that’s it for this week.