kaitvan / dino-kennel Goto Github PK

0.0 1.0 0.0 7.2 MB

CSS 6.64% HTML 31.86% JavaScript 61.49%

dino-kennel's Introduction

Dino Kennel

Description

This was our first milestone project at NSS. The goal was to build a single-page application with dynamic features. Similar to Tamagotchi digital pets, the user can care for dinos in the kennel by feeding them, petting them, and sending them on adventures!

Feature List

Healthy dinos show in the kennel
Sick dinos show in the hospital
Dead dinos show in the graveyard
Dinos can be removed from the kennel
Dinos can be added to the kennel
Dinos can be fed, petted, or sent on adventures

Tech Used

Used Bootstrap to style page components.
HTML
JS with ES6 modules
jQuery

Build Status

View Live Site

Adding a Dino

Caring for Dinos

dino-kennel's People

Contributors

Watchers

dino-kennel's Issues

Add dinos to DOM

User Story

When the user clicks submit, the modal should disappear and the new dino card should be added to the page.

Acceptance Criteria

WHEN the user clicks submit
THEN the modal should disappear
AND the new dino card appears in the correct location based on its health

Dependencies

Pet dino button

User Story

When the user pets the dino, the dino's health increases by 10%.

Acceptance Criteria

WHEN the user clicks the pet dino button
THEN the dino's health score increases by 10%
AND the health status bar updates

Dependencies

#4
#3

Dev Notes

The dino should also move categories if the health score increases over 50%.

Add health status bar to dino cards

User Story

The user should see a health status bar on each dino card.

Acceptance Criteria

WHEN the page loads
THEN the user should see a health status bar with the percent labeled on each dino card below the name
AND the color of the status bar should correspond with the percent (>=50% green, <50% red)
AND if the dino is dead (0%), a skull icon should be displayed instead of the health status bar

Dependencies

Dev Notes

Use bootstrap progress bars

File setup

User Story

The user should see something when the page loads.

Acceptance Criteria

WHEN the user loads the page
THEN a color should render on the DOM with the css file
AND a console.log message should appear from the js file

Dev Notes

The basic file structure should be established with the following files:

index.html
main.css
main.js
In addition, there should be a javascripts and assets folder. Inside of the javascripts folder, there should be components and the main.js file. Inside of the assets folder, there should be an images folder and a styles folder with the main.css inside.

Feed dinos

User Story

When the user clicks the feed button, the dino's health score increases by 5%.

Acceptance Criteria

WHEN the user clicks the feed button
THEN the dino's health score increases by 5%
AND the bar updates to reflect the increase

Dependencies

#4
#3

Dev Notes

Make sure the dino also moves to a different location if the score increases across 50%.

Add dinos button with modal

User Story

When the page loads, an "Add Dino" button should appear at the top of the page. The user can click the button and a modal will appear.

Acceptance Criteria

WHEN the user clicks the "Add Dino" button
THEN a modal appears asking the user for dino information

Dependencies

Dev Notes

Use bootstrap buttons. The modal should ask for the following information:
*Name
*Owner
*Age
*Image
*Type

Add timestamps to dino.adventures array each time the adventure button is clicked

User Story

Timestamps should reflect when the event occurred for the adventure button.

Acceptance Criteria

WHEN the user clicks the adventure button
THEN the timestamp for that event should be added to the dino.adventures array
AND WHEN the user clicks the dino details
THEN the timestamps should appear on the modal

Dependencies

none

Dev Notes

Update the contents of the modal as well to dynamically print the timestamp

Update color bar in modals as well

User Story

When the user clicks on a modal, the progress bar should have color applied to reflect the health score as well.

Acceptance Criteria

WHEN the user clicks on dino details
THEN the progress bar should also update the color

Dependencies

none

Dev Notes

Remove the addClass from dinoSort and create a new function to be called each time you want to update the color

Sort dinos into three sections based on health

User Story

The user should see dinos separated into three categories based on health: kennel, hospital, or graveyard.

Acceptance Criteria

WHEN the page loads
THEN the user should see dino cards in three categories based on health

Dependencies

Dev Notes

*If the health is 50% or higher, the dinos are in the kennel.
*If the health is below 50%, the dinos are in the hospital.
*It the health is at 0%, the dinos are in the graveyard.
Each section should have a different background and a title to distinguish it from the others.

Show dino details on modal

User Story

The user should be able to click on a dino and see the details of their activity.

Acceptance Criteria

WHEN the user clicks on a dino
THEN a modal should appear with the dino profile

Dependencies

Dev Notes

Use bootstrap modals.
The dino profile should include:
*Image
*Name
*Type
*Age
*Owner
*Health Status bar
*Activities: Number, date, and type

Adventure button

User Story

When the user sends the dino on an adventure, the dino's health score increases by 15%.

Acceptance Criteria

WHEN the user clicks the "send on adventure" button
THEN 15% is added to the dino's health score
AND the health status bar increases to reflect the change

Dependencies

#3
#4

Dev Notes

Make sure the dino moves categories as well if they cross over the 50% threshold.

Account for health scores less than 0 and greater than 100

User Story

The dino's health score cannot be less than 0 or greater than 100.

Acceptance Criteria

WHEN the user clicks a button (feed, pet, or adventure)
THEN the health score updates
AND IF the health score is greater than 100, the health score stays 100
AND IF the health score is less than 0, the health score stays 0

Dependencies

none

Dev Notes

Write if statements to update health to have maximum and minimum values.

Print dino cards to the DOM

User Story

When the page loads, the user will see all Dinos currently in the data set printed to the DOM on cards.

Acceptance Criteria

WHEN the page loads
THEN the user sees all dino cards printed to the DOM

Dependencies

Dev Notes

Use bootstrap cards for each dino card with the following details shown:

Image
Name
Four buttons: feed, adventure, pet, and remove

Modularize the code!

User Story

The user will not be able to update any data or functions using dev tools

Acceptance Criteria

WHEN the user attempts to update information using dev tools
THEN they get an error saying it cannot be found

Dependencies

Finish drying up code first

Dev Notes

All code should be well-organized into modules based on dependencies

DRY up code

User Story

Other developers should be able to clearly understand what my code means and there should not be code repeated throughout my js files

Acceptance Criteria

WHEN another developer reads through my code
THEN they clearly understand how the components work together

Dependencies

MVP is hit

Dev Notes

Think about how we can:

clear html in one function
feed and pet buttons are similar -- combine them?

Disable buttons when dino health reaches 0

User Story

As a user, when my dino reaches 0% health, I can no longer click buttons

Acceptance Criteria

WHEN the dino health reaches 0%
THEN the buttons on that card are deactivated

Dependencies

none

Dev Notes

Could also add a timestamp for when the dino died

Remove dinos with remove button

User Story

When the user clicks the remove button, the dino card should be removed from the DOM.

Acceptance Criteria

WHEN the user clicks the remove button
THEN that dino card should be removed from the DOM

Dependencies

Dev Notes

Use the dino ID to select a specific card to be removed.

Create README

User Story

Developers should get a sense of the features on this site when they open the readme

Acceptance Criteria

WHEN a develop opens the readme file
THEN they should get a general sense of the features and tools used to create this site

Dependencies

Site deployed on netlify

Dev Notes

Include netlify badges and a giphy