Found 8894 Articles for Front End Technology

How to make horizontal line with words in the middle using CSS?

AmitDiwan
Updated on 05-Dec-2022 12:11:43

3K+ Views

With CSS, we can make horizontal line with words in the middle. Additionally, we can also make horizontal line with headings and even image. Let us see some examples − Make a horizontal line with words in the middleExample In this example, we will create a horizontal line with words in the middle using flex − p { display: flex; flex-direction: row; } ... Read More

Is wrapping a div inside an anchor tag valid code?

AmitDiwan
Updated on 05-Dec-2022 11:54:29

5K+ Views

Yes, according to HTML5 Specifications, we can place a div inside an anchor tag, for example − Another example − this now becomes a link The HTML5 allows tag to be wrapped around a element. Therefore, the will be visible inside the tag.Example Let us see an example for div inside the tag − .container { position: relative; background-color: orange; width: 200px; height: 200px; } .container a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; } Demo Heading div one div two Output Click on the orange colored div and the link will open −

jQuery Data vs Attr?

AmitDiwan
Updated on 05-Dec-2022 11:51:30

2K+ Views

The data() in jQuery is used to fetch the value of any custom data attribute from the matched HTML element(s). The jQuery attr() method is used to fetch the value of any standard attribute from the matched HTML element(s). Let us see the differences − The .attr() method includes DOM Manipulation and gets the data from the current HTML or change the HTML code if used to change an attribute value. The .data() method does not include DOM manipulation and gets the data from the internal cache and will change that data if a set is called. The .data() ... Read More

What are decorators and how are they used in JavaScript?

Kalyan Mishra
Updated on 01-Dec-2022 12:21:51

891 Views

In this tutorial, you will learn about JavaScript decorators and get to know about their inner workings and uses. What are Decorators in JavaScript? The word decorator means combining a set of code or program with another or can be said as wrapping a function with another function to extends the functionality or working of the function. Decorator can also be called as decorator function. Developers have been using this decorator term in other languages like python, C# and now JavaScript has also introduced the decorator. Function decorators In JavaScript functions behaves like objects so they are also known as ... Read More

How to manipulate DOM using a service worker in JavaScript?

Kalyan Mishra
Updated on 01-Dec-2022 12:04:49

1K+ Views

In this tutorial, you will learn about JavaScript DOM manipulation using a service worker. DOM manipulation happens is when we change the structure and elements of the document object model(DOM). We can modify DOM by adding, removing, Changing, or modifying elements and their attributes. What is a Service worker? Service workers work like proxy servers between web browsers and the web server. It adds enhancement to the existing websites in case the user’s browser doesn’t support the service worker but he visits any website that uses the service worker then also no function gets affected. It acts between web applications, ... Read More

How to upload an image using HTML and JavaScript in Firebase?

Kalyan Mishra
Updated on 01-Dec-2022 12:03:26

6K+ Views

In this tutorial, you will learn about the procedure to upload images in firebase using HTML and JavaScript. Firebase − Firebase is a cloud-based storage platform that is a product of google which provides storage services that are used in various web and mobile application development. It provides NoSQL and real-time hosting of the database, authentication, notification, content, and many more services. Steps to upload an image using HTML and JavaScript in Firebase To connect firebase to the project, you should create a project on firebase here is the step-by-step procedure to create and activate the storage service to upload ... Read More

How to Create a Video and Audio Recorder with JavaScript MediaRecorder API?

Kalyan Mishra
Updated on 01-Dec-2022 11:59:32

4K+ Views

In this tutorial, you will learn how to create an audio and video recorder using JavaScript MediaRecorder API. So this can be done using WebRTC. What is WebRTC? WebRTC is a short form of Real-Time Communication. We can access and capture the Webcam and Microphone devices that are available there in the user device. We can access the user device’s Webcam and microphone using an ECMAScript object navigator.mediaDevices.getUserMedia(constraints). So, the getUserMedia function by default, seeks user permission to use your Webcam. This function returns a promise and once you click ok and give the consent, then the function ... Read More

How to remove HTML Tags with RegExp in JavaScript?

AmitDiwan
Updated on 22-Nov-2022 06:47:35

2K+ Views

The regex will identify the HTML tags and then the replace() is used to replace the tags with null string. Let’s say we have the following HTML − The tags stripped...)/ig, ''); } The call for the above function to remove tags goes like this − document.write(removeTags('The tags stripped...

How to strip out HTML tags from a string using JavaScript?

AmitDiwan
Updated on 22-Nov-2022 06:44:33

709 Views

We can strip out HTML tags from a string with JavaScript using the following examples − Strip out HTML tags using Regex Strip out HTML tags using InnerText Strip out HTML tags using Regex The regex will identify the HTML tags and then the replace() is used to replace the tags with null string. Let’s say we have the following HTML − The tags stripped...)/ig, ''); } The call for the above function to remove tags goes like this − document.write(removeTags('The tags stripped...

Center image using text-align center with CSS

AmitDiwan
Updated on 30-Oct-2023 14:31:57

2K+ Views

The text-align center is generally used to center text of an element. However, we can also center an image using the same text-align property. First, let us see how to center align a text, then we will center an image using the text-align. Additionally, we will also align an image horizontally and vertically as well. Center a Text Using the Text-align Property in CSS Let us first see how to center a heading using the text-align property − h1 { text-align: center; } Example Let us now see the example to center a text on ... Read More

Advertisements