JSFiddle - React, Tailwind, and code Playground

by martinnester

HTML

<html>
<body>
Make sure to click in here for key events to work
</body>
</html>

CSS

html{
  background-color: white;
}

body{
  background-color: lightblue;
  filter: saturate(1);
  transition: filter 2s ease;
  height: 100px;
}

body.saturated {
  filter: saturate(4);
}

JavaScript

document.addEventListener("keydown", e => {
  if (e.code === "KeyC") {
document.body.classList.add('saturated')

    
    
    
    }
}, false)

document.addEventListener("keyup", e => {
  if (e.code === "KeyC") {
  document.body.style.filter = "";
document.body.classList.remove('saturated')
  
  }
}, false)