Skip to content
Whack-a-mole game built with React
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Whack-A-Mole Game

You can whack a mole here.

Built in React.
Animation with Anime.js.
Illustration designed in Adobe Illustrator.
Created with the create-react-app npm module.
Hosted on Heroku.

Key learnings:

Calling functions in a component from a different component by passing onClick() in the props:
(I am not 100% sure yet that this is best practice)


The timeOut function is defined in App.js.

<StartButton context={ this.state } onClick={ this.timeOut.bind(this) }/>


The timeOut function in App.js is called via the onClick on the component in StartButton.js

  return (
    <button className="game__start-button" type="button"
      onClick={ this.props.onClick } style={{ display: this.props.context.buttonDisplay }}>
      { this.props.context.buttonMessage }
You can’t perform that action at this time.