Front End Technology Articles - Page 193 of 745

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 built using this library are Line Charts, Bar Charts, Pie Charts, Scatter Charts, etc.In this tutorial, we will create a Scatter Chart with the required data points and display the same to the user. The dataset for the scatter chart will have x and y coordinate details. Then with the help of a Cartesian product, we will ... Read More

In this article, we are going to create a calculator using JavaScript We will be using the basic math formulas to calculate the profit and loss. We will be returning the result in percentage along with the actual values.To calculate the Profit and Loss we need two things that are: CP (Cost Price) and SP (Selling Price).Formulas to Calculate Profit and Loss −Profit: SP – CPProfit Percentage: Profit/CP * 100Loss: SP – CPLoss Percentage: Loss/CP * 100Example 1In the example below, we have created a calculator that will calculate the profit and loss percentage as per the cost price and ... Read More

In this article, we are going to explore on how to create a chart after fetching the JSON data. To fetch JSON data we use fetch() method of Fetch API. We will first fetch the data and once the data is available we will feed it into the system to create a chart. The Fetch API provides a simple interface for accessing and manipulating HTTP requests and responses.Syntaxconst response = fetch(resource [, init])Parametersresource − This is the resource path from where the data is fetched.init − It defines any extra options such as headers, body, etc.ApproachThe steps can be defined ... Read More

A Student grade calculator is used for taking the grades input for all subjects and then calculating the percentage based upon the marks of the students. This calculator returns a fairly reliable indicator of student results.The simple formula for calculating grades is:$\text{Percentage}=\frac{\text{Marks Scored}}{\text{Total Marks}}\times 100$We are going to take the inputs using HTML, once the inputs are entered we will call the JS function to calculate the average percentage of these numbers and will return the same to the user.Steps for creating a calculator −We will be taking inputs from the user using the input tag.Once the inputs are taken, ... Read More

Let us understand the concepts of AngularJS and Google Web Toolkit (GWT) before learning the differences between them.Google Web ToolkitIt is an open-source set of tools which allows creating and maintaining JavaScript front-end applications in Java by the web developers. It was launched in the year 2006 by Google and the code is written in Java.The operating system that supports GWT is Linux, Windows, OS X, FreeBSD. It helps in creating RICH Internet Applications. It helps in converting java source code to equivalent JavaScript.FeaturesThe features of Google Web Toolkit are as follows −DynamicReusable UI componentsSimple RPC mechanismBrowser history managementSupport for ... Read More

Bootstrap is a free open source and is one of the most famous HTML, CSS, and Javascript frameworks. It's used for user interfaces and themes that create what a user sees in a website or application, and it's utilized on the client rather than the server.Responsive web applications automatically adapt to various screen sizes. It is used to create responsive mobile-first web apps and websites; mobile-first refers to designing for smaller displays first and then scaling up to bigger ones. As a result, you won't have to worry about your app not working on different devices or with different screen ... Read More

The ng-class Directive in angularjs allows the user to dynamically set the CSS classes on an HTML element by databinding an expression which will further represent all those classes to be added. The class is only added if the expression inside the ngClass Directive returns True, else it will not be added. It is supported by all the HTML elements.The directive does not set any duplicate class if it was already set. When the expression changes, the previously added classes will be removed and the new classes will be added only after that.Syntax..Content..Example − ngClass DirectiveCreate a file "ngClass.html" in ... Read More

The ng-mousedown Directive in AngularJS basically specifies a custom event on mouse-down event. We can perform multiple functions whenever the mouse is pressed and the mouse-down event is called.Syntax..content..Example − ngMousedown DirectiveCreate a file "ngMousedown.html" in your Angular project directory and copy-paste the following code snippet.           ngMousedown Directive                              Welcome to Tutorials Point                      angularjs | ngMousedown Directive                                   Click mouse and hold !!!                 OutputTo run the above code, just go to your file and run it as a normal HTML file.Your browser does not support HTML5 video.

The angular.element() method wraps the raw DOM element or the HTML string as a jQuery element. If jQuery is available or imported, angular.element is an alias for the jQuery function, else this method delegates to AngularJS’s built-in subset of jQuery called jQueryLite or jqLite.Syntaxangular.element(element)Example − Wrapping the DOM element using angular.element()Create a file "element.html" in your Angular project directory and copy-paste the following code snippet.           angular.element()                              Welcome to Tutorials Point           ... Read More

The ng-copy Directive in AngularJS is used for specifying any custom behaviour while copying the texts in input text fields. We can use this directive to call certain methods that will be triggered while the text is copied from the input field. This directive is supported by all types of input elements.Syntax..content..Example − ngCopy DirectiveCreate a file "ngCopy.html" in your Angular project directory and copy-paste the following code snippet.           ngCopy Directive                      .index {color: white; background-color: green;}       ... Read More