Unfinished frontend-api

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -1,37 +1,11 @@
 # Chitter API Frontend Challenge
 
-* Feel free to use Google, your notes, books, etc. but work on your own
-* If you refer to the solution of another coach or student, please put a link to that in your README
-* If you have a partial solution, **still check in a partial solution**
-* You must submit a pull request to this repo with your code by 9am Monday morning
+A single page project that dynamically loads peeps from a server.
 
-Challenge:
--------
+## Tech used
 
-As usual please start by forking this repo.
+- JavaScript
+- HTML
+- CSS (Tailwind)
 
-We are going to write a small Twitter clone that will allow the users to post messages to a public stream.
-
-The scenario is similar to the [Chitter Challenge](https://github.com/makersacademy/chitter-challenge), except someone has already built a backend API for you and hosted it on Heroku.
-
-Your task is to build a front-end single-page-app to interface with this API. You can do this in any framework you like, or in pure Javascript. [The API documentation is here.](https://github.com/makersacademy/chitter_api_backend)
-
-Here are some interactions the API supports. Implement as many as you see fit.
-
-* Creating Users
-* Logging in
-* Posting Peeps
-* Viewing all Peeps *(I suggest you start here)*
-* Viewing individual Peeps
-* Deleting Peeps
-* Liking Peeps
-* Unliking Peeps
-
-We are looking for well tested, easy to read, easy to change code. This is more important than the number of interactions you implement.
-
-Note that others may be doing the same task at the same time, so the data may change as you are using it.
-
-## Utilities you might find useful
-
-* [The Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for making requests.
-* [Postman](https://www.getpostman.com/) or [Insomnia](https://insomnia.rest/) for exploring the API.
+<img src="img/chitterScreenshot.png" alt="Alt text" title="Optional title">

bundle.js

@@ -0,0 +1,145 @@
+(() => {
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __commonJS = (cb, mod) => function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+
+  // lib/chitterApi.js
+  var require_chitterApi = __commonJS({
+    "lib/chitterApi.js"(exports, module) {
+      var ChitterApi2 = class {
+        constructor() {
+          this.baseUrl = "https://chitter-backend-api-v2.herokuapp.com/";
+        }
+        getPeeps = (callback) => {
+          fetch(this.baseUrl + "peeps").then((response) => response.json()).then((data) => {
+            callback(data);
+          });
+        };
+        createUser = (handle, password, callback) => {
+          fetch(this.baseUrl + "/users", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ user: { handle, password } })
+          }).then((response) => response.json()).then((data) => {
+            callback(data);
+          });
+        };
+        createSession = (handle, password, callback) => {
+          fetch(this.baseUrl + "sessions", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ session: { handle, password } })
+          }).then((response) => response.json()).then((data) => {
+            callback(data);
+          });
+        };
+        createPeep = (user_id, peep, callback) => {
+          fetch(this.baseUrl + "peeps", {
+            method: "POST",
+            headers: {
+              Authorization: "Token token=a_valid_session_key",
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ peep: { user_id, body: peep } })
+          }).then((response) => response.json()).then((data) => {
+            callback(data);
+          });
+        };
+      };
+      module.exports = ChitterApi2;
+    }
+  });
+
+  // lib/chitterModel.js
+  var require_chitterModel = __commonJS({
+    "lib/chitterModel.js"(exports, module) {
+      var ChitterModel2 = class {
+        constructor() {
+          this.peeps = [];
+          this.session = {};
+        }
+        getPeeps = () => {
+          return this.peeps;
+        };
+        setPeeps = (peeps) => {
+          this.peeps = peeps;
+        };
+        setSession = (session) => {
+          this.session = session;
+        };
+      };
+      module.exports = ChitterModel2;
+    }
+  });
+
+  // lib/chitterView.js
+  var require_chitterView = __commonJS({
+    "lib/chitterView.js"(exports, module) {
+      var ChitterView2 = class {
+        constructor(model2, api2) {
+          this.model = model2;
+          this.api = api2;
+          this.logBtn = document.getElementById("log-btn");
+          this.logBtn.addEventListener("click", () => {
+            this.login();
+          });
+        }
+        renderPeeps = () => {
+          const peeps = this.model.getPeeps();
+          const peepList = document.getElementById("peeps");
+          peepList.innerHTML = "";
+          peeps.forEach((peep) => {
+            this.stylePeep(peep, peepList);
+          });
+        };
+        stylePeep = (peep, peepList) => {
+          let peepItem = document.createElement("div");
+          peepItem.classList.add("flex");
+          let peepBodyWrapper = document.createElement("div");
+          peepBodyWrapper.classList.add("peepBody");
+          let peepStrong = document.createElement("strong");
+          peepStrong.classList.add("text-blue-900");
+          peepStrong.innerText = "@" + peep.user.handle;
+          let peepSpan = document.createElement("span");
+          peepSpan.classList.add("float-right", "text-xs", "text-gray-400");
+          peepSpan.innerText = peep.created_at;
+          let peepBody = document.createElement("p");
+          peepBody.classList.add("text-sm", "text-blue-700");
+          peepBody.textContent = peep.body;
+          peepBodyWrapper.appendChild(peepStrong);
+          peepBodyWrapper.appendChild(peepSpan);
+          peepBodyWrapper.appendChild(peepBody);
+          peepItem.appendChild(peepBodyWrapper);
+          peepList.appendChild(peepItem);
+        };
+        loadPeeps = () => {
+          this.api.getPeeps((peeps) => {
+            this.model.setPeeps(peeps);
+            this.renderPeeps();
+          });
+        };
+        login = (handle, password) => {
+          this.api.createSession(handle, password, (data) => {
+            this.model.setSession(data);
+          });
+        };
+      };
+      module.exports = ChitterView2;
+    }
+  });
+
+  // index.js
+  var ChitterApi = require_chitterApi();
+  var ChitterModel = require_chitterModel();
+  var ChitterView = require_chitterView();
+  var model = new ChitterModel();
+  var api = new ChitterApi();
+  var view = new ChitterView(model, api);
+  view.loadPeeps();
+  console.log("The Chitter app has loaded");
+})();