skip to content
Shannon Crabill
Table of Contents

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.

It’s a bubble, ya’ll!

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:

Look at those 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!