The JavaScript Color Game is a popular introductory DOM manipulation project. FreeCodeCamp.org have a tutorial on it here. It's a fun project, and well worth a go if you haven't done it before.
I decided to create a variant of the color game with two core differences from the original:
- It would be a React.js app with component based architecture
- It would use data fetched from the PokéAPI (a Pokémon API) instead of colors
This game is the outcome. You can play it here.
One week I decided to take a break from work and education. I wanted to create something just for fun.
The idea of creating a variant of the Color Game using the PokeAPI had been in my mind for a while but it was a low priority project. I decided to implement this as a React app so that I could improve my React skills while making something nice just for me 😊✨
Rather than controlling the UI via direct DOM manipulation this version of the game relies on state updates and component re-renders. In functional terms it's very similar to the JavaScript color game, but in structural terms it's quite different.
The game is hosted on GitHub Pages and can be run from there.
To install the repo locally:
- Clone this repo.
- Run
npm installfrom root. - To run the repo locally run
npm start.
Built with React. Styled with styled-components.
This application uses Open Source components. You can find the source code of their open source projects along with license information below. Huge thanks to all of the people who contribute to this work ❤️️
-
Project: React
Copyright (c) Facebook, Inc. and its affiliates.
License: MIT -
Project: styled-components
Copyright (c) 2016-present Glen Maddern and Maximilian Stoiber
License: MIT -
Project: PokéAPI
Copyright (c) © 2013–2020 Paul Hallett and PokéAPI contributors.
License: BSD 3-Clause -
Pokémon and Pokémon character names are trademarks of Nintendo.