Articles on Trending Technologies

Technical articles with clear explanations and examples

How to create a responsive bottom navigation menu with CSS and JavaScript?

Aman Kumar
Aman Kumar
Updated on 15-Mar-2026 1K+ Views

In this article we will create a responsive bottom navigation menu using CSS and JavaScript. A responsive bottom navigation adapts to different screen sizes and provides mobile-friendly navigation. A responsive navigation menu adjusts its layout and behavior based on the viewport size. On larger screens, it displays all menu items horizontally. On smaller screens, it collapses into a hamburger menu to save space. HTML Structure First, let's create the HTML structure for our bottom navigation menu: Home Tutorials Contact About ...

Read More

How to create a temperature converter with HTML and JavaScript?

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 845 Views

To create a temperature converter with HTML and JavaScript, you need to combine form elements with JavaScript functions to perform real-time temperature conversions. Complete Temperature Converter Example body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; } .converter-container { background: #f8f9fa; border-radius: ...

Read More

Disabling arrow key in text area using JavaScript.

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 375 Views

You can disable arrow key navigation in a text area using JavaScript by intercepting keydown events and preventing their default behavior. This technique is useful when you want to restrict user interaction or create custom navigation controls. Understanding Arrow Key Codes Arrow keys have specific key codes that we can detect: Left Arrow: 37 Up Arrow: 38 Right Arrow: 39 Down Arrow: 40 Complete Example Disable Arrow Keys in Textarea ...

Read More

JavaScript: How to loop through all DOM elements on a page and display result on console?

Alshifa Hasnain
Alshifa Hasnain
Updated on 15-Mar-2026 1K+ Views

In this article, we will learn how to iterate through all DOM elements on a webpage using JavaScript. By doing so, we can easily access and manipulate various elements of the page, whether for debugging, gathering information, or applying changes to the page's structure and content. We'll walk through a step-by-step process to loop through all elements and display the results in the console, helping you better understand how to interact with the DOM. What is the DOM? The Document Object Model (DOM) is a representation of the structure of a webpage. It treats each part of the ...

Read More

How to check for 'undefined' or 'null' in a JavaScript array and display only non-null values?

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 582 Views

In JavaScript, arrays can contain null or undefined values. To display only non-null and non-undefined values, you need to check each element before processing it. Sample Array with Mixed Values Let's start with an array containing valid strings, null, and undefined values: var firstName = ["John", null, "Mike", "David", "Bob", undefined]; console.log("Original array:", firstName); Original array: [ 'John', null, 'Mike', 'David', 'Bob', undefined ] Method 1: Using for Loop with != undefined This approach checks if each element is not undefined. Since null != undefined evaluates to true, this will ...

Read More

Split keys and values into separate objects - JavaScript

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 4K+ Views

In JavaScript, you often need to transform an object into an array of objects where each key-value pair becomes a separate object. This is useful for data processing, API responses, and working with libraries that expect array formats. Problem Statement Suppose we have an object like this: const dataset = { "diamonds": 77, "gold-bars": 28, "exciting-stuff": 52, "oil": 51, "sports-cars": 7, "bitcoins": 40 }; We need to write a JavaScript function that takes this object and returns an array of objects with ...

Read More

How to integrate Google AdSense into your webpage?

Anjana
Anjana
Updated on 15-Mar-2026 530 Views

If your website has sufficient content and good page views, you can start adding advertisements to earn money. Google AdSense is a free and easy way to monetize your website by displaying targeted ads. Integrating Google AdSense involves both account setup and technical implementation. Let's explore the complete process. Setting Up Your AdSense Account Follow these steps to create and configure your AdSense account: Go to the official AdSense website and sign in with your Google Account. Set up your account with all required details including website ...

Read More

How can I get time and date since epoch in JavaScript?

Shubham Vora
Shubham Vora
Updated on 15-Mar-2026 5K+ Views

In this tutorial, we will learn to get the date and time since epoch in JavaScript. Sometimes, programmers need to find the total number of milliseconds, seconds, days, or other time units from 1 January 1970 since the UNIX epoch started. The Unix epoch is the starting point (January 1, 1970, 00:00:00 UTC) used by most computer systems to measure time. JavaScript provides several methods to calculate time elapsed since this date. Using the Date() Constructor In this approach, we will learn to get the current date from the UNIX epoch that started on 1 January 1970. ...

Read More

How [ ] is converted to Number in JavaScript?

Lakshmi Srinivas
Lakshmi Srinivas
Updated on 15-Mar-2026 272 Views

In JavaScript, an empty array [] converts to the number 0 when using type coercion. This happens through a multi-step conversion process that JavaScript performs automatically. How the Conversion Works When converting [] to a number, JavaScript follows these steps: First, it calls the valueOf() method on the array, which returns the array itself Since the result isn't a primitive, it calls toString() on the array An empty array's toString() returns an empty string "" Finally, the empty string converts to 0 Using Number() Method ...

Read More

How to set the style of the outline around an element with JavaScript?

Arushi
Arushi
Updated on 15-Mar-2026 317 Views

To set the outline style around an element in JavaScript, use the outlineStyle property. This property controls the visual appearance of the outline, which is drawn outside the border and doesn't affect the element's dimensions. Syntax element.style.outlineStyle = "value"; Common Outline Style Values The outlineStyle property accepts these values: solid - A solid line dotted - A series of dots dashed - A series of dashes double - Two solid lines groove - A 3D grooved outline ...

Read More
Showing 18171–18180 of 61,297 articles
Advertisements