Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To create a form with multiple steps, the code is as follows −Example Live Demo * { box-sizing: border-box; } body { background-color: #f1f1f1; } #regForm { margin: 100px auto; font-family: Raleway; padding: 40px; width: 70%; min-width: 300px; } h1 { text-align: center; } input { padding: 10px; width: 100%; font-size: 17px; font-family:'Segoe ... Read More
To toggle between password visibility with JavaScript, the code is as follows −Example Live Demo Password visibility example Password: Show Password Click on the above checkbox to see your password as text document.querySelector(".check").addEventListener("click", showPass); function showPass() { var inputPassEle = document.getElementById("inputPass"); if (inputPassEle.type === "password") { inputPassEle.type = "text"; } else { inputPassEle.type = "password"; } } OutputThe above code will produce the following output −On checking the show password checkbox −
To trigger a button click on keyboard "enter" with JavaScript, the code is as follows −Example Live Demo Trigger Button Click on Enter Example Button Press the "Enter" key inside the above input field to trigger the button. var inputText = document.getElementById("inputField"); inputText.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("alertBtn").click(); } }); OutputThe above code will produce the following output −On typing something in the field and then pressing enter −
To find out if capslock is on inside an input field with JavaScript, the code is as follows −Example Live Demo #textBox { display: none; color: red; } Detecting Caps Lock Example Press caps lock in the above input field to check warning WARNING! Caps lock is ON. var input = document.querySelector(".inputfield"); var textBox = document.querySelector(".textBox"); input.addEventListener("keyup", event => { if (event.getModifierState("CapsLock")) { textBox.style.display = "block"; } else { textBox.style.display = "none"; } }); OutputThe above code will produce the following output −On typing something in the input field with capslock on −
To check whether a checkbox is checked with JavaScript, the code is as follows −Example Live Demo Displaying textBox when a checkbox is checked Checkbox: Checkbox is checked!!! document.querySelector(".check").addEventListener("click", checkFunction); function checkFunction() { var checkBox = document.querySelector(".check"); var textBox = document.querySelector(".textBox"); if (checkBox.checked == true) { textBox.style.display = "block"; } else { textBox.style.display = "none"; } } OutputThis will produce the following output −On clicking the checkbox −
To create a responsive navigation menu with a login form inside of it, the code is as follows −Example Live Demo Document body { margin: 0px; margin-top: 10px; padding: 0px; } nav { width: 100%; background-color: rgb(39, 39, 39); overflow: auto; height: auto; } .links { display: inline-block; text-align: center; padding: 14px; color: rgb(178, 137, 253); ... Read More
The ArrayBuffer.isView() method tells us if the passed parameter value is an ArrayBuffer view or not.Following is the code for ArrayBuffer.isView() method −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 20px; font-weight: 500; } JavaScript ArrayBuffer.byteLength property CLICK HERE Click on the above button to check the above value is array buffer view or not let fillEle = document.querySelector(".sample"); var buffer = new ArrayBuffer(8); var view1 = new DataView(buffer); view1.setInt16(0, 0x2721); fillEle.innerHTML = view1.getInt16(0).toString(16); document.querySelector(".Btn").addEventListener("click", () => { ... Read More
The byteLength property return the length of an ArrayBuffer in byte. Following is the code for ArrayBuffer.byteLength property −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 20px; font-weight: 500; } JavaScript ArrayBuffer.byteLength property CLICK HERE Click on the above button to see the array buffer size let fillEle = document.querySelector(".sample"); var buffer = new ArrayBuffer(8); var view1 = new DataView(buffer); view1.setInt16(0, 0x2721); fillEle.innerHTML = view1.getInt16(0).toString(16); document.querySelector('.Btn').addEventListener('click',()=>{ fillEle.innerHTML = 'The array buffer size is '+view1.byteLength+' bytes'; }) OutputOn clicking the “CLICK HERE” button −
The JavaScript array.values() return an iterator object that contains all the values of a given array.Following is the code for array.values() function −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 20px; font-weight: 500; } JavaScript array.values() CLICK HERE Click on the above button to see the array values only let fillEle = document.querySelector(".sample"); let arr = ["cow", "bull", "lion", "tiger", "sheep"]; var entries = arr.entries(); for (let x of entries) fillEle.innerHTML += x + ""; document.querySelector(".Btn").addEventListener("click", () => { ... Read More
The JavaScript array.toLocaleString() function returns the elements of an array as a string and are separated by a locale specific string such as comma. It can take locale as parameter which specifies the language tag in which the string is to be converted.Following is the code for the array.toLocaleString() functionExample Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 20px; font-weight: 500; } JavaScript array.toLocaleString() CLICK HERE Click on the above button to convert the array to UK locale string let ... Read More