Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
The Symbol.hasInstance property is used to check if a constructor recognizes the object as its instance.Following is the code for Symbol.hasInstance property −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { font-size: 20px; font-weight: 500; } JavaScript Symbol.hasInstance Property CLICK HERE Click on the above button to see if the above symbols are instance of array and custom() respectively let fillEle = document.querySelector(".sample"); let ele = [1, 2, ... Read More
The Symbol.for() function searches runtime-wide symbol registery for a given symbol. If the symbol is found then it is returned otherwise a new symbol is created in the global symbol registery and simply returned.Following is the code for symbol.for() functionExample Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { font-size: 20px; font-weight: 500; } JavaScript Symbol.for() function CLICK HERE Click on the above button to get the symbols. let ... Read More
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 More
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 More
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 −
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 −
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
To create tooltips with CSS, the code is as follows −Example Live Demo body { text-align: center; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; font-size: 20px; font-weight: bolder; color: blue; } .tooltip .toolText { visibility: hidden; width: 120px; background-color: rgb(89, 166, 255); color: #fff; ... Read More
To create a delete confirmation modal with CSS and JavaScript, the code is as follows −Example Live Demo body { font-family: Arial, Helvetica, sans-serif; } .modal { text-align: center; display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .modalContent { font-size: 20px; ... Read More
To create a modal box with CSS and JavaScript, the code is as follows −Example Live Demo body { font-family: Arial, Helvetica, sans-serif; } .modal { text-align: center; display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .modalContent { font-size: 20px; ... Read More