Creating a dropdown list with images can be a great way to make your website or application more visually appealing and user-friendly. In this article, we will go through a step-by-step example of how to add an image to each item in a dropdown list using HTML and CSS. Approach We will go through a step-by-step process of creating an HTML file with the necessary elements, using CSS to style and position those elements, and using the :hover selector to change the appearance of the elements when the user interacts with them. By the end of this article, you ... Read More

Textarea is a type of box with dynamic width and height, that means when the text is entered inside it, the text will not overflow and will only be contained by this texarea as it can dynamically increase or decrease its height and width. The textarea is mainly used inside the forms to get the full address of user and some other content with a larger text content. Commonly, A textarea is in the form of square shape or the rectangular shape, which can be changes using JavaScript as well as CSS. In this article, we are going to learn ... Read More

Generally, the ID given to any element in an HTML document is unique and can be assign to an element only once. But it is possible to change that id later using the JavaScript following the same rule of uniqueness for new ID as well as only single element can contain the new ID. In this article, we are going to learn about the ways of changing the ID of an element using JavaScript. JavaScript provides us or allow us to use the id property to get the id of any element as well as to change or add a ... Read More

While programming in any programming language, it is very general to do the mistakes in the logic building or in following the syntax rules of a language, which results in formation of errors and failure of our code to perform every task as expected. In this article, we are going to learn, how we can find the exact location of those errors and how we can fix them to make our code work as expected. The process of finding the errors in the code and then fixing them is known as Debugging. There are different ways of debugging a JavaScript ... Read More

In this article, you will understand how to calculate minutes between two dates in JavaScript. The Date object works with dates and times. Date objects are created with new Date(). JavaScript will use the browser's time zone and display a date as a full text string. Example 1 In this example, we use a function to find the time difference. function minutesDiff(dateTimeValue2, dateTimeValue1) { var differenceValue =(dateTimeValue2.getTime() - dateTimeValue1.getTime()) / 1000; differenceValue /= 60; return Math.abs(Math.round(differenceValue)); } dateTimeValue1 = new Date(2020, 12, 12); console.log("The first date time value is defined ... Read More

In this article, you will understand how to access object properties from result returned by async() functions in JavaScript. An object property in JavaScript is a variable that is associated with the object itself, i.e. the properties have a name and value is one of the attributes linked with the property. Example 1 In this example, let’s understand how to access objects property using dot notation console.log("A function is created that returns promise object") const promiseFunction = (input) => { return new Promise((resolve, reject) => { return resolve({ ... Read More

In this article, you will understand how to calculate days left until next Christmas using JavaScript. The Date object works with dates and times. Date objects are created with new Date(). JavaScript will use the browser's time zone and display a date as a full text string. Example 1 In this example, we compute the time difference without functions. let todayDate = new Date(); console.log("Today's date is defined as: ", todayDate) let christmasYear = todayDate.getFullYear(); if (todayDate.getMonth() == 11 && todayDate.getDate() > 25) { christmasYear = christmasYear + 1; } let christmasDate = new Date(christmasYear, 11, ... Read More

In this article, you will understand how to add a property to a JavaScript object using a variable as the name. Adding property to an object can be achieved by two methods. The first is the dot (.) notation and the second is using the brackets([]). Example 1 In this example, let’s use the dot (.) notation. var inputObject = {a: "value1"}; console.log("An object is created with properties: ", inputObject) inputObject.b = "value2"; console.log("After adding properties, the object now contains: ", inputObject) console.log(inputObject) Explanation Step 1 − Define an object namely inputObject. Step 2 − Add an ... Read More

In this article, you will understand how to add float numbers using JavaScript. Float values in JavaScript are defined as parseFloat(string). Example 1 In this example, let’s understand adding float values without using functions. let inputFloat1 = parseFloat(2.3) let inputFloat2 = parseFloat(3.5) console.log("The two float values are defined as ", inputFloat1 ,"and", inputFloat2) let result = inputFloat1 + inputFloat2 console.log("The sum of the float values is: ", result) Explanation Step 1 − Define two float values inputFloat1 and inputFloat2. Step 2 − Add the two float values using addition operator (+). Step 3 − Display the result. ... Read More

In this article, you will understand how to add a parameter to the URL in JavaScript. There are two methods to add parameters to an url: append() method and set() method. The append() method is used to specifically add key-value pairs to the url. The set() method adds the value to a specific key. If the key doesn't exist, a new key is created. If several keys exist, the value is updated for one of them and others are deleted. Example 1 Let's look at the append() method in this example let inputUrl = new URL('https://urlExample.com?key1=value1'); let inputParams = new ... Read More