JavaScript Window CSS

let element = document.querySelector('pre');

let previousContent = element.textContent;

// add event listener

element.addEventListener('mouseenter',(e)=>{

e.target.textContent = window.getComputedStyle(e.target)["cursor"];

});

// add event listener to get back to previous one

element.addEventListener('mouseleave',(e)=>{

e.target.textContent =  previousContent;

});


or

element.addEventListener('mouseenter',(e)=>{

// let the cursor style display on pre tag for 5 seconds only for that we're using setTimeout()

setTimeout(()=>{

e.target.textContent = window.getComputedStyle(e.target)["cursor"];

}, 5000);

});

================================================================== 

let events = ["mouseenter","mouseleave"];

let element = document.querySelector('pre');

events.forEach((e)=>{

element.textContent = window.getComputedStyle(element.target)["cursor"];

});

==================================================================

let events = ["mouseenter", "mouseleave"];

let element = document.querySelector('pre');
let output = document.querySelector('.output');

// loop events using foreach 
events.forEach((e) => {
element.addEventListener(`${e}`,(el)=>{
output.textContent = window.getComputedStyle(el.target)["cursor"];
// to get type of event happening on element
// output.textContent = el.type;
});
});
-----------------------------------------------------------------------------------------------------------
<html>
  <body>
    <pre>India is my country</pre><br>
    <pre class="output"></pre>
  </body>
</html>
-----------------------------------------------------------------------------------------------------------
pre{
  cursor: wait;
}


 

Comments

Post a Comment

Popular posts from this blog

JavaScript Typing Animation

Image
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typing Animation</title> <style> textarea{ word-wrap:break-word; white-space:pre-wrap; grid:1; position:fixed; z-index:1000; } .activate{ position:fixed; margin-left:0px; } .clear{ position:fixed; margin-left:100px; } body{ display:grid; grid-template-columns:repeat(2,10vw); grid-template-rows:repeat(2,10vw); gap:10px; align-items:justify; margin:5px; padding:5px; } .output{ scroll-behavior:smooth; height:auto; width:auto; grid-column:2/2; } </style> </head> <body> <textarea></textarea> <pre class="output"></pre> <div class="container"> <button class="activate">StartTyping</button> <button class="clear">Clear</button> </div> </body> <s...
Read more

AXIOS REACT JS

😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍  axios({   method: 'post',   url: 'https://api.example.com/data',   data: {     // Your data object here   },   headers: {     'Content-Type': 'application/json', // For sending JSON data     'Accept': 'application/json', // For specifying what response types are acceptable     'Content-Type': 'application/x-www-form-urlencoded', // For sending form data     'Content-Type': 'multipart/form-data', // For sending multipart form data (like files)     'Content-Type': 'text/plain', // For sending plain text data     'Content-Type': 'application/xml', // For sending XML data     'Content-Type': 'application/octet-stream' // For sending binary data     // Add more headers as needed   } }) .then(response => {   console.log(response.data); }) .catch(error => {   console.error('Error:', error); }); 😍😍😍😍😍...
Read more