To close list items with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    }    ul {       list-style-type: none;       padding: 0;       margin: 0;    }    ul li {       border: 1px solid rgb(221, 221, 221);       background-color: #5a5cec;       color: white;       padding: 12px;       text-decoration: none;       font-size: 18px; ... Read More

To create a chat message with CSS, the code is as follows −Example Live Demo    body {       margin: 0 auto;       max-width: 800px;       padding: 0 20px;       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    .message {       font-size: 18px;       font-weight:500;       border: 2px solid #dedede;       background-color: #55e4a8;       color:rgb(0, 0, 0);       border-radius: 12px;       padding: 10px;       margin: 10px 0;    }    .darker ... Read More

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