Coder Social home page Coder Social logo

e-commerce-site's Introduction

Alchemy Bootstrap Template

Making a plan

DAY 1

HTML

  • h1: welcome
  • h2: little description
  • div: empty, with id="product-list"

CSS

  • center the page
  • put the images in a flexbox, and have them wrap

IMAGES

  • add images into assets folder to use in list

DATA MODEL (cookbooks.js)

  • create an ARRAY, and inside of that array, build objects
  • what do I want people to know about my products?
  • cookbooks! here is what is important to me:
    • id
    • name
    • image
    • publisher
    • price

APP.JS

  • here we will want to grab the dom elements that exist that we'll need: just the empty div
  • build out the initial for-loop here (we'll move it later, but it might help to understand how it works!)
  • we need to:
    • create a div to hold each item
    • update a header in the div to include the name from our cookbooks list (h3)
    • update a image in the div to be the image from our cookbooks list (img)
    • update a p tag in the div to hold the publisher from our cookbooks list (p)
    • update a p tag in the div to hold the price from our cookbooks list (p)

CREATE FUNCTION (render-product.js)

  • now, instead of all of the DOM maniuplation happening in app.js, let's create it's own function to render all of the values from the list. we'll do that in a separate file, render-product.js.
  • function will take in one of the items in the product-list array
  • function will output the for-loop (dom manipulation), to create the html
  • don't forget to export! then don't forget to import in app.js!

DAY 2

  • whoops, no plan for day 2

DAY 3

FUNCTIONS

  • getcart()
    • test this first, bc additem depends on it
      • first test when cart exists
      • second test when cart doesn't exist
    • then add to cart.js
  • addItem(id)
    • test before building
      • first test if an item already exists in cart
      • second test if an item doesn't exist
  • clearCart()

CONNECT FUNCTIONS TO PAGE

  • cart.js needs to have getCart() added
  • cart.js needs to have clearItem() added (to button?)
  • app.js needs to have addItem(id) added
  • add appropriate buttons

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.