Found 8894 Articles for Front End Technology

JavaScript: How to Create an Object from Key-Value Pairs

Mayank Agarwal
Updated on 25-Apr-2022 12:23:35

3K+ Views

In this article, we are going to explore how to create a JavaScript object from the desired key-value pairs. Let’s understand the steps involved as below−Steps:Step I − We are first going to create an Empty Object.let object = {}Step II − Once the object is initialized with the null values we can add the desired {key, value} pairs in the object.let firstKey = 0; let firstKeyValue = "TutorialsPoint"; object[firstKey] = firstKeyValue;Step III − The resultant object is the JSON object that holds all the key-value pairs.console.log(object);Example 1In this example, we are creating a simple application. In the script part, ... Read More

How to create an FAQ section of a website using JavaScript?

Mayank Agarwal
Updated on 25-Apr-2022 11:45:16

1K+ Views

In this article, we will be creating a FAQ (Frequently asked questions) accordion using JavaScript. The accordion is used to display the questions and will open up on clicking to display the answers. We can see the FAQ section on every website where all the top questions are covered. Today we will learn how to make these FAQ sections.Steps for creating the AccordionStep I −Firstly, we will be creating a nested HTML div tag that will hold all questions and answers. These div tags will depend upon the number of QnA to be displayed.Step II − We will use CSS ... Read More

ReactJS: How to Create a Pie Chart using Recharts?

Mayank Agarwal
Updated on 25-Apr-2022 11:34:47

7K+ Views

In this article, are going to explore the Rechart JS Library and implement it in a React application to watch how they are used. Rechart Libraries are specifically used for creating different types of charts over the React Application. Charts that can be build using this library are Line Charts, Bar Charts, Pie Charts, etc.In this tutorial we will be creating a Pie Chart using the library and a set of data entry points. Based upon this data the chart will be formed that will define the slices with the pie element. This will have the data property that will ... Read More

JavaScript: How to allow users to change the font-size of a webpage?

Mayank Agarwal
Updated on 25-Apr-2022 11:27:11

3K+ Views

In this article, we are going to explore creating a function that will allow the user to change the font size of the complete webpage. We can generally see this type of feature on some of the government websites in the top right corner. This is basically to facilitate people using the website to enlarge the web content as required.In this article ,we will be applying the same function using JavaScript & JQueryExample #1In the below example, we have created a simple div program and created two buttons i.e. Increase and Decrease. We have used these 2 functions to increase ... Read More

Creating a Dynamic Report Card using HTML, CSS, and JavaScript

Mayank Agarwal
Updated on 25-Apr-2022 11:19:44

4K+ Views

In this article, we are going to build a dynamic report using the inputs entered by the user. The user will enter the marks (in this case) and we will be populating these marks to calculate the final percentage of the student.We have also implemented the fail/pass status that will render whether a student has passed or failed based upon the entries done by the user. We will be using HTML, CSS, and JavaScript for the implementation.StepsWe will be creating an HTML template with rows and columns for name and subject scores. These subject scores will be further divided into ... Read More

How to create a "Coming Soon" page using JavaScript?

Mayank Agarwal
Updated on 22-Apr-2022 14:11:17

236 Views

In this article, we will be creating a Coming Soon Page that will display a timer for the event that will occur on a specific date and time. The timer will go in the opposite direction and at the time of the actual event, it will basically show the event page if configured.A coming soon is similar to a webpage with some special specifications to show. The specifications define what is next to come to the website (Like a launch of a new Smartphone, Feature, TV, Software, Tool, etc.)ApproachWe will first set up a page to be displayed on the ... Read More

How to convert a string of any base to an integer in JavaScript?

Mayank Agarwal
Updated on 22-Apr-2022 14:05:55

408 Views

An integer can be represented in various formats as described in the computed languages i.e. Binary, Decimal, Hexadecimal, etc. A Binary number consists of two digits only i.e. 0 & 1, whereas a decimal consists of digits from 0 to 9.We can convert a string to an integer by using the parseInt() conversion by default. But in other cases when the integer is represented in some other form we also need to pass the base string to decode it into the resultant number.Below is the syntax of parsing a string to an int.Syntax1. When the base value is providedparseInt(string_value, base)2. ... Read More

JavaScript: Converting a CSV string file to a 2D array of objects

Mayank Agarwal
Updated on 22-Apr-2022 13:59:44

605 Views

A CSV is a comma-separated value that is stored in a file with the .csv extension. This allows the user to store data in a tabular or spreadsheet format.In this article, we will be exploring how to convert the data of a CSV string to 2D array objects where the first row of the string defines the file headers. We will be first reading this row and then mapping the remaining values with them.We will be using the following function that will act as a prototype function from array and string since it will be helpful in mapping the data ... Read More

JavaScript: Computing the average of an array after mapping each element to a value

Mayank Agarwal
Updated on 22-Apr-2022 13:52:15

763 Views

In this article, we are going to fetch all the values from an array and after mapping each element to a numerical value we will calculate its sum thus to compute its average.Given below is an array consisting of values. We will compute the average by summing up the values and then dividing it by the number of values available.Input[1, 2, 3, 4, 5]Output3Explanation(1+2+3+4+5)/5 = 3Input[2, 4, 7, 9, 1, 3, 8]Output4.85Explanation(2+4+7+9+1+3+8)/7 = 4.85Approach #1We will iterate over the list of elements using the forEach() loop.On iterating each element, we will convert it to a value and add it to ... Read More

How to compile a Typescript file?

Mayank Agarwal
Updated on 22-Apr-2022 13:44:46

1K+ Views

In this article are going to explore TypeScript and how to execute the same. TypeScript is an open-source programming language developed and maintained by Microsoft.Typescript is a bit syntactically different from the native JavaScript but also adds additional features to it. Typescript is the superset of JavaScript with a strong pace of development and object-oriented programming. It also does not run directly on the web browsers as JavaScript runsTypescript files need to be combined with JavaScript first and then they work as normal JavaScript. In order to compile and execute the typescript file, we need to install the node and ... Read More

Advertisements