Web Development Articles - Page 515 of 1049

The pseudo-class keywords are used to specify a special state of the selector to which it is added. This gives us more control and now we can target a selector when it is in specific state for e.g.: hover, checked, visited etc. Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child = To select the first child of an element’s parent :first-of-type = To select the first element of its parent :focus = To select the element that has focus :hover = To select ... Read More

To specify word breaking rules in CSS3, use the word-break property. This property is used to break the line. Let us see the syntax − word-break: value; The values include normal − The default line break rules. break-all − The word is broken at any character only if overflow occurs break-word − The word is broken at arbitrary-points to prevent overflow The following are the codes for specifying word breaking rules using CSS3 − Normal Word Breaking Rule The normal word breaking rule is the default rule − word-break: normal; Example Let us ... Read More

Yes, to search an array of objects, use $unwind in MongoDB aggregate(). To match, use $match. Let us create a collection with documents −> db.demo623.insertOne( ...    { ...       _id:1, ...       details:[ ...          { ...             Name:"Chris" ...          }, ...          { ...             DueDate:new ISODate("2020-01-10") ...          }, ...          { ...             CountryName:"US" ...          } ... ... Read More

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