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 553 of 839
How to use media queries with JavaScript?
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 −
Read MoreHow to create a draggable HTML element with JavaScript and CSS?
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 MoreHow to close list items with JavaScript?
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 MoreHow to create a chat message with CSS?
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 MoreHow to create a typing effect with JavaScript?
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 −
Read MoreHow to create a countdown timer with JavaScript?
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 MoreMongoDB query to fetch random value using Map Reduce concept.
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 MoreQuerying only the field name and display only the id in MongoDB?
To query only the field name, set fieldName to 0 i.e. the fieldName to hide. Let us create a collection with documents −> db.demo650.insertOne({_id:101, details:{Name:"Chris", Age:21}}); { "acknowledged" : true, "insertedId" : 101 } > db.demo650.insertOne({_id:102, details:{Name:"Bob", Age:22}}); { "acknowledged" : true, "insertedId" : 102 } > db.demo650.insertOne({_id:103, details:{Name:"Sam", Age:20}}); { "acknowledged" : true, "insertedId" : 103 } > db.demo650.insertOne({_id:104, details:{Name:"Robert", Age:24}}); { "acknowledged" : true, "insertedId" : 104 }Display all documents from a collection with the help of find() method −> db.demo650.find();This will produce the following output −{ "_id" : 101, "details" : { "Name" : "Chris", "Age" : ...
Read MoreMongoDB aggregation group and remove duplicate array values?
Use MongoDB aggregate for this and within that, use $group. Let us create a collection with documents −> db.demo649.insertOne( ... { "_id" : 101, "Names" : [ "John", "Bob", "Bob", "Robert" ], "CountryName" : "US" } ... ); { "acknowledged" : true, "insertedId" : 101 } > > db.demo649.insertOne({ "_id" :102, "Names" : [ "John", "Robert" ], "CountryName" : "UK"}); { "acknowledged" : true, "insertedId" : 102 }Display all documents from a collection with the help of find() method −> db.demo649.find();This will produce the following output −{ "_id" : 101, "Names" : [ "John", "Bob", "Bob", "Robert" ], "CountryName" ...
Read MoreMongoDB aggregation to combine or merge fields and then count?
To combine or merge fields and then perform count, use $group along with $sum and $sort. Let us create a collection with documents −> db.demo647.insertOne({"Subject":"MySQL"}); { "acknowledged" : true, "insertedId" : ObjectId("5e9c86316c954c74be91e6ee") } > db.demo647.insertOne({"Subject":"MongoDB"}); { "acknowledged" : true, "insertedId" : ObjectId("5e9c86356c954c74be91e6ef") } > db.demo647.insertOne({"Subject":"MySQL"}); { "acknowledged" : true, "insertedId" : ObjectId("5e9c86376c954c74be91e6f0") } > db.demo647.insertOne({"Subject":"SQL Server"}); { "acknowledged" : true, "insertedId" : ObjectId("5e9c86406c954c74be91e6f1") } > db.demo647.insertOne({"Subject":"MongoDB"}); { "acknowledged" : true, "insertedId" : ObjectId("5e9c86436c954c74be91e6f2") } > db.demo647.insertOne({"Subject":"PL/SQL"}); { "acknowledged" : true, "insertedId" : ObjectId("5e9c864b6c954c74be91e6f3") } > db.demo647.insertOne({"Subject":"MongoDB"}); { ...
Read More