- Visual Studio Code
- iTerm2
1. User can view a list of items for sale.
2. User can view the details of an item.
3. User can add an item to their cart.
4. User can continue shopping.
5. User can view their cart summary.
6. User can checkout.
A JavaScript shopping cart for musicians who want to buy drums.
1. User can view a list of items for sale.
2. User can view the details of an item.
3. User can add an item to their cart.
4. User can continue shopping.
5. User can view their cart summary.
6. User can checkout.
Users may need to know more information about an item before deciding to purchase it.
Listen for clicks on the catalog, find the clicked item, update the application state, and render the details view.
catalog
item and renders a DOM tree containing all of the details of an item styled with Bootstrap.itemId
and a list of catalog
items and returns the item Object
with the matching itemId
.data-item-id
attribute on the root element of the card.'click'
event listener to the catalog
view on the page.
Element.closest
to determine whether the event.target
was an item and what its itemId
is.app.view
to 'details'
if an item was clicked.app.details.item
to the matching item Object
.app
state.data-view
container to index.html
for the 'details'
view.view
name and adds a 'hidden'
class to all data-view
containers that don't match that view
.app
state to populate and show the correct view
.'click'
listener to call the function that renders the entire app
state.When a user wants to buy an item, they can stage it for purchase in a virtual cart.
Listen for clicks on the details view and add the current item to the cart in the application state.
app
state to include a cart
property to hold items the user wants to buy.cart
object and returns a DOM tree containing the count of items in the cart.index.html
to hold the rendered cart
.app
state to also render the cart
.app.cart
.'click'
event listener to the details
view on the page.
app.details.item
to the app.cart
.app
state.app
state when an item is added to the cart.The user needs to see how much money they are spending and what they've added to the cart so far.
Listen for clicks on the shopping cart and update the application state to the cart summary view.
data-view
container for the cart
view to index.html
.cart
item and returns a Bootstrap-styled DOM tree that includes the item name
, brand
, price
, and image
.cart
object and returns a DOM tree containing all of the rendered cart
items as well as a heading, count, and total.'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.cart
view more visually appealing.Getting paid.
Listen for clicks on the cart summary view and update the application state to the checkout view.
data-view
container for the checkout
view to index.html
.cart
summary to include a button for proceeding to check out.'click'
event listener to the cart
view container to:
app.view
to 'checkout'
.app
state.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.The user my want to buy more items and we want to sell more items.
Listen for clicks on the details view and update the application state to the catalog view.
'click'
event listener to the data-details
view to:
app.view
to 'catalog'
if the button was clicked.app
state.Users will want to buy some drums, so we need to list the available items.
Render the catalog view.
main.js
containing the state of the app
.index.html
page.catalog
item and returns a Bootstrap card component DOM tree containing the brand, name, price, and image of the item.catalog
and returns a DOM tree containing a heading and a Bootstrap grid of rendered catalog
items.app
state and inserts it into the view.A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.