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 Introduction
bear-watcher's People
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>
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
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>
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.
here goes the code!
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.
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>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
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.