Code Snippets 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”...

Gradient loader animation with html and css only

Code Snippets, CSS, CSS Animations

Here is a very simple example with a demo and source code for making a cool loader animation with a gradient. See the Pen loading-animation-gradient by Puneet Sharma (@webdevpuneet) on CodePen.

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 =...

Responsive Media Queries – CSS

Code Snippets, CSS

@media (max-width:1800px) { } @media (max-width:1400px) { } @media (max-width:1300px) { } @media (max-width: 1199.98px) { } @media (max-width: 1199.98px) { } @media (max-width: 991.98px) { } @media (max-width: 767.98px) { } @media (max-width: 575.98px) {...

Category: Code Snippets