a2 - rpsullivan2 (Rory Sullivan)

README.md

@@ -1,89 +1,36 @@
 Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js  
-===
 
-Due: September 9th, 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.
-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. 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
+## https://a2-rorysully-rory-sullivan.glitch.me/
+My application is a website for Mrs. Puffs boating school. The front page allows you to choose professor
+or student. If you choose professor, you will go to a new webpage with a table of all your students in your
+class along with information about them. If you go back and choose student, the new page allows you to enroll
+in a class by typing your name. This will display temporarily in the table. However, if you then go back to the
+professor page, the professors table has been updated to show a new list of all students in the class, including
+whoever had just enrolled. 
 
 ## Technical Achievements
-- **Tech Achievement 1**: Using a combination of...
-- **Tech Achievement 2**: ...
+- **Tech Achievement 1**: Create a single-page app that both provides a form for users to submit data and 
+always shows the current state of the server-side data. To put it another way, when the user submits data, 
+the server should respond sending back the updated data (including the derived field calculated on the server) 
+and the client should then update its data display.
 
 ### 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**: Test your user interface with other students in the class. Define a specific task 
+for them to complete (enroll a student in a class, ensure success from professors end), and then use the 
+think-aloud protocol to obtain feedback on your design (talk-aloud is also find). 
+Provide the last name of each student you conduct the evaluation with.
+* Reardon
+* Parker
+* Morrissey
+What problems did the user have with your design?
+Originally, the number of car accidents was a decimal number, which is impossible. This has been fixed. The user
+found it easy to navigate the site, however suggested a back button instead of using the browsers back button. This
+is something that I would implement if given more time. 
+What comments did they make that surprised you?
+They really liked the fact that I had a title page. This is something that I thought many people would have, however
+neither Reardon or Morrissey did, so this was a unique feature to them. They also enjoyed that if the user doesnt put
+in, for example their last name, the application will catch this and fill the table in with "No Last Name Given".
+What would you change about the interface based on their feedback?
+If given more time, I would add a back button to my interface to make navigation between pages easier, as mentioned
+ previously.
+- **Design Achievement 2**: I used a color pallete found online in my website. It can be found in the files. 

public/css/style.css

@@ -1 +1,56 @@
-/*Style your own assignment! This is fun! */
+#background{
+    position: absolute;
+    background-color: red;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #1D3557;
+    z-index: 100;
+}
+
+body{
+    font-family: 'Kumbh Sans', sans-serif;
+}
+
+#login-content {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(35%, -50%);
+    width: 400px;
+    height: auto;
+    padding: 12px;
+    background: #F1FAEE;
+    border: 3px solid #457B9D;
+    border-radius: 10px;
+    text-align:center;
+}
+
+#school-role {
+    width: 200px;
+}
+
+#login-content h1 {
+    font-family: 'Kumbh Sans', sans-serif;
+    margin: auto;
+    line-height:51px;
+    horizontal-align:middle;
+}
+
+#login-button {
+    bottom:12px;
+    left:auto;
+    right:12px;
+    top:auto;
+}
+
+#logo {
+    width: 50%;
+    height: auto;
+    position: absolute;
+    left: 0%;
+    top: 50%;
+    transform: translate(0%, -50%);
+    margin:10px;
+}

public/css/style1.css

@@ -0,0 +1,84 @@
+#background{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.1);
+    z-index: 100;
+
+    background-image: url("../../background.png");
+    background-repeat: no-repeat;
+    background-size:cover;
+    /* Add the blur effect */
+    -webkit-filter: blur(3px);
+    -moz-filter: blur(3px);
+    -o-filter: blur(3px) -ms-filter: blur(3px);
+    filter: blur(3px);
+    z-index: -1;
+}
+
+body{
+    font-family: 'Kumbh Sans', sans-serif;
+}
+
+#results {
+    margin: 20px;
+    min-height: 100%;
+}
+
+table, th, td {
+    border-width: 2px;
+    text-align: center;
+}
+
+th {
+    text-align: center;
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+#content {
+    overflow-x:auto;
+    overflow-y:auto;
+
+    text-align: center;
+    z-index: 10;
+
+    -webkit-filter: blur(0px);
+    -moz-filter: blur(0px);
+    -o-filter: blur(0px) -ms-filter: blur(0px);
+    filter: blur(0px);
+}
+
+h1 {
+    margin: 20px;
+}
+
+table {
+    border: solid;
+    border-collapse: collapse;
+    border-width: 4px;
+    border-color: #1D3557;
+    overflow: scroll;
+    width: 40%;
+    height: 20px;
+}
+
+.title {
+    background-color: #E63946;
+    border-bottom: solid 4px #1D3557;
+    text-align: center;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    padding-left: 24px;
+    padding-right: 24px;
+}
+
+tr:nth-child(odd) {
+    background-color: #A8DADC;
+}
+
+tr:nth-child(even) {
+    background-color: #F1FAEE;
+}

public/debug.log

@@ -0,0 +1,3 @@
+[0914/172440.049:ERROR:file_io.cc(135)] WriteFile: There is not enough space on the disk. (0x70)
+[0914/172440.050:ERROR:crash_report_exception_handler.cc(111)] WriteEverything failed
+[0914/172440.050:ERROR:filesystem_win.cc(148)] DeleteFile C:\Users\rorys\AppData\Local\Google\Chrome\User Data\Crashpad\reports\133f972b-5f33-46c1-84e9-46e436225904.dmp: The process cannot access the file because it is being used by another process. (0x20)

public/index.html

@@ -1,41 +1,33 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <style src="css/style.css"></style>
     <title>CS4241 Assignment 2</title>
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
     <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap" rel="stylesheet">
+    <script src="js/scripts.js"></script>
   </head>
   <body>
-    <form action="">
-      <input type='text' id='yourname' value="your name here">
-      <button>submit</button>
-    </form>
-  </body>
-  <script>
-
-  const submit = function( e ) {
-    // prevent default form action from being carried out
-    e.preventDefault()
-
-    const input = document.querySelector( '#yourname' ),
-          json = { yourname: input.value },
-          body = JSON.stringify( json )
-
-    fetch( '/submit', {
-      method:'POST',
-      body 
-    })
-    .then( function( response ) {
-      // do something with the reponse 
-      console.log( response )
-    })
+  <div id="background">
+    <img src="logo.png" alt="Mrs. Puff's Boating School" id="logo">
+    <div id="login-content">
+      <h1>Welcome!</h1>
+      <br />
+      <p>Mrs. Puff's Boating School is Bikini Bottom's local boat-driving school, where Mrs. Puff teaches students how to drive.
+        The boating school features the main building, a lighthouse, and a driving course. The lighthouse is at the school. The
+        track features a parking lot for the boats used in the tests. The track is sponsored by ½ Shell, a Bikini Bottom gas station</p>
+      <br />
+      <b><p>What is your role in the school system?</p></b>
+      <div id="login-credentials">
+        <select id='school-role'>
+          <option value="Professor">Professor</option>
+          <option value="Student">Student</option>
+        </select>
+        <input type="button" id="login-button" value="Submit" onClick="redirect()" />
+      </div>
+    </div>
+  </div>
 
-    return false
-  }
-
-  window.onload = function() {
-    const button = document.querySelector( 'button' )
-    button.onclick = submit
-  }
-
-  </script>
+  </body>
 </html>

public/js/scripts.js

@@ -1,3 +1,15 @@
 // Add some Javascript code here, to run on the front end.
 
-console.log("Welcome to assignment 2!")
+console.log("Welcome to assignment 2!")
+
+
+function redirect() {
+    var privilege = document.getElementById('school-role').value;
+
+    if(privilege == "Professor"){
+        console.log(privilege);
+        window.location = "professor.html";
+    } else {
+        window.location = "student.html";
+    }
+}