Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To generate HTML using JSON data, the code is as follows −Note − JSONPlaceholder is a fake Online REST API for Testing and PrototypingExample Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; color: red; } JSON arrays EMPLOYEE NAME CLICK HERE Click on the above button to fill the employee table let sampleEle = document.querySelector(".employee"); document.querySelector(".Btn").addEventListener("click", () => { fetch("https://jsonplaceholder.typicode.com/users") .then((response) => response.json()) .then((result) => { result.forEach((element) => { sampleEle.innerHTML += "" + element.name; }); }); }); OutputOn clicking the ‘CLICK HERE’ button −
Arrays in JSON are similar to Arrays in JavaScript. JavaScript JSON arrays looks like this −let obj = { name:'Rohan', sports : ['cricket','Football','volleyball','hockey'] }Following is the code for JSON arrays in JavaScript −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; } JSON arrays CLICK HERE Click on the above button to access JSON array let sampleEle = document.querySelector(".sample"); let obj = { name:'Rohan', sports : ['cricket','Football','volleyball','hockey'] } document.querySelector(".Btn").addEventListener("click", () => { obj.sports.forEach(item=>{ sampleEle.innerHTML += item + ''; }) }); OutputOn clicking the ‘CLICK HERE’ button −
The JavaScript infinity property displays infinity if the upper limit of the floating-point number is exceed and − infinity if the lower limit of the floating point number has has been exceeded.Following is the code for JavaScript infinity property −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .num { font-size: 18px; font-weight: 500; } JavaScript Infinity property 1.797693134862315E+10308 -1.797693134862315E+10308 CLICK HERE Click on the above button to add and subtract the above floating ... Read More
The JavaScript Immediately Invoked Function Expressions (IIFE) is a JavaScript function that executes immediately after it has been defined so there is no need to manually invoke IIFE.Following is the code for Immediately Invoked Function Expressions (IIFE) in JavaScript −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; } JavaScript Immediately Invoked Function Expressions (IIFE) let sampleEle = document.querySelector(".sample"); (function () { sampleEle.innerHTML ="This code is invoked immediately as soon as it is defined"; })(); Output
The global property in JavaScript returns true or false depending upon if the ‘g’ modifier is set or not.Following is the code for JavaScript global property −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample, .result { font-size: 18px; font-weight: 500; } JavaScript global Property Some random text inside a div CLICK HERE Click on the above button to check if the 'g' modifier is set or not let ... Read More
The getTime() method in JavaScript returns the number of milliseconds elapsed since 1st January 1970.Following is the code for getTime() function −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; } JavaScript getTime() Method CLICK HERE Click on the above button to get the seconds elapsed since January 1st 1970 let sampleEle = document.querySelector(".sample"); let date = new Date(); document.querySelector(".Btn").addEventListener("click", () => { sampleEle.innerHTML = "Seconds elapsed since 01/01/1970 = " + date.getTime(); }); OutputOn clicking the “CLICK HERE” button −
To get the text of the span element in JavaScript, the code is as follows −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; } JavaScript Date Methods This is some sample text inside a span element CLICK HERE Click on the above button to get the span text let sampleEle = document.querySelector(".sample"); let spanEle = document.querySelector(".test"); document.querySelector(".Btn").addEventListener("click", () => { sampleEle.innerHTML = "The span text is = " + spanEle.innerHTML; }); OutputOn clicking the “CLICK HERE” button −
To implement JavaScript Auto Complete / Suggestion feature, the code is as follows −Example Live Demo body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } JavaScript Auto Complete / Suggestion feature var tags = ["orange", "apple","pineapple","guava","mango","pomegranate","litchi",]; let check; document.querySelector(".fruits").addEventListener("keyup", (event) => { let value = event.target.value; document.getElementById("datalist").innerHTML = ""; tags.forEach((item) => { if (item.toLowerCase().indexOf(value.toLowerCase()) > -1) { var opt = document.createElement("option"); var sel = document.createTextNode(item); opt.appendChild(sel); document.getElementById("datalist").appendChild(opt); } }); }); OutputOn typing something in the input field −
The property opacity is the ultimate and modern solution and works for Firefox 0.9+, Safari 2, opera 9+, IE 9+ and every version of Google Chrome. The -moz-opacity property is the opacity property for Firefox versions older than 0.9 while the –khtml-opacity property is for safari versions starting with 1. The filter property is for IE browsers from 5 to 9 to give opacity like effect.Following is code for image opacity using CSS for all browsers −Example Live Demo body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } img { width:270px; height:200px; } .transparent{ ... Read More
The Advanced Selectors in CSS includes Adjacent Sibling selector, attribute selector, direct child selector, nth-of-type selector, etc. It also includes General Sibling Selector, an example is shown below:h1 ~ h3Example of direct child selector −div > spanFollowing is the code showing advanced selectors in CSS −Example Live Demo #red { color: red; } .green { background: green; } ul:nth-of-type(1) { background: rgb(0, 174, 255); } ul + h3 { border: 4px solid rgb(19, 0, 128); } a[href="https://www.wikipedia.org"] { font-size: 25px; } h1 ~ h3 { font-size: 40px; } div > span { ... Read More