Category: Javascript

Dropzone.js is a lightweight JavaScript library which provides drag and drops file upload with preview.

It works with or without jQuery within the project and also it doesn’t require any other libraries.

It doesn’t upload the file to your server. For uploading, I am using PHP in this tutorial.

You not only upload the file by drag n’ drop you can also use file chooser dialog that’s open when drag n’ drop widget gets clicked. While uploading it shows the progress bar, generates thumbnail image and shows file size in preview after uploading.

How to upload a file using Dropzone.js with PHP


By adding file upload to the project, there may case arrives where you have to check image width and height before upload if you only allowed image files for uploading.

This is very common in Job Application Forms where the user has only can upload its profile photo of given dimensions other it’s not uploaded.

In this tutorial, I explain you with an example how to implement it. For uploading, I am using AJAX and PHP and done restriction with JavaScript.

How to Validate Image width And Height Before Upload Using JavaScript

AJAX Javascript Jquery PHP

In this tutorial, I talked about a two jQuery method – switchClass() and toggleClass(). As their name suggest its related to classes, and they both are used for changing or replacing the class from an element.

When did it use?

You can use them to show the change of state of the element according to the condition, toggling classes within the elements or may be in some other cases.

For example – You have an Education website where students are assigned to courses. When student reading lessons there is an option for setting Lesson state to read or Unread. For showing the change of state you have created two classes one for unread and another for read which you want to use according to the state of a lesson.

In this kind of case you can either use removeClass() and addClass() for removing one class and add another class to an element or do it using a single method (switchClass or toggleClass).

Within tutorial, I am creating a small example for that where I use switchClass() method and various other examples to explain both methods.

How to use switchClass and toggleClass in jQuery

Javascript Jquery

The check and uncheck all functionality basically is seen where there is the large list of records are available. This small feature makes little easier for the users to perform an action.

You may have seen it on Gmail, WordPress Admin dashboard.

In this tutorial, I show how you can implement this functionality with jQuery and JavaScript.

How to Check and uncheck all using jQuery and JavaScript

Javascript Jquery

Google reCaptcha generally used to protect the website from spammers. It is best and easy way to show CAPTCHA within the website.

It is easy to integrate into the form and when it properly setup then it shows a I’m not a Robot Checkbox that shows different types of images on the screen when it gets clicked.

The user needs to select images according to the asked question.

How to Integrate Google reCAPTCHA with PHP

How To Javascript PHP

Node.js is a very powerful JavaScript-based framework/platform built on Google Chrome’s JavaScript V8 Engine which makes it possible to run Javascript on the server side.

It is used to develop I/O intensive web applications like video streaming sites, single-page applications, and other web applications. It is awesome for real time stuff for example if we use PHP for this then it is not good for this because it consumes a lot of memory.

Using NPM — a tool that makes installing and managing Node modules — it’s quite easy to add many useful tools to your web development toolkit.

Node.js is open source, completely free, and used by thousands of developers around the world.

Node.js lets developers write JavaScript for both client and server side, thereby making it easy to send data between the server and the client to synchronize the data automatically.

The data changes on the server immediately reflect in the client and the webpage that displays this data automatically updates itself.

How to install Node.js on Windows


Looping statement is use to execute and repeat a block of statements depending on the condition. In Javascript, we have the following looping statements –  while do while for while…


When we adding Javascript code to HTML page then it must be in between <script> and </script> tags. We can place Javascript in <body> and <head> section of an HTML…


A comment is a part of the program which doesn’t execute when running the program.

Its only purpose is to be read by someone who is editing the code.

In JavaScript, there are two types of comments –

  • Single line, and
  • Multiple lines

How to add comment in JavaScript