kaitvan/bear-watcher

Bear Watcher Project

This project was created to practice modularizing code into multiple javascript files. The user enters a URL for a bear image and a bear name into the form and a card is created with the user input information.

Build Status

Demo

Bear Watcher Live Site

Technologies Used

• HTML
• CSS

bear-watcher's Issues

Form on Page Load

User Story

When the page loads, the user should see a bootstrap form that allows me to enter in a bear name and image url for a new bear. Wireframes shown here.

Acceptance Criteria

WHEN the page loads
THEN a form should appear for the user to enter the following bear sighting information:
-image URL
-bear name
-type of bear
-location
-bear activity

Dependencies

Basic file setup must be complete.

Dev Notes

Use bootstrap forms.

Bear info cards

User Story

As a user, when there are bears that are being tracked (ie after I have added one), I should see all their information displayed on a card.

Acceptance Criteria

WHEN the user clicks submit
THEN a card with the user input should appear

Dependencies

#2 form displayed
#3 submit button loading information into an array

Dev Notes

Use bootstrap for cards.

Submit button on bear sighting form

User Story

As a user, when I click the submit button on the new bear form a bear should be added to the page.

Acceptance Criteria

WHEN the submit button is clicked
THEN the form clears
AND the submitted information is added to an array of objects

Dependencies

#2 should be completed first

Dev Notes

Use modularized JS for button action.

Styling

User Story

As a user, the site is visually appealing with a clear color scheme applied to all elements and spacing between elements.

Acceptance Criteria

WHEN the user loads the page
THEN all items on the page are easy to see with spacing between elements

Dependencies

#4

Dev Notes

Use bootstrap to achieve most spacing needs. Need to override bootstrap styling on classes for button to appear in the color scheme.