You Are Viewing Posts Under Category: JavaScript Codes

Auto-Complete Search Address, Lat, Lng From Google Map Search & Drag Drop PIN
April 12th, 2023 | 2 Comments | HTML-CSS-PHP-JavaScript / JavaScript Codes | Google map is one of the most widely used APIs of Google as a majority of websites use Google maps for showing address location. For a static address, it’s pretty simple. All you need to do is input the address and the map will show the nearest location. The problem arrives when the address is [&h...
Create Confetti Explosion Background On Click Using Pure JavaScript
March 14th, 2023 | 2 Comments | HTML-CSS-PHP-JavaScript / JavaScript Codes | Confetti.js is a lightweight JavaScript plugin to create a confetti celebration explosion effect. It draws confetti graphics on the HTML canvas element. The plugin allows you to render the confetti effect on any JavaScript event, like click, hover, or resize. So, you can use this animation effect fo...
Pure JavaScript Digital Alarm Clock With Alarm Sound
March 12th, 2023 | 0 Comments | HTML-CSS-PHP-JavaScript / JavaScript Codes | This JavaScript code snippet helps you to create an alarm clock with sound. It comes with a digital clock that shows the current time and alarm settings interface. Users can easily set an alarm for a certain time, when the alarm starts, the user can turn it off or snooze for the next five minutes. [...
How To Resize An Image Using Pure Vanilla JavaScript In Aspect Ratio?
March 6th, 2023 | 0 Comments | HTML-CSS-PHP-JavaScript / JavaScript Codes | Allowing users to upload photos directly to a website, without first resizing them, hurts the user experience for two reasons. Large photos take time to upload ⏱ Large photos cost the user money in bandwidth 💸 Photos should be resized on the client before uploading, especially now that smartpho...
Add Simple Hidden Search Widget With Toggle Using Pure Vanilla JavaScript
March 5th, 2023 | 0 Comments | HTML-CSS-PHP-JavaScript / JavaScript Codes | In this tutorial, we will be creating a Pure CSS and Vanilla javascript Expandable search bar from scratch with a cool animation effect There you go you have created a nice and elegant expandable search bar with minimal code and some basic Vanilla Javascript code without any frameworks or third-part...
Select Image, Crop Then Upload Or Save Using Pure JavaScript
February 26th, 2023 | 0 Comments | HTML-CSS-PHP-JavaScript / JavaScript Codes | This JavaScript code snippet is based on a simple idea to crop an image and save/download them instantly. It uses the JavaScript image Cropper library (cropper.js) to perform image cropping. Basically, this code snippet just focuses on just image cropping and lets users download it. But you can modi...