Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Object Oriented Programming Articles
Page 97 of 589
How to create a draggable HTML element with JavaScript and CSS?
To create a draggable HTML element with JavaScript and CSS, you need to handle mouse events and update the element's position dynamically. This technique allows users to click and drag elements around the page. Basic HTML Structure Start with an HTML element that has absolute positioning and a move cursor to indicate it's draggable: body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .dragDiv { position: absolute; ...
Read MoreHow to use media queries with JavaScript?
JavaScript provides the window.matchMedia() method to detect and respond to CSS media query changes dynamically. This allows you to create responsive behavior that adapts to screen size, device orientation, and other media features. Basic Syntax let mediaQuery = window.matchMedia("(max-width: 768px)"); // Check if query matches if (mediaQuery.matches) { // Screen is 768px or smaller } // Listen for changes mediaQuery.addEventListener('change', function(e) { if (e.matches) { // Query now matches } }); Example: Responsive ...
Read MoreHow to create and use a Syntax Highlighter with JavaScript?
A syntax highlighter in JavaScript allows you to apply styling to specific code elements like keywords, strings, or HTML tags. This tutorial shows how to create a basic highlighter using regular expressions and DOM manipulation. Example: HTML Link Highlighter This example highlights HTML anchor tags by applying custom CSS styles: body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .colorLinks { color: rgb(131, 44, 212); ...
Read MoreHow to create a weight converter with HTML and JavaScript?
Creating a weight converter with HTML and JavaScript involves building a simple form that takes weight input in one unit and converts it to another unit in real-time. This tutorial demonstrates how to create a kilogram to gram converter. HTML Structure The HTML provides the basic structure with an input field for kilograms and a display area for the converted grams: body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } input, span{ ...
Read MoreHow to create a temperature converter with HTML and JavaScript?
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 MoreHow to create a length converter with HTML and JavaScript?
To create a length converter with HTML and JavaScript, you'll need to combine HTML form elements with JavaScript functions to handle the conversion logic. This tutorial demonstrates building a simple kilometer-to-meter converter. HTML Structure The converter uses an input field for kilometers and displays the converted meters value. The oninput and onchange events trigger the conversion function automatically as you type. Complete Example body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; ...
Read MoreHow to create a speed converter with HTML and JavaScript?
To create a speed converter with HTML and JavaScript, we'll build a simple web application that converts kilometers per hour to meters per second. This involves HTML for the interface and JavaScript for the conversion logic. HTML Structure The HTML creates the user interface with an input field for entering speed values and a display area for the converted result: body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; ...
Read MoreHow to output JavaScript into a Textbox?
You can output JavaScript values to a textbox using the value property. This is commonly done to display calculation results or user feedback. Basic Approach To output to a textbox, access the input element and set its value property: document.getElementById("myTextbox").value = "Your output here"; Example: Calculator with Textbox Output JavaScript Textbox Output First Number: ...
Read MoreExplain JavaScript text alert
The JavaScript alert() function is used to display a popup message to the user. It's a built-in browser method that creates a modal dialog box with a message and an "OK" button. Syntax alert(message); Parameters The alert() function accepts one parameter: message - A string that specifies the text to display in the alert box Basic Example JavaScript Alert Example JavaScript Text ...
Read MoreFlat a JavaScript array of objects into an object
To flatten a JavaScript array of objects into a single object, we can create a function that iterates through each object in the array and combines their properties. This technique is useful when you need to merge multiple objects while preserving unique property names by appending indices. Basic Approach The most straightforward method is to loop through the array and create new property names by appending the array index to each original property name. // Example array of objects const notes = [{ title: 'Hello world', id: 1 ...
Read More