Building a Robot Friend Using HTML, CSS, and JavaScript

How a simple McDonald’s toy can become an easy web development project with children

Image by author

Note: you don’t need the McDonald’s toy to build this game and play with it, but having the toy will add an extra fun factor to the project :)

The Toy

The other day, my wife got Happy Meals at McDonald’s for our kids, and I hate to admit it, but it was me, the one who enjoyed the toy the most.

It was a simple toy. A silly one: a robot looking thing with a smiley face (I don’t even know what movie/game the promotion was about), a rotating handle on one side, and a hole at the bottom:

At first, I thought it was a glow-in-the-dark toy… it wasn’t.

There was more to the toy: it became “interactive” with the McDonald’s app. So, I downloaded the app and tested it. The functionality was simple:

1. Place the toy on top of the phone (in a specific position)
2. Dim the room lights
3. Select among the options that popped up
4. And the robot “came to life” so you could interact with it.