Found 9801 Articles for Web Development

How to check if the input date is equal to today’s date or not using JavaScript?

Rushi Javiya
Updated on 19-Jan-2023 09:05:43
We learn to check if the input date is equal to today’s date or not using JavaScript in this tutorial. Sometimes, we need to take the date from users in the input field in various formats and check if input date and today’s date match. Here, we will learn two approaches to check the equality of the input date with today’s date. By comparing the year, month, and date separately Users can get the full year, month, and date from the timestamp of the Date object using various methods such as getFullYear(), getMonth(), and getDate(). Also, we can get the ... Read More

How to clear the content of a div using JavaScript?

Rushi Javiya
Updated on 19-Jan-2023 09:02:54
We will learn to remove all child elements or content of a div element using JavaScript. However, whatever method we learn to clear the div element's content will work with any HTML element. Removing the content of the div element is useful when users want to display some HTML content based on a particular condition or want to replace HTML content. Here, we will explore three approaches to clear the content of a div using JavaScript. Using the replaceChildren() Method The replaceChilderen() method allows developers to replace child elements of a particular HTML element. So, we can create new child ... Read More

How to check the OffscreenCanvas is supported by the Browser or not in JavaScript?

Rushi Javiya
Updated on 19-Jan-2023 10:23:17
In HTML, Canvas is very important when we want to show animation or 3D objects on the webpage using only HTML and JavaScript. The offscreenCanvas allows users to render the animations and graphics off-screen. It means when we use the canvas, it interacts with the user via the main thread of the web application, but offscreenCanvas doesn’t. So, we can improve the performance of the application using offscreenCanvas . Before we use offscreenCanvas with any browser, we need to check if it is supported by the Browser or not; Otherwise, we need to use canvas. So, we will learn two ... Read More

Making a Div vertically scrollable using CSS

Tanmay Chandhok
Updated on 18-Jan-2023 18:41:33
There is a possibility that the content that we are going to use in our website may be huge and may take a lot of space which means that the other elements of the website might get displaced which can hamper the responsiveness of the website. To avoid such incidence, the user needs to be given scrollable content so that if the user is interested he or she might scroll down to read the whole content. In this article, we are going to have a look at how we can make a div vertically scrollable and what is the property ... Read More

Is it possible to prevent the users from taking screenshot of webpage?

Tanmay Chandhok
Updated on 18-Jan-2023 18:35:08
While browsing through the internet a user might find the need to capture something in order to present or to show to someone, but sometimes there might be sensitive information on a webpage which the developer might not want the user to screenshot it. The user can press the function key along with windows key and space bar to take a screen shot. In MacOS we would have to use the command and shift and 3 for taking a screenshot. In this article, we are going to have a look at how can we prevent the user from taking a ... Read More

How to place image or video inside silhouette?

Tanmay Chandhok
Updated on 18-Jan-2023 18:22:42
You might have come across websites in which you might have seen an image or a video being played in a silhouette. A silhouette can be an image, an object, person or an animal which is represented in black color and it makes the outline of the subject. We can insert any image or video in the silhouette so the video or the image is going to be shown in the color of the silhouette In this article, we are going to have a look at how we can place an image or a video in silhouette. How to place ... Read More

How to hide the insertion caret in a webpage using CSS?

Tanmay Chandhok
Updated on 18-Jan-2023 18:15:36
The caret is also known as the text cursor which acts as an indicator that displays on the screen and indicates where the text input will begin from. This helps the user to look at where he is adding the text. There are many user interfaces that will represent the caret like a thin vertical line or a box which will flash and it varies from browser to browser and interface to interface. In this article, we are going to have a look at how we can hide the insertion caret in a webpage using CSS? How to hide the ... Read More

Animating a rainbow heart from a square using CSS?

Tanmay Chandhok
Updated on 18-Jan-2023 17:57:42
We can do animations using HTML, CSS, and JavaScript all together and can implement these on the webpage or the website. CSS provides lots of properties that we can use to create an animation which is why it is advised to use CSS for styling as it holds a lot of power for the front-end development. In this article, we will be creating a heart which changes its color every 3 seconds using CSS and it will be done in two steps using some animations. Steps to create the rainbow heart We will create two different divisions for the body, ... Read More

Adding a mask to an image using CSS

Tanmay Chandhok
Updated on 18-Jan-2023 17:48:08
We can place a layer over an element so that we hide the element either partially or completely. The mask-image property is a CSS property which specifies layer on the element and it can also be an image but we would have to use the address of the image to add a mask on that image. In this article, we will have a look at adding a mask to an image using CSS properties and what we can do more with the same property. Adding mask to an image The mask-image property is the property that we will be going ... Read More

Difference between resetting and normalizing CSS?

Tanmay Chandhok
Updated on 18-Jan-2023 17:41:25
Developers want the HTML elements to look the same on every browser, though it depends, as the functionality of each browser differ. When the browser render a HTML page, it will apply its own default styles. Styles like the heading tag with different sizes and fonts depending on the type of browser. Which means that the headings can have margins or extra padding without you even writing the code. In this tutorial, we are going to have a look at how we can reset and normalize CSS and what is the difference between them. Difference between normalizing and resetting? While ... Read More
Advertisements