a2-JoeSwetz-Joseph-Swetz

.gitignore

@@ -1,3 +1,4 @@
 *.DS_Store
 node_modules/
 package-lock.json
+stats.csv

README.md

@@ -1,84 +1,150 @@
 Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js  
 ===
 
-Due: September 16th, by 11:59 AM.
-
-This assignment aims to introduce you to the concepts and practice involved in creating a prototype (i.e. not deployment ready) two-tiered web application. 
-
-The baseline aims of this assignment involve creating an application that demonstrates the use of several specific pieces of HTML, CSS, JavaScript, and Node.js functionality.
-
-Baseline Requirements
----
-
-Note that there is a very large range of application areas and possibilities that meet these baseline requirements. Make your application do something useful! A todo list, storing / retrieving high scores for a very simple game, have a little fun with it.
-
-Your application is required to implement the following functionalities:
-
-- a `Server` which not only serves files, but also maintains a tabular dataset with 3 or more fields related to your application
-- a `Results` functionality which shows the entire dataset residing in the server's memory
-- a `Form/Entry` functionality which allows a user to add, modify, or delete data items residing in the server's memory
-- a `Server Logic` which, upon receiving new or modified "incoming" data, includes and uses a function that adds at least one additional derived field to this incoming data before integrating it with the existing dataset
-- the `Derived field` for a new row of data must be computed based on fields already existing in the row. For example, a `todo` dataset with `task`, `priority`, and `creation_date` may generate a new field `deadline` by looking at `creation_date` and `priority`
-
-Your application is required to demonstrate the use of the following concepts:
-
-HTML:
-- One or more [HTML Forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), with any combination of form tags appropriate for the user input portion of the application
-- A results page displaying all data currently available on the server. You will most likely use a `<table>` tag for this, but `<ul>` could also work and might be simpler to work with.
-
-CSS:
-- CSS styling of the primary visual elements in the application
-- Various CSS Selector functionality must be demonstrated:
-    - Element selectors
-    - ID selectors
-    - Class selectors
-- CSS positioning and styling of the primary visual elements in the application:
-    - Use of either a CSS grid or flexbox for layout
-    - Rules defining fonts for all text used; no default fonts! Be sure to use a web safe font or a font from a web service like [Google Fonts](http://fonts.google.com/)
-
-- CSS defined in a maintainable, readable form, in external stylesheets 
-
-JavaScript:
-- At minimum, a small amount of front-end JavaScript to get / fetch data from the server; a sample is provided in this repository.
-
-Node.js:
-- An HTTP Server that delivers all necessary files and data for the application. A starting point is provided in this repository.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Fork the starting project code. This repo contains some starter code that may be used or discarded as needed.
-2. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page, it displays correctly.
-4. Deploy your project to Glitch, and fill in the appropriate fields in your package.json file.
-5. Ensure that your project has the proper naming scheme `a2-yourname` so we can find it.
-6. Modify the Readme to the specifications below.
-7. Create and submit a Pull Request to the original repo. Label the pull request as follows: a2-gitusername-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
-Include a very brief summary of your project here.
-Images are encouraged, along with concise, high-level text.
-
-Here is a sample formula for summarizing your activities, talk about:
-- the domain area the project pertains to
-- the main challenges or problems the application addresses
-- the key innovations that make it possible to address the problem
-- the main results of the implementation, does it really address the problem?
-- any additional implications of the resulting application, or possibly areas for future work that have been discovered as part of the design and implementation activities
-
-(Note that when I use the above formula, I aim to have only one sentence per thought in order to remain concise.)
-
-http://a2-charlieroberts.glitch.me
+## FPS Stat Calculator
+Link to application: https://a2-joeswetz.glitch.me
+
+This application allows the users to enter in their kills, assists, and
+deaths from multiple rounds of an FPS game, and it then calculates and 
+displays all these stats, as well as derived stats, to the user. The data
+can then be exported as a CSV file, so users can open it in Excel and 
+create graphs to help evaluate their performance.
+
+The main challenge I sought to solve with this application was to easily
+keep track of and analyze one's performance in a game without have to write
+stats down by hand or do a bunch of math. This makes it easy for the user
+to see stats and create graphs for themselves to further improve their
+skills.
+
+I satisfied the requirements for the assignments in the following ways:
+- **Functionality**:
+    - The server in server.improved.js serves the necessary files as well as 
+    maintains a table of statistics in the "appdata" variable. The API supports
+    calls to add, modify and delete items from the table, as well as request for
+    all the data in the table.
+    - The results functionality has been implemented on the same page as the rest
+    of the application, as described in the assignment description for the 
+    Technical Achievement.
+    - The form/entry functionality is implemented with the three forms on the left
+    side of the UI: one form each for add, modify and delete.
+    - The server logic requirement is satisfied in the addItem() and modifyItem()
+    functions which, in addition to adding the provided data to table, calculates 
+    the derived fields "kill/death ratio" and "assist/death ratio" in the function
+    calculateKDandAD(). The totals and averages for kills, assists and deaths are 
+    computed in the function calculateTotalsAvgs().
+    - The derived fields are the kill/death ratio and assist/death ratio fields,
+    which use the kills/deaths fields and assists/deaths fields respectively. The
+    total and averages for kills, assists and deaths also use all the data in
+    the table.
+- **HTML**:
+    - I used 3 HTML forms: one each for add, modify, delete.
+    - To display results, I used two HTML tables: One for each set of stats
+    the user enters in (for each game), and then one table for the running 
+    total and average of kills, assists, deaths.
+    - ./public/index.html has been validated with the link given in the 
+    assignment description.
+- **CSS**:
+    - All the primary visual elements of the application have been styled with
+    CSS. Each element has style rules in ./public/css/style.css.
+    - In ./public/css/style.css, Element, ID, and Class selectors have all been 
+    used (Ex: h1, .app-item, #add).
+    - The three forms and two tables are inside a flex box for formatting. The 
+    div item with class "appgrid" has "display: flex" to contain these elements.
+    - All text uses the font Inconsolata from Google Fonts. It's linked into 
+    index.html at line 7, and set as the font family for all text on line 7 .of 
+    public/css/style.css
+    - The CSS is all maintained in the external stylesheet ./public/css/style.css
+- **JS**:
+    - Front-end JS is located in ./public/js/scripts.js to fetch data from the
+    server.
+    - Back-end JS for the Node.js HTTP server is located in server.improved.js 
+    to return files and table data.
+
+Project can be found on glitch at the following link:
+http://a2-joeswetz.glitch.me
+
+**Important Note**  
+I added an extra feature where the user can click "Download as CSV" and the 
+contents of both tables will be downloaded to the user's computer as a file 
+called "stats.csv." I know this was not a requirement, but I just wanted to do
+it for fun! However, to learn how to do this, I had to do some research, and I 
+ended up using some code from stack overflow. Since this was not an actual 
+assignment requirement, Professor Robertssaid it was OK as long as I cite it and
+mention this in the readme. This code is in handle_csv() in ./public/js/scripts.js.
+In that method, I put a comment crediting the source, as well as my own explanation
+to prove my understanding of it. The comments that start with "OA" are comments
+from the original post by theOriginal Author, and I took out the => notation and
+made that part fit my coding style (cause I didn't like the => notation).
+
+While I believe the process of writing and sending a CSV file server-side and then
+doing research on how to download it on the client was enough of challenge that it
+should be considered a technical achievement, I will of course leave it up to your
+discretion, especially considering that I did have to use some code from stack 
+overflow. The other achievements can be found below.
 
 ## Technical Achievements
-- **Tech Achievement 1**: Using a combination of...
-- **Tech Achievement 2**: ...
-
-### Design/Evaluation Achievements
-- **Design Achievement 1**: Shown in `style.css`, the code...
-- **Design Achievement 2**: We tested the application with n=X users, finding that...
+- **Real-Time Update**: The tables in index.html update automatically as the
+contents change based on the user input. Whenever the user makes an add, modify, or 
+delete request, the server returns a list containing the current contents of the tables.
+There is also a request API call that gets the contents of the table when the HTML body
+has loaded.
+
+## Design/Evaluation Achievements
+I tested the program with two different students in CS4241 according to the design
+achievement description. You'll find the list of tasks below as well as my answers to the
+questions for each user. I think these tasks were so simple (since the application itself
+is so simple) that there wasn't really a lot of thinking aloud. The users just went and did
+it very quickly. So I apologize if the tests were not ideal, but I did get some useful 
+feedback, as well some important bug catches. All bugs that were found from testing were
+fixed before submitting.
+
+These were the tasks given to each user:  
+1. Add a few rows of game stats to the table.
+2. Modify one of the rows of stats.
+3. Delete a row of stats.
+4. Download the table data as a CSV file and verify the contents match
+the data in the tables.
+
+Test 1  
+1. **Participant Last Name:** Hunt	
+
+2. **What problems did the user have with your design?**
+	An error occurred that result in the values in the table being null.
+	I acknowledged this out loud, not thinking it would interrupt the test. 
+	The user then said they didn't even see the totals and averages table
+	at the bottom of the UI in the first place. Considering the user didn't
+	see the table, I consider it a UI problem since the user's view should
+	be immediately drawn to the table.
+
+3. **What comments did they make that surprised you?**
+	When modifying a row of stats, they said they were going to leave fields
+	that they didn't want changed empty (so they wanted to modify assists, so they
+	left the "# kills" and "# deaths" fields of the form empty). This was not
+	actually supported.
+
+4. **What would you change about the interface based on their feedback?**
+	I would move the table that displays totals and averages somewhere else, probably
+	higher up on the screen so the user sees it when they see the other table.
+
+Test 2
+1. **Participant Last Name:**  Desveaux
+
+2. **What problems did the user have with your design?**
+	The user was able to successfully complete the tasks without any struggle. 
+	However, they did try to put 0 for deaths, which didn't work since,	after the 
+	first test, I did some bug fixes. I consider this a design problem since the
+	design should have informed the user about why the provided stats were not added 
+	to the table. They didn't really think-aloud because they just instantly knew what 
+	form to use and added the data.
+
+3. **What comments did they make that surprised you?**
+	I was surprised that the user genuinely tried to put 0 deaths for one of the
+	games. I forgot this is an actual valid value and should therefore be put in the table.
+	After the first test, I made it so 0 deaths was not allowed since you can't divide by
+	0. In reality, 0 deaths is a valid value and in FPS games, when there are 0 deaths the 
+	K/D = # kills and the A/D = # assists.
+
+4. **What would you change about the interface based on their feedback?**
+	I would some sort of error box that gives the user an informative message explaining
+	why their row of stats was not added to the table (i.e. negative number, unrecognized
+	character, etc.).

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "",
-  "version": "",
-  "description": "",
-  "author": "",
+  "name": "a2-joeswetz",
+  "version": "10.15.3",
+  "description": "FPS stat calculator",
+  "author": "Joe Swetz",
   "scripts": {
     "start": "node server.improved.js"
   },
   "dependencies": {
-    "mime": "^2.4.4"
+    "mime": "^2.4.6"
   }
 }

public/css/style.css

@@ -1 +1,114 @@
-/*Style your own assignment! This is fun! */
+/*
+ * Joseph Swetz
+ * Stylesheet for index.html for CS4241 A2
+ */
+
+* {
+    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;
+}