nss-evening-cohort-8 / bandz-adios-pantalones Goto Github PK

###User Story: Have a readme that shows pictures of the webpages

###Dev Notes: Add them in the markdown file

###Acceptance Criteria: Have screenshots of your webpage in your README.md file

User story: Have a nice background

Dev notes: Use the image in the images folder

Acceptance Criteria: Have an appropriate background on the homepage

###User Story: Have a nice looking navigation bar

###Dev notes: Have the navbar cover the top and sides

###User acceptance criteria: Have the navigation bar look nice

Translate the Korean text into English with google translate.

User Story

• User should be able to click on the image of the member and print out their favorite band

Dev

• Create a complex object to pull the band's favorite songs from

Acceptance

• When the user clicks image all that should print out is the name of the member, birthday, favorite song (complex) and hair color.

User Story:

There should be a picture, description, price and buy button for each item on the merch page.

Dev Notes:

I should create a js object for each item containing the picture, description, and price. Buy button functionality should be in another ticket. I'll use a place holder image until those images are done.

Acceptance Criteria:

The page should have all items listed and be aesthetically pleasing. Images can be placeholders until final images are ready.

User Story:

The page should be pleasing to the eye

Dev Notes:

This will be easier to do once the rest of the html and js is written.

Acceptance Criteria:

The Css should mach style choices of the other pages and shouldn't conflict.

The addEventListener in main.js is throwing errors when not on the Bio (about.html) page because that is the only page that has those ids'. Suggest moving them to a function that gets called when that page loads.

User Story

As a User I want to have a nice looking page when I go to the band site

Dev Notes

Add additional styling to make the page aesthetically appealing

Acceptance Criteria

The page looks nice when you browse to it.

User Story:

As a User I should see the band's tour schedule as a list when I browse to the tour schedule page.
and there should also be buttons to buy tickets and VIP packages for each tour.

Dev Notes:

Create an HTML table that populates with the Band Tour Schedule
and create "Buy" and "VIP" buttons for each tour listed
and style the page according to the Moqup below.

Acceptance Criteria:

When a user browses to the Tour Schedule page they should see a list of up coming tour shows
and they should be able to buy tickets for the show
and if they desire can buy a "VIP" package as well.

Create an image folder

DEV

• Create an image folder and create all images for all pages then place them in the folder

User Story:

As a Developer I need a Tour Schedule javascript object to build my tour schedule list.

{
    date: 1535691600000,
    city: 'Scratch Ankle',
    state: 'AL',
    venue: "Jim's Waterin' Hole",
    isSoldOut: 'false'
}

Dev Notes:

Create a javascript object to represent the data for the tour schedule including a "sold out" Boolean

Acceptance Criteria:

The main.js should contain a javascript object containing an array of values that represents the band tour schedule.

User Story: Create a nice background for us to look at on the landing page

Dev Notes: Create a background image in CSS and a logo also

Acceptance Criteria: Have a background image and logo

User Story: When user tabs to the bio page they will see individual pictures of the members. There will also be a history paragraph middle way down the page and left justified.

Dev Notes: Have a print to DOM when you click on an image of the band members favorite music group.

Acceptance Criteria:

User Story

When the user visits the media page, they will see an image box with a myriad of awesome photographs of the band, their feet, and any other assorted goodies.

Dev Notes

Create a media html file and create a div for images. Create a js function that loops through the multiple pictures using a button feature.

Acceptance Criteria

When the user views the page, they should be able to see an image
Then the user should be able to click on an arrow button that will move to the next picture
And the user should be able to click the opposite arrow to move back to the previous picture

User Story: Have links we can click on that will take us to another page

Dev Notes: Create a navbar with the other pages on there

Acceptance Criteria: Be able to travel to other html pages via the navbar which is at the top

User Story

As a User I would like some Audio feedback when I mouse of the buttons

Dev Notes

• Create a mouseover sound effect for the buttons (Scrapped this)
• Change button size to allow proper formatting of text
• Change about page title

Acceptance Criteria

When I mouse over the buy tickets buttons they have a sound effect
and the text on the buttons looks evenly aligned
and the title of the about page properly says About Us

User Story:

As a Developer I need a background image for the tour schedule page with the band members right justified with a gradient

Dev Notes:

Create a background image with the band right justified and a gradient moving dark to light from right to left.
and name the image ts_background.png

Acceptance Criteria:

The background image should show the band members right justified and the image should have a gradient from right to left dark to light.

User Story: Have contact info at the bottom

Dev Notes: Make a footer

Acceptance Criteria: Include a copyright symbol and contact info at the bottom of every page

User Story

The user should be able to view 3 cards at the bottom of the media page that displays album covers. When the user clicks on the album cover, a couple song titles are displayed.

Dev Notes

Create 3 objects for the cards. Print to DOM the song titles when the album cover is clicked.

Acceptance Criteria

When the user visits the media page
Then they should be able to click on an album cover that then displays song titles

User Story

• User should see one image per band member

Dev Notes

• There will be a separate

Acceptance Criteria

• User should be able to click on an image and have a print to the DOM of each member
  favorite band

User Story:

As a Developer I need to have access to a Print to Dom function so I can display data on the page.

Dev Notes:

Create a printToDom function in the main.js file that the developers can use to display items on the web pages.

Acceptance Criteria:

When I use the printToDom function my data displays to the page in the target element that I pass into the function.

User Story: We want navigation bars on every page

Dev Notes: Take the homepage navbar and put it on every page

Acceptance Criteria: Have the navbar function like it does on the homepage, on every page.

User Story
The page should look good - images in line and text aligned correctly

Dev Notes
Need to add font and tweak some of the song css

Acceptance Criteria
No conflicts!

User Story

As a USER I definitely do not want music playing in the background, but since we are the developers we really do not care what the users want (that's a lie), but since this is not a public site... We are going to have music.

Dev Notes

• Upload a music file to play on the home page.
• Use the <audio> tag to configure the music file to play in the background

Acceptance Criteria

When a user loads the home page, our hit single plays in the background.

User Story:

The buy button should do something.

Dev Notes:

The buy button will either make the item disappear or pull up a form or something. This is intentionally open ended. I'll put as much work in it as time permits. Put space at top of merch page. style buttons a little more. add some border to pictures

Acceptance Criteria:

The button click should do something.

User Story:
Both media gallery and bio/fav/song clicks should work at the same time when the user presses fields.

Dev Notes:
The last line of the function for the Media gallery is causing issues with the dom of the fav/songs to function on the About page. Have zero clue as to why that is

Acceptance Criteria:
Should have both working at the same time.

User Story: Have a landing page for us to go to

Dev Notes: Create an index.html, merchandise.html, tour_schedule.html, biography.html, media.html, main.js, and main.css

Acceptance Criteria: Have the three files created with boilerplate info

User Story

• As a user I should see the favorite band of each member pop up when the image is clicked.

Dev Notes

• Write to DOM used in the translator exercise. Make an object with the member's name and the corresponding member's favorite band as the value of the name key.
  iterate over the object and print. Make an event listener over each image of the member.

Acceptance Criteria

• Images are clickable and look as close as possible to the image.

User story: Have something continually showing up on the screen

Dev Notes: Use a for loop for that

Acceptance Criteria: Use a for loop to have something continually appearing on the homepage

User Story:

As a User, when I browse to the Tour Schedule page I should see a background image of the band

Dev Notes:

Create the DIV to contain the background image named ts_background.png
and insert and style the img in accordance to the wireframe below
Reference Issue #15

Acceptance Criteria:

When a user browses to the tour schedule page the should see a picture of the band as the background image.

Last thing we need to do is update the readme with the designated items.

Description

This project is an exploration of javascript functions. I built an animal nuggetizer. I also printed some numbers to the DOM.

Screenshots

• Put some screenshots here

How to run this project

• Use npm to install http-server in your terminal:

npm install -g http-server

• Run the server

hs -p 8080

• Open your browser and navigate to:

localhost:8080