User Story

Previously, the dino cards handled every click inside of the card, not just the buttons. I refactored the code to handle only button clicks.

Acceptance Criteria

WHEN the user clicks on a dino card
BUT not on a button
NOTHING should happen.

Dependencies

N/A

Dev Notes

get rid of handling button clicks on id #dinoLocation.

• add index.html, main.css, main.js
• add directories: assets (w/images and styles), JavaScript (w/components, helpers/data)

User Story

When the user clicks on a dino card, a modal will be opened with various information about the dinosaur.

Acceptance Criteria

WHEN the user clicks a dino card
THEN a modal will be displayed
THAT shows the dinos name, age, owner, health, and history of actions.

Dependencies

#13

Dev Notes

• display modal on click
• list dinos name, owner, health
• list dinos adventures

User Story

If the Dino moves to another kennel or gets adopted, there should be the ability to delete the dinosaur from the page.

Acceptance Criteria

WHEN the user adds a new dinosaur
THEN the dinosaur should appear on a card
WITH a delete button
THAT allows the user to delete the dinosaur card when clicked

Dependencies

#4

Dev Notes

• add delete button to dinosaur card
• add function to delete dinosaur when button is clicked.

User Story

Based on the dinosaurs health status, it should be located in the appropriate area.

Acceptance Criteria

When the dinos health is 70 or above
THEN the dino should appear in the kennel.
WHEN the dinos health is less than 70
THEN the dino should be moved to the hospital
WHEN the dinos health is less than 40
Then the dino should be moved to the graveyard.

Dependencies

#7

Dev Notes

• move the dino to the appropriate area based on its health

Provide form validation requirements for the add dinosaur form.

User Story

When the user submits a form, if certain fields are empty, the form will not submit until the user fills them. Fields that are required should have a identifying feature.

Acceptance Criteria

WHEN the user submits their form
IF certain fields are empty
THEN the user will be notified to fill those fields.

Dependencies

#3

Dev Notes

• Fields that have are empty (on submit) must be identified
• once identified, a notification must be brought to the attention of the user.

User Story

Based on the dinosaurs health status, it should be located in the appropriate area.

Acceptance Criteria

When the dinos health is 70 or above
THEN the health bar should be green
WHEN the dinos health is less than 70
THEN the health bar should be yellow.
WHEN the dinos health is less than 40
THEN the health bar should be red.

Dependencies

#7 #8

Dev Notes

• change health bar color based on health.

User Story

The user should see a add dino button upon arriving at the website. When the user clicks the add dino button, a form should appear with name, owner, age, image, and type fields. There should also be a submit button at the bottom of the form.

Acceptance Criteria

WHEN the user visits the page
THEN the user should see an "Add Dino" button
WHEN the user clicks the "Add Dino" button
THEN a form should appear with name, owner, age, image, type fields
AND a submit button

Dependencies

#1 #2

Dev Notes

• add button that brings up form to add dino
• create form with name, owner, age, image, type fields
• add submit button to form.

User Story

Below the kennel, the user should see the hospital and the graveyard.

Acceptance Criteria

WHEN the user visits the page
THEN the user should see a hospital area
AND a graveyard area.

Dependencies

#1 #2

Dev Notes

Create a designated area for the hospital and graveyard.

User Story

The user should have the ability to feed, pet, or take the dinosaur on an adventure. These action can either affect the dinosaur's health positively or negatively.

Acceptance Criteria

WHEN the user adds a new dinosaur
THEN a card should appear with buttons to a) feed b) pet and c) take the dino on an adventure
IF the user clicks feed
THEN the dino should have their health increased by 25
IF the user clicks pet
THEN the dino should have their health increased by 10
IF the user clicks on adventure
THEN the dino should have their health decreased by 30.

Dependencies

#4 #3

Dev Notes

• create button for each action
• increase/decrease dino health based on button clicked.

User Story

After the user clicks the submit button on the "add dino" form, the new dinosaur should show up on a card in an area designated as the Kennel.

Acceptance Criteria

WHEN the user clicks the submit button on the "add dino" form
THEN a dino card with the previously inputted info should appear
IN an area designated as the "Kennel"

Dependencies

#3

Dev Notes

• dinosaur info should be stored in an array of objects.
• all dinosaurs should have a "health" key with a value of 100 added into their object.
• display new dino on click of submit button. Create module "dinoCard.js"
• Create Kennel area for newly added dino card

User Story

When the user performs an action with the dinosaur, they should see a health bar that changes based on which action was performed.

Acceptance Criteria

WHEN the user clicked on the feed button
THEN the health bar should add 25 to the previous value
WHEN the user clicked on the pet button
THEN the health bar should add 10 to the previous value
WHEN the user clicked on the adventure button
THEN the health bar should subtract 30 from the previous value.

Dependencies

#4 #7

Dev Notes

• create a health bar in each dino's card
• based on the current health of the dino, the health bar should display that accordingly
  ex. 50 health should show a health bar that is 50% full.