Giter Club home page Giter Club logo

buildabear's Introduction

buildabear

Project: 1911 Mod 1 Group Project

Contributors:

Project Overview:

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.

Technologies:

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.

Reflections:

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.

Comp

This is the comp we received for the project. We were given no other direction regarding style, colors, fonts, etc. Comp Screenshot

Screenshots

The following images are our finished product. First Screenshot Second Screenshot

DTR

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:
  1. Interpret card. Assign Players for card.
  2. Break off to pseudo code and plan on branches. (10 - 20 min).
  • Pseudo code in plain english.
  • Add Technical Terms.
  • Try it out.
  1. Re-group and go through each persons ideas.
  2. Refine ideas in a pair.
  3. Define the approach.
  4. If necessary assign the task for execution.

buildabear's People

Contributors

hborrelli1 avatar clpena avatar jeremiahblackol avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.