nss-evening-cohort-8 / bandz-mermaids-in-the-basement Goto Github PK

Story

A user visiting the site should be able to navigate to home page, members page, tour page and discography page.

Acceptance Criteria

**The Developer should create an index.html file
And a band.html file
And a tour.html file
And a songs.html file
And a main.css file
And a main.js file

Technical Notes

• Add an index.html file
• Add a band.html file
• Add a tour.html file
• Add a songs.html file
• Add a main.css file
• Add a main.js file

Requested Feature

*Create script to output tour dates to the DOM.

Expected Function

*Output the Tour Dates to the DOM on tour.html

Developer Notes

*May need to stylize to theme.

Acceptance Criteria

*VIP javascript print to DOM of expected tour dates.

Story

When the user sees the home page they should see scrolling background images.

Acceptance Criteria

When the user is on the home page
then they see scrolling background images.

Technical Notes

• index.html should be pulled down
• main.js should be pulled down
• main.css should be pulled down
• create object of images
• create function to iterate over images and change them over time
• print images to DOM

Story

The Developers should have a shared function to print their content to the DOM

Acceptance Criteria

**The Developer should create a function
And when called it should pass through a stringToPrint and a divId

Technical Notes

const printToDom = (stringToPrint, divId) => {
const selectedDiv = document.getElementById(divId);
selectedDiv.innerHTML += stringToPrint;
};

Requested Feature

*Place Navbar on Tour.html page.

Expected Function

*Utilize main-site Navbar for index.html

Developer Notes

*Navbar functional and showing as active when on page.

Acceptance Criteria

*Must have minimal footprint on bandwidth
*Must scale for multiple screen sizes

Story

User will be informed of copyright year and will be shown the band's social media platform websites.

Technical Notes

• A footer or div element needs to be added to the html boilerplate.
• Copyright text with/without copyright symbol should be added and positioned to the center-left side of the page.
• a directory for social media icons should be added within the repository that holds the social media icons
• icons should be aligned in row fashion and positioned to the center-right of the page

Acceptance Criteria

When the user visits the home page and scrolls to the bottom of the page
Then they should see footer space that displays copyright year and social media icons

Story

A user should see a logo for the page and a navbar with links to each page. The logo should be on the left and the page navigation should be inline, on the right.

Acceptance Criteria

When a user sees the Nav Bar
Then they should see the band logo on the left.
And they should see Nav links for home, tour, members and discography inline on the right.

Technical Notes

• Add and/or modify index.html file
• Add and/or modify main.css file
• flexbox will be needed

Requested Feature

*Place Navbar on Members.html page.

Expected Function

*Utilize main-site Navbar for band.html

Developer Notes

*Navbar functional and showing as active when on page.

Acceptance Criteria

*Must have minimal footprint on bandwidth
*Must scale for multiple screen sizes

Story

When the user clicks on the discography link in the navigation, they should see the band's last 3 album art covers with a list of songs from each album.

Technical Notes

• create directory for album art cover images
• add album art covers to directory
• in main.js, add a printToDom function that will use "stringToPrint" and "divId" as parameters
• in main.js file, add an array named "Albums"

• make each album to be an object within the array
• the structure for each object should be as follows:

• {
  "Title": "Album title",
  "Image": "imgUrl",
  "Songs": ["song1", "song2", "song3"]
  }

Acceptance Criteria

When the user clicks the discography link in the navbar
Then the discography page should populate
And three album art covers should be displayed, as well as the corresponding songs

Story

When a user navigates to the members page they should see an image for each band member and the member's name. When they hover over the image the image should fade and the member's bio should be visible.

Acceptance Criteria

When a user clicks to members link
Then they should see page with the band
member's images.
And they should see the band member's name.
And they should be able to hover over a band image
Then the image should fade.
Then the band member's bio should appear.

Technical Notes

• modify index.html file
• modify main.css file
• modify main.js file
• use printToDom function
• use a function to build the members card
• reuse navbar code
• reuse footer code
• use eventListener onMouseOver
• create array of objects. Each object will be a member and include: Name, Image and Biography.

Story

When a user navigates to the members page they should see an image for each band member.

Acceptance Criteria

When a user clicks to members link
Then they should see page with the band
member's images.
And they should see the band member's name.

Technical Notes

• modify index.html file
• modify main.css file
• modify main.js file
• use printToDom function
• use a function to build the members card
• reuse navbar code
• reuse footer code
• create array of objects. Each object will be a member and include: Name, Image and Biography.

Create README.md that describes purpose of project and contains screenshots of the site.

Story

A user should see a copy right information on the left side of the footer and social media links on the far right.

Acceptance Criteria

When a user sees the Footer
Then they should see the the copy right information on the left.
And they should see social media links for tweeter, Instagram and Facebook on the right.

Technical Notes

• Add and/or modify index.html file
• Add and/or modify main.css file
• flexbox will be needed for sticky footer.

Requested Feature

*Place Navbar on Tour.html page.

Expected Function

*Utilize main-site Navbar for index.html

Developer Notes

*Navbar functional and showing as active when on page.

Acceptance Criteria

*Must have minimal footprint on bandwidth
*Must scale for multiple screen sizes

Story

When the user clicks on the discography link in the navigation, they should see the band's last 3 album art covers with a list of songs from each album.

Technical Notes

• create directory for album art cover images
• add album art covers to directory
• in main.js, add a printToDom function that will use "stringToPrint" and "divId" as parameters
• in main.js file, add an array named "Albums"

• make each album to be an object within the array
• the structure for each object should be as follows:

• {
  "Title": "Album title",
  "Image": "imgUrl",
  "Songs": ["song1", "song2", "song3"]
  }

Acceptance Criteria

When the user clicks the discography link in the navbar
Then the discography page should populate
And three album art covers should be displayed, as well as the corresponding songs

Requested Feature

*Site header with 'h1' element TOUR SCHEDULE

Expected Function

*Have the title element, stylized for tour page
*Utilize 'h1' element
*Give Tour Dates a Drop Shadow like Band Name on main page
*Utilize same stylized font from Band Name (Google Fonts)
*Scaled size for screen sizes

Developer Notes

*May need to adjust opacity of background rotation gallery

Acceptance Criteria

*Must have minimal footprint on bandwidth
*Must scale for multiple screen sizes

Requested Feature

*Place Footer on Tour.html page.

Expected Function

*Utilize main-site Footer for index.html

Developer Notes

*Footer functional and all social media links working.

Acceptance Criteria

*Must have minimal footprint on bandwidth
*Must scale for multiple screen sizes

Requested Feature

• site header with band name

Expected Function

• Have the band name, stylized for main home page
• List band name in 'h1' element
• Give Band Name a Drop Shadow
• Stylized Font (Google Fonts)
• Scaled size for screen sizes

Developer Notes

• May need to adjust opacity of background rotation gallery

Acceptance Criteria

• Must be able to clearly see brandname over rotating background image
• Must have minimal footprint on bandwidth
• Must scale for multiple screen sizes

Requested Feature

*Place Footer on band.html page.

Expected Function

*Utilize main-site Footer for band.html

Developer Notes

*Footer functional and all social media links working.

Acceptance Criteria

*Must have minimal footprint on bandwidth
*Must scale for multiple screen sizes

Requested Feature

*Place Footer on Tour.html page.

Expected Function

*Utilize main-site Footer for index.html

Developer Notes

*Footer functional and all social media links working.

Acceptance Criteria

*Must have minimal footprint on bandwidth
*Must scale for multiple screen sizes

Requested Feature

Currently the print to dom function doesn not want to be called by multiple functions

Expected Function

*The print to dom function should be reusable by multiple functions.

Acceptance Criteria

*All funcitons needing to should be able to reuse print to dom function

Requested Feature

*Place Navbar on songs.html page.

Expected Function

*Utilize main-site Navbar for index.html

Developer Notes

*Navbar functional and showing as active when on page.

Acceptance Criteria

*Must have minimal footprint on bandwidth
*Must scale for multiple screen sizes

Story

When a user navigates to the members page they should see an image for each band member, the band member's name and when hovering over the image, the bio should appear.

Acceptance Criteria

When a user clicks to members link
Then they should see page with the band
member's images.
And they should see the band member's name.
And the member's cards should appear 3 to a row
And the member's name should be centered over the image
And a background image should be visible with opacity. (See link for css trick)

Technical Notes

• modify index.html file
• modify main.css file
• modify main.js file
• use printToDom function
• use a function to build the members card
• reuse navbar code
• reuse footer code
• https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

Story

A user should see a logo for the page and a navbar with links to each page.

Acceptance Criteria

When a user clicks to members link
Then they should see page with the band
member's information.
And
When a user clicks to tour link
Then they should see a page with the band's tour schedule.
And
When a user clicks to discography
Then they should see a page with list of albums and songs.

Technical Notes

• Add and/or modify index.html file
• Add and/or modify main.css file
• Use one main div element to target all the links and the logo for styling.

Story

When a user navigates to Discography page they should see a background image for the page, Album title, Album picture and song titles, navbar and footer.

Acceptance Criteria

When a user goes to discography page
Then an album name, album image and song list for the albums with odd index of the arrary should be displayed to the left of the page.
Then albums with even index of the array will be displayed to the right of the page with the album name, album image and song list

Technical Notes

• Add and/or modify index.html
• Add and/or modify main.css

Requested Feature

*Place Footer on Songs.html page.

Expected Function

*Utilize main-site Footer for songs.html

Developer Notes

*Footer functional and all social media links working.

Acceptance Criteria

*Must have minimal footprint on bandwidth
*Must scale for multiple screen sizes