a3-henry-yoder

.env

@@ -0,0 +1,6 @@
+MONGODB_USER = generic
+MONGODB_PASS = freeaccess
+MONGODB_HOST = "a3.1joplnl.mongodb.net/?retryWrites=true&w=majority"
+
+GITHUB_CLIENT_ID     = "5d83b71ec160d51c1b6f"
+GITHUB_CLIENT_SECRET = "4cbb4b0394c1a9966ea431b3ce5cbe86ebcf2bde"

Procfile

@@ -0,0 +1 @@
+web: node server.js

README.md

@@ -1,116 +1,33 @@
-Assignment 3 - Persistence: Two-tier Web Application with Database, Express server, and CSS template
+[assignment 3](https://a3-hyoder.herokuapp.com/)
 ===
 
-Due: September 22nd, by 11:59 AM.
-
-This assignnment continues where we left off, extending it to use the most popular Node.js server framework (express), 
-a database (mongodb), and a CSS application framework / template of your choice (Boostrap, Material Design, Semantic UI, Pure etc.)
-
-Baseline Requirements
----
-
-Your application is required to implement the following functionalities:
-
-- a `Server`, created using Express (no alternatives will be accepted for this assignment)
-- a `Results` functionality which shows all data associated with a logged in user (except passwords)
-- a `Form/Entry` functionality which allows users to add, modify, and delete data items (must be all three!) associated with their user name / account.
-- Use of at least five [Express middleware packages](https://expressjs.com/en/resources/middleware.html). Explore! One of these five middleware 
-can be a custom function that you write yourself; if you choose to do this, make sure to describe what this function is in your README.  
-- Persistent data storage in between server sessions using [mongodb](https://www.mongodb.com/cloud/atlas)
-- Use of a [CSS framework or template](https://github.com/troxler/awesome-css-frameworks). 
-This should do the bulk of your styling/CSS for you and be appropriate to your application. 
-For example, don't use [NES.css](https://nostalgic-css.github.io/NES.css/) (which is awesome!) unless you're creating a game or some type of retro 80s site.
-
-Your application is required to demonstrate the use of the following concepts:  
-
-HTML:  
-- HTML input tags and form fields of various flavors (`<textarea>`, `<input>`, checkboxes, radio buttons etc.)
-- HTML that can display all data *for a particular authenticated user*. Note that this is different from the last assignnment, which required the display of all data in memory on the server.
-
-Note that it might make sense to have two pages for this assignment, one that handles login / authentication, and one that contains the rest of your application.
-For example, when visiting the home page for the assignment, users could be presented with a login form. After submitting the login form, if the login is 
-successful, they are taken to the main application. If they fail, they are sent back to the login to try again. For this assignment, it is acceptable to simply create 
-new user accounts upon login if none exist, however, you must alert your users to this fact.  
-
-CSS:  
-- CSS styling should primarily be provided by your chosen template/framework. 
-Oftentimes a great deal of care has been put into designing CSS templates; 
-don't override their stylesheets unless you are extremely confident in your graphic design capabilities. 
-The idea is to use CSS templates that give you a professional looking design aesthetic without requiring you to be a graphic designer yourself.
-
-JavaScript:  
-- At minimum, a small amount of front-end JavaScript to get / fetch data from the server. 
-See the [previous assignment](https://github.com/cs4241-19a/a2-shortstack) for reference.
-
-Node.js:  
-- A server using Express, at least five pieces of Express middleware, and a persistent database (mongodb).
-
-General:  
-- Your site should achieve at least 90% on the `Performance`, `Best Practices`, `Accessibility`, and `SEO` tests 
-using Google [Lighthouse](https://developers.google.com/web/tools/lighthouse) (don't worry about the PWA test, and don't worry about scores for mobile devices).
-Test early and often so that fixing problems doesn't lead to suffering at the end of the assignment. 
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements. A good potential starting point is to use the "hello-express" project template inside of Glitch; this appears as an option when you hit the "New Project" button. Use the work you did in the last assignment as a reference to implement functionality.
-2. If you developed your project locally, deploy your project to Glitch (unless completing the alternative server technical acheivement described below), and fill in the appropriate fields in your package.json file.
-3. Test your project to make sure that when someone goes to your main page on Glitch, it displays correctly.
-4. Ensure that your project has the proper naming scheme `a3-yourfirstname-yourlastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a3-firstname-lastname`.
-
-Acheivements
----
-
-Below are suggested technical and design achievements. You can use these to help boost your grade up to an A and customize the 
-assignment to your personal interests, for a maximum twenty additional points and a maximum grade of a 100%. 
-These are recommended acheivements, but feel free to create/implement your own... just make sure you thoroughly describe what you did in your README, 
-why it was challenging, and how many points you think the achievement should be worth. 
-ALL ACHIEVEMENTS MUST BE DESCRIBED IN YOUR README IN ORDER TO GET CREDIT FOR THEM.
-
-*Technical*
-- (10 points) Implement OAuth authentication, perhaps with a library like [passport.js](http://www.passportjs.org/). 
-*You must either use Github authenticaion or provide a username/password to access a dummy account*. 
-Course staff cannot be expected, for example, to have a personal Facebook, Google, or Twitter account to use when grading this assignment. 
-Please contact the course staff if you have any questions about this. THIS IS THE HARDEST ACHEIVEMENT OFFERED IN WEBWARE. You have been warned!  
-- (5 points) Instead of Glitch, host your site on a different service like [Heroku](https://www.heroku.com) or [Digital Ocean](https://www.digitalocean.com). Make sure to describe this a bit in your README. What was better about using the service you chose as compared to Glitch? What (if anything) was worse? 
-- (5 points) Get 100% (not 98%, not 99%, but 100%) in all four lighthouse tests required for this assignment.  
-
-*Design/UX*
-- (10 points) Make your site accessible using the [resources and hints available from the W3C](https://www.w3.org/WAI/), Implement/follow twelve tips from their [tips for writing](https://www.w3.org/WAI/tips/writing/), [tips for designing](https://www.w3.org/WAI/tips/designing/), and [tips for development](https://www.w3.org/WAI/tips/developing/). *Note that all twelve must require active work on your part*. 
-For example, even though your page will most likely not have a captcha, you don't get this as one of your twelve tips to follow because you're effectively 
-getting it "for free" without having to actively change anything about your site. 
-Contact the course staff if you have any questions about what qualifies and doesn't qualify in this regard. 
-List each tip that you followed and describe what you did to follow it in your site.
-- (5 points) Describe how your site uses the CRAP principles in the Non-Designer's Design Book readings. 
-Which element received the most emphasis (contrast) on each page? 
-How did you use proximity to organize the visual information on your page? 
-What design elements (colors, fonts, layouts, etc.) did you use repeatedly throughout your site? 
-How did you use alignment to organize information and/or increase contrast for particular elements. 
-Write a paragraph of at least 125 words *for each of four principles* (four paragraphs, 500 words in total). 
-
-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 glitch (or alternative server) link e.g. http://a3-charlie-roberts.glitch.me
-
-Include a very brief summary of your project here. Images are encouraged, along with concise, high-level text. Be sure to include:
-
-- the goal of the application
-- challenges you faced in realizing the application
-- what authentication strategy you chose to use and why (choosing one because it seemed the easiest to implement is perfectly acceptable)
-- what CSS framework you used and why
-  - include any modifications to the CSS framework you made via custom CSS you authored
-- the five Express middleware packages you used and a short (one sentence) summary of what each one does. If you use a custom function for *one* (and one alone) middleware please 
-add a little more detail about what it does.
-
-## Technical Achievements
-- **Tech Achievement 1**: I used OAuth authentication via the GitHub strategy
-
-### Design/Evaluation Achievements
-- **Design Achievement 1**: I followed the following tips from the W3C Web Accessibility Initiative...
+due: September 26nd, noon
+(but i was under the impression that when the due date was moved, it was to midnight tonight.
+ i notified the professor of this to which he replied "no worries!")
+
+## summary!
+zack snyder is not a very good director.
+i have not seen all of his films, and i've never seen one i liked very much.
+this project aims to determine which films are and aren't directed by zack snyder.
+movie title + genre are not case sensitive, but the year of release does matter to determining whether or not zack snyder directed it.
+for example, he directed "300" in 2007, but he did not direct a film called "300" in 2006.
+get your facts straight.
+
+i had some trouble setting up my edit button in a way that worked properly, but i eventually figured it out
+the authentication strategy i used was the passport-github2, because it was the only OAuth method i didn't need to come up with a dummy account for
+the CSS framework i used was MVP.css because i liked the way it looked
+(plus i could incorporate some of the fun CSS stuff i did for a2 without breaking stuff)
+the middleware packages i used were
+- passport (for OAuth)
+- passport-github2 (for getting github to work with OAuth more easily)
+- express-session (i was getting an error that said i needed this installed so i installed it and the error went away)
+- body-parser (to simplify parsing contents of body)
+- serve-favicon (to easily add favicon to page)
+
+## technical achievements!
+- (10pts) oauth authentication with github implemented!
+- (05pts) hosted on heroku rather than glitch!
+  - the downside: no live text editor updating the site like in glitch, made it annoying if i committed
+  - the upside: automatic updates from github and also it ran a lot better.
+- (05pts) got 100% on 3 of the 4 lighthouse tests with a 99% on performance due to my "first contentiful paint" score
+  (i reached out to the professor regarding this, he said to leave a note indicating it was ok to have a 99)

package.json

@@ -0,0 +1,24 @@
+{
+  "scripts":
+  {
+    "start": "node server.js"
+  },
+  "dependencies":
+  {
+    "cookie-session": "2.0.0",
+    "dotenv": "16.0.2",
+    "express": "4.18.1",
+    "express-handlebars": "6.0.6",
+    "express-session": "1.17.3",
+    "serve-favicon": "2.5.0",
+    "mime": "3.0.0",
+    "mongodb": "4.10.0",
+    "passport": "0.5.0",
+    "passport-github2": "0.1.12",
+    "path": "0.12.7"
+  },
+  "engines":
+  {
+    "node": "16.17.0"
+  }
+}

public/scripts.js

@@ -0,0 +1,102 @@
+let tempID = null, tempelement = null, temprow = null;
+function dothething()
+{
+    fetch( '/data', { method: 'GET', headers: { "Content-Type": "application/json" } } )
+    .then( response => response.json() )
+    .then( json => builder( json[ 0 ].items ) );
+};
+function builder ( json )
+{
+    const tbl = document.getElementById( 'datatable' );
+    tbl.innerHTML = '<tr><th>title</th><th>genre</th><th>year</th><th>directed by Zack Snyder?</th><th>edit?</th><th>delete?</th></tr>';
+    if( json != null )
+    {
+        json.forEach( entry => 
+            {
+                let newRow  = '<tr id = "' + entry._movID + '">';
+                    newRow += '<th>' + entry.title.toString().toUpperCase() + '</th>';
+                    newRow += '<th>' + entry.genre.toString().toUpperCase() + '</th>';
+                    newRow += '<th>' + entry.year + '</th>';
+                    newRow += '<th>' + zackcheck( entry.title, entry.year ) + '</th>';
+                    newRow += '<th><button onclick="updater(\'' + entry._movID + '\',\'' + entry.title + '\',\'' + entry.genre + '\',\'' + entry.year + '\');">edit?</button></th>';
+                    newRow += '<th><button onclick="deleter(\'' + entry._movID + '\');">delete?</button></th>';
+                datatable.innerHTML += newRow;
+            } );
+    }
+};
+function submitter( e )
+{
+    const title = document.getElementById('title'), 
+          genre = document.getElementById('genre'), 
+           year = document.getElementById('year'), 
+           json = { title: title.value, genre: genre.value, year: year.value }, 
+           body = JSON.stringify(json);
+    fetch( '/submit', { method: 'POST', headers: { "Content-Type": "application/json" }, body })
+    .then( response => response.json() )
+    .then( dothething() );
+    return false;
+};
+function deleter( _movID )
+{
+    const json = { _movID: _movID }, 
+          body = JSON.stringify( json );
+    fetch( '/delete', { method: 'POST', headers: { "Content-Type": "application/json" }, body } )
+    .then( response => { response.json() } )
+    .then( dothething() );
+    return false;
+};
+function updater( _movID, title, genre, year )
+{
+    tempID = _movID;
+    tempelement = document.getElementById(_movID);
+    temprow = tempelement.innerHTML;
+    let newrow  = '<br><tr id = "' + _movID + '"><th>';
+        newrow += '<input type="text"   value="' + title + '"></th><th>'
+        newrow += '<input type="text"   value="' + genre + '"></th><th>'
+        newrow += '<input type="number" value="' +  year + '"></th><th></th><th>';
+        newrow += '<button onclick="updatersubmitter(\'' + _movID + '\')">submit?</button></th><th>';
+        newrow += '<button onclick="updatercanceller(\'' + _movID + '\')">cancel?</button></th></tr>';
+    tempelement.innerHTML += newrow;
+};
+function updatercanceller( _movID )
+{
+    tempelement.innerHTML = temprow;
+    tempelement = null, tempID = null, temprow = null;
+};
+function updatersubmitter( _movID )
+{
+    let json = { _movID: _movID,
+                  title: document.getElementById( _movID ).children[7].children[0].value,
+                  genre: document.getElementById( _movID ).children[8].children[0].value,
+                   year: document.getElementById( _movID ).children[9].children[0].value
+               },
+        body = JSON.stringify( json );
+    deleter( _movID );
+    fetch( '/submit', { method: 'POST', headers: { "Content-Type": "application/json" }, body } )
+    .then( response => response.json() )
+    .then( dothething() );
+    tempID = null, tempelement = null, temprow = null;
+};
+const zackcheck = function( title, year )
+{
+    const years = [ 2004, 2007, 2009, 2010, 2011, 2013, 2016, 2017, 2021, 2021 ];
+    const titles = [ 'DAWN OF THE DEAD', '300', 'WATCHMEN', 'LEGEND OF THE GUARDIANS: THE OWLS OF GA\'HOOLE',
+                     'SUCKER PUNCH', 'MAN OF STEEL', 'BATMAN V SUPERMAN: DAWN OF JUSTICE', 'JUSTICE LEAGUE',
+                     'ZACK SNYDER\'S JUSTICE LEAGUE', 'ARMY OF THE DEAD']
+    const numFilms = 10;
+    title = title.toString().toUpperCase();
+    for ( let i = 0 ;  i < numFilms ; i++ )
+    {
+        if( year == years[ i ] && title == titles[ i ] )
+        {
+            return 'YES!';
+        } 
+    }
+    return 'NO!'; 
+};
+window.onload = function()
+{
+    const submit = document.getElementById( 'submit' );
+    submit.onclick = submitter;
+    dothething();
+};

public/style.css

@@ -0,0 +1,18 @@
+*      { background: #ABCDEF; font-size: 12px; }
+a      { background: #0E1117; }
+body   {  animation: shadow  100ms infinite; }
+h2     {  animation: slider 8000ms infinite; }
+h3     {  animation:  fx-3d 1000ms infinite; }
+button {  animation: button 1000ms infinite; }
+@keyframes shadow {
+    from{ text-shadow: 5px 15px 1px #FFFFFF; }
+      to{ text-shadow: 5px 15px 8px #FFFFFF; } }
+@keyframes slider {
+    0%, 100% { transform: translateX(00%); }
+         50% { transform: translateX(60%); } }
+@keyframes fx-3d {
+    0%, 100% { text-shadow:  4px  4px 1px #FF0000; }
+         50% { text-shadow: -4px -4px 1px #0000FF; } }
+@keyframes button {
+    00% {  color: #000000; transform: scale(1.0); text-shadow: 0px 00px 0px #000000; }
+    40% {  color: #FF0000; transform: scale(1.2); text-shadow: 3px 10px 5px #000000; } }

public/views/index.handlebars

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <meta name="description" content="webware a3 login page"/>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/mvp.css">
+  <link rel="stylesheet" href="./style.css">
+  <title>log in now with github or else</title>
+</head>
+<body>
+  <div>
+    <h1> log in or else ! </h1>
+    <a href="/auth/github" type="button">log in with github or else now</a>
+  </div>
+</body>
+</html>

public/views/main.handlebars

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <title>cs4241 a3</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <meta name="description" content="webware a3 data page"/>
+  <script type="text/javascript" src="/scripts.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/mvp.css">
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <div id="container">
+    <div id="form" class="display-box">
+      <h1>want to know if a movie is directed by zack snyder?</h1>
+      <h2>you're in luck</h2>
+      <h3>disclaimer: zack snyder is not very good at making movies</h3>
+      <form action="">
+        <div class="column">
+          <label for="title">movie title:</label>
+          <input type="text" id="title" value=""></div>
+        <div class="column">
+          <label for="genre">genre:</label>
+          <input type="text" id="genre" value=""></div>
+        <div class="column">
+          <label for="year">year of release:</label>
+          <input type="number" id="year" value=""></div><br>
+        <button id="submit" onclick="window.location.reload();">submit</button></form></div>
+    <div id="display" class="display-box">
+        <h1>data:</h1>
+      <table id="datatable"></table>
+    </div>
+  </div>
+</body>
+</html>