Shy button

by Carson Evans

HTML

<button data-state="1">
Click me if you can!
</button>

CSS

button {
  display: inline-block;
  top: 0;
  left: 0;
  position: absolute;
}

JavaScript

(async () => {

	const button = document.querySelector('button')
  
  button.addEventListener("click", () => {
  	alert("congrats! you clicked me!")
  })
  
  button.addEventListener("mouseover", randomlyMoveElement)
  
  function randomlyMoveElement(e) {
  	const state = e.target.dataset.state
    if (state === "1") {
    	e.target.style.left = "150px"
      e.target.dataset.state = "0"
    } else {
    	e.target.style.left = "0"
      e.target.dataset.state = "1"
    }
  }

})()