User Story

As a developer, I need some starter code.

AC

WHEN the site loads
Then I should see a light blue background
And I should see the text "Acme Explosives" on the page
And I should see a bootstrap button that says "Danger", text printed on the page that says "Categories", "Types", "Products", and a console.log that says "boom!"

Development

• index.html with
  • "Acme Explosives" as the title
  • a bootstrap button with the class "btn btn-danger" and the text "Danger"
  • a div with the id categories-page, containing an h1 tag stating "Categories" and a div with the id categories
  • a div with the id types-page, containing an h1 tag stating "Types" and a div with the id types
  • a div with the id products-page, containing an h1 tag stating "Products" and a div with the id products
• main.js with console.log that says "boom!"
• main.css with background color changed to #lightblue
• install package.json at root (notes linked below)
• install dev dependencies
• .gitignore at root with package-lock.json, node_modules/, dist/, and build/
• .babelrc at root (notes linked below)
• configure webpack
• configure eslint with .eslintignore and .eslintrc files

User Story

As a developer, in order to not have to wait, I would like some seed data

AC

Given A developer navigated to your repo
Then they should see 3 files called db/categories.json, db/types.json, and db/products.json with seed data

Dev Notes

• Create a directory called db at the root of the project directory
• In db, create a 3 files called db/categories.json, db/types.json, and db/products.json
• Paste the seed data provided below within each json file.
• Update products.json type: key to typeId
• Update types.json category: key to categoryId

User Story

As a user, when the page loads, I should see category cards.

AC

Given a user navigates to the page
Then they should see all categories from db/categories.json printed on the page as cards

Dev Notes

• in javascripts/helpers, create a new directory called data
• in javascripts/helpers/data, create categoriesData.js
  • categoriesData.js will create a function called loadCategories, which contains an axios call to .get() the data from categories.json, then will export the function
• in javascripts/components, create a new directory called categories, which contains the files categories.js and categories.scss

- categories.js should:

• import $ from jquery, categoriesData from categoriesData.js, util from util.js

• contain the following functions:

  • initCategories, which calls categoriesData.loadCategories(), with:
    • .then() method that takes the parameter resp and calls in the body writeCategories(resp.data.categories)
    • .catch() method that will take the parameter err and will console.error('error from initCategories', err)
  • writeCategories() will build a domString to print the categories as cards to the page using util.printToDom('categories', domString)

• export initCategories()

• in main.js:

  • import categories from categories.js
  • create a function called init that runs categories.initCategories
  • call init()

• in index.html:

  • remove the danger button

User Story

As a user, when the page loads, when I click on a category button, then on a type button, I see all of the products within that type, and I can return to the previous page when I click on the Back button.

AC

Given a user navigates to the page
And clicks on a category card's button
And clicks on a type card's button
Then they should see all products from db/products.json that correspond to that type and category printed on the page as cards
And when they click on the Back button
Then they should return to the Types page

Dev Notes

• in index.html, in the the products-page div, add a button with the id toTypesBtn with the text "Back"
• in javascripts/helpers/data, create productsData.js
  • productsData.js will create the functions:
    • loadProductsFromType, which:
      • takes the parameter typeId
      • creates a newPromise() with resolve, reject parameters
      • calls axios.get() to
        • get the data from products.json with a
        • .then() method that
          • takes the parameter resp
          • creates a new variable called allProducts which equals resp.data.products
          • creates a new variable called matchingProducts that calls .filter() on allProducts, takes the parameter product, and returns true if product.typeId === typeId
          • and finally calls resolve(matchingProducts), and a
        • .catch() method that takes the parameter err and that calls reject(err) in the body
    • getProductsForEachType, which:
      • takes the parameter types
      • creates a new Promise() with resolve, reject parameters
      • calls axios.get() to
        • get the data from products.json with a
        • .then() method that
          • takes the parameter resp
          • creates a new variable called products which equals resp.data.products
          • creates a new variable called typesWithProducts that calls .map() on types, takes the parameter type, creates a new variable const newType = type to bypass the linter, creates a variable called matchingProducts that calls .filter() on products, takes the parameter product, and returns true if product.typeId === type.id, assigns a new key value pair to newType with newType.products = matchingProducts, and returns newType
          • and finally calls resolve(typesWithProducts)
        • .catch() method that takes the parameter err and that calls reject(err) in the body
    • export loadProductsFromType and getProductsFromEachType
• in javascripts/components, create a new directory called products, which contains the files products.js and products.scss

- products.js should:

• import $ from jquery, import productsData from productsData.js, import util from util.js
• include the following functions:
  • initProducts which:
    • takes the parameter typeId
    • calls productsData.loadProductsFromType which:
      • passes the parameter typeId
      • calls .then() on success, which passes the parameter types and calls writeProducts(products) in the body
      • calls .catch(err => console.error(err) on failure
  • writeProducts which:
    • takes the parameter products
    • calls bindEvents()
    • filters through products parameter and creates a card for each product, and will print the product card to the page using util.printToDom('products', domString)
  • bindEvents()which:
    • adds a click eventListener to the id toTypesBtn which adds the .hide class to the #products-page and #categories-page
• export initProducts

-types.js should:

• contain the following functions:
  • bindEvents() which:
    • searches the DOM for all buttons with the className see-products, assign them to the variable productButtons and loops through productButtons, adding a click eventListener to each button, which calls seeProductDiv
  • seeProductDiv that will:
    • pass the parameter e, find the closest e.target.id of the type .card class, and assign it to the new variable typeId
    • add the .hide class to the divs with the ids categories-page and types-page
    • remove the .hide class from the div with the id products-page, and
    • call `products.initProducts(typeId)
  • writeTypes:
    • add a button with the class see-products
  • initTypes:
    • replace the .then() statement to include the following two .then() statements:
      • the first .then() will take the parameter resp and will call productsData.getProductsForEachType(resp.data.types) which returns the specific types for each category
      • the second .then() will take the parameter typesWithProducts and will call writeTypes, passing in typesWithProducts

User Story

As a user, when the page loads, when I click on a category button, I see all of the types within that category, and I can return to the previous page when I click on the Back button.

AC

Given a user navigates to the page
And clicks on a category card's button
Then they should see all types from db/types.json printed on the page as cards
And when they click on the Back button
Then they should return to the Categories page

Dev Notes

• in index.html, in the types-page div, add a button with the id toCategoriesBtn with the text "Back"
• in javascripts/helpers/data, create typesData.js
  • typesData.js will create the functions
    • loadTypesFromCategory, which:
      • takes the parameter categoryId
      • creates a new Promise() with resolve, reject parameters
      • calls axios.get() to
        • get the data from types.json with a
        • .then() method that
          • takes the parameter resp
          • creates a new variable called allTypes which equals resp.data.types
          • creates a new variable called matchingTypes that calls .filter() on allTypes, takes the parameter type, and returns true if type.categoryId === categoryId
          • and finally calls resolve(matchingTypes), and a
        • .catch() method that takes the parameter err and that calls reject(err) in the body
    • getTypesForEachCategory, which:
      • takes the parameter categories
      • creates a new Promise() with resolve, reject parameters
      • calls axios.get() to
        • get the data from types.json with a
        • .then() method that
          • takes the parameter resp
          • creates a new variable called types which equals resp.data.types
          • creates a new variable called categoriesWithTypes that calls .map() on categories, takes the parameter category, creates a new variable const newCategory = category to bypass the linter, creates a variable called matchingTypes that calls .filter() on types, takes the parameter type, and returns true if type.categoryId === category.id, assigns a new key value pair to newCategory with newCategory.types = matchingTypes, and returns newCategory
          • and finally calls resolve(categoriesWithTypes)
        • .catch() method that takes the parameter err and that calls reject(err) in the body
    • export loadTypesFromCategory and getTypesFromEachCategory
• in javascripts/components, create a new directory called types, which contains the files types.js and types.scss

- types.js should:

• import $ from jquery, import typesData from typesData.js, import util from util.js
• include the following functions:
  • initTypes which:
    • takes the parameter categoryId
    • calls typesData.loadTypesFromCategory which:
      • passes the parameter categoryId
      • calls .then() on success, which passes the parameter types and calls writeTypes(types) in the body
      • calls .catch(err => console.error(err) on failure
  • writeTypes which:
    • takes the parameter types
    • filters through types parameter and creates a card for each type that will print the type cards to the page using `util.printToDom('types', domString)
  • `bindEvents()~ which:
    • adds a click eventListener to the id toCategoriesBtn which adds the .hide class to the types-page and products page and removes the .hideclass from thecategories-page`
• export initTypes

- categories.js should:

• import types from types.js, and typesData from typesData.json
• contain the following functions:
  • bindEvents() will search the DOM for all buttons with the className see-types, assign them to the variable allButtons and will loop through allButtons adding a click eventListener to each button, which calls seeTypeDiv
  • seeTypeDiv() will
    • pass a parameter e, find the closest e.target.id of the category .card class, and assign it to the new variable categoryId
    • add the hide class to the divs with the ids categories-page and products-page
    • remove the hide class from the divs with the id types-page, and
    • call types.initTypes(categoryId)
  • writeCategories:
    • add a button with the class see-types
    • call bindEvents()
  • initCategories:
    • replace the .then() statement to include the following two .then() statements:
      • the first .then() will take the parameter resp and will call typesData.getTypesForEachCategory(resp.data.categories) which returns the specific types for each category
      • the second .then() will take the parameter categoriesWithTypes and will call writeCategories, passing in categoriesWithTypes