In this tutorial, we will be discussing how to design a digital clock in neumorphism style using JavaScript. Neumorphism is a new design trend that has been gaining popularity in recent years. It is characterized by soft, rounded shapes and subtle shadows. The HTML We will start by creating a basic HTML structure for our clock. We will need a container element, and within that, we will have an element for the clock face and another for the control buttons. Below is the HTML code for our clock − Start Stop ... Read More

Auto-formatting is one of those features that are hard to implement but at the same time increases the userexperience a lot. There are different JavaScript libraries that one can use when they want to auto-format the input text content, but the most popular of them is Cleave.js. Cleave.js is a JavaScript library that is mainly used when we want to format the input text content and it works very smoothly. It is very lightweight and easy to get started with. In this tutorial, we will take a couple of examples to demonstrate how you can use Cleave.js to autoformat input ... Read More

Tween.js is a JavaScript library that is mainly used when we want to tween or animate an HTML5 or JavaScript property. It can work standalone as well as when integrated with Easel.js. In this tutorial, we will learn how we can make use of Tween.js with the help of a few examples. Before we go on to the main example, let's first discuss a few simple tweens so that when we use them in the main example, you don't get overwhelmed. Simple Tween In this tween, we will tween the alpha property of the target from 0 to 1 for ... Read More

Handsontable is a JavaScript library that is used when we want to create a data grid. It provides a spreadsheet-like experience, pretty similar to Excel. In this tutorial, we will explain how you can use handsontable.js to create a data grid with your own data. In addition, we will see how to use different options available in handsontable.js. While there might be different spreadsheets like grid creators that you can use, the handsontable.js stands out from most of them because of its ability to work with vanilla JavaScript, React or Angular as well. Before you can start working with handsontable.js, ... Read More

It is a well-known fact that code is prone to errors, and sometimes even when we know that a particular workflow will work fine for some cases, there's a good chance that we forget about some other cases. In simple terms, it can be said that when we test a code manually, we might miss something. For example, suppose we have two functions, func1() and func2(), and we know that func1() works for the cases that we have defined in our test, but we found out that func2() doesn't work. Then we fix func2() but later forgot to check whether ... Read More

In this tutorial, we will demonstrate how you can use Slick.js to work with carousels and then add them to your websites. We will start with creating a simple carousel of images with the basic scroll being available to us and then slowly we will make some changes to the carousel by adding different properties to our carousel according to our needs. If you try to create a carousel without using any libraries, it will be quite time consuming. To reduce the efforts and to be able to add multiple types of carousel with different properties, ... Read More

In this tutorial, we'll look at how to use video.js to create a responsive video player. A responsive video player is one that resizes itself to fit the size of the screen. By creating a responsive video player, we ensure that our video player is never cropped from the sides and is always presented fully, regardless of the device or screen size. Having a consistent player will also enhance the viewing experience of the end user. Let's move ahead to the next section of the article and learn how to make the video player responsive using video.js. Creating a Responsive ... Read More

If you've been keeping up with the JavaScript world in the last few years, you've probably heard of the concept of a "flux" architecture. In a nutshell, flux is a pattern for managing data flow in applications. It was originally designed for use with React, but it can be used with any other JavaScript framework. There are a few different ways to implement flux, but they all share a few key components− Dispatcher − This is a central object that is responsible for managing all data flow in the application. All updates start with the dispatcher. Stores − These are objects ... Read More

In JavaScript, an object can be "flattened" by creating a shallow copy of it. This is useful for creating a snapshot of an object, but can cause problems if the object is later modified. If you need to unflatten an object, you can use the paths for keys to restore the original structure. Using Paths for Keys When an object is flattened, the keys are concatenated into a single string. You can use this string to unflatten the object by creating an object with the same keys and values. For example, consider the following object.var obj = { ... Read More

In JavaScript, an object can be created by using curly braces {}. This is called an object literal. An object literal can contain properties and methods. What is Flattening? Flattening is the process of reducing an object to a single−depth object. In other words, all the properties and methods of the object are contained within a single−depth object. How to Flatten an Object? There are various ways to flatten an object. Using for...in loop The for...in loop can be used to iterate over the properties of an object. For each property, we can add it to a new object. Below ... Read More