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
Articles by Manisha Patil
32 articles
Build a Site Bookmark App with JavaScript by using Local Storage
In this tutorial, we'll build a Site Bookmark app using JavaScript, HTML, and CSS. The app will use Local Storage to save bookmarks permanently without requiring a database. Local Storage is a web storage API that allows client-side data storage. Data is stored as strings and persists even after closing the browser session. Storage capacity ranges from 2MB to 10MB depending on the browser. Features Our bookmark app will include: Add new bookmarks with site name and URL Visit saved websites Delete unwanted bookmarks Persistent storage using Local Storage File Structure ...
Read MoreDesign Smiley Face Eyes that follow Mouse Cursor using CSS and JS
Creating animated smiley faces with eyes that follow the mouse cursor is an engaging way to learn CSS pseudo-elements and JavaScript event handling. This effect combines CSS animations with JavaScript mouse tracking to create interactive cartoon faces. How It Works The animation works by calculating the angle between the mouse position and each eye's center. JavaScript uses Math.atan2() to determine the rotation angle, then applies a CSS transform to rotate the eyeballs toward the cursor. HTML Structure We create multiple face containers, each containing two eyes represented by divs: ...
Read MoreDifference between document load and DOMContentLoaded events in JavaScript
In JavaScript, understanding when to use DOMContentLoaded versus load events is crucial for optimal web performance. Both events help determine when different parts of a webpage have finished loading, but they trigger at different stages of the loading process. DOMContentLoaded Event The DOMContentLoaded event fires when the HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This makes it ideal for DOM manipulation scripts that don't depend on external resources. Syntax document.addEventListener("DOMContentLoaded", function(e) { console.log("DOM is ready"); }); Example: DOMContentLoaded Event ...
Read MoreExplain Asynchronous vs Deferred JavaScript
When loading JavaScript files, the browser normally pauses HTML parsing to download and execute scripts. This can slow down page loading, especially with large JavaScript files. The async and defer attributes solve this problem by changing how scripts are loaded and executed. Normal Script Loading By default, scripts block HTML parsing until they finish downloading and executing: The browser stops parsing HTML, downloads the script, executes it, then continues parsing. This can create delays, especially with large scripts. Async Attribute The async attribute downloads scripts in parallel with HTML parsing. Once ...
Read MoreHow can JavaScript code be hidden from old browsers that do not support JavaScript?
The JavaScript script tag is occasionally not understood by older browsers. If not, they will simply disregard it and display your script as though it were a section of the (X)HTML document's body. It's a smart option to use comments to hide scripts from outdated browsers to prevent it from happening. JavaScript is now supported by all modern browsers; however, earlier browsers did not. In this article, we'll learn how to prevent JavaScript code from executing in older browsers. As some of your viewers will be seeing the site on a phone while others are using a large ...
Read MoreHow do I shift from jQuery to core JavaScript?
JavaScript is a versatile programming language used to create interactive and dynamic web applications. While jQuery was once essential for simplifying JavaScript development, modern JavaScript (ES6+) now provides native methods that make jQuery less necessary. jQuery is a lightweight JavaScript library that simplifies DOM manipulation, event handling, and AJAX operations. It became popular because it solved cross-browser compatibility issues and provided a simpler syntax for common tasks. Why Developers are Moving from jQuery to Vanilla JavaScript Modern JavaScript Features: ES6+ provides powerful built-in methods that eliminate the need for jQuery's utility functions. ...
Read MoreHow to change the color of error message in jquery validation in JavaScript?
jQuery validation allows developers to create user-friendly forms with real-time feedback. One common requirement is customizing the appearance of error messages, particularly their color. This tutorial demonstrates how to modify error message colors in jQuery validation using CSS and JavaScript. Basic Setup To customize error message colors, you need a form with input fields and corresponding error message containers. The key is using CSS or jQuery's .css() method to apply styling dynamically. Method 1: Using Inline CSS Styles The simplest approach is setting the color directly in HTML or through jQuery: ...
Read MoreHow to create editable div using JavaScript?
In this tutorial, you'll learn how to create editable div elements using JavaScript. An editable div allows users to click and modify text content directly in the browser, providing an intuitive inline editing experience. Method 1: Using contentEditable Property The simplest approach is using the HTML5 contentEditable attribute, which makes any element editable when set to true. Editable Div with contentEditable .editable-div { border: ...
Read MoreHow to detect copy paste commands Ctrl+V, Ctrl+C using JavaScript?
You'll learn how to use JavaScript to detect the keystrokes Ctrl+V and Ctrl+C in this article. When a user wishes to paste something into an input field, they have two options: either they can use the context menu by right-clicking on the webpage or they may use their keyboard by pressing the CTRL and V buttons simultaneously. The keydown event's ctrlKey property is used to figure out the key combination that contains "Ctrl." To identify whether "ctrl" is pressed or not during the key event, it produces a "boolean" value. Syntax event.ctrlKey Return Value ...
Read MoreHow to import a SVG file in JavaScript?
Scalable Vector Graphic (SVG) is a powerful 2D image format that uses mathematical formulas and XML markup to create scalable graphics. Unlike raster images (JPEG, PNG) that rely on pixels, SVG files maintain crisp quality at any size, making them ideal for web development. SVG files offer significant advantages in web design including infinite scalability, smaller file sizes, better accessibility features, and the ability to be styled with CSS. This article explores different methods to import and use SVG files in JavaScript applications. Method 1: Using HTML Element The simplest method to display SVG files is ...
Read More