makersacademy · nickwlong · Sep 16, 2022 · Sep 16, 2022 · Sep 16, 2022 · Sep 16, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+bundle.js
diff --git a/README.md b/README.md
diff --git a/ReadMe.md b/ReadMe.md
@@ -0,0 +1,25 @@
+# Chitter API Frontend Challenge
+
+This challenge involved creating a web-app for 'Chitter' using JavaScript, applying what we have learned in the previous week. It was an excellent challenge, integrating 'fetch' HTTP requests and manipulation of this data with dynamic HTML.
+
+It certainly raised lots of questions on efficiency and code structure... JQuery and ReactJS seem like interesting frameworks to use in the future, to simplify my code and improve its readability.
+
+## Tech used:
+* JavaScript
+* HTML
+* CSS
+* HTTP request with Fetch
+* Testing via Jest
+
+### Pictures of functionality
+
+1. Home page with dynamic login, sticky navbar, and view of all peeps on the page.
+
+![Homepage](https://i.imgur.com/yan7jML.png)
+
+2. Once logged in, a user has a unique 'session id' which allows them to access various features, including:
+- Posting a peep
+- Deleting an existing peep that they have written
+- Liking other peeps
+
+![Homepage when logged in](https://i.imgur.com/F4etZeQ.png)
diff --git a/__tests__/api.test.js b/__tests__/api.test.js
@@ -0,0 +1,48 @@
+const Api = require("../src/api");
+
+const api = new Api();
+
+require("jest-fetch-mock").enableMocks();
+
+describe("Api", () => {
+  test("Creates a session", () => {
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        user_id: 1,
+        session_key: "Test key",
+      })
+    );
+    api.createSession("user", "pass", (data) => {
+      expect(data.user_id).toEqual(1);
+      expect(data.session_key).toEqual("Test key");
+    });
+  });
+
+  test("Creates a user", () => {
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        id: 1,
+        handle: "testUser",
+      })
+    );
+    api.createUser("username", "password", (data) => {
+      expect(data.id).toEqual(1), expect(data.handle).toEqual("testUser");
+    });
+  });
+
+  test("Fetches peeps", () => {
+    fetch.mockResponseOnce(
+      JSON.stringify([
+        {
+          id: 106,
+          body: "test peep",
+        },
+      ])
+    );
+
+    api.loadPeeps((data) => {
+      expect(data[0].body).toEqual("test peep");
+      expect(data[0].id).toEqual(106);
+    });
+  });
+});
diff --git a/__tests__/peepModel.test.js b/__tests__/peepModel.test.js
@@ -0,0 +1,25 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const fs = require("fs");
+const PeepModel = require("../src/model/peepModel");
+
+describe("PeepModel", function () {
+  test("Saves peep data in peeps variable", async () => {
+    const api = {
+      loadPeeps: (callback) =>
+        callback([
+          {
+            id: 106,
+            body: "test peep",
+          },
+        ]),
+    };
+
+    const peepModel = new PeepModel(api);
+    peepModel.loadPeepsData((data) => console.log(data));
+
+    expect(peepModel.getPeeps()[0].body).toBe("test peep");
+  });
+});
diff --git a/__tests__/peepsView.test.js b/__tests__/peepsView.test.js
@@ -0,0 +1,29 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const fs = require("fs");
+const Api = require("../src/api");
+const PeepModel = require("../src/model/peepModel");
+const PeepsView = require("../src/views/peepsView");
+
+describe("PeepsView", function () {
+  test("Clicking create an account button makes form visible", () => {
+    document.body.innerHTML = fs.readFileSync("./index.html");
+
+    const model = new PeepModel();
+    const api = new Api();
+    const view = new PeepsView(model, api);
+
+    expect(
+      document.getElementById("container-createUser").style.display
+    ).toBe("none");
+
+    const button = document.getElementById("showCreateUser"); //collects the button
+    button.click(); //clicks the button
+
+    expect(
+      document.getElementById("container-createUser").style.display
+    ).toBe("block");
+  });
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style/style.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,500&display=swap" rel="stylesheet">
+    <title>Welcome to Chitter!</title>
+  </head>
+
+  <header>
+    <div id="users-header">
+      <div id="container-login" >
+        <form id="loginForm" style="display: block">
+          <label>Please enter your Username:</label>
+          <input
+            type="text"
+            id="loginUsername"
+            name="username"
+            placeholder="Username"
+            maxlength="20"
+            required
+          />
+          <label>Please enter your Password:</label>
+          <input
+            type="text"
+            id="loginPassword"
+            name="password"
+            placeholder="Password"
+            minlength="5"
+            maxlength="20"
+            required
+          />
+          <input type="submit" id="loginButton" value="Login" />
+        </form>
+      </div>
+      <button id="showCreateUser">Create an account</button>
+      <div id="container-createUser" style="display: none">
+        <form id="createUserForm">
+          <label>Please enter a Username:</label>
+          <input
+            type="text"
+            id="createUsername"
+            name="username"
+            placeholder="Username"
+            maxlength="20"
+            required
+          />
+          <label>Please enter a Password:</label>
+          <input
+            type="text"
+            id="createPassword"
+            name="password"
+            placeholder="Password"
+            maxlength="20"
+            required
+          />
+          <input id="createUserFormBtn" type="submit" value="Create an account" />
+        </form>
+      </div>
+    </div>
+
+  </header>
+  <body>
+
+    <div id="container-makepost" style="padding-left:15%; padding-right:15%; position:relative; display: none">
+      <br>
+      <form>
+        <textarea id="newPeep-content" style="width:100%" placeholder="Write what you are thinking!"required></textarea>
+        <br>
+        <input type="submit" id="createPeepBtn" style="float:right" value="Post your Peep!"/>
+        <br>
+      </form>
+
+    </div>
+
+    <div id="container-posts"></div>
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>