Create Dark/Light Mode for a Website Using JavaScript & jQuery

Shubham Vora
Updated on 16-Feb-2023 15:07:34

7K+ Views

Dark mode is very important for any website. Users with different interests visit the websites. Some of them like dark mode, and some like light mode. According to one survey, around 70 to 80% of people like dark mode, and only 20 to 30% like light mode. So, it is necessary to create a dark mode for any website, allowing users to toggle between the dark and light modes. Below, we will create a simple webpage using HTML, CSS, and JavaScript. Also, we will learn to implement the light and dark modes using JavaScript and CSS. Syntax Users can follow ... Read More

Create Dark Mode in ReactJS Using Material-UI

Shubham Vora
Updated on 16-Feb-2023 15:05:48

2K+ Views

Using the Material UI library, we will learn to create a Dark Mode in ReactJS. The Material UI is the external react library that provides the designed react components that we can directly use in our react project by importing from the library. In the world, most users like dark mode, and only some love light mode. The dark mode helps us decrease visitors' eye strain and look more luxurious. So, we should allow users to choose the either dark or light mode according to their preference. In vanilla JavaScript or JQuery, we can create dark and light modes by ... Read More

Count Numbers Less Than or Equal to Given Value Using Percentile in JavaScript

AmitDiwan
Updated on 16-Feb-2023 15:04:53

155 Views

In this article, you will understand how many numbers in the given array are less/equal to the given value using the percentile formula. We calculate the percentage of numbers in the given array less or equal to the number using the formula − Percentile = (n/N) * 100 Where, n is the number of values below x and N is the total number of values. Example 1 In this example, we use a for-loop to iterate the array and check each element whether the value is less, equal or greater than the given input value. const calculationPercentile = ... Read More

How ES6 (ES2015) Evolved and Brought New Features to Modern Day JavaScript

AmitDiwan
Updated on 16-Feb-2023 14:59:50

162 Views

In this article, you will understand how ES6 (ES2015) evolved and brought new features to modern day JavaScript. ES6 stands for ECMAScript 6. It is the 6th version of ECMAScript and was created to standardize the JavaScript. The top 10 features of ES6 are: let and const keywords, Arrow Functions, Multi-line Strings, Default Parameters, Template Literals, Destructuring Assignment, Enhanced Object Literals, Promises. Example 1 In this example, let’s demonstrate the Arrow function(=>) − console.log("An Arrow function Square has been defined") square = (x) => { return x * x; } let inputValue = 6 console.log("The input ... Read More

Create a Chart Using Bootstrap

Shubham Vora
Updated on 16-Feb-2023 14:57:45

3K+ Views

The chart is very important to visualize the data, and we can show the data in various formats and analyze the pattern in the data. Also, the chart is more important for data scientists as they need to analyze the various data. Bootstrap is a library that allows us to draw various charts using JavaScript or JQuery. It contains the functions that we need to import and pass chart type and chart data as an argument of the function, and it will prepare a chart for us. This tutorial will teach us to draw various chart patterns using Bootstrap. Syntax ... Read More

Difference Between Promise.any() and Promise.race() in JavaScript

AmitDiwan
Updated on 16-Feb-2023 13:52:21

117 Views

In this article, you will understand how Promise.any() method differs from Promise.race() method in JavaScript. The Promise.any() method in javascript is one among promise concurrency methods. It is useful when the first task needs to be completed. The Promise.race() method in javascript is one among promise concurrency methods. It is useful when the first async task need to be complete, but do not care about its eventual state (i.e. it can either succeed or fail). Example 1 In this example, let’s look at how the Promise.any() method works console.log("Defining three promise values: promise1, promise2 and promise3"); const promise1 = ... Read More

Check If Object Value Exists and Not Add New Object to Array in JavaScript

AmitDiwan
Updated on 16-Feb-2023 12:47:37

1K+ Views

In this article, you will understand how to check if the object value exists, if not, add a new object to the array using JavaScript. In Javascript, almost every variable is an object. An object can be a string, numbers, boolean values, etc. They can also be key-value pairs. An array in javascript is a special variable that can hold more than one item. An array can be initialized using the keyword ‘const’. Example 1 In this example, we check the existence of the object using the .some() function. var inputArray = [{ id: 1, name: "JavaScript" }, ... Read More

Implicit vs Explicit Coercion in JavaScript

AmitDiwan
Updated on 16-Feb-2023 12:46:53

1K+ Views

In this article, you will understand how implicit coercion differs from Explicit coercion in JavaScript. An implicit coercion is an automatic conversion of values from one datatype to another. It is also known as type conversion. An explicit coercion is the conversion of data type depending on the user's necessity. Example 1 In this example, let us learn about implicit coercion. let inputValue = "5" console.log("The input variable is defined as: ") console.log(inputValue, typeof inputValue); let resultValue = Number(inputValue); console.log("The input variable is defined as: ") console.log(resultValue, typeof resultValue); Explanation Step 1 −Define a variable: inputValue and assign ... Read More

Internationalization in JavaScript

AmitDiwan
Updated on 16-Feb-2023 12:45:33

278 Views

In this article, you will understand how internationalization works in JavaScript. Internationalization is the process of preparing software so that it can support local languages and cultural settings. It can include changing the date and time format, changing the metric system format, language format, etc. Example 1 In this example, let’s understand the changing of date and time formats. var inputDate = new Date(1990, 2, 25); console.log("The date is defined as: ") console.log(inputDate) console.log("The date in United Kingdom format is: ") console.log(new Intl.DateTimeFormat('en-GB').format(inputDate)); console.log("The date in American format is: ") console.log(new Intl.DateTimeFormat('en-US').format(inputDate)); Explanation Step 1 − Define ... Read More

Difference Between Promise.all and Promise.allSettled in JavaScript

AmitDiwan
Updated on 16-Feb-2023 12:44:54

180 Views

In this article, you will understand how does Promise.all() method differs from the Promise.allSettled() method in JavaScript. The Promise.all() method takes in one or multiple promises as input and returns a single Promise. This returned promise fulfills when all of the input's promises are fulfilled. It rejects a promise when any of the input's promises is rejected, with this first rejection reason. The Promise.allSettled() method takes in one or multiple promises as input and returns a single Promise. This returned promise fulfills when all of the input's promises settle (including when an empty iterable is passed), with an array of ... Read More

Advertisements