Code Challenge #15: Simple Crazy Buttons with VanillaJS

Celý článek

Woohoo! This is the first of our live stream code challenge series, and we'll kick it off with completing a super satisfying and rather funny challenge using HTML, CSS and plain Vanilla JavaScript.

Before we kick off, it would interest you to know that we do this weekly and you can follow the challenges and see previous challenges on this page! Beef up your coding skills the fun way.

The Challenge

In this challenge, you'll test your knowledge of simple DOM manipulations including using simple browser dimension APIs and event listeners.

In this challenge, you are required make the provided buttons tick in such a way that, once you hover on any button it moves away immediately. You can try all you can to catch the crazy buttons but you can't. Here's what it'll look like when completed.

You are provided with a sample codepen to get you started on the challenge. This codepen contains only HTML and CSS required to create a button (bootstrap classes are also used for styling).

You can complete this challenge using any tool, technique or process you like.

Fork this codepen to get started: https://codepen.io/Chuloo/pen/GzvoXa

Goals for this Challenge

At the end of this challenge, you would be able to:

• Handle event listeners in JavaScript
• Understand JavaScript functions and how they work.
• Utilize DOM properties.
• Have a lot of fun chasing colorful buttons...yikes!

Resources

Look up the following concepts for hints on completing this challenge:

• Event handling in JavaScript.
• window.innerWidth and window.innerHeight JavaScript properties.
• JavaScript Math object.

Fork this codepen to get started: https://codepen.io/Chuloo/pen/GzvoXa

Bonus

As a bonus for this challenge, try to animate the displacement of the buttons once you hover over them.

Community

Would you like feedback and reviews on your pen after completing the challenge? You can:

• Post the link to your completed codepen in the comment section of this post.
• Share on Twitter using the hashtag #ScotchCodeChallenge and tag @Scotch_io if you may, and we'll be sure to see it.
• Want to boost your technical writing skills? Write about your solution on Scotch to share with our huge community!

Solution

The solution to this challenge will be solved live on Twitch by Chris on Monday, 11th February. If you miss it, you can always find it here. Also, we'll send the solution and live stream link directly to your inbox if you subscribe here. Happy keyboard slapping!