Bubble Wrap

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() {
        <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) {
        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!


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!

Scoville, fun with peppers and gradients

For day 2 of #7Days7Websites, I may have bitten off more than I could handle, but I still had fun. I wanted to build and design a mobile-first website, without any frameworks and do some experimenting with gradients.

Most likely inspired by last night’s enchiladas, I choose the Wikipedia entry for the Scoville scale as the source for my content. Since the scale goes from 0 (no heat) to 3 million (lethal, levels of heat), it lends its self to organization with bands of color.

At first, I had solid bands of color for each category, mildly pungent, moderately pungent, etc, but it seemed choppy. With solid colors as a fallback, a linear gradient from light green, to dark red, broken up by section is what I was looking for.


Another thing I had been wanting to try, was changing the default cursor. Was it possible? Yes, but not easily implemented. It works best when linked to an image. I wanted to use the hot pepper (🌶) emoji, so I had to format it as an image, instead of using it as a text string.

body {
cursor: url("../assets/favicon_io/hot-pepper.png"), auto;


Overall, my plans for today’s project were too big to realistically get done in time (while also keeping up with other commitments). It made me remember how involved “building a website” can be. In the future, I’ll cut down what I want to build or try to 1-2 small things as opposed to a whole, featured filled website.

While I am happy that I was able to remember how media queries and ems work on my own, there are improvements I’d like to make.

Being able to jump from section to section would be easier than all the scrolling (especially for mobile). Anchor links are straight forward to implement, but I wanted a smooth, scrolling effect. Using the function scrollIntoView() could work, but it’ll take additional testing that I, unfortunately, ran out of time for.

Overall, if you like gradients and want to see which peppers might kill you, take a look at Scoville.

Oh Hex! Building a Random Hex Generator with Javascript

For my first #7Days7Websites project, I revisited an old idea for a random hex value generator.

Creating a Random Hex Color

I had tried to build it with Javascript, then Ruby, but for today, I wanted to try a Javascript method again. In the past, I was able to randomly full an item from an array of valid hex values, but my function ended up repeating the same, random character 6 times.

What I needed to happen was randomly get a character 6 times and then append them together. What the Hex!? A tutorial from Emily, another Flatiron School graduate, had a solution that worked.

generateRandomHexColor = () => {
  const hexadecimalIntegers = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
  let hexColor = "#"

  while (hexColor.length < 7) {
    hexColor += hexadecimalIntegers[ Math.round( Math.random() * hexadecimalIntegers.length ) ]

  return hexColor

Calling generateRandomHexColor()3 times in a row would generate results like this:

  • “#a7cb4c”
  • “#19514f”
  • “#5929e8”

Updating the Background Color

I had a basic, HTML 5 document as a shell for this project. To test if I was able to update the background-color of the body element, I did a quick test. I could query the body element with let body = document.querySelector("body"). Then, I could change the style with body.style.backgroundColor = "pink".

Cool! Now I needed this to work dynamically.

Since the generateRandomHexColor function returns the hex value as a string, I could call the function as the value when changing the color assignment. body.style.backgroundColor = generateRandomHexColor() did exactly what I looking for.

Undefined Values

On occasion, generateRandomHexColor() would generate an invalid hex value like #67eundefined. Well, since 6, 7, and ,e were valid characters, the function its self was working, but was getting an invalid/undefined value. So, I took a closer look at the random part of the generateRandomHexColor() to see what was happening.

Math can get weird with Javascript. One thing to know is that Math.round rounds up or down to nearest integer. Math.random generates a float between 0 and 1. Multiplying it by the length of hexadecimalIntegers gives us a number between 0 and the length of the array.

Since Math.round can round up or down, the end result could be the number 16. Since counting arrays starts at 0, hexadecimalIntegers[16] would return undefined, since there is no 16th spot in the array!

Changing Math.round to Math.floor resolves this by always rounding down. This way, the largest number that can be randomly generated is 15, which is the last item in the array.


In the end, I’m happy with how Oh Hex! came out. I was able to generate a valid, random hex color with Javascript and dynamically update a DOM element with that color.

Oh Hex! example featuring the hex value #d65ac3 as the background color.

For future improvements, I would like to make the hex value an element that can easily be copied to the clipboard and for the body background color to be updated as a variable, instead of inline (if that’s possible)

7 Days 7 Websites

I don’t usually participate in daily challenges, but #7Days7Websites challenge by Florin Pop was one I could get behind. For one week, all I had to do was build a website using any framework with any content that I wanted and my share progress.


Since graduating from Flatiron School a few weeks ago, I missed being the structure of being in class. I took a break from coding to decompress and come back refreshed. At the same time, I missed coding for the front end and want to experiment with new technologies. I have a backlog of ideas, so this challenge is a good way to jump back in.

I’ll start, Sunday, May 17th, and will be sharing my process on my blog and on Twitter. More information about the #7Days7Websites challenge can be found here.

Want to Improve Your Coding Skills? Join the #7Days7Websites Coding Challenge

#7Days7Websites Projects

  1. Oh, Hex! A random hex color generator
  2. Scoville, fun with peppers and gradients
  3. Bubble Wrap. Virtual bubble wrap to pop over and over again.
  4. Pricing component with toggle. Frontend Mentor Challenge
  5. Intro component with sign-up form. Frontend Mentor Challenge
  6. Single price grid component. Frontend Mentor Challenge
  7. Toggle Switch. Front-end Challenge Club, Piccalil.li


Since completing this challenge, I took the time to reflect on my experiences, what I learned, and if I would do it again. I’ve gathered those thoughts and reflections into their own blog post, Coding Everyday Is Fun—Until It Isn’t.

Abstracting Button Events in React

While building my React & Redux project, I thought about how I can streamline how many functions and components I was using. An example being the game buttons.

“Start Game”, “Food” and “Foe” gameplay buttons

All buttons took in text as a prop and would need to fire off an action when clicked. If this was built without React, each button would need an event listener, then that event listener would fire off an action. For example.

this.submitButton.addEventListener('click', (e) => {

You could blend multiple actions into one function based on the event that is passed in.

For example, in this function, an “Instructions” section is opened or closed, depending on if it is set to display:block or display:none.

this.instructions.addEventListener('click', (e) => {
     if (this.instructions.style.display == "none") {
       this.instructions.style.display = "block"
     } else {
       this.instructions.style.display = "none"

With that in mind, I could do something similar with my React Button components.

Building the Button

To start, my Button component looked like this:

<button onClick={this.handleClick}>
  {this.props.text} // this.props.text = "Start Game", "Food" or "Foe"

Which when clicked, would fire a function handleClick function.

handleClick = (e) => {
  this.props.startGame(); // This could be anything

I could create a handleStartGame function, a handleFood, etc, I could simply everything into one function, then fire off specific tasks based on the event (the button) that was clicked.

Abstracting onClick

First, I needed to change the onClick props to become an anonymous function that takes in the event.

The button goes from this:

<button onClick={this.handleClick}>
  {this.props.text} // this.props.text = "Start Game", "Food" or "Foe"

To this:

<button onClick={(e) => this.handleClick(e)}>
  {this.props.text} // this.props.text = "Start Game", "Food" or "Foe"

Now, the handleClick function can take in the event object. There are no id on the buttons, but the text is unique, we can use that as an identifier.

Switch Case for Event Target

Instead of an if/else statement, we can do a switch case that looks at the innerText of the event, and based on that, will fire a specific action.

For example, when the “Start Game’ button is clicked, we want to change the activeGame attribute in the Redux store to true. If the “Food” or “Foe” buttons are clicked, I want it to compare the guess, to the current emoji and return true if the guess is correct or false if it is not.

So let’s work through what’s happening.

switch (e.target.innerText) {
  case "Start Game":
  case "Food":
    console.log("The food button was clicked");
  case "Foe":
    console.log("The foe button was clicked");

If the “Start Game” button is clicked, an event object is passed to the function. And the target property of that event object looks like this.

<button>Start Game</button>

From there, we can get to the innerText which has a value of “Start Game”. Since that meets the first switch case, the startGame function is fired. If the “Food” button was clicked, the second case is fired, and so one. If there was a fourth button that did not match any of the cases we have specified above, the default case is hit, which is our instance, does not return an action and simply exits the function.

With this setup, I can change what each case does, or add new ones without having to change the functionality of the buttons themselves.