a4-joe-swetz

.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*.DS_Store
+node_modules/
+package-lock.json
+stats.csv
+serverRequests.log

README.md

@@ -1,30 +1,23 @@
-Assignment 4 - Components
+A4 - Components - FPS Stat Calculator (in React) - Joe Swetz
 ===
 
-Due: October 9th, by 11:59 PM.
+Website Link: https://a4-joe-swetz.glitch.me
 
-For this assignment you will re-implement the client side portion of A3 using either React or Svelte components.
+NOTE: the final code is located in the Glitch branch (which is the one specified in this pull request, I just wanted to
+say this here to make sure you don't look at master, since the Glitch branch has some slight differences for being deployed
+on Glitch).
 
-This project can be implemented on any hosting service (Glitch, DigitalOcean, Heroku etc.), however, you must include all files in your GitHub repo so that the course staff can view them; these files are not available for viewing in many hosting systems.
+I chose the Components assignment for A4, recreating the front-end of my application in React. I didn't add or change
+any functionality since the objective of the assignment was to recreate the same functionality as my A3 assignment. Since I had
+no prior experience with React and had to learn it from the beginning on my own, which resulted in a lot of time trying
+to figure out the mundane aspects of the assignment. That being said, I think if I tried to develop an application in
+React now it would be a much better experience. The flexibility of the components makes it easy to insert and swap out
+piece of a UI and the ability to track state and props helps for components to communicate to one another.
 
-Deliverables
----
+Once again, you and login with your Github account, use the test account (username: Test, password: test), or make your own
+account by entering in a new username and password.
 
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly.
-4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below. Be sure to add *all* project files.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-
-your hosting link e.g. http://a4-charlieroberts.glitch.me
-
-Include a very brief summary of your project here and what you changed / added to assignment #3. Briefly (3–4 sentences) answer the following question: did the new technology improve or hinder the development experience?
-
-Unlike previous assignments, this assignment will be solely graded on whether or not you successfully complete it. Partial credit will be generously given.
+Finally, I wanted to note a bug that I am aware of. When you select multiple rows and click to modify, those checkboxes
+stay checked, but the rows are no longer selected. So to modify that row again, you would need to uncheck the row, and then
+check it again. It's not a big deal, and I could have fixed it if I had more time, but I figured it was best to ensure
+the main functionality was working.

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "a4-components",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.0.4",
+    "@testing-library/user-event": "^12.1.6",
+    "body-parser": "^1.19.0",
+    "bulma": "^0.9.1",
+    "cors": "^2.8.5",
+    "dotenv": "^8.2.0",
+    "express": "^4.17.1",
+    "history": "^5.0.0",
+    "mongodb": "^3.6.2",
+    "morgan": "^1.10.0",
+    "passport": "^0.4.1",
+    "passport-github": "^1.1.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.3"
+  },
+  "homepage": "https://a4-joe-swetz.glitch.me/",
+  "scripts": {
+    "start": "node server.js",
+    "production": "npm run build && NODE_ENV=production npm run server",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/app.html

@@ -0,0 +1,16 @@
+<!doctype html>
+    <html lang="en">
+    <head>
+        <title>FPS Stat Calculator</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link type="text/css" rel="stylesheet" href="css/style.css">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
+        <!--<script src="js/scripts.js"></script>-->
+    </head>
+    <body>
+        <h1 class="title has-text-centered">FPS Stat Calculator</h1>
+
+        <div id="root"></div>
+    </body>
+</html>

public/css/style.css

@@ -0,0 +1,127 @@
+/*
+ * Joseph Swetz
+ * Stylesheet for index.html for CS4241 A2
+ */
+
+@import 'bulma.min.css';
+
+h3.heading{
+    margin-bottom: 15px;
+}
+/*
+label, input {
+    margin-top: -10px;
+    margin-bottom: -10px;
+}*/
+
+/*
+* {
+    font-family: Inconsolata, serif;
+}
+
+h1 {
+    text-align: center;
+}
+
+.appgrid{
+    position: relative;
+    width: 800px;
+    height: 630px;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
+.app-item{
+    padding-left: 10px;
+}
+
+#add {
+    border-top: 1px solid black;
+    height: 165px;
+}
+
+#modify {
+    height: 190px;
+}
+
+#delete {
+    height: 125px;
+    border-bottom: 1px solid black;
+}
+
+#add, #modify {
+    border-bottom: 1px solid black;
+}
+
+form {
+    width: 235px;
+    border-right: 1px solid black;
+    border-left: 1px solid black;
+}
+
+#total_avg_results {
+    width: 248px;
+}
+
+.button_container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+button {
+    margin-top: 5px;
+    width: fit-content;
+}
+
+#download_button {
+    margin-right: 5px;
+}
+
+#clear_button {
+    margin-left: 5px;
+}
+
+table {
+    /*
+     * This source taught me about border collapsing so I could draw a
+     * grid around the table rows: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+
+    border-collapse: collapse;
+    border: 1px solid black;
+}
+
+#results_list {
+    width: 550px;
+    margin-left: 5%;
+}
+
+td, th {
+    text-align: center;
+    padding: 5px;
+    border-bottom: 1px solid black;
+    border-right: 1px solid black;
+}
+
+th {
+    background-color: lightskyblue;
+}
+
+.total_results_panel {
+    margin-left: 20%;
+    margin-top: 3%;
+    margin-bottom: 3%;
+    border: 1px solid black;
+    width: fit-content;
+    justify-content: center;
+    padding-right: 10px; /*Left padding comes from .app_item rule
+}
+
+.total_results_item, .total_results_label {
+    display: inline;
+}
+*/

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>