jamalbrowning / bear-watcher

bear-watcher

This is a class project where we are practicing using modules when creating code. In this project we needed to creat atleast two modules and have a submit form that prints a card into a container where the user can see them and interact with them.

bear-watcher's Issues

River Container

#USER STORY
As a User when I visit the page, I should see a section with a h2 that displays river where all of the bear cards will be displayed.

#AC
*** When *** the user visits this page
Then there should be a river container displayed by an <h2>The River</h2>
And a place where the cards can be printedToDom from the form.

Dev Notes

• <div class="river-container"></div>

Inital Setup files

User Story

As a Developer, I should create The initial Setup Files for all other development.

AC

When I open the Initial Setup files I should see an Index.html folder
then a Styles folder w/ main.css file
then a Javascripts Folder with main.js file
then inside Javascripts F a components folder and Helpers Folder(w/ a data folder and utils.js file)

Dev Notes

I should load
script src as

• <script type ="module" src="javascripts/main.js"></script>
  font awesome in the head as
• <script src="https://kit.fontawesome.com/2f3ab0cf66.js" crossorigin="anonymous"></script>
  bootstrap
• <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

bootstrap script as

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

About Section

User Story

As a user I should see a Header that says Bear Watchers Society, with an about section about the website and all pertinent information on using the site.

#AC
When the user visits the site there should be a Header <h1>Bear Watcher's Society</h1>
then there should be a <p>(this is an about section. Insert text from dev notes)</p>

#Dev Notes

About section paragraph

Each year between July and September brown bears in the Katmai National Park congregate along the Brooks River. This river is one of the main rivers that Sockeye Salmon swim up to spawn. The brown bears wait in the shallows of the river and catch the salmon as they jump over rocks.

This site is for you Savvy Scientists and Parading Park Rangers to be able to track the great brown bears! Move to the form below to start tracking.

Bear Form

User Story

As a user, when the page loads, I should see a bootstrap form under the about section that allows me to enter in a bear name and image url for a new bear.
#AC
When I load the page I should see a bootstrap form
then a section to enter the bear name
then a section to enter in the image Url for the bear

Dev Notes

Form should be printed to dom upon load
add in bearForm.js
index.html should have bear form container

<form>
  <div class="form-group">
    <label for="bear-name">Name</label>
    <input type="text" class="form-control" id="bear-name" aria-describedby="nameHelp">
  </div>
  <div class="form-group">
    <label for="bear-image">Image Url</label>
    <input type="text" class="form-control" id="bear-image" aria-describedby="imageHelp" placeholder="Enter Image">
  </div>
  <button type="submit" class="btn btn-primary">Submit<i class="fas fa-binoculars"></i></button>
</form>

Bear data

#USER STORY
As a dev there should be a collection of bear objects I can access

AC

*** When*** the main.js is loaded
Then a bear array should be defined
*** And*** It should be able to take values form the form.

Dev Notes

• Create const bears = []
• it should be able to take objects

Submit functionality

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

#AC
When the user clicks the submit button thats a Binoculars Icon
*** then*** a card should be printed into the river.

#Dev Notes

Card For Bear Data

#USER STORY
As a dev I should create a function bearCardBuilder = () => {} which prints card to river-container.

#AC
When the dev creates the bear card
they should create a function called with a bootstrap card

bearCardBuilder = (bears) => {
let domString = ''

for (let i = 0; i < bears.length; i++) {
    const dino = bears[i];
domstring = `
<div class="card" style="width: 18rem;">
  <img src="..." class="${name}-card" alt="brown bear">
  <div class="card-body">
    <h5 class="card-title">${name}/h5>
  </div>
</div>`
};
};
printToDom (' ' , domString)

Dev Notes

this should be in its on module data file.

here goes the code!

#2 @luketlancaster