In this article, we are going to design a working digital clock using JavaScript. The basic setup for digital clock : <div id="clock"></div> <script type="text/javascript"> function showTime(){ let time = new Date(); let hour = time.getHours(); let min = time.getMinutes();... Read more
In this article, we are providing you with a code snippet which you can include in any webpage where you want to display the internet speed in Mbps. Basic Idea : The basic idea here is to load an image... Read more
In this tutorial, we are going to create a QR Reader using JavaScript and HTML5. JavaScript enables us to access the camera and then we can easily scan the QR code to get the message in the QR Code. We... Read more
Welcome to yet another interesting tutorial in which we will be designing a webpage. The webpage shows a single item in a single view and when scrolled jumps to another item. Source Code <script type="text/javascript" src="jquery.min.js"></script> <link rel="stylesheet" href="bootstrap.min.css"> <style... Read more
In this article, we are going to learn to create a draggable HTML element with pure JavaScript and no use of any other libraries or plugins. Source Code : <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color:... Read more
In this post, we will be writing a simple JavaScript function that will generate random color which we set as the background of webpage. Source Code : <body onclick="changeColor();"> </body> <script type="text/javascript"> function generateColor(){ length = 6; var chars =... Read more
In this tutorial, we will be using JavaScript to create a bulb on/off effect in a webpage. The following source code uses two identical bulb images one in on state while the other in off state. You can use the... Read more
The following source code demonstrates the use of GreenSock (gsap.min.js) to show a sample SVG animation. Source Code : <style> body, html { width: 100%; height: 100%; } body { display: flex; justify-content: center; align-items: center; background-color: #333333; } </style>... Read more
In this article, we are going to learn to develop a custom music player using HTML, CSS and JavsScript (preferably JQuery). Full Source Code : <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <script src="https://kit.fontawesome.com/a062562745.js" crossorigin="anonymous"></script> <title>MP3 Player</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>... Read more
In this article, we are going to learn to create/develop a working analog clock using HTML, CSS and jQuery. The basic login in this analog clock lies in the fact that a complete one round is equivalent to 360 degrees.... Read more
The following source code enables us to create a custom playlist with just the videos that we want to play. Full Source Code : <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"/> <style type="text/css"> body{ background: #ddd; } .head{ margin-top:20px; margin-bottom: 20px; font-weight: bold;... Read more
In this article, we are going to design an animated card slider with next/previous button using jQuery. The following source code provides us with a card slider UI design with next and previous button. The basic idea is to allow... Read more
Accordions are the special type of UI element belonging to Tab Type Category. You can use them to create sidebars, menus or for creating interactive pages with lengthy content . Accordions are useful when you want to toggle between hiding... Read more
User authentication and login are now an integral part of the web applications nowadays. Most sites or applications would ask user to sign up at first and then authenticate them with login credentials which will include a secret key commonly... Read more
In this article, we are going to learn to flip card block in HTML using JQuery. We will be using JQuery and plugins including wow.js , sticky.js and slick.js in order to achieve this. Full Source Code : <script... Read more