To create a typing effect with JavaScript, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    button{       padding:10px;       font-size: 18px;       background-color: rgb(128, 19, 218);       color:white;       border:none;    }    .heading{       color:crimson;    } typeText Click me    document.querySelector('.typeButton').addEventListener('click',typeText);    var i = 0;    var text = 'This text is currently being typed across... It is still typing..';    var speed = 50;    function typeText() {       if (i < text.length) {          document.querySelector('.heading').innerHTML += text.charAt(i);          i++;          setTimeout(typeText, speed);       }    } OutputThe above code will produce the following output −On clicking the “Click me” button −

To create a countdown timer with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .timer {       text-align: center;       font-size: 60px;       margin-top: 0px;       color: white;       background-color: rgb(100, 38, 214);    } Countdown Timer Example    var countDownDate = new Date("June 5, 2022 11:27:15").getTime();    var timeClear = setInterval(function() {       var now = new Date().getTime();       var ... Read More

To use icons to make animated effect, the code is as follows −Example Live Demo    #user {       font-size: 60px;       color:rgb(106, 33, 201);    }    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       padding: 20px;    } Animating Icon example    function userShift() {       var userEle;       userEle = document.getElementById("user");       userEle.innerHTML = "";       setTimeout(function() {          userEle.innerHTML = "";       }, 1000);       setTimeout(function() {          userEle.innerHTML = "";       }, 2000);    }    userShift();    setInterval(userShift, 4000); OutputThe above code will produce the following output −

To import and export modules using JavaScript, the code is as follows −Note − To run this example you will need to run a localhost server.INDEX.htmlExample Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 18px;       font-weight: 500;    } JavaScript Importing and Exporting Modules IMPORT Click on the above button to import module script.jsimport test from './sample.js'; document.querySelector('.Btn').addEventListener('click',()=>{    test(); })sample.jslet resultEle = document.querySelector(".result"); export default function testImport(){    resultEle.innerHTML = 'Module testImport has been imported'; }OutputOn clicking the ‘IMPORT’ button −

To generate random hex codes of color using JavaScript, the code is as follows −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       box-sizing: border-box;       font-size: 18px;       font-weight: 500;       color: white;       width: 150px;       height: 150px;       text-align: center;       padding-top: 4%;    } Generate random hex codes of color GENERATE Click on the above button to generate a random hex color code    let resultEle = document.querySelector(".result");    let hexCode = "0123456789ABCDEF";    let Color = "#";    document.querySelector(".Btn").addEventListener("click", () => {       for (let i = 0; i < 6; i++)          Color += hexCode[Math.floor(Math.random() * 16)];       resultEle.style.backgroundColor = Color;       resultEle.innerHTML = Color;    }); OutputOn clicking the ‘GENERATE’ button −

The JavaScript File WebAPI file.name property returns only the name of the file without the path.Following is the code for the File WebApi File.name property −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 18px;       font-weight: 500;       color: red;    } JavaScript file.name property Upload a file using the above input type to get its file name    let resultEle = document.querySelector(".result");    document    .querySelector(".fileInput")    .addEventListener("change", (event) => {       resultEle.innerHTML += "File name = " + event.target.files[0].name;    }); OutputOn clicking the ‘Choose file’ button and selecting a file −

The JavaScript WeakSet is used for storing collection of objects. Like set it doesn’t store duplicates.Methods of WeakSet −MethodDescriptionadd(obj)Append new value to the weakSet.delete(obj)Deletes the value from weakSet.has(obj)Returns true or false depending upon if the weakSet object contains the value or not.length()Returns the weakSet object lengthFollowing is the code for the WeakSet in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 18px;       font-weight: 500;       color: red;    } ... Read More

The JavaScript unescape() function is used to decode an encoded string. It is deprecated in JavaScript version 1.5.Following is the code for the unescape() function −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .sample,    .result {       font-size: 18px;       font-weight: 500;       color: red;    }    .result {       color: blueviolet;    } JavaScript unescape() property CLICK HERE CLICK the above button to decode the above url ... Read More

The JavaScript undefined property specifies if a variable has been declared or assigned a value yet.Following is the code for the JavaScript undefined property −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .sample {       font-size: 18px;       font-weight: 500;       color: red;    } JavaScript undefined property CLICK HERE CLICK the above button to know if variable age has been defined or not    let sampleEle = document.querySelector(".sample");    let ... Read More

To trigger a button on the Enter key in JavaScript, you can do it by using JavaScript keyboard events. Keyboard interactions are very essential in web development, and developers must use them effectively for a better user experience. This is especially helpful for forms, search boxes, and places where you enter information. In this article, we will explore different ways to detect and handle the ENTER key press event in JavaScript. To trigger a button on enter key in JavaScript, you can do it the following ways: Using keyup() event: ... Read More