Encoding and decoding the URI and the URI components is required by the URL of any website to reach or redirect the user. It is a usual task in web development, and this is generally done while making a GET request to the API with the query params. The query params must also be encoded in the URL string, where the server will decode this. Many browsers automatically encode and decode the URL and the response string.E.g., A space " " is encoded as a + or %20.Encoding a URLThe conversion of the special characters can be done by using ... Read More

A radio button is an input type that takes input in form of the options. The user will select one value from multiple choices. Only one option can be selected out of many possible choices.In this article, we will explore how to disable a radio button and how to enable it back when required. We will see how radio buttons work internally and how can we disable them when requiredMostly radio buttons are shown to the user only in some cases as part of confirmation. When not required we can disable them so that the user does not choose an ... Read More

We can use the CSS media queries to check whether the website is opened inside a web browser or a mobile browser. This information can be fetched using the min-width and the max-width of the webpage.CSS media queries are only limited to styling the web pages but we can control the functionality of a website as per the user’s device by using the navigator properties in JavaScript.The Navigator returns a set of values that includes user browser, version, operating system, and many more.Syntaxnavigator.userAgentExampleIn the below example, we are going to use Navigator to fetch the user’s device details. This will ... Read More

In this article, we are going to explore the CAPS LOCK key and how to check if they are turned on or not using JavaScript on a webpage. While working with new-age web applications, we often require certain information including user interaction and experience.The user interacts with a website to execute a functionality like hitting an API, handling clicks or buttons that trigger a method, and many more. In some of the cases, we might need to know whether the CAPS LOCK key is turned on or not.One use case can be any authentication system that notifies the user that ... Read More

In this article, we are going to explore the conversion of required HTML content into a PDF file. Many a time we have to read and accept the Terms & Conditions, a better way is to download the PDF file read it in spare time, and then accept it. Therefore, for achieving this we can make use of converting the content into a PDF file.We also need some content to be stored in a PDF file to be used later on for various purposes. The most common use includes downloading chapters, texts, thesis, etc.The above conversion can be achieved in ... Read More

In this article, we are going to explore about the concept of computed properties in an object. We will learn how to declare an object with computed property name. Let’s know about JavaScript objects before actually moving on to computed properties.JavaScript Object − A JavaScript Object contains key-value pairs in which the key represents a property from which we can get and set the value of an object.Method IWe will use the square bracket expression i.e. [] to create the computed name property in the object. In ES6 it is possible to use an expression within the [] brackets.Example 1In ... Read More

In this article, we are going to explore and learn about Timeline Animations. Anime.js is a lightweight JavaScript library that has a small but powerful set of APIs. It works upon the DOM attributes, CSS properties, SVG, and JavaScript objects.We can build multiple and complex animations using the Anime.js. Anime’s built-in staggering system helps in making complex follow through and overlapping animations simple. It can also be used on both timings and properties.How to use Anime.js?We can import or use Anime.js in our code in the following two ways −We can either download the anime.min.js file and directly use it ... Read More

In this article, we are going to learn about parallax effects and how to create them using HTML, CSS, and JavaScript. We will be using the mouse-move event to show the parallax effect. During the parallax effect, two different images move in parallel to each other. Both the images will be working parallel and making the same transitions. The only difference will be they move in the opposite directions.Parallax effects are used for making the websites better in terms of User Experience and enhancing the interactivity level of the website. We can move the foreground and the background images at ... Read More

In this article, we are going to create a slider carousel using JavaScript. Along with using JS we will be also using HTML and CSS for representation and defining the basic layout.A carousel is basically a collection of images represented as a slideshow that is used for displaying the images, text, or both in a cyclic manner.A slider Carousel is a special type of carousel that is specifically used for displaying the slider on a website’s main page. This slideshow runs in a landscape mode. We can use the eventListener() provided by the JavaScript functions to record and display different ... Read More

In this article, we are going to explore how to create and use a Color Picker in ReactJS. A Color Picker can be defined as a graphical user interface widget that is usually found within some graphics software or used online to select/choose colors and sometimes to create new color themes as well.React is a free and open-source front-end JavaScript Library that is used for building user interfaces or UI components. It is maintained by Facebook and a community of individual contributors who keep it updated.ApproachWe can run through the following steps to create a color picker −First we would ... Read More