This project is a dress-up game where the user is given a bear and a variety of options for hats, clothes, accessories, and backgrounds. The user is able to try out different combinations of one item from each category, and the items and backgrounds appear as they are selected. To deselect an option currently selected, the user should select the button again. The buttons are responsive and will indicate which option is currently active. The user can enter a name in the input field at the bottom of the screen and save the current outfit under that name. When saved, a card with the outfit name appears in the "Saved Outfits" column. To view a saved outfit, the user should click on the corresponding card. To delete a saved outfit, the user should click on the 'x' to close the saved outfit card. When the card deletes, the saved outfit is also removed from storage. We added an additional button to reset the bear if the user wants a clean slate to build a new outfit.
In terms of technologies, this project only required vanilla JavaScript, CSS, and HTML. We used localStorage to save outfits and retrieve them on load and when a saved outfit is selected. To do this, we had to use JSON stringify and parse.
In our process as a group, we faced an initial challenge of different communication styles. We had to work through this by revisiting our DTR and creating systems that work for our individual group members to collaborate effectively. By the end of the project, we had a solid system and were able to make much faster progress.
This was our first time using localStorage, and it took a few attempts to get it exactly right with no bugs or extra code. Finally figuring this out was a huge win.
This is the comp we received for the project. We were given no other direction regarding style, colors, fonts, etc.
The following images are our finished product.
Goals and Expectations for the Project (What does each group member hope to get out of this project? What do we want to achieve as a team? How will we know that we're successful? YES, you can still fully answer this question without knowing exactly what you're going to build.):
- Work time defaults to collaboration and project time. Communicate if you cannot make that work.
Team strengths & collaboration styles (consider discussing your Pairin qualities here):
- Pair when we can. Implement the Driver Navigator roles.
How we can use our strengths to overcome obstacles:
- Stay in communication about everything. Setting up workflow in advance. Staying organized.
Schedule Expectations (When are we available to work together and individually? What constraints do we have?):
- Working together during project time.
Communication Expectations (How and often will we communicate? How do we keep lines of communication open? How will we make decisions as a team?):
- We will use slack for collaborating or discussing issues, if not in person.
- If we decide to work on something on the side, let the group know.
Expectations for giving and receiving feedback:
Additional Notes:
- Process for new cards/iterations:
- Interpret card. Assign Players for card.
- Break off to pseudo code and plan on branches. (10 - 20 min).
- Pseudo code in plain english.
- Add Technical Terms.
- Try it out.
- Re-group and go through each persons ideas.
- Refine ideas in a pair.
- Define the approach.
- If necessary assign the task for execution.