How to preview image before upload using JavaScript ?
In this tutorial, we will be learning to preview an image without actually uploading it to the server. We will use couple of lines of JavaScript code to achieve this. We will have an “input” HTML element to trigger the file selection box…
Design progress bar using CSS and JavaScript
A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer or installation. A progress bar can be used to show how far along a user is in a process. Follow this…
How to share URL in Facebook Messenger through web ?
The following script enables you to share any link/URL in Facebook Messenger from webpage. We have used Facebook JavaScript SDK to achieve this. The script opens a new window in desktop web browser that enables you to share any link to specified friend…
Confetti Party Popper Animation using JavaScript
What is a Party Popper ? A party popper is a handheld pyrotechnic device commonly used at parties. It emits a loud popping noise by means of a small friction-actuated explosive charge that is activated by pulling a string. The explosive charge comes from…
Autocomplete Input using jQuery UI
In this tutorial, we are going to create an Autocomplete Input element using jQueryUI. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building…
How to create FAQ page using HTML and CSS ?
In this tutorial, we will learn to create a FAQ page using HTML, CSS and a bit of JQuery. Source Code : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>FAQ</title> <link rel="stylesheet"…
Detect Keyboard key press using JavaScript
We are going to use JavaScript to detect which key is pressed in keyboard. We will track an event listener to know the key code and key name of the key that is being pressed and show it in webpage. Source Code : <style type="text/css"> body{…
Display Hide HTML Element on Scroll using JQuery
In this tutorial, we are going to learn to hide/show HTML element on scroll inside a webpage. Source Code : <style type="text/css"> .more-stories{ display: none; position: fixed; bottom: -50px; right: 10px; width: 350px; background: #fff; padding:…
Free JQuery Excel Plugin with working code and demo
JExcel is a lightweight JQuery plugin that enables us to create a Microsoft Excel like environment in our webpage. Source Code : <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"…
Counter App using HTML, CSS and JavaScript
In this tutorial, we are going to develop a simple Counter App using HTML, CSS and JavaScript. The code uses JavaScript event listener to either increment or decrement the counter value. Source Code : <!DOCTYPE html> <html>…
Live Code Editor using HTML, CSS and JavaScript
In this video, we will create a Codepen like Live Code Editor for HTML, CSS and JavaScript with Live Realtime Preview. Source Code : index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"…
Thanos Snap Effect Using HTML and CSS
Most of us have watched the movie Avengers : Infinity War where Thanos had killed half of the universe with just one snap. Here, in this tutorial we will be creating the same snap effect using JavaScript and CSS. Follow this video for guidance : Source…
How to create Sticky Navbar on scroll ?
In this tutorial, we will be learning to create sticky navbar on scroll using CSS and few lines of JavaScript code. https://www.youtube.com/watch?v=RCvoPMW8X2g Source Code : <style type="text/css"> body{ background-color: #aacad6; margin:0; }…
Real Time HTML CSS and JavaScript Editor with Preview
In this tutorial, we are going to learn to create a real-time HTML, CSS, and JavaScript editor with preview in a webpage. We can easily write our code in the text area provided the output of which can be easily rendered in the preview area on the same…
Random password generator with character length using JavaScript
In this tutorial, we are going to learn to create a random password generator tool with an option to change the number of characters. We will be using JavaScript to create a random string to generate the password. Full Source Code : <style…