Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles by AmitDiwan
Page 564 of 839
JavaScript Error message Property
The error message property sets or returns an error message in JavaScript. Following is the code for the error message property −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; } JavaScript Error message Property CLICK HERE Click on the above buttons to see the error message let sampleEle = document.querySelector(".sample"); document.querySelector(".Btn").addEventListener("click", () => { try { confrm('Are you sure'); } catch (e) { sampleEle.innerHTML = "Error: " + e.message; } }); OutputOn clicking the “CLICK HERE” button −
Read MoreJavaScript encodeURI(), decodeURI() and its components functions
The encodeURI() function encodes the complete URI including special characters except except (, / ? : @ & = + $ #) characters.The encodeURIComponent() function encodes some parts of the URI by basically encoding the special characters. It also encodes the following characters − (, / ? : @ & = + $ # )The decodeURI() function decodes the URI generated by the encodeURI() function.The decodeURIComponent() function is used to decode some parts of URI generated by encodeURIComponent().Following is the code for the encodeURI(), decodeURI() and its component functions −Example Live Demo Document body { ...
Read MoreJavaScript – Getting Coordinates of mouse
To get the coordinates of mouse using JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 25px; font-weight: 500; } Coordinates of mouse Hover the mouse over the screen to get its x and y axis position let sampleEle = document.querySelector(".sample"); document.body.addEventListener("mousemove", (event) => { sampleEle.innerHTML = "X axis: " + event.x + " Y axis: " + event.y; }); OutputThe above code will produce the following output:
Read MoreJavaScript Const
The JavaScript const declarations create variables that cannot be reassigned to some other value or redeclared later. It was introduced in ES2015.Following is the code for JavaScript const declaration −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } Const example CLICK HERE Click the above button to try changing const value let sampleEle = document.querySelector(".sample"); const a = 33; sampleEle.innerHTML = "a = " + a + ""; document.querySelector(".Btn").addEventListener("click", () => { try { a = 44; } catch (err) { sampleEle.innerHTML += "Error : " + err; } }); OutputOn clicking the ‘CLICK HERE’ button to change constant value −
Read MoreJavaScript Auto-filling one field same as other
To auto-filling one field same as other, the JavaScript script is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } JavaScript Auto-filling one field same as other Enter your primary address Address Pin Code Secondary Address same as primary Same Address Enter your secondary address Address Pin Code let checkEle = document.querySelector(".check"); let addressEle = document.querySelectorAll(".address"); let pinCodeEle = document.querySelectorAll(".pincode"); checkEle.addEventListener("change", (event) => { if (event.target.checked) { console.log(addressEle[0].value); addressEle[1].value = addressEle[0].value; pinCodeEle[1].value = pinCodeEle[0].value; } }); OutputOn filling the primary address and clicking the “Same Address” checkbox −
Read MoreJavaScript symbol.@@toPrimitive() function
The symbol.@@toPrimitive() function converts a symbol object to a primitive value.SyntaxSymbol()[Symbol.toPrimitive](hint)The hint value specifies the type eg − number, string, etc and is an optional argument.Following is the code for symbol.@@toPrimitive() function −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { font-size: 20px; font-weight: 500; } JavaScript symbol.@@toPrimitive() function CLICK HERE Click on the above button to add the object with a number. let fillEle = document.querySelector(".sample"); ...
Read MoreHow to create a flip card with CSS?
To create a flip card with CSS, the code is as follows −Example Live Demo body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin:20px; } .flipCard { background-color: transparent; width: 300px; height: 300px; perspective: 1000px; } .innerCard { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: ...
Read MoreHow to create a simple "star rating" look with CSS?
To create a simple star rating look with CSS, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 30px; } .fa { font-size: 30px; color: grey; } .rated { color: rgb(255, 0, 0); border: 2px solid yellow; } Star Rating Example OutputThe above code will produce the following output −
Read MoreCreating CSS3 Radial Gradients
For Radial Gradients, set color stops. The default shape is Ellipse, but you can also set other shapes like circle. Set at least two color stops for Radial Gradients in CSS.Following is the code for creating radial gradients using CSS −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } #radial { height: 200px; width: 200px; background-image: radial-gradient( rgb(255, 0, 106), rgb(2, 0, 128), rgb(0, 255, 42) ); } Radial Gradient Example OutputThe above code will produce the following output −
Read MoreHow to create a collapsible section with CSS and JavaScript?
To create a collapsible section with CSS and JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .collapse { background-color: rgb(83, 186, 255); color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 18px; } .active, .collapse:hover { background-color: rgb(34, 85, 160); } ...
Read More