The JavaScript File WebAPI file.type property indicated the media type of the file.Following is the code for the File WebApi File.type property −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result {    font-size: 18px;    font-weight: 500;    color: red; } JavaScript file.type property Upload a file using the above input type to get its file type let resultEle = document.querySelector(".result"); document .querySelector(".fileInput") .addEventListener("change", (event) => {    resultEle.innerHTML +=    "File name = " + event.target.files[0].name + "";    resultEle.innerHTML += "File type = " + event.target.files[0].type; }); OutputOn clicking the “Choose file” button −

The JavaScript File WebAPI file.size property returns the size of file in bytes.Following is the code for the File WebApi File.size property −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result {    font-size: 18px;    font-weight: 500;    color: red; } JavaScript file.size property Upload a file using the above input type to get its file size let resultEle = document.querySelector(".result"); document .querySelector(".fileInput") .addEventListener("change", (event) => {    resultEle.innerHTML += "File name = " + event.target.files[0].name + ‘;    resultEle.innerHTML ... Read More

To detect the pressed arrow key 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; } Detecting the pressed arrow key Press any arrow key to know which arrow key has been pressed let fillEle = document.querySelector(".sample"); document.body.addEventListener("keydown", (event) => {    switch (event.keyCode) {       case 37:          fillEle.innerHTML = "Left key pressed";       break;       case 38:          fillEle.innerHTML = "Up key pressed";       break;       case 39:          fillEle.innerHTML = "Right key pressed";       break;       case 40:          fillEle.innerHTML = "Down key pressed";       break;    } }); OutputOn pressing any of the arrow key −

Following is the code for detecting a mobile browser in JavaScript −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample {    font-size: 18px;    font-weight: 500; } Detecting a mobile browser CLICK HERE Click on the above button to see if it is a mobile device or not let fillEle = document.querySelector(".sample"); let date = new Date(); let primitiveDef = date[Symbol.toPrimitive]("default"); let primitiveNum = date[Symbol.toPrimitive]("number"); document.querySelector(".Btn").addEventListener("click", () => {    var checkMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);    if (checkMobile) {       fillEle.innerHTML = "This ... Read More

The JavaScript date.@@toPrimitive() function converts the date object into a primitive value.Following is the code for date formats in JavaScript −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample {    font-size: 18px;    font-weight: 500; } JavaScript date.@@toPrimitive() functiont CLICK HERE Click on the above button to see the date as primitive value let fillEle = document.querySelector(".sample"); let date = new Date(); let primitiveDef = date[Symbol.toPrimitive]("default"); let primitiveNum = date[Symbol.toPrimitive]("number"); document.querySelector(".Btn").addEventListener("click", () => {    fillEle.innerHTML += "Hint = default :" + primitiveDef + "";    fillEle.innerHTML += "Hint = number :" + primitiveNum; }); OutputOn clicking the “CLICK HERE” button −

A popover is a simple tooltip plugin. A popover is a box of content that pops up when the user clicks on a specific element. This plugin relies on popover.js.Creating Popovers in HTMLThe attribute data-toggle = "popover" is used to create a popover in HTML. Adding this attribute to an element converts it to a popover.Syntaxpopover displayExample Live Demo Bootstrap Example Popover In BootStap Learn BootStrap $(document).ready(function(){    $('[data-toggle="popover"]').popover(); }); OutputPositioning PopoversYou can position popovers using the data-placement attribute. By default, a popover appears on the right ... Read More

We can express the knowledge in various forms to the inference engine in the computer system to solve the problems. There are two important representations of knowledge namely, procedural knowledge and declarative knowledge. The basic difference between procedural and declarative knowledge is that procedural knowledge gives the control information along with the knowledge, whereas declarative knowledge just provides the knowledge but not the control information to implement the knowledge. Read through this article to find out more about procedural knowledge and declarative knowledge and how they are different from each other. What is Procedural Knowledge? Procedural or imperative knowledge clarifies ... Read More

On a web page, you may need to place an input field on a navigation menu. Such input field can be used as a search box for the users to search anything on the website. To place the search input field on the right, use the float CSS property and set it to the right value. Create a navigation menu The element is used to create a menu on a web page. The menu links are set using the element − Home Login Register Contact Us More Info ... Read More

Following is the code to create a full screen search box with CSS and JavaScript −Example Live Demo body {    font-family: Arial; } * {    box-sizing: border-box; } .showBtn {    background: #008b0c;    border: none;    color:white;    padding: 10px 15px;    font-size: 20px;    cursor: pointer;    opacity: 0.8; } .showBtn:hover {    opacity: 1; } .overlaySearch {    height: 100%;    width: 100%;    display: none;    position: fixed;    z-index: 1;    top: 0;    left: 0;    background-color: rgba(132, 150, 155, 0.747); } .searchBar {    position: relative;    top: ... Read More

A lot of websites these days have an animate search box on the home page itself. On placing the mouse cursor within the search box, the search box width increases to make it easier for users to search. Let us see how to create such animated search form with HTML and CSS. Create the search form Use the element and place the input type text in it. Do not forget to mention an apt placeholder for the users to understand the purpose of the textbox − Search: Style ... Read More