Shopping Buddy 🛒

Description

Keep track of what you need to get with Shopping Buddy. Add, change and delete items as you go shopping.

Table of Contents

• Installation
• Usage
• Credits
• License

Installation

Steps to run application:

Command prompt:
1. mysql -u root -p
2. Enter password
3. source db/schema.sql
4. source d/seeds.sql (optional)

Git Bash
1. git clone git@github.com:kqarlos/shopping-buddy.git
2. npm install
3. add enviroment variables or update credentials in connection.js
4. npm start

Usage

Screenshots

Working site

Snippets

Inserting a new item

1. Client-side javascript

    $(".cart").on("click", addToCart);
    // Creates a new item and sends it to the server. Reloads Page
    function addToList() {
        var item = {
            item: $("#newItem").val().trim(),
            done: false
        };
        // Send the POST request.
        $.ajax("/api/list", {
            type: "POST",
            data: item
        }).then(
            function () {
                console.log("created new item");
                location.reload();
            }
        );
    }
    

• This code takes care of creating an object by pulling information from the web's elements. This object is then sent to the server to be added to the database. The page is reloaded after this work is done by the server.

2. Server route

router.post("/api/list", function (req, res) {
  console.log("Data to add - item: " + "\"" + req.body.item + "\"" + " done: " + req.body.done);
  shoppingList.create(["item", "done"], ["\"" + req.body.item + "\"", req.body.done], function (result) {
    res.json({ id: result.insertID });
  });
});

• The object is received by the server route /api/list. This function calls the Shopping List object model. It calls the create function with the properties to be set and the values of said properties.

3. Shopping list object model

    create: function (cols, values, cb) {
        orm.create("list", cols, values, function (res) {
            cb(res);
        });
    }

• The Shopping List model recieves property names and its values to be updated in the List table. The information recieved together with the name of the table to be udated is sent to the object relational mapping to perform the query.

4. ORM

    create: function (table, cols, values, cb) {
        var query = "INSERT INTO " + table + " (" + cols.toString() + ") VALUES (" + values.toString() + ")";
        console.log(query);
        connection.query(query, values, function (err, res) {
            if (err) throw err;
            cb(res);
        });
    }

• The ORM takes the information from the Shopping List model and builds the query. This query is then sent to the MySQL database connection to be run.

Credits

Author

• 💼 Carlos Toledo: portfolio
• Github: kqarlos
• LinkedIn: carlos-toledo415

Built With

License