JavaScript Archives | Puneet Sharma - Freelance Web Developer

Create Thumbnail of pdf and video file with certain width and height – JavaScript Function

The following code creates a 480 X 320 px thumbnail and calls the upload function to upload the blob data. Example Screenshots: Extract PDF document thumbnail: JavaScript Function function extractDocThumbnail() { const pdfUrl =...

HTML form with detectable changes and a reset button

Code Snippets, JavaScript, jQuery

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.

Category: JavaScript