chris-calhoun / dino-kennel Goto Github PK
View Code? Open in Web Editor NEWNSS: Milestone Challenge 1
NSS: Milestone Challenge 1
Previously, the dino cards handled every click inside of the card, not just the buttons. I refactored the code to handle only button clicks.
WHEN the user clicks on a dino card
BUT not on a button
NOTHING should happen.
N/A
get rid of handling button clicks on id #dinoLocation.
When the user clicks on a dino card, a modal will be opened with various information about the dinosaur.
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.
If the Dino moves to another kennel or gets adopted, there should be the ability to delete the dinosaur from the page.
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
Based on the dinosaurs health status, it should be located in the appropriate area.
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.
Provide form validation requirements for the add dinosaur form.
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.
WHEN the user submits their form
IF certain fields are empty
THEN the user will be notified to fill those fields.
Based on the dinosaurs health status, it should be located in the appropriate area.
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.
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.
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
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.
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.
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.
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"
When the user performs an action with the dinosaur, they should see a health bar that changes based on which action was performed.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.