Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To create animations using JavaScript, the code is as follows −Example Live Demo body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } button{ padding:10px; font-size: 18px; background-color: blue; color:white; border:none; margin-bottom:10px; } .Animation { width: 60px; height: 60px; position: absolute; background-color: rgb(134, 25, 207); } Animation using JS example Start Animation function startAnimation() { var elem = document.querySelector(".Animation"); var pos = 0; var id = setInterval(frame, 10); function frame() { if (pos == 450) { clearInterval(id); } else { pos++; elem.style.borderRadius = pos/14 + 'px'; elem.style.left = pos + 'px'; } } } OutputThe above code will produce the following output −On clicking the “Start Animation” button −
To create and use syntax highligher, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .colorLinks { color: rgb(131, 44, 212); text-decoration: none; font-size: 20px; font-weight: bold; } .setColor { margin: 20px; padding: 10px; border: none; font-size: 18px; background-color: rgb(226, 43, 89); color: white; } Syntax Highlighting example Go to google.com Go to facebook.com Click Here Click the above button to highlight the links var anchrorRg = /[^
To use media queries with JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: white; padding: 20px; } Using media queries with JavaScript Example Resize the screen to see the color change from blue to red var mediaQuery = window.matchMedia("(max-width: 700px)"); function setColor(mediaQuery) { if (mediaQuery.matches) { document.body.style.backgroundColor = "red"; } else { document.body.style.backgroundColor = "blue"; } } setColor(mediaQuery); mediaQuery.addListener(myFunction); OutputThe above code will produce the following output on window size greater than 700px −On resizing the browser window size less than 700px −
To create a draggable HTML element with JavaScript and CSS, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .dragDiv { position: absolute; z-index: 9; text-align: center; border: 1px solid #d3d3d3; padding: 30px; cursor: move; z-index: 10; background-color: rgb(108, 24, 177); color: #fff; font-size: 20px; font-weight: 500; } ... Read More
To close list items with JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } ul { list-style-type: none; padding: 0; margin: 0; } ul li { border: 1px solid rgb(221, 221, 221); background-color: #5a5cec; color: white; padding: 12px; text-decoration: none; font-size: 18px; ... Read More
To create a chat message with CSS, the code is as follows −Example Live Demo body { margin: 0 auto; max-width: 800px; padding: 0 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .message { font-size: 18px; font-weight:500; border: 2px solid #dedede; background-color: #55e4a8; color:rgb(0, 0, 0); border-radius: 12px; padding: 10px; margin: 10px 0; } .darker ... Read More
To create a typing effect with JavaScript, the code is as follows −Example Live Demo body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } button{ padding:10px; font-size: 18px; background-color: rgb(128, 19, 218); color:white; border:none; } .heading{ color:crimson; } typeText Click me document.querySelector('.typeButton').addEventListener('click',typeText); var i = 0; var text = 'This text is currently being typed across... It is still typing..'; var speed = 50; function typeText() { if (i < text.length) { document.querySelector('.heading').innerHTML += text.charAt(i); i++; setTimeout(typeText, speed); } } OutputThe above code will produce the following output −On clicking the “Click me” button −
To create a countdown timer with JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .timer { text-align: center; font-size: 60px; margin-top: 0px; color: white; background-color: rgb(100, 38, 214); } Countdown Timer Example var countDownDate = new Date("June 5, 2022 11:27:15").getTime(); var timeClear = setInterval(function() { var now = new Date().getTime(); var ... Read More
To use icons to make animated effect, the code is as follows −Example Live Demo #user { font-size: 60px; color:rgb(106, 33, 201); } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } Animating Icon example function userShift() { var userEle; userEle = document.getElementById("user"); userEle.innerHTML = ""; setTimeout(function() { userEle.innerHTML = ""; }, 1000); setTimeout(function() { userEle.innerHTML = ""; }, 2000); } userShift(); setInterval(userShift, 4000); OutputThe above code will produce the following output −
For random value with Map Reduce, use mapReduce() concept along with Math.random(). Let us create a collection with documents −> db.demo651.insertOne({Value:10}); { "acknowledged" : true, "insertedId" : ObjectId("5e9f0330e3c3cd0dcff36a57") } > db.demo651.insertOne({Value:20}); { "acknowledged" : true, "insertedId" : ObjectId("5e9f0332e3c3cd0dcff36a58") } > db.demo651.insertOne({Value:30}); { "acknowledged" : true, "insertedId" : ObjectId("5e9f0335e3c3cd0dcff36a59") } > db.demo651.insertOne({Value:40}); { "acknowledged" : true, "insertedId" : ObjectId("5e9f0337e3c3cd0dcff36a5a") } > db.demo651.insertOne({Value:50}); { "acknowledged" : true, "insertedId" : ObjectId("5e9f0339e3c3cd0dcff36a5b") } > db.demo651.insertOne({Value:60}); { "acknowledged" : true, "insertedId" : ObjectId("5e9f033be3c3cd0dcff36a5c") } > db.demo651.insertOne({Value:70}); { "acknowledged" : true, "insertedId" ... Read More