This project is geared toward young children. Its focus was to make it an educational tool in learning about the fifty states of the US. We had to consider how kids would enjoy and learn at the same time. Keeping in mind that all elements should be kid friendly influenced our design process and choices throughout development.
On the homepage, users are able to look through the full map of the United States to see where the states are. There is an option to play the fifty states song while viewing the homepage. Once they scroll down, they are presented with the flags of each state. When they hover over the flag image, the state name is revealed. If the users decide to learn more about the state, they can either select it by clicking on the flag, or they can use the drop down menu. The drop down menu scroll vertically, while the flag matrix has a slideshow functionality and scrolls horizontally. After the flag is clicked, or the state name is selected, the user is taken to the state information page.
On the state information page, the user is presented with the current local and the state capital time, and state weather. The next section gives the user a summary of the state along with an image of the state flag. Once the user has scrolled through the state summary, they are able to view images associated with the state in a slideshow that the user can click through. Finally, in the last section the user is presented with 7 cards that are blank. Once the user clicks on a card, it is flipped over to display a fun fact about the state. These include things like the state nick-name, bird, and flower. The cards can be flipped back and forth infinitely, which could mimic a memory game and guide further learning.
After the user is ready for another state, they can click the back button and return to the homepage. Once on the home page, the user can continue to select flags and states or the user can click on their passport to see the places they have visited. Once in the passport, when the user hovers on a stamp, it will get bigger. The user then can either close the passport to keep learning or erase their travel history. Finally, the user could click on the Fifty Nifty United States button to watch a youtube video of the song.
Here is a list of the languages:
- HTML
- CSS
- Javascript
- UIkit (CSS framework)
Here is a list of the APIs:
- jQuery
- Moment.js
- OpenWeather
- Wikipedia
- Pixabay
- Donna Crawford
- Gunjan Bhargava
- Rex Yu
- Sandy Marr