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
Javascript Articles
Page 478 of 534
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 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 MoreJavaScript Importing and Exporting Modules
To import and export modules using JavaScript, the code is as follows −Note − To run this example you will need to run a localhost server.INDEX.htmlExample Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 18px; font-weight: 500; } JavaScript Importing and Exporting Modules IMPORT Click on the above button to import module script.jsimport test from './sample.js'; document.querySelector('.Btn').addEventListener('click',()=>{ test(); })sample.jslet resultEle = document.querySelector(".result"); export default function testImport(){ resultEle.innerHTML = 'Module testImport has been imported'; }OutputOn clicking the ‘IMPORT’ button −
Read MoreJavaScript to generate random hex codes of color
To generate random hex codes of color using JavaScript, the code is as follows −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { box-sizing: border-box; font-size: 18px; font-weight: 500; color: white; width: 150px; height: 150px; text-align: center; padding-top: 4%; } Generate random hex codes of color GENERATE Click on the above button to generate a random hex color code let resultEle = document.querySelector(".result"); let hexCode = "0123456789ABCDEF"; let Color = "#"; document.querySelector(".Btn").addEventListener("click", () => { for (let i = 0; i < 6; i++) Color += hexCode[Math.floor(Math.random() * 16)]; resultEle.style.backgroundColor = Color; resultEle.innerHTML = Color; }); OutputOn clicking the ‘GENERATE’ button −
Read MoreJavaScript WebAPI File File.name Property
The JavaScript File WebAPI file.name property returns only the name of the file without the path.Following is the code for the File WebApi File.name 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.name property Upload a file using the above input type to get its file name let resultEle = document.querySelector(".result"); document .querySelector(".fileInput") .addEventListener("change", (event) => { resultEle.innerHTML += "File name = " + event.target.files[0].name; }); OutputOn clicking the ‘Choose file’ button and selecting a file −
Read MoreJavaScript unescape() with example
The JavaScript unescape() function is used to decode an encoded string. It is deprecated in JavaScript version 1.5.Following is the code for the unescape() function −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample, .result { font-size: 18px; font-weight: 500; color: red; } .result { color: blueviolet; } JavaScript unescape() property CLICK HERE CLICK the above button to decode the above url ...
Read MoreJavaScript undefined Property
The JavaScript undefined property specifies if a variable has been declared or assigned a value yet.Following is the code for the JavaScript undefined property −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; color: red; } JavaScript undefined property CLICK HERE CLICK the above button to know if variable age has been defined or not let sampleEle = document.querySelector(".sample"); let ...
Read More