diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..3c3629e6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..955d3ccb
--- /dev/null
+++ b/index.js
@@ -0,0 +1,6 @@
+const express = require('express');
+const app = express();
+app.listen(8080, (err) => {
+    err ? console.log('Error:' + err) : app.use(express.static('public'));
+});
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..f0ea9b35
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,374 @@
+{
+  "name": "aca-store",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ipaddr.js": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz",
+      "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA=="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
+      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA=="
+    },
+    "mime-types": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
+      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
+      "requires": {
+        "mime-db": "1.40.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "proxy-addr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
+      "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.0"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..66671935
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "aca-store",
+  "version": "1.0.0",
+  "description": "The purpose of this project is to build an Amazon.com like ecommerce website using the front end skills that we should possess by now. You may be suprised that you have already learned all the skills necessary to do this. # Prerequisite * Know how to loop arrays and use array functions like map. * Know how to construct strings, concatenation or string template literals. * Know how to learn about the use of built in tools such as innerHTML or sessionStorage. (read instruction manual)",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dbobb220/aca-store.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/dbobb220/aca-store/issues"
+  },
+  "homepage": "https://github.com/dbobb220/aca-store#readme",
+  "dependencies": {
+    "express": "^4.17.1"
+  }
+}
diff --git a/public/index.html b/public/index.html
index 138da963..db3c4a71 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,10 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>My Store</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-   
 </head>
 <body>
-     <script src="products.js"></script>    
+    <header></header>
+    <main></main>
+    <script src="products.js"></script>    
     <script src="index.js"></script>   
 </body>
 </html>
\ No newline at end of file
diff --git a/public/index.js b/public/index.js
index 6515a734..4ae3e185 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,2 +1,402 @@
-//stuff
-//more stuff
\ No newline at end of file
+//* Cart feature
+//* Place order
+
+//! declaring variables for container, holding data for functions, and are you there feature
+let holder = '';
+let areYouThere = true;
+let headerDOM = document.querySelector('header');
+let mainDOM = document.querySelector('main');
+
+//! Add Product Screen
+
+let addProduct = () => {
+    let prodName = document.querySelector('#prod_name').value;
+    let prodDesc = document.querySelector('#prod_desc').value;
+    let prodPrice = document.querySelector('#prod_price').value;
+    let options = {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({name: `${prodName}`, description: `${prodDesc}`, price: `${prodPrice}`})
+    };
+
+    fetch('https://acastore.herokuapp.com/products', options)
+        .then(res => res.json())
+        .then(data => {
+            console.log(data);
+            loadPage();
+        })
+        .catch(err => console.log(`Err: ${err}`))
+}
+
+//! Create Product Screen
+
+let createProd = () => {
+    console.log('button clicked');
+    let holder = `
+        <h2>Create a Product</h2>
+        <br>
+        Product Name:
+        <br>
+        <input type="text" id="prod_name">
+        <br>
+        <br>
+        Product Description:
+        <br>
+        <input type="text" id="prod_desc">
+        <br>
+        <br>
+        Product Price:
+        <br>
+        <input type="text" id="prod_price">
+        <br>
+        <br>
+        <button onclick="addProduct()">Add Product</button>
+    `
+    changeContainer(holder);
+}
+
+//! conditional to see if user has logged in yet
+let loadPage = () => {
+    let loginVar;
+    localStorage.getItem('userVerified') === null ? loginVar = false : loginVar = true;
+    if (loginVar) {
+        headerDOM.innerHTML = `
+            <div>
+                <input type="search" name="" id="search">
+                <input type="submit" value="Search" onClick="searchProduct()">
+                <button type="reset" onClick="resetFunc()">Reset</button>
+                <button id="view_cart" onClick="viewCart()">View Cart</button>
+                <select id="category" onChange="categoryFilter(this.value)">
+                    <option value="">All Categories</option>
+                    <option value="food">Food</option>
+                    <option value="electronics">Electronics</option>
+                    <option value="sporting">Sporting</option>
+                </select>
+                <button onClick="createProd()">Create Product</button>
+            </div>
+        `;
+        mainDOM.innerHTML = `<section class="product_list"></section>`;
+        fetchData();
+    } else {
+        headerDOM.innerHTML = `
+            <div style="text-align: right;">
+                <div>
+                    Email:
+                    <input type="email" name="Email" id="user_email" style="margin-right:20px;" required>
+                    Password:
+                    <input type="password" name="Password" id="user_password" required>
+                    <button id="user_submit" onclick="userLogin()">Login</button>
+                </div>
+            </div>
+        `;
+        mainDOM.innerHTML = `<h2 style="display: flex; justify-content: center; align-items: center; height: 250px;">Welcome! Please login</h2>`
+    }
+}
+
+let fetchData = () => {
+    fetch('https://acastore.herokuapp.com/products')
+        .then(res => res.json())
+        .then(data => loadProducts(data));
+}
+
+//! Add login that posts to heroku
+let userLogin = () => {
+    let userEmail = document.querySelector('#user_email').value;
+    let userPassword = document.querySelector('#user_password').value;
+    let options = {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({email:`${userEmail}`, password:`${userPassword}`})
+    };
+    
+    fetch('https://acastore.herokuapp.com/users', options)
+        .then(res => res.json())
+        .then(data => {
+            localStorage.setItem('userVerified', JSON.stringify(data.id));
+            loadPage();   
+    });
+    
+}
+
+//! SetTimeout for 'Are you there' 
+// let promptTimeout = () => {
+//     // maintains timeout true each time a click occurs
+//     areYouThere = true;
+//     console.log('user click - 60 sec timer til prompt');
+//     setInterval(() => {
+//         // switch varaibale to false
+//         areYouThere = false;
+//         console.log('Are you still there? prompt initiated');
+//         // alert user if variable is false
+//         if (!areYouThere) {alert("Are you still there");};
+//         areYouThere = true;
+//         console.log('user returned - 60 sec timer til prompt');
+//     }, 600000);
+// };
+
+// document.body.addEventListener('click', promptTimeout);
+
+//!! Change the container DOM
+
+const changeContainer = (value) => {
+    let container = document.querySelector('.product_list');
+    container.innerHTML = `${value}`;
+    console.log('container changing to...');
+}
+
+//!! Load product overview view when different functions are complete
+const loadProducts = (prod) => {
+    holder = '';
+    for (let i = 0; i < prod.length; i++) {
+        let product = prod[i];
+        holder += `
+        <h3>${product.name}</h3>
+        <p>${product.description}<p>
+        <p>Rating: ${product.rating}</p>
+        <p>Price: ${product.price}</p>
+        <p><button onClick="viewDetail(${product.id})">View Details</button></p>
+        `
+    }
+    changeContainer(holder);
+    console.log('products overview view');
+}
+
+//!! Search Functionality
+
+let searchProduct = () => {
+    let searchInput = document.querySelector('#search').value;
+    let myRegEx = new RegExp(`${searchInput}`, 'gi');
+    let holderArray = [];
+    for (let i = 0; i < products.length; i++) {
+        let productName = products[i].name;
+        let productDesc = products[i].description;
+        // search for regex match in name and description
+        if(productName.match(myRegEx) || productDesc.match(myRegEx)) {
+            holderArray.push(products[i])
+        }
+    }
+    loadProducts(holderArray);
+    console.log('search results');
+}
+
+//!! Shopping Cart
+
+let changeQuant = (name, id) => {
+    let newQuant = document.querySelector(`#${id}`).value;
+    let sessionItem = sessionStorage.getItem(`${name}`);
+    let sessionArray = JSON.parse(sessionItem);
+    sessionArray[0] = newQuant;
+    sessionStorage.setItem(`${name}`, JSON.stringify(sessionArray));
+    viewCart();
+}
+
+let viewCart = () => {
+    holder = '<h2>Cart</h2>';
+    let totalCost = 0;
+    // loop through session storage to grab all add to cart items
+    for(let i = 0; i < sessionStorage.length; i++) {
+        let cartSeshItem = sessionStorage.getItem(sessionStorage.key(i));
+        if(cartSeshItem !== 'true') {
+            let parsedItem = JSON.parse(cartSeshItem);
+            let removeDollar =  parsedItem[1].price.slice(1);
+            // to build drop down in view cart
+            let optionHolder = '';
+            let itemNameId = parsedItem[1].id;
+            // build options 
+            for (let j = 1; j <= 10; j++) {
+                j == parsedItem[0] ? optionHolder += `<option value=${j} selected>${j}</option>`
+                : optionHolder +=  `<option value=${j}>${j}</option>`
+            }
+            holder += `
+                <h3>Product: ${parsedItem[1].name}</h3>
+                <p><strong>Price:</strong> ${parsedItem[1].price}</p>
+                <p><strong>Quantity:</strong><select id="select_${itemNameId}" onChange="changeQuant('${parsedItem[1].name}', this.id)">${optionHolder}</select>
+                <p><strong>Cost:</strong> $${parseFloat(Math.round(parseFloat(removeDollar) * parseFloat(parsedItem[0] * 100)) / 100).toFixed(2)}</p>
+                <button onClick="removeCartItem('${parsedItem[1].name}')">Remove From Cart</button>
+            `
+            // multiply the quantity and price for each
+            let multiplyQuantity = parseFloat(removeDollar) * parseInt(parsedItem[0]);
+            // then add to totalCost variable
+            totalCost += multiplyQuantity;
+        }
+    }
+    // maintain 2 decimal points with total
+    totalCost = parseFloat(Math.round(totalCost * 100) / 100).toFixed(2);
+    holder += `
+        <h2>Cart Total: $${totalCost}<button style="margin-left: 30px;" onClick="checkoutFunc(${totalCost})">Checkout</button></h2>
+    `
+    changeContainer(holder);
+}
+
+const removeCartItem = (item) => {
+    sessionStorage.removeItem(item);
+    console.log(`${item} removed from cart`);
+    viewCart();
+}
+
+//!! Checkout Functionality
+
+const checkoutFunc = (cost) => {
+    holder = '';
+    holder += `
+    <h3>Cart Total: $${cost}</h3>
+        <form>
+            First name:
+            <br>
+            <input type="text" name="firstname" required>
+            <br>
+            Last name: 
+            <br>
+            <input type="text" name="lastname" required>
+            <br>
+            Email: 
+            <br>
+            <input type="email" name="email" required>
+            <br>
+            <button>Place Order</button>
+        </form>
+    `
+    changeContainer(holder);
+    console.log('checkout form dislpayed')
+}
+
+//!! View Details
+
+let viewDetail = (num) => {
+    // loop through array to find product id of item clicked
+    let filterProduct = products.filter(x => x.id == num);
+    let product = filterProduct[0];
+    holder = ''
+    let eachRating = '';
+    // loop to store each rating in object
+    for (let i = 0; i < product.reviews.length; i++) {
+        eachRating += `<li>Rating: ${product.reviews[i].rating} - ${product.reviews[i].description}</li>`
+    }
+    holder += `
+    <div style="display:flex;">
+        <div style="margin-top: 1em;">
+            <img src="${product.imgUrl}" alt="${product.name}"/>
+        </div>
+        <div style="margin-left: 50px;">
+            <h3>${product.name}</h3>
+            <p>${product.description}</p>
+            <p>Rating: ${product.rating}</p>
+            <p>Number of Reviews: ${product.reviews.length}</p>
+            <p>Price: ${product.price}</p>
+            <p>Category: ${product.category}</p>
+            <p>
+                <button onClick="loadProducts(products)">Hide Details</button>
+            </p>
+            <p>
+                <select id="quantity">
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="5">5</option>
+                    <option value="6">6</option>
+                    <option value="7">7</option>
+                    <option value="8">8</option>
+                    <option value="9">9</option>
+                    <option value="10">10</option>
+                </select>
+                <button onClick="addToCart(${product.id})">Add To Cart</button>
+            </p>
+            <p>Ratings:</p>
+            <p>${eachRating}</p>
+        </div>
+    </div>
+    `
+    changeContainer(holder);
+    console.log('product detail view');
+}
+
+//!! Reset functionality 
+
+const resetFunc = () => {
+    console.log('reset clicked');
+    // empty search input
+    document.querySelector('#search').value = '';
+    //reload all products
+    fetchData();
+}
+
+//!! Add to cart 
+
+let addToCart = (num) => {
+    let localUser = localStorage.getItem('userVerified');
+    let userInfo = JSON.parse(localUser);
+    let userId = userInfo.id
+    let isUser = [];
+    let cartSesh;
+
+    fetch(`https://acastore.herokuapp.com/carts/`)
+        .then(res => res.json())
+        .then((data) => {
+            isUser = data.filter(x => x.userId == userId);
+            isUser.length ? cartSesh = isUser[0].userId : cartSesh = 0;
+            if(cartSesh == 0) {
+                console.log('create cart id');
+                let quantityItem = document.querySelector('#quantity').value;
+                let cartItem = products.filter(x => x.id == num);
+                let cartItemName = cartItem[0].name;
+                let holderArray = [];
+                holderArray.push(quantityItem, cartItem[0]);
+                let options = {
+                    method: 'POST',
+                    header: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({userId: `${userId}`, products: [`${cartItemName}`, holderArray]})
+                }
+        
+                fetch(`https://acastore.herokuapp.com/carts/`, options)
+                    .then(res => res.json())
+                    .then(data => console.log(data))
+                    .catch(err => console.log(`Err: ${err}`))
+            } else {
+                console.log('update cart id');
+                let quantityItem = document.querySelector('#quantity').value;
+                let cartItem = products.filter(x => x.id == num);
+                let cartItemName = cartItem[0].name;
+                let holderArray = [];
+                holderArray.push(quantityItem, cartItem[0]);
+                let options = {
+                    method: 'PUT',
+                    header: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.parse({products: [`${cartItemName}`, holderArray]})
+                }
+        
+            fetch(`https://acastore.herokuapp.com/carts/${userId}`, options)
+                .then(res => res.json())
+                .then(data => console.log(data))
+                .catch(err=> console.log(`Err: ${err}`))
+            }
+        })
+        .catch(err => console.log(`Err: ${err}`))
+}
+
+//!! Category Filter
+
+let categoryFilter = (category) => {
+    console.log(`filter select for ${category}`);
+    let holderArray = [];
+    // load all products if all categories is selected
+    category == '' ? holderArray = products :
+    // loop through products array to find matching categories 
+    products.forEach(val => {
+        if(category === val.category) {
+            holderArray.push(val)
+        }
+    });
+    loadProducts(holderArray);
+    console.log('category results');
+}
+
+loadPage();