travistn/jamazon

A JavaScript shopping cart for musicians who want to buy drums.

Hello I'm Travis! 👋

I'm a software developer with a passion for front-end development but not afraid to tackle the back-end. I enjoy exploring new technologies, tackling challenging problems, and eager to constantly learn. Check out my repositories to see what I’ve been working on, and feel free to reach out if you’d like to connect!

⚡ Skills:

jamazon's Issues

User can view their cart summary.

🍔 Motivation

The user needs to see how much money they are spending and what they've added to the cart so far.

👷 Plan

Listen for clicks on the shopping cart and update the application state to the cart summary view.

🔧 Implementation

• Create a wireframe.
• Add a data-view container for the cart view to index.html.
• Define a function that takes a cart item and returns a Bootstrap-styled DOM tree that includes the item name, brand, price, and image.
• Define a function that takes a cart object and returns a DOM tree containing all of the rendered cart items as well as a heading, count, and total.
• Add a 'click' event listener to the cart view container in index.html to update the app.view to 'cart' and trigger a re-render of the entire app state.
• Allow the user to continue shopping.
• Revise bootStrap styling to make cart view more visually appealing.

🖼 Wireframe

User can view the details of an item.

🍔 Motivation

Users may need to know more information about an item before deciding to purchase it.

👷 Plan

Listen for clicks on the catalog, find the clicked item, update the application state, and render the details view.

🔧 Implementation

• Create a wireframe.
• Define a function that takes a catalog item and renders a DOM tree containing all of the details of an item styled with Bootstrap.
• Define a function that takes an itemId and a list of catalog items and returns the item Object with the matching itemId.
• Enhance the function that renders an item card to include a data-item-id attribute on the root element of the card.
• Add a 'click' event listener to the catalog view on the page.
  • Use Element.closest to determine whether the event.target was an item and what its itemId is.
  • Update the app.view to 'details' if an item was clicked.
  • Update the app.details.item to the matching item Object.
• Verify that clicking an item correctly updates the app state.
• Add a data-view container to index.html for the 'details' view.
• Define a function that takes a view name and adds a 'hidden' class to all data-view containers that don't match that view.
• Enhance the function that renders the entire app state to populate and show the correct view.
• Enhance 'click' listener to call the function that renders the entire app state.

🖼 Wireframe

User can add an item to their cart.

🍔 Motivation

When a user wants to buy an item, they can stage it for purchase in a virtual cart.

👷 Plan

Listen for clicks on the details view and add the current item to the cart in the application state.

🔧 Implementation

• Create a wireframe.
• Revise initial app state to include a cart property to hold items the user wants to buy.
• Define a function that takes a cart object and returns a DOM tree containing the count of items in the cart.
• Add a container element to index.html to hold the rendered cart.
• Enhance function that renders the entire app state to also render the cart.
• Enhance function that renders item details to include a button for adding the item to the app.cart.
• Add a 'click' event listener to the details view on the page.
  • Determine if the Add to Cart button was clicked and add the app.details.item to the app.cart.
• Verify that clicking Add to Cart correctly updates the app state.
• Re-render the app state when an item is added to the cart.
• Rename addToCart function for better semantics

🖼 Wireframe

User can view a list of items for sale.

🍔 Motivation

Users will want to buy some drums, so we need to list the available items.

👷 Plan

Render the catalog view.

🔧 Implementation

• Create a wireframe.
• Create the initial main.js containing the state of the app.
• Create the initial index.html page.
• Add linter configuration for HTML, CSS, and JavaScript.
• Define a function that takes an item from the catalog item and returns a Bootstrap card component DOM tree containing the brand, name, price, and image of the item.
• Define a function that takes a catalog and returns a DOM tree containing a heading and a Bootstrap grid of rendered catalog items.
• Define a function that renders the entire app state and inserts it into the view.
• Adjust Bootstrap CSS classes to make the catalog visually appealing.
• Remove function calls and lines of code that have no purpose.
• Remove media queries that are already included in Bootsrap
• Revise CSS identifiers and CSS formatting
• Eliminate CSS properties by using bootStrap's utilities

🖼 Wireframe

User can continue shopping.

🍔 Motivation

The user my want to buy more items and we want to sell more items.

👷 Plan

Listen for clicks on the details view and update the application state to the catalog view.

🔧 Implementation

• Create a wireframe.
• Enhance the function that renders item details to include a button for returning to the catalog.
• Add a 'click' event listener to the data-details view to:
  • Update the app.view to 'catalog' if the button was clicked.
  • Trigger a re-render of the entire app state.

🖼 Wireframe

User can checkout.

🍔 Motivation

Getting paid.

👷 Plan

Listen for clicks on the cart summary view and update the application state to the checkout view.

🔧 Implementation

• Create a wireframe.
• Add a data-view container for the checkout view to index.html.
• Enhance function that renders the cart summary to include a button for proceeding to check out.
• Add a 'click' event listener to the cart view container to:
  • Update the app.view to 'checkout'.
  • Trigger a re-render of the entire app state.
• Define a function that takes a cart object and returns a Bootstrap-styles DOM tree containing the cart total and a form to collect payment and shipping information from the user.
• Show a confirmation message when the user submits their order.

🖼 Wireframe