a2-evanbg-wpi-evan-goldstein

.gitconfig

@@ -0,0 +1,3 @@
+[user]
+	email = ebgoldstein@wpi.edu
+	name = Evan Goldstein

.npmrc

@@ -0,0 +1 @@
+scripts-prepend-node-path=true

README.md

@@ -1,89 +1,21 @@
-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. 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
+## Entertainment Collector
+This application allows users to submit their own jokes and facts for 
+all to see. The app addresses the problem of not being able to keep track 
+of all your great jokes and facts. To solve this problem, a SQLite3 database 
+was used to store the content, and an HTML form was used to submit the content.
+To view the submitted content, an HTML table is automatically populated using Javascript.
+This implementation solves the problem, but is missing certain niceties such as a sign-in
+to keep your content safe from others. Future work on this app would include a sign-in, a better 
+database system, and the ability for search and sort the content when viewing it.
+
+http://a2-ebgoldstein.glitch.me
 
 ## Technical Achievements
-- **Tech Achievement 1**: Using a combination of...
-- **Tech Achievement 2**: ...
-
+- **Tech Achievement 1**: Using Javascript to store information in a SQLite database and recall it
+- **Tech Achievement 2**: Using Javascript and Node.js to build a client-server architecture in which the server
+ is capable of returning results in a JSON format via HTTP and the client can display those results
+- **Tech Achievement 3**: Automatically populating a table with Javascript
+- **Tech Achievement 4**: Changing HTML text according to a dropdown using javascript 
 ### 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**: Shown in `style.css`, the site is styled to be minimalistic and functional.
+- **Design Achievement 2**: Shown in `style.css`, the results table uses alternating row colors for easy reading

package.json

@@ -7,6 +7,7 @@
     "start": "node server.improved.js"
   },
   "dependencies": {
-    "mime": "^2.4.4"
+    "mime": "^2.4.4",
+    "sqlite3": "^4.1.0"
   }
 }

public/css/style.css

@@ -1 +1,84 @@
-/*Style your own assignment! This is fun! */
+body {
+    background-color: lightskyblue;
+    display: flex;
+    flex-direction: column;
+}
+
+body.results {
+    align-items: flex-start;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+
+    /* Just to center the form on the page */
+    margin: 0 auto;
+    width: 500px;
+    /* To see the outline of the form */
+    padding: 1em;
+    border: 2px solid #333333;
+}
+
+form div + div {
+    margin-top: 1em;
+}
+
+label {
+    display: flex;
+   /* add flex options */
+    width: 90px;
+    text-align: right;
+}
+
+input, textarea {
+    /* To make sure that all text fields have the same font settings
+       By default, textareas have a monospace font */
+    font: 1em "Franklin Gothic Book";
+    background-color: darkorange;
+    /* To give the same size to all text fields */
+    width: 90%;
+    box-sizing: border-box;
+
+    /* To harmonize the look & feel of text field border */
+    border: 1px solid #999;
+}
+
+input:focus, textarea:focus {
+    /* To give a little highlight on active elements */
+    border-color: #000;
+}
+
+textarea {
+    /* To properly align multiline text fields with their labels */
+    vertical-align: top;
+
+    /* To give enough room to type some text */
+    height: 5em;
+}
+
+.button {
+    /* To position the buttons to the same position of the text fields */
+    padding-left: 90px; /* same size as the label elements */
+}
+
+button {
+    /* This extra margin represent roughly the same space as the space
+       between the labels and their text fields */
+    margin-left: .5em;
+}
+
+tr:nth-child(even) {
+    background-color: #f2f2f2
+}
+
+th {
+    border: 1px solid gray;
+    background-color: darkorange;
+}
+
+table {
+    width: 85%;
+    background-color: #999999;
+}
+.col{display:inline-block; border-bottom:1px dashed #333333;width:100px;}

public/index.html

@@ -1,41 +1,38 @@
 <!doctype html>
 <html lang="en">
-  <head>
+<head>
     <title>CS4241 Assignment 2</title>
     <meta charset="utf-8">
-  </head>
-  <body>
-    <form action="">
-      <input type='text' id='yourname' value="your name here">
-      <button>submit</button>
-    </form>
-  </body>
-  <script>
+    <link rel="stylesheet" href="/css/style.css">
+    <script type="text/javascript" src="/js/scripts.js"></script>
+</head>
+<body>
+<form action="/submit" method="post">
+    <div>
+        <label for="name">Your name:</label>
+        <input type="text" id="name" name="user_name">
+    </div>
+    <div>
+        <label for="contentTypeSelector">Type:</label>
+        <select id="contentTypeSelector" name="Entry Type" onload="updateContentLabel()"
+                onchange="updateContentLabel()">
+            <option value="joke">Joke</option>
+            <option value="fact">Fact</option>
+        </select>
+    </div>
+    <div>
+        <label id="contentLabel" for="content"></label>
+        <textarea id="content" name="content"></textarea>
+    </div>
+    <div>
+        <button type="submit" id="submitButton">Submit</button>
+        <button type="button" id="resultsButton">Read Content!</button>
 
-  const submit = function( e ) {
-    // prevent default form action from being carried out
-    e.preventDefault()
+    </div>
+</form>
+</body>
 
-    const input = document.querySelector( '#yourname' ),
-          json = { yourname: input.value },
-          body = JSON.stringify( json )
+<script>
 
-    fetch( '/submit', {
-      method:'POST',
-      body 
-    })
-    .then( function( response ) {
-      // do something with the reponse 
-      console.log( response )
-    })
-
-    return false
-  }
-
-  window.onload = function() {
-    const button = document.querySelector( 'button' )
-    button.onclick = submit
-  }
-
-  </script>
+</script>
 </html>

public/js/scripts.js

@@ -1,3 +1,54 @@
 // Add some Javascript code here, to run on the front end.
 
-console.log("Welcome to assignment 2!")
+console.log("Welcome to assignment 2!");
+
+const submit = function (e) {
+    e.preventDefault(); // prevent default form action from being carried out
+
+    const
+        name = document.querySelector('#name'),
+        contentType = getContentType(),
+        content = document.querySelector('#content'),
+        json = {
+            name: name.value,
+            type: contentType,
+            content: content.value
+        },
+        body = JSON.stringify(json);
+
+
+    fetch('/submit', {method: 'POST', body})
+        .then(
+            function (response) {
+                // do something with the reponse
+                console.log(response)
+            });
+
+    return false
+};
+
+window.onload = function () {
+    const button = document.querySelector('#submitButton');
+    const resultsButton = document.querySelector('#resultsButton');
+    button.onclick = submit;
+    resultsButton.onclick = goToResults;
+    updateContentLabel();
+};
+
+const goToResults = function(){
+    const url = window.location;
+    window.location.href = url.protocol + "//" + url.host + "/results.html";
+};
+
+function getContentType() {
+    let typeSelector = document.querySelector('#contentTypeSelector');
+    return typeSelector.options[typeSelector.selectedIndex].value;
+}
+
+function updateContentLabel() {
+    document.getElementById('contentLabel').innerHTML = 'Your ' + getContentType() + ": ";
+}
+
+
+
+

public/results.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Entertainment!</title>
+    <link rel="stylesheet" href="/css/style.css">
+
+</head>
+<body class="results">
+<div>
+    <button type="button" id="submissionButton">Back to submission form</button>
+</div>
+<div>
+    <table>
+
+    </table>
+</div>
+</body>
+<script src="results.js"></script>
+
+</html>