We all have used input fields, handled validations, displayed error messages. With the frameworks like Angular that have advanced ways to create Forms and handle validations, the good old plain JavaScript does have some interesting features to ease our development.

In this article, I’ll discuss what is validity state, how to check the input box validity, displaying error messages, using CSS Pseudo-classes for validation states, and handling custom validation messages.

1. Validity State

The reason for the validation to fail can be known using the ValidityState interface. There are some basic validations that are applicable by default on an input box. For example,required…

While developing any web application, we have come across the need to hide or show elements based on conditions. In this tutorial, we’ll see how to toggle elements based on radio button and checkbox selections. I’ll be using a jQuery here.

Using Radio Buttons

Lets create a simple HTML with radio buttons and a label to it.

<div>
  <label for="radio1">Radio 1: <input type="radio" value="show1" id="radio1" name="radio"> </label>
  <label for="radio2">Radio 2: <input type="radio" value="show2" id="radio2" name="radio"></label>
  <label for="radio3">Radio 3: <input type="radio" value="show3" id="radio3"name="radio"> </label>
</div>

If you have multiple radio buttons under a single functionality, then make sure that all of have the same…

Firebase provides easy and flexible APIs for Authentication. Inside your app, the user can sign up using a variety of methods. The popular ones being Google, Facebook, Twitter, E-Mail.

Pre-requisite: You need a firebase account to begin. Once you have your account created, create a sample project.

Go to the firebase console and create one. I’m naming my project as ‘firebase-auth’. I’m registering this as a web-app and enabling hosting.

After the project is created, click on Authentication -> Get Started. On this screen, you can see all the methods, that the firebase provides. I’m enabling Google here.

You can…

How many times have we found ourselves disappointed when a particular wish doesn't come true? We find ourselves lost and cursing destiny. But more often than not, what happens to us is for our best. We don’t believe it at first, but you need to trust the journey, trust the process.

I have found myself in similar situations. I believed that my entire life would be spent in the wait for things to happen. I wasn’t inspired or motivated. None of the self-help articles, books, videos helped me. They seemed too ideal to apply in real-life. I did all that…

In this post, I’ll be explaining step by step process of creating a simple login form using Angular, Reactive Forms, Material UI.

1. Let’s start by creating a project first. I’m naming it login-form

ng new login-form

I have added routing, chosen CSS as the stylesheet format.

2. Add Material UI

ng add @angular/material

While installing, you have to choose the theme and other things. I’m going with Indigo-Pink.

You need to import the Material UI modules in app.module.ts I’ve created a separate module called MaterialModule in which I have imported all the material components. …

In my last post, I explained about variable declarations and difference between var, let and const.

In this article I’ll explain hoisting and scope of the variables.

Hoisting variables

Hoisting is assigning a value to a variable before it is declared.

total = 47;
var total; //Declaration after assigning a value.//Implicitly it is..var total;
total = 47;

JS implicitly adds the var keyword and declares it.

Scope of variables

There are two types of scopes — global and local. Variables with global scope are available throughout the program whereas variable with local scope is available only with the braces where it is declared.

…

Variable lets you store data in them. JS allows to declare a variable using var/let/const.

Let’s start with variable declaration

In the above sample code, we have only declared the variable(s) but have not assigned them. Unless a value is assigned, the value of the variable remains undefined.

Variable Assignment