To toggle between hiding and showing an element with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    button {       padding: 10px;       border: none;       background-color: rgb(51, 51, 192);       color: white;       font-size: 18px;    }    .div-visible {       width: 100%;       padding: 50px 0;       text-align: center;       background-color: rgb(210, 230, 173);       margin-top: 20px;   ... Read More

The toggle between one button to another button means it allows the user to switch one window to another window, it allows to turn on and off a function, allows to change settings, and provides much more functionality. But in this article we have to write a program with the use of CSS and JavaScript to toggle between like and dislike buttons. To do so, let’s create three separate files for HTML, CSS, and JavaScript − HTML file(index.html) The HTML file is required to create buttons, headings, tags, etc. The HTML file must be saved using the .html file extension. ... Read More

To create fixed/sticky header on scroll with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       margin: 0px;       padding: 0px;       height: 150vh; /*To produce scroll bar*/    }    .header {       width: 100%;       background-color: rgb(52, 21, 110);       color: white;       padding: 50px;       font-size: 20px;    }    div.sticky {       position: fixed;       top: 0; ... Read More

To draw on scroll using JavaScript and SVG, the code is as follows −Example Live Demo    body {       height: 2000px;       background: #f1f1f1;    }    svg {       position: fixed;       top: 15%;       width: 400px;       height: 210px;       margin-left: -50px;    } Scroll Using JavaScript and SVG example    var polygon = document.getElementById("polygon");    var length = polygon.getTotalLength();    polygon.style.strokeDasharray = length;    polygon.style.strokeDashoffset = length;    window.addEventListener("scroll", drawPoly);    function ... Read More

To create a fullscreen window with JavaScript, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    button{       display: block;       padding:10px;       margin:10px;       background-color: rgb(81, 0, 128);       border:none;       color:white;    } Fullscreen Window with JavaScript Example

If you want to show notifications to the user about any information, such as a coupon for buying the product, you can create a snackbar. Use them as popups to display a message at the bottom of the screen. Generally, the snackbar vanish after some time. The snackbar appears to fadein and fadesout after some time. Let us see how to create a snackbar on the click of a button with CSS and JavaScript. Create a button for the snackbar For the snackbar to appear, you need to click on a button. Create a button using the element − ... Read More

The symbol.description property returns the optional description of the symbol objects and is a read only property.Following is the code for symbol.description property −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript symbol.description property CLICK HERE Click on the above button to get the description for the symbols.    let fillEle = document.querySelector(".sample");    let desc = [];    desc.push(Symbol("New").description);    desc.push(Symbol("Hello").description);    desc.push(Symbol.iterator.description);    document.querySelector(".Btn").addEventListener("click", () => {       desc.forEach((item) => (fillEle.innerHTML += item + ""));    }); OutputOn clicking the “CLICK HERE” button −

The JavaScript array.flatMap() function flattens the given nested array into a new flat array.Following is the code for the array.flatMap() method −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .sample {       font-size: 20px;       font-weight: 500;    } JavaScript Array flatMap() CLICK HERE Click on the above button to convert the nested array to flat array    let fillEle = document.querySelector(".sample");    let arr = ["cow", ["bull", "lion", "tiger"], "sheep"];    for ... Read More

The JavaScript array.entries() method returns key/value pairs as an array iterator object.Following is the code for the array.entries() method −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .sample {       font-size: 20px;       font-weight: 500;    } JavaScript Array some() CLICK HERE Click on the above button to see array elements as key value pairs    let fillEle = document.querySelector(".sample");    let arr = ["cow", "bull", "lion", "tiger", "sheep"];    fillEle.innerHTML = arr;    var entries = arr.entries();    document.querySelector(".Btn").addEventListener("click", () => {       fillEle.innerHTML = "";       for (let x of entries) fillEle.innerHTML += x + "";    }); OutputOn clicking the “CLICK HERE” button −

The JavaScript symbol.toString() returns the string representation of the specified symbol object.Following is the code for Symbol.toString() method −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript symbol.toString() method CLICK HERE Click on the above button to get the string representation for symbol    let fillEle = document.querySelector(".sample");    const symbol = Symbol.for("HELLO");    const symbol1 = Symbol.for("NEW");    const symbol2 = Symbol.for(711);    document.querySelector(".Btn").addEventListener("click", () => {       fillEle.innerHTML += symbol.toString() + "";       fillEle.innerHTML += symbol1.toString() + "";       fillEle.innerHTML += symbol2.toString() + "";    }); OutputOn clicking the “CLICK HERE” button −