Boolean

by trentHarlem

HTML

<p> LOCK STATUS </p>
<p id='status'>
</p>

<input onclick='checkLock()' id='lock' type='checkbox' checked />

CSS

body * {
  font: bold 2rem system-ui;
  transition: all ease-in-out 0.3s;
  
}

.riseFall{
transform: translateY(6rem);
}

JavaScript

const lock = document.getElementById('lock')
const status = document.getElementById('status')
let locked = true
status.innerHTML = locked
   document.getElementsByTagName("p")[0].classList.add('riseFall');


function checkLock() {
  if (locked == false) {
    locked = true
    status.innerHTML = locked
   document.getElementsByTagName("p")[0].classList.add('riseFall');
    
  } else {
    locked = false
    status.innerHTML = locked
   document.getElementsByTagName("p")[0].classList.remove('riseFall');
   
    
  }
   //document.getElementsByTagName("p")[0].style.transform = "translateY(100px)";
  //document.p.style.transform = 'translateY(8rem)'
}

//const checkLock = () => locked == false ? locked = true : locked = false

//const checkLock = () => locked == false ? locked = true : locked = false

//const checkLock = () => locked === true ? console.log('locked') : console.log('unlocked')