Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
The findOneAndDelete() deletes single documents from the collection on the basis of a filter and sort criteria as well as it returns the deleted document.The deleteOne() removes single document from the collection.Let us see an example and create a collection with documents −> db.demo448.insertOne({"Name":"Chris", "Age":21});{ "acknowledged" : true, "insertedId" : ObjectId("5e7a291cbbc41e36cc3caeca") } > db.demo448.insertOne({"Name":"David", "Age":23});{ "acknowledged" : true, "insertedId" : ObjectId("5e7a2926bbc41e36cc3caecb") } > db.demo448.insertOne({"Name":"Bob", "Age":22});{ "acknowledged" : true, "insertedId" : ObjectId("5e7a2930bbc41e36cc3caecc") }Display all documents from a collection with the help of find() method −> db.demo448.find();This will produce the following output −{ "_id" : ObjectId("5e7a291cbbc41e36cc3caeca"), ... Read More
To create a custom scrollbar with CSS, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; height: 200vh; /*to create a scrollbar*/ } ::-webkit-scrollbar { width: 20px; } p { font-size: 40px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: rgb(75, 22, 161); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover ... Read More
To create a browser window example with CSS, the code is as follows −Example Live Demo body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .menuBar { border: 3px solid #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; } .menuRow { padding: 10px; background: #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; } .browserField { float: left; ... Read More
To create a download link with HTML, the code is as follows −Example Live Demo Download Link example Click on the image above to download it OutputThe above code will produce the following output −
To create a flip box 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 find out if an element is hidden with JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .hiddenDiv { width: 100%; padding: 20px; text-align: center; background-color: lightblue; margin-top: 20px; display: none; font-size: 20px; } .showBtn { border: none; padding: 15px; font-size: 18px; background-color: rgb(86, 25, ... Read More
To detect whether the browser is online or offline with JavaScript, the code is as follows −Example Live Demo Online or offline with JavaScript example Click the button below to check if you are online or not Check online/offline function checkOnlineOffline() { if(navigator.onLine===true){ document.querySelector('.sample').innerHTML = "You are connected to internet" } else { document.querySelector('.sample').innerHTML = "You are not connected to internet" } } OutputThe above code will produce the following output −On clicking the “Check online/offline” button −
To add an active class to the current element with JavaScript, the code is as follows −Example Live Demo .btn { border: none; outline: none; padding: 10px 16px; background-color: #6ea2f0; cursor: pointer; color:white; font-size: 18px; } .active, .btn:hover { background-color: #666; color: white; } Active Button Example Giraffe Cow Lion Leopard Cheetah Press any of the above button to set it ... Read More
To remove a class name from an element with JavaScript, the code is as follows −Example Live Demo .newStyle { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; width: 100%; padding: 25px; background-color: rgb(147, 80, 255); color: white; font-size: 25px; box-sizing: border-box; text-align: center; } Remove className with JavaScript Example Remove Class Click the above button to remove className from below div This is a DIV element. document.querySelector(".btn").addEventListener("click", addClassName); function addClassName() { var element = document.getElementById("sampleDiv"); element.classList.remove("newStyle"); } OutputThe above code will produce the following output −On clicking the the “Remove Class” button −
To add a class name to an element with JavaScript, the code is as follows −Example Live Demo .newStyle { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; width: 100%; padding: 25px; background-color: rgb(147, 80, 255); color: white; font-size: 25px; box-sizing: border-box; text-align: center; } Adding className with JavaScript Example Click here Click the above button to add className to below div This is a DIV element. document.querySelector(".btn").addEventListener("click", addClassName); function addClassName() { var element = document.getElementById("sampleDiv"); element.classList.add("newStyle"); } OutputThe above code will produce the following output −On clicking the “Click here” button −