While designing webpages using plain HTML, CSS, and JavaScipt, programmers often prefer developing advanced CSS designs to make the website attractive. Creating animations using keyframes and other techniques is one of the most popular techniques nowadays. However, we can also use the JavaScript code to create animations such as the bouncing ball effect. This method gives us more control over the animations. This article will first explain how to build a bouncing ball using HTML and CSS. We will also learn how to write JavaScript code to achieve similar animations. Create Bounce Ball Using Keyframes It is very difficult to ... Read More

Division Element as know as is normally used for grouping the HTML element and then by using CSS we style them. An animation is a graphical element with visual effects to make it much more attractive. In HTML and CSS, we commonly name the element as . This article will explain how CSS binds animations to the division elements. Use The keyframes Method To Define The Animation The keyframe method is the most commonly used method to create animation effects in CSS. Example .container { ... Read More

Becoming a full-stack developer is the dream of many engineering students. Full stack development means building a web 2.0+ application with dynamic web pages consisting of databases, videos, images, etc. This article will discuss how to become a full-stack web developer in 2023. Learn The Basics Of Web development The first and foremost important step to becoming a full-stack developer is to learn a few basic languages which are popularly used to build web applications. HTML − This is a markup language used to design the skeleton of the web application. Among several versions available, you should consider ... Read More

While using a tag, the browser often places the items within the container in the next line. For example, programmers need to place the headers in a single line to create the navigation component. We can use the inline, inline-block, flex-box properties, etc., to avoid new lines with the tag. This article will explain how to avoid a new line with a tag by following approaches like inline property, flex-box property, etc. Use inline Property One popular method to avoid new lines with tags is to use the inline property. This property forces the new lines to stay the same ... Read More

Have you ever seen notifications on any website showing the time stamp? It shows something like “12 minutes ago”, “2 days ago”, “10 hours ago”, etc. It is related to the timestamp difference between two dates or times. Also, some apps show that this device's last login was 22 hours ago. So, there are many uses to get the timestamp difference between two dates. In this tutorial, we will learn different approaches to get the relative timestamp difference between two dates. Use the getTime() method with the date and create a custom algorithm In JavaScript, we can ... Read More

In JavaScript, while working with the form elements, we need to validate the input fields and form elements when a user enters the value. In this tutorial, we will work with the file input. We will also learn to validate the file input. Sometimes, we may be required to check if the file is selected in the input field, then only enable the submit button; otherwise, disable the submit button. So, it will not allow users to submit the form or file without selecting it. Validate the file input using JavaScript In JavaScript, we can access the file input ... Read More

Have you ever worked with the modal or seen it on any website? When you click outside the modal, it closes the modal. We must detect whether users have clicked on or outside the modal element in such cases. If users click outside the modal element, we need to close the modal element. In this tutorial, we will learn different ways to detect the click on the div element. Use the onClick attribute to check if the clicked element is a div In HTML, we can add the onClick attribute to any HTML element and assign it the ... Read More

We may require to find the string, which contains only digits but not any other characters while developing. The easiest way to check can parse the numbers from the string and compare its length with the original string’s length. If both are the same, that means the string contains only digits. Users can use the parseInt() method to parse the numbers from the string. However, in this tutorial, we will learn other methods to check if the string contains only digits in JavaScript. Use the for-loop and CharCodeAt() method We can iterate through the string using the for-loop. ... Read More

In JavaScript, we can use the Date() object to create different timestamps. Also, we may be required to check if one date is between two using JavaScript. For example, we want to create a filter for orders in the eCommerce application based on the dates. So, we should be able to filter all orders between the two dates that users enter into the date input field. Another real-world use case of checking one date between two is in the banking application. For example, while developing the banking system application, developers need to create a filter allowing users to ... Read More

In this tutorial, we will learn to find the difference between two dates and check if the difference is less than one hour. Sometimes, developers must play with the Date object and perform some operation every hour. So, this can be one approach that checks if a particular operation is performed before an hour, perform it again; otherwise, wait to complete the hour. Here, we will learn different approaches to check if the date is less than 1 hour ago using JavaScript. Use the getTime() method The getTime() method returns the total milliseconds for the date from 1st ... Read More