Toy Probem

Every morning, all students at Code States start the day by solving something called a “toy problem.” Basically it is a small algorithmic question that everyone is asked to solve within an hour. So far, the difficulty was not that hard, but it seems that it becomes more challenging every day. Today I would like to share my thought process after today’s toy problem.

The given mission was:

“Wrap every word in every `<p>` tag with a `<span>` tag. For example: <p>Hey there</p> becomes: <p><span>Hey</span><span>there</span></p> Next, change spans to random colors, once per second.

This is where we started

First, I noticed that it has a jQuery file attached and thought the intention of this problem was to use jQuery methods somehow. Here is my thought process.

  1. For every <p>, I need to find the text inside.
  2. What should I do with the given text? Maybe I should use split function to convert it into the array of words.
  3. Then I would wrap each word with <span>, and append it to the <p>.
Here is my source code

4. For making random colors, I should create a function doing so.

5. For every <span> that are now created within each <p>, I will set its css property with randomised color!

And this is the result:

Luckily, I had about 20 minutes left and did not want to stop here. Then I started to imagine what I could do more. As I was staring at those meaningless “Lorem ipsum…” sentences, I thought of the film The Shining, especially when it is revealed that Jack has been writing the infamous phrase: “All work and no play makes Jack a dull boy.”

Then I could chose the font right away: American Type Writer. I also added the transition time so that it smoothly changes its color over a few seconds. Here is my final result:


This was very fun to do, and even after the toy problem session was over, I kept working on it. I added some mouse hover effects but removed it since I thought it to be unnecessary in regards to the meaning of this work. As I was progressing, I thought of the essence of beauty in design of any digital products. Most of the things around me have nice looks, but I am not sure if all of them are necessary. As I watch meaningless texts changing colors quite beautifully, attracting people’s eyes, I come to think what is the the real core thing in design. Obviously looking nice is not the only purpose of design. Instead, it should help products to be as intuitive as possible while delivering the core function of them.