dino-kennel's Issues
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
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
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
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
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.
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
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.
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.
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.
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
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
Dev Notes
Make sure the dino also moves to a different location if the score increases across 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
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
Dev Notes
Make sure the dino moves categories as well if they cross over the 50% threshold.
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
Dev Notes
The dino should also move categories if the health score increases over 50%.
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
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?
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
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.