It’s day 3 of #7Day7Websites! This is another fun one (ok, maybe it’s more of an app than a website). It’s bubble wrap. That you can pop. Because that’s fun, right?

When I had this idea, I knew that using React to manage the state of each bubble—popped or unpopped—was the way to go. My Bubble component only needed this.

  state = {
    popped: false,
  }

And my render function looked like this:

render() {
  return(
        <div className="bubble"></div>
      )
    }
  }

Ok, so that’s just a div but with some CSS…

.bubble {
  background-color: #5fdde5;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

That div now looks like a bubble.

So many bubbles

Now, I need more than a handful of bubbles (things are really stressful now, ok), but repeating <Bubble /> over and over within <App /> was not ideal.

If I create a <BubbleContainer /> component and loop over as many instances of <Bubble /> that I want, I could then render the one <BubbleContainer /> component to <App />.

The <BubbleContainer /> class component looks like this:

export default class BubbleContainer extends React.Component {

  render() {
    let rows = [];

    for (let i = 0; i < 96; i++) {
      rows.push(<Bubble key={i}/>)
    }

    return (
      <div className="container">{rows}</div>
    )
  }
}

With some styling on the container class, the app now looks like this:

Click to Pop

Each <Bubble /> has a state of popped which is false by default. When clicked, we want to change the value of popped to true and give a visual indication that the state has changed. And, we only want the state to be changed once, since un-poppping a bubble isn’t a thing.

We’ll update the return statement to include an onClick event which fires a handleClick function:

  handleClick = (e) => {

    if (this.state.popped == false) {
      this.setState({
        popped: true,
      })
    }

  }

Since we want a popped bubble to look different from an unpopped bubble, we can use an if statement to render a <Bubble /> with different classes, that we’ll style with CSS:

render() {

    if (this.state.popped === false) {
      return (
        <div className="bubble unpopped" onClick={(e) => this.handleClick(e)}></div>
      )
    } else {
      return (
        <div className="bubble popped" onClick={(e) => this.handleClick(e)}></div>
      )
    }

  }

Our popped and unpopped classes changes the background color.

Putting everything together, Bubble Wrap app looks like this after clicking (or tapping) a few bubbles:

Recap

Overall, this was a fun way to test if I remember how local state works in React. And, deploying a React app to Netlify was surprisingly easy with this app, that I feel less intimidated about doing this with my other projects.

From a user perspective, I’d like to have a button or link to get a fresh sheet of bubble wrap (reset the state of all bubbles to popped: false). Some variances in color would be nice, so would some shading/depth to give a more 3D effect. And, technically bubble wrap has a offset by row as opposed to being perfectly lined up.

Considering I spent about two hours building and deploying this, I’m really happy with how it turned out!