Listening for a Click event outside a component is a very common task for any web apps. It gives more dynamic look to the web app and is great for a better user experience. There are a few npm packages that solves this problem but with a little understanding this…

In our previous chapter: DOM Manipulation: Taking Input from User and Displaying On Site, we learned how to take input from user and display it on our app. In this chapter, we will learn how to use create a simple Todo list. What We Need To create a todo we will need: List…

In our previous chapter: DOM Manipulation: Simple Click Counter, we learned how to update our HTML DOM using Javascript. In this chapter, we will take input from user and display it on our site. Getting Started First let’s start with our files. Create a folder and inside that folder create two files. …

In our previous chapter: DOM Manipulation: Manipulating HTML Elements using Javascript, we learned how to target elements and update them using JS. In this chapter we will build a Click Counter using those skills. Starting From the Scratch Create a new folder, we will name it click-counter. Right click on that folder and select…

In our previous chapter: DOM Manipulation: Intro to DOM, we learned how to access HTML Elements using Javascript. In this chapter we will access these elements and manipulate them to our needs. First Thing First: Getting to know your HTML Element Object Each HTML Element Object has lots of properties and methods attached to them which can be overwhelming at…

The DOM (Document Object Model) or HTML DOM is the standard object model and programming interface for programming. HTML DOM is the standard way to get, change, add or delete HTML Elements. Finding HTML Elements To manipulate out HTML DOM first we need to target our HTML Elements. …

Every programming language have their own data type and structures that may vary language to language. In Javascript there are two type of data: Primitive Values Objects Primitive Values Primitive Values are types that are not objects and don’t have any methods tied to them. Javascript Primitive Values are: Boolean…

VSCode (Visual Studio Code) is code editor on steroids which helps writing codes easier and as enjoyable as possible. VScode has some extensions that makes it a far better experience. To set up VSCode for web development first download VSCode from here. …

Javascript is a scripting language that dynamically update content, control multimedia, animation and pretty much anything in the browser. It is currently the only language that is supported in browser. To get started with writing Javascript on the web few steps are required. First let’s create a folder in a directory…