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 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

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 −

The JavaScript Symbol.iskeyFor() is used for finding the key that is associated with a given symbol. The key is retrieved from the global symbol registry.Following is the code for Symbol.keyFor() function −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript Symbol.keyFor() function CLICK HERE Click on the above button to find the keys for the symbol    let fillEle = document.querySelector(".sample");    const ... Read More

The Symbol.isConcatSpreadable symbol is used to specify if a nested array should be flattened to its individual array elements or not when using the Array.prototype.concat() method.Following is the code for Symbol.isConcatSpreadable symbol −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    }    .result {       color: red;    } JavaScript Symbol.isConcatSpreadable symbol CLICK HERE Click on the above button to concat the both array ... Read More