Simple Crazy Buttons in VanillaJS (Solution to Code Challenge #15)

Celý článek

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
crazyButtons.forEach(button => button.addEventListener('mouseenter', goCrazy));

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`;
}

// add event listeners
crazyButtons.forEach(button => button.addEventListener('mouseenter', goCrazy));

Here's what the completed challenge looks like. You can find the completed codepen here. https://codepen.io/Chuloo/pen/mvLjdL

Conclusion

In this post, we solved a challenge to manipulate DOM elements and create crazy buttons in the process. We also solved it on a livestream here. Feel free to expand on the challenges and create something great out of it! Happy coding!