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... Read more
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... Read more
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... Read more
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... Read more
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 highly... Read more
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" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style type="text/css"> body{ background:... Read more
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.... Read more
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: 20px 40px; } .more-item{... Read more
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" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>JQuery Excel</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/4.6.1/jexcel.css" rel="stylesheet"> </head>... Read more
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> <head> <meta... Read more
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" content="width=device-width, initial-scale=1"> <title>Live Code Editor</title> <link rel="stylesheet"... Read more
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... Read more
In this tutorial, we will be learning to create sticky navbar on scroll using CSS and few lines of JavaScript code. Source Code : <style type="text/css"> body{ background-color: #aacad6; margin:0; } .sticky{ position: fixed; top:0; width: 100%; } .header{ background-color:... Read more
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... Read more
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... Read more