Web Development Articles

Page 782 of 801

How to create Dark Mode in ReactJS using Material UI?

Shubham Vora
Shubham Vora
Updated on 16-Feb-2023 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

How to create a chart using bootstrap?

Shubham Vora
Shubham Vora
Updated on 16-Feb-2023 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

How to Build a Simple Terminal like Website using jQuery?

AmitDiwan
AmitDiwan
Updated on 16-Feb-2023 3K+ Views

We will start by creating a basic HTML structure for our website. Next, we will use jQuery to create a terminal-like interface by adding elements such as input fields and output displays. Finally, we will use jQuery functions to handle user input and display the appropriate response. Let us first understand what jQuery is. jQuery is a JavaScript library that simplifies HTML document traversing, event handling, and animation. It allows for easy manipulation of the Document Object Model (DOM). It also provides several shorthand methods for common JavaScript tasks, such as making AJAX requests. It is widely used in web ...

Read More

How to animate div width and height on mouse hover using jQuery?

AmitDiwan
AmitDiwan
Updated on 13-Feb-2023 1K+ Views

We can animate the width and height of a div on mouse hover using jQuery by applying the animate() method to the div on hover. We can specify the desired width and height values as well as the duration of the animation. Additionally, we can also add a callback function to perform additional actions after the animation is complete. jQuery is a JavaScript library that makes it easy to add interactive elements to web pages. jQuery is designed to make it easy to add dynamic content to a web page, and to make it easy to write code that works ...

Read More

How to Add a Third Party Library in Deno.js?

AmitDiwan
AmitDiwan
Updated on 13-Feb-2023 420 Views

To add a third-party library in Deno, we need to import the library from its URL. We can use the "import" statement followed by the URL of the library. It is also possible to use a local file path instead of a URL. The library can then be used in our code by referencing its exported functions or variables. Let us first understand what is Deno.js − What is Deno.js? Deno is a new JavaScript/TypeScript runtime built with V8 JavaScript engine. ...

Read More

How to add target="_blank" to a link using jQuery?

AmitDiwan
AmitDiwan
Updated on 13-Feb-2023 7K+ Views

We can add the target attribute to a link using jQuery by selecting the desired link using a selector, such as the class or id. Then, we can use the .attr() method to add the target attribute and set its value to "_blank". This will ensure that when the link is clicked, it will open in a new tab or window. Let us first understand what jQuery is. jQuery is a JavaScript library that simplifies HTML document traversing, event handling, and animation. It allows for easy manipulation of the Document Object Model (DOM). It also provides several shorthand methods for ...

Read More

How to Add a Star Rating Component in NextJS?

AmitDiwan
AmitDiwan
Updated on 13-Feb-2023 4K+ Views

We can add a star rating feature in NextJS by using a library such as react-star-rating. This library allows us to easily display a star rating system and allows for customization of the number of stars and the ability to handle user interactions.Next.js is an open-source web development framework. The Next.js is React Based framework with server side rendering capability. Both speed and SEO are excellent. You can simply build and test sophisticated react-based applications using Next.js. Next.js is written in Typescripts. It offers a Link component that links other components together and has a prefetch property that allows for ...

Read More

How To Add Google Translate Button On Your Webpage?

AmitDiwan
AmitDiwan
Updated on 09-Feb-2023 13K+ Views

We can add a Google Translate button on our webpage by using the Google Translate API. We need to create a script that calls the API and adds the button to our webpage. Once added, users will be able to translate our webpage to their preferred language. Here's an example of how to add a Google Translate button to your webpage using the Google Translate API − Go to the Google Cloud Console (https://console.cloud.google.com/) − To create a new project, click Select Project and the following section will be visible − Once the ...

Read More

How to add an active class on click event in a custom list group in Bootstrap?

AmitDiwan
AmitDiwan
Updated on 06-Feb-2023 7K+ Views

We can add an active class to a custom list group item in Bootstrap 4 by using JavaScript or jQuery. This can be achieved by adding an onclick event to each list group item and then using the "addClass" method to add the active class to the item that was clicked. By doing this, we can easily create a custom list group with an active state that changes based on user interaction. Bootstrap Intro Bootstrap is a popular open-source front-end development framework. It helps to create responsive and mobile-first webpages by providing a set of pre-designed CSS and JavaScript ...

Read More

How to add image before optgroup label using Bootstrap?

Diksha Patro
Diksha Patro
Updated on 31-Jan-2023 888 Views

Introduction When building web pages using Bootstrap, it may be useful to add an image before the label of an optgroup element. This can help to visually group options within a select element and make the page more user-friendly. In this article, we will discuss adding an image before the label of an optgroup element using Bootstrap. What is an optgroup? An optgroup is an HTML element that groups related options within a select element. The optgroup element creates a label for the group of options, and the options within the optgroup are indented and visually grouped together. Syntax ...

Read More
Showing 7811–7820 of 8,010 articles
« Prev 1 780 781 782 783 784 801 Next »
Advertisements