a2-paristhecity-paris-lopez

README.md

@@ -1,89 +1,46 @@
 Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js  
 ===
 
-Due: September 9th, by 11:59 AM.
+https://paristhecity-a3-paris-lopez.glitch.me/
+
+Based on my experience with creating math problems and designs for mathspring.org, an intelligent tutoring system, 
+I decided to create a login page and roster for a set of teachers. While there are many ways to elaborate on my 
+original plan, I did not have enough time to explore all of my options for this page. I would have liked to have built 
+a page where several users could log-in and look at their roster, as well as the grades that accompany each student. 
+The teacher would be able to remove students from their class and add new students. When the 'information' button 
+is clicked, the teacher can add grades and assignments to the student chosen. Preferably, there would have been
+a navigation bar at the top of the page to switch between assignments and account information for the target student.
+Currently, all the information is based on one account of a teacher, and if one were to login as the other
+teacher (teacher1, teacher1), the tables would be occupied by only the students of the admin teacher. This was intentional
+to get started. My plan was to add an attribute in each object to track the active person. This attribute would be 
+set to '0' when the user is not active, and '1' when either a teacher logs on or when a student is chosen and becomes
+the 'active' teacher or student. This way all the student information can be gathered from the appropriate sources; 
+whether it is a list of students, or a single student.
+
+Because the database, password service, and server required a lot of time to get started, I found myself with less time 
+than intended to piece together my design. With the remaining time I was able to build a login page, as well 
+as the beginnings of a student roster and list of assignments. Students can be added and removed from the list, 
+and the more information button brings the user to the list of assignments. The teacher can add assignments as well 
+as remove them. 
+
+Though, I was unable to complete more of my original ideas beyond these features, the web app still 
+provides a few options for the user and does so in a responsive and clear manner.
+
+Login information: <br>
+Username: admin <br>
+Password: admin
 
-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.
-Another aim of this assignment is to establish creative boundaries in which you and your partner can explore designing, implementing, and evaluating usable, useful, novel, and technically efficient web applications.
-
-Baseline Requirements
----
-
-Note that there is a very large range of application areas and possibilities that meet these baseline requirements.
-Games, internet of things, organizational tools, commerce, media - all are possibilities with a two-tiered form-focused web application.
-
-Do not limit yourselves to any of the examples given below. 
-Examples like the upcoming `efficiency_ratio` idea for the `cars` dataset are meant to be illustrative and easy to understand.
-They are not intended to be sensible or useful ideas.
-
-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 `cars` dataset with `year`, `horsepower`, and `fuel_efficiency` may create a new field `efficiency_ratio` by dividing `fuel_efficiency` by `horsepower`
-
-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
-    - Clarification: the results page can be implemented in any way. `<div>`s, `table`s, and `list`s are common choices
-
-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 sizing of the primary visual elements in the application:
-    - CSS to cause at least one element to be horizontally centered on the page
-    - CSS to cause at least one pair of elements to appear side-by-side
-    - 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. Only one member needs to submit a pull request.
-
-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
 
 ## Technical Achievements
-- **Tech Achievement 1**: Using a combination of...
-- **Tech Achievement 2**: ...
+- **Tech Achievement 1**: I completed the technical aspect of the assignment 
+by creating a lowdb database that stores various information and provides it to the web page when necessary.
 
 ### 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...
+- **Design Achievement 1**: Prior to the creation of the web application, I put great thought into my ideas and design. 
+I found the CSS Template to be greatly limiting, however I was still able to create a clean user interface appropriate 
+for its purpose. I prepared my web application with some simple drawings to sketch out my ideas on paper. With a 
+prototype in hand, I moved onto building the web app itself.
+
+- **Design Achievement 2**: I utilized a CSS template that provided a majority of the style and the functionality. I
+also included a couple of JQuery scripts to make the removal of table rows easier and the connection between multiple
+pages. 

db.json

@@ -0,0 +1,60 @@
+{
+  "users": [
+    {
+      "username": "admin",
+      "password": "admin",
+      "access": "1",
+      "students": [
+        {
+          "first": "Jane",
+          "last": "Doe",
+          "active": 0,
+          "assignments": [
+            {
+              "assignment": "HW1",
+              "grade": 30
+            },
+            {
+              "assignment": "HW2",
+              "grade": 90
+            },
+            {
+              "assignment": "Test",
+              "grade": 70
+            }
+          ]
+        },
+        {
+          "first": "John",
+          "last": "Smith",
+          "active": 0,
+          "assignments": [
+            {
+              "assignment": "HW1",
+              "grade": 40
+            },
+            {
+              "assignment": "HW2",
+              "grade": 100
+            },
+            {
+              "assignment": "Test",
+              "grade": 90
+            }
+          ]
+        },
+        {
+          "first": "Paris",
+          "last": "Lopez",
+          "grade": 0
+        }
+      ]
+    },
+    {
+      "username": "teacher1",
+      "password": "teacher1",
+      "access": "1",
+      "students": []
+    }
+  ]
+}

package.json

@@ -1,12 +1,20 @@
 {
-  "name": "",
-  "version": "",
-  "description": "",
-  "author": "",
+  "name": "app",
+  "version": "0.0.0",
+  "private": true,
   "scripts": {
-    "start": "node server.improved.js"
+    "start": "node server.js"
   },
   "dependencies": {
-    "mime": "^2.4.4"
+    "cookie-parser": "^1.4.4",
+    "debug": "~2.6.9",
+    "express": "^4.16.4",
+    "http-errors": "~1.6.3",
+    "jade": "^1.11.0",
+    "lowdb": "^1.0.0",
+    "morgan": "~1.9.1",
+    "passport": "^0.4.0",
+    "passport-local": "^1.0.0",
+    "body-parser": "^1.19.0"
   }
-}
+}

public/homePage/home.css

@@ -0,0 +1,4 @@
+.container {
+  margin-top: 10px;
+}
+

public/homePage/home.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="home.css">
+
+    <!-- Javascript --> 
+    <script src="home.js"></script>
+
+    <title>Class Roster</title>
+  </head>
+  <body>
+
+
+    <div class="container">
+    <h1>
+      Class Roster
+    </h1>
+      <form>
+        <div class="row">
+          <div class="col">
+            <input type="text" id="first" class="form-control" placeholder="First name">
+          </div>
+          <div class="col">
+            <input type="text" id="last" class="form-control" placeholder="Last name">
+          </div>
+          <div class="col">
+            <button id="addStudent" type="submit" class="form-control btn-primary">Submit</button>
+          </div>
+        </div>
+      </form>
+    </div>
+
+
+    <div class="container">
+      <table class="table table-hover">
+      <thead class="thead-light">
+        <tr>
+          <th scope="col">First</th>
+          <th scope="col">Last</th>
+          <th scope="col">Final Grade</th>
+          <th scope="col">More Information</th>
+          <th scope="col">Remove Student</th>
+        </tr>
+      </thead>
+      <tbody>
+      </tbody>
+    </table>
+    </div>
+
+
+
+
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <script type="text/javascript">
+    $(document).ready(function() {
+      $(function () {
+          $("table").on("click", ".remove", function () {
+              var first = $(this).closest('tr').children()[0].innerHTML
+              var last = $(this).closest('tr').children()[1].innerHTML
+              removeStudent(first, last);
+              $(this).closest('tr').remove();
+          });
+      });
+      $(function () {
+          $("table").on("click", ".info", function () {
+              window.location.href = "/infoPage/studentInfo.html"
+          });
+      });
+    });
+    </script>
+  </body>
+</html>