Crazy Buttons Base

crazy-buttons-base.markdown

Crazy Buttons Base

Crazy button demo from Scotch School course.

A Pen by Ekwuno Obinna on CodePen.

License.

index.html

<!-- Three Cray Buttons were once normal... -->
<button type="button" class="btn-crazy btn btn-lg btn-danger">
  Click Me!
</button>
<button type="button" class="btn-crazy btn btn-lg btn-primary">
  Click Me!
</button>
<button type="button" class="btn-crazy btn btn-lg btn-success">
  Click Me!
</button>

script.typescript

// Make it crazy here with JavaScript!
//Get the buttons in a array
const  Buttons  = Array.from(document.querySelectorAll('.btn-crazy')); //get all the classes with .btn-crazy

Buttons.forEach(Button => {
  Button.addEventListener("mouseover", ()=>{
    // mouseover works when the mouse moves over the element then runs the function
    
  const windowWidth = window.innerWidth;
  const windowHeight= window.innerHeight;
    //innerwidth and height of window containing the wholel page
  const buttonWidth = Button.offsetWidth;
  const buttonHeight = Button.offsetHeight;
    // offsetWidth and height returns the layout width/ height of an element as an integer.
  const positionX = Math.floor(Math.random() * (windowWidth - buttonWidth));
    const positionY = Math.floor(Math.random() * (windowHeight - buttonHeight));
    //maths.floor rounds up the numbers generated by math.random
  Button.style.left = `${positionX}px`;
  Button.style.top =`${positionY}px`;
    //.sytyle.left sets the new values of the elements 
});
});

style.scss

// Style everything
body, .jumbotron { padding: 30px; }
.text-giant      { font-size: 40px; }
.btn-crazy       {
  position: absolute;
  top: 30px;
  left: 35%;
  width: 30%;
  transition: 0.1s ease all;
  text-align: center;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />