JavaScript Archives | Puneet Sharma - Freelance Web Developer

HTML form with detectable changes and a reset button

Let’s create an HTML form with many different types of inputs with values and a hidden submit button and a reset button. Now, create a jQuery script that detects changes in input fields, unhides the submit and reset buttons, and hides them again if there is no...

OTP HTML and Script that allows pasting

Code Snippets, JavaScript, UI Components

Here is a code with the demo I just found on Codepen, that handles pasting OTP also. See the Pen OTP Field by Puneet Sharma (@webdevpuneet) on CodePen. HTML <body> <h1>Enter OTP</h1> <div class=”otp-field”> <input type=”text”...

Matrix rain drop 01 digit code

Code Snippets, CSS Animations, JavaScript

Here is a code with a demo for matrix raindrop-like animation from top to bottom with 0 and 1 as its digits. DEMO See the Pen Untitled by Puneet Sharma (@webdevpuneet) on CodePen. HTML <canvas class=”canvas”> Code // Initialising the canvas var canvas =...

JavaScript to equalize element heights

JavaScript

JavaScript to equalize element heights To achieve equal heights for child elements with the class equalize within a parent element with the class equalize-columns, you can use CSS and possibly a bit of JavaScript. One common approach is using Flexbox or Grid layout...

Animating Blocks

CSS Animations, JavaScript

Here is a cool example of animating blocks with no adjacent blocks active. See the Pen Animating Blocks by Puneet Sharma (@webdevpuneet) on CodePen.

Sticky Sidebar

JavaScript, UI Components

Javascript function to make the sidebar sticky to the bottom if the content length is more than the sidebar. Also, check the demo for the same. DEMO See the Pen Sticky Sidebar by Puneet Sharma (@webdevpuneet) on CodePen. JavaScript let vw =...

Category: JavaScript