Last week on the code challenge #15 we set out to complete a challenge on manipulating DOM properties, and event listeners to build a set of crazy buttons which displace randomly when hovered on. If you are yet to take the challenge, check it out here. Also, Chris solved the challenge on the Twitch livestream. Click on the banner media of this post to see the livestream solution as well.

In this post, we shall solve the challenge in plain VanillaJS.

## The Challenge

This challenge involved the understanding of the DOM as well as browser dimension APIs. For this challenge, we shall solve it by calculating a displacement between the browser window and the button.

## The Technique

To solve this, we shall follow three steps.

### Step 1: Grab everything you need from the DOM

Looking at the setup HTML and CSS, we have the buttons assigned classes of `btn-crazy`. Grab all the buttons in an array using the `forEach` and `querySelectorAll` methods in the project.

``````// grab everything we need
const crazyButtons = document.querySelectorAll('.btn-crazy');``````

### Step 2: Define the crazy function

In this step we shall implement the function to randomly displace each button. Create a named function to house all the logic. Create the proposed displacement of the button both in the horizontal and vertical direction like this:

``````function goCrazy() {
// get a random number for the left offset
// random num for top offset
const offsetHorizontal = Math.random() * (window.innerWidth);
const offsetVertical  = Math.random() * (window.innerHeight);
}``````

What you did was to create a random number using the `Math.random` method, to keep it within the boundaries of the browser window, we multiply it by the height and width of the window currently open.

On testing, the page now we can see that the buttons sometimes tends to displace outside the browser window. We'll solve this by making sure the offsets account for the size of the button. If we subtract the width of the button from the offset, surely, the buttons would be kept in. Do this with:

``````const offsetHorizontal = Math.random() * (window.innerWidth - this.clientWidth);
const offsetVertical  = Math.random() * (window.innerHeight - this.clientHeight);
``````

Next, apply these offset values to the style of the buttons. Still, in the same function definition, edit to this:

``````// grab everything we need
const crazyButtons = document.querySelectorAll('.btn-crazy');

// define our functions
function goCrazy() {
// get a random number for the left offset
// random num for top offset
const offsetHorizontal = Math.random() * (window.innerWidth - this.clientWidth);
const offsetVertical  = Math.random() * (window.innerHeight - this.clientHeight);

// apply those numbers to the button
this.style.top = `\${offsetVertical}px`;
this.style.left = `\${offsetHorizontal}px`;
}``````

Now we have a function that displaces just about any button on hover.

### Step 3: Add event listeners

The `goCrazy` function needs to fire when a button is hovered on. Listen to the `mouseenter` event and call the `goCrazy` function on when triggered. Do this with:

``````// add event listeners

Putting all these together, you have:

``````// grab everything we need
const crazyButtons = document.querySelectorAll('.btn-crazy');

// define our functions
function goCrazy() {
// get a random number for the left offset
// random num for top offset
const offsetHorizontal = Math.random() * (window.innerWidth - this.clientWidth);
const offsetVertical  = Math.random() * (window.innerHeight - this.clientHeight);

// apply those numbers to the button
this.style.top = `\${offsetVertical}px`;
this.style.left = `\${offsetHorizontal}px`;
}