From e1543d9e13ba89454ff2cbd21445b291dc507fca Mon Sep 17 00:00:00 2001 From: Alex Simoneau Date: Mon, 14 Sep 2020 23:41:48 -0400 Subject: [PATCH 01/10] still not doing useful stuff yet --- .gitignore | 1 + package.json | 4 +- public/index.html | 52 ++++++++----------- public/js/scripts.js | 35 ++++++++++++- server.improved.js | 120 ++++++++++++++++++++++--------------------- 5 files changed, 119 insertions(+), 93 deletions(-) diff --git a/.gitignore b/.gitignore index 57195033..a8d703f5 100755 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ *.DS_Store node_modules/ package-lock.json +.vscode/ \ No newline at end of file diff --git a/package.json b/package.json index 988f135f..e6797336 100755 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "", + "name": "a2-shortstack", "version": "", "description": "", "author": "", @@ -7,6 +7,6 @@ "start": "node server.improved.js" }, "dependencies": { - "mime": "^2.4.4" + "mime": "^2.4.6" } } diff --git a/public/index.html b/public/index.html index c56d620e..446f6e44 100755 --- a/public/index.html +++ b/public/index.html @@ -5,37 +5,29 @@ -
- +

Route Logger

+ + +
+ +
+ +
+

+
+ + + + + + + + + + + +
RouteTimeDistancePace
- diff --git a/public/js/scripts.js b/public/js/scripts.js index de052eae..32a7123f 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,34 @@ -// Add some Javascript code here, to run on the front end. +const loadTable = function(jsonData){ -console.log("Welcome to assignment 2!") \ No newline at end of file +} + +const submit = function (e) { + // prevent default form action from being carried out + e.preventDefault(); + + const inputRoute = document.querySelector("#inputRoute"), + inputTime = document.querySelector("#inputTime"), + inputDistance = document.querySelector("#inputDistance"), + json = { + route: inputRoute.value, + time: inputTime.value, + distance: inputDistance.value, + pace: "", + }, + body = JSON.stringify(json); + + fetch("/submit", { + method: "POST", + body, + }).then(function (response) { + // do something with the reponse + loadTable(JSON.parse(response)) + }); + + return false; +}; + +window.onload = function () { + const button = document.querySelector("button"); + button.onclick = submit; +}; diff --git a/server.improved.js b/server.improved.js index 26673fc0..627f40c5 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,72 +1,74 @@ -const http = require( 'http' ), - fs = require( 'fs' ), - // IMPORTANT: you must run `npm install` in the directory for this assignment - // to install the mime library used in the following line of code - mime = require( 'mime' ), - dir = 'public/', - port = 3000 +const http = require("http"), + fs = require("fs"), + // IMPORTANT: you must run `npm install` in the directory for this assignment + // to install the mime library used in the following line of code + mime = require("mime"), + dir = "public/", + port = 3000; const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] + { route: "test", time: "7:00", distance: 1, pace: "7:00" }, + { route: "test", time: "14:00", distance: 2, pace: "7:00" }, + { route: "test", time: "21:00", distance: 3, pace: "7:00" }, +]; -const server = http.createServer( function( request,response ) { - if( request.method === 'GET' ) { - handleGet( request, response ) - }else if( request.method === 'POST' ){ - handlePost( request, response ) - } -}) - -const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) - - if( request.url === '/' ) { - sendFile( response, 'public/index.html' ) - }else{ - sendFile( response, filename ) - } +const calculatePace = function(time, distance){ + } -const handlePost = function( request, response ) { - let dataString = '' - - request.on( 'data', function( data ) { - dataString += data - }) - - request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) - - // ... do something with the data here!!! - - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() - }) -} +const server = http.createServer(function (request, response) { + if (request.method === "GET") { + handleGet(request, response); + } else if (request.method === "POST") { + handlePost(request, response); + } +}); -const sendFile = function( response, filename ) { - const type = mime.getType( filename ) +const handleGet = function (request, response) { + const filename = dir + request.url.slice(1); - fs.readFile( filename, function( err, content ) { + if (request.url === "/") { + sendFile(response, "public/index.html"); + } else { + sendFile(response, filename); + } +}; - // if the error = null, then we've loaded the file successfully - if( err === null ) { +const handlePost = function (request, response) { + let dataString = ""; - // status code: https://httpstatuses.com - response.writeHeader( 200, { 'Content-Type': type }) - response.end( content ) + request.on("data", function (data) { + dataString += data; + }); - }else{ + request.on("end", function () { + var newRecord = JSON.parse(dataString); + var newRecord = calculatePace(); - // file not found, error code 404 - response.writeHeader( 404 ) - response.end( '404 Error: File Not Found' ) + appdata.push(newRecord); - } - }) -} + // ... do something with the data here!!! -server.listen( process.env.PORT || port ) + response.writeHead(200, "OK", { "Content-Type": "text/plain" }); + response.end(); + }); +}; + +const sendFile = function (response, filename) { + const type = mime.getType(filename); + + fs.readFile(filename, function (err, content) { + // if the error = null, then we've loaded the file successfully + if (err === null) { + // status code: https://httpstatuses.com + response.writeHeader(200, { "Content-Type": type }); + response.end(content); + } else { + // file not found, error code 404 + response.writeHeader(404); + response.end("404 Error: File Not Found"); + } + }); +}; + +server.listen(process.env.PORT || port); From a896534110f618611ba9a7dcdf3dcb3f20dd343d Mon Sep 17 00:00:00 2001 From: Alex Simoneau Date: Tue, 15 Sep 2020 11:46:54 -0400 Subject: [PATCH 02/10] changed to fitness score instead of pace --- public/index.html | 5 +++-- public/js/scripts.js | 11 +++++----- server.improved.js | 49 ++++++++++++++++++++++++++------------------ 3 files changed, 38 insertions(+), 27 deletions(-) diff --git a/public/index.html b/public/index.html index 446f6e44..1792d48f 100755 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,5 @@ + CS4241 Assignment 2 @@ -23,11 +24,11 @@

Route Logger

Route Time Distance - Pace + Fitness - + \ No newline at end of file diff --git a/public/js/scripts.js b/public/js/scripts.js index 32a7123f..5f81b469 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,6 +1,7 @@ -const loadTable = function(jsonData){ - -} +const loadTable = function (responseData) { + var jsonData = JSON.parse(responseData); + console.log(jsonData); +}; const submit = function (e) { // prevent default form action from being carried out @@ -13,7 +14,7 @@ const submit = function (e) { route: inputRoute.value, time: inputTime.value, distance: inputDistance.value, - pace: "", + fitness: 0, }, body = JSON.stringify(json); @@ -22,7 +23,7 @@ const submit = function (e) { body, }).then(function (response) { // do something with the reponse - loadTable(JSON.parse(response)) + loadTable(response); }); return false; diff --git a/server.improved.js b/server.improved.js index 627f40c5..907ed3c7 100644 --- a/server.improved.js +++ b/server.improved.js @@ -7,14 +7,14 @@ const http = require("http"), port = 3000; const appdata = [ - { route: "test", time: "7:00", distance: 1, pace: "7:00" }, - { route: "test", time: "14:00", distance: 2, pace: "7:00" }, - { route: "test", time: "21:00", distance: 3, pace: "7:00" }, + { route: "test", time: 7, distance: 1, fitness: 7 }, + { route: "test", time: 14, distance: 2, fitness: 14 }, + { route: "test", time: 21, distance: 3, fitness: 21 }, ]; -const calculatePace = function(time, distance){ - -} +const calculateFitness = function (record) { + record.fitness = record.time*record.distance; +}; const server = http.createServer(function (request, response) { if (request.method === "GET") { @@ -35,23 +35,32 @@ const handleGet = function (request, response) { }; const handlePost = function (request, response) { - let dataString = ""; - - request.on("data", function (data) { - dataString += data; - }); - - request.on("end", function () { - var newRecord = JSON.parse(dataString); - var newRecord = calculatePace(); + if (request.url === "/submit") { + //if not loading just table, process new record + let dataAsString = ""; + request.on("data", function (dataBuffer) { + dataAsString += dataBuffer; + }); + //parse data buffer as string - appdata.push(newRecord); + request.on("end", function () { + var newRecord = JSON.parse(dataAsString); //get new record json + calculateFitness(newRecord); //calculate fitness on newRecord (field already present just null) - // ... do something with the data here!!! + appdata.push(newRecord); //put record data into "database" + }); + } + /* + always send table after post + any non "/submit" POST request just loads the table + ex. "/load" + */ + sendTable(response); +}; - response.writeHead(200, "OK", { "Content-Type": "text/plain" }); - response.end(); - }); +const sendTable = function (response) { + response.writeHead(200, "OK", { "Content-Type": "text/plain" }); + response.end(JSON.stringify(appdata)); }; const sendFile = function (response, filename) { From d4e5ee05dedc6e8f0fd2a6a6268596665dac78c1 Mon Sep 17 00:00:00 2001 From: Alex Simoneau Date: Wed, 16 Sep 2020 15:32:12 -0400 Subject: [PATCH 03/10] major changes from glitch. copy pasted over --- public/index.html | 34 ++++++++++---------- public/js/scripts.js | 66 +++++++++++++++++++++++++++++---------- server.improved.js | 74 +++++++++++++++++++++++--------------------- 3 files changed, 106 insertions(+), 68 deletions(-) diff --git a/public/index.html b/public/index.html index 1792d48f..a2adee01 100755 --- a/public/index.html +++ b/public/index.html @@ -1,34 +1,34 @@ - - + CS4241 Assignment 2 - + -

Route Logger

-
- -
- -
- -
+ +

Alex's Training Log

+ + +
+ +
+ +

-
- +
+
- + - - +
Route Time DistanceFitnessFitness Score
- \ No newline at end of file + diff --git a/public/js/scripts.js b/public/js/scripts.js index 5f81b469..f50b0215 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,35 +1,69 @@ -const loadTable = function (responseData) { - var jsonData = JSON.parse(responseData); - console.log(jsonData); +const loadTable = function(jsonData) { + console.log(jsonData) + var table = document.getElementById("resultTableBody"); + table.innerHTML = ""; + for (var i = 0; i < jsonData.length; i++) { + var tr = table.insertRow(-1); + for (var j in jsonData[i]) { + var tb = tr.insertCell(-1); + tb.innerHTML = jsonData[i][j]; + } + } }; -const submit = function (e) { +const submit = function(e) { // prevent default form action from being carried out e.preventDefault(); - const inputRoute = document.querySelector("#inputRoute"), - inputTime = document.querySelector("#inputTime"), - inputDistance = document.querySelector("#inputDistance"), - json = { + //sanitize inputs here + + var inputRoute = document.querySelector("#inputRoute"); + var inputTime = document.querySelector("#inputTime"); + var inputDistance = document.querySelector("#inputDistance"); + if (inputRoute.value === "") { + alert("Please input a route"); + return false; + } + if (inputTime.value === "") { + alert("Please input a time in minutes"); + return false; + } + if (inputDistance.value === "") { + alert("Please input a distance in miles"); + return false; + } + + const json = { route: inputRoute.value, time: inputTime.value, - distance: inputDistance.value, - fitness: 0, + distance: inputDistance.value }, body = JSON.stringify(json); fetch("/submit", { method: "POST", - body, - }).then(function (response) { - // do something with the reponse - loadTable(response); - }); + headers: { + Accept: "application/json, text/plain, */*", + "Content-Type": "application/json" + }, + body + }) + .then(response => response.json()) + .then(jsonData => loadTable(jsonData)); return false; }; -window.onload = function () { +window.onload = function() { + fetch("/loadData", { + method: "POST", + headers: { + Accept: "application/json, text/plain, */*", + "Content-Type": "application/json" + } + }) + .then(response => response.json()) + .then(jsonData => loadTable(jsonData)); const button = document.querySelector("button"); button.onclick = submit; }; diff --git a/server.improved.js b/server.improved.js index 907ed3c7..69e20362 100644 --- a/server.improved.js +++ b/server.improved.js @@ -7,16 +7,22 @@ const http = require("http"), port = 3000; const appdata = [ - { route: "test", time: 7, distance: 1, fitness: 7 }, - { route: "test", time: 14, distance: 2, fitness: 14 }, - { route: "test", time: 21, distance: 3, fitness: 21 }, + { route: "test1", time: 7, distance: 1, fitness: 7 }, + { route: "test2", time: 14, distance: 2, fitness: 14 }, + { route: "test3", time: 21, distance: 3, fitness: 21 } ]; -const calculateFitness = function (record) { - record.fitness = record.time*record.distance; +const sendAppData = function(response) { + response.writeHead(200, "OK", { "Content-Type": "text/plain" }); + response.end(JSON.stringify(appdata)); +}; + +const calculateFitness = function(record) { + return record.time * record.distance; }; -const server = http.createServer(function (request, response) { +const server = http.createServer(function(request, response) { + console.log(request.method); if (request.method === "GET") { handleGet(request, response); } else if (request.method === "POST") { @@ -24,7 +30,7 @@ const server = http.createServer(function (request, response) { } }); -const handleGet = function (request, response) { +const handleGet = function(request, response) { const filename = dir + request.url.slice(1); if (request.url === "/") { @@ -34,39 +40,37 @@ const handleGet = function (request, response) { } }; -const handlePost = function (request, response) { - if (request.url === "/submit") { - //if not loading just table, process new record - let dataAsString = ""; - request.on("data", function (dataBuffer) { - dataAsString += dataBuffer; - }); - //parse data buffer as string - - request.on("end", function () { - var newRecord = JSON.parse(dataAsString); //get new record json - calculateFitness(newRecord); //calculate fitness on newRecord (field already present just null) - - appdata.push(newRecord); //put record data into "database" - }); +const handlePost = function(request, response) { + if (request.url === "/loadData") { + sendAppData(response); + return true; } - /* - always send table after post - any non "/submit" POST request just loads the table - ex. "/load" - */ - sendTable(response); -}; - -const sendTable = function (response) { - response.writeHead(200, "OK", { "Content-Type": "text/plain" }); - response.end(JSON.stringify(appdata)); + let dataAsString = ""; + request.on("data", function(dataBuffer) { + dataAsString += dataBuffer; + }); + //parse data buffer as string + request.on("end", function() { + if (request.url === "/submit") { + var newRecord = JSON.parse(dataAsString); //get new record json + console.log(newRecord); + appdata.push({ + route: newRecord.route, + time: newRecord.time, + distance: newRecord.distance, + fitness: calculateFitness(newRecord) + }); //put record data into "database" + } + sendAppData(response); + }); + console.log("appdata\n" + JSON.stringify(appdata)); + return true; }; -const sendFile = function (response, filename) { +const sendFile = function(response, filename) { const type = mime.getType(filename); - fs.readFile(filename, function (err, content) { + fs.readFile(filename, function(err, content) { // if the error = null, then we've loaded the file successfully if (err === null) { // status code: https://httpstatuses.com From 54a4e3dc70c62b8e30227c50df6a6c08ff166d7d Mon Sep 17 00:00:00 2001 From: Alex Simoneau Date: Wed, 16 Sep 2020 15:36:56 -0400 Subject: [PATCH 04/10] fixed path and removed logs --- public/index.html | 2 +- public/js/scripts.js | 1 - server.improved.js | 3 --- 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index a2adee01..f7011992 100755 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ - +

Alex's Training Log

diff --git a/public/js/scripts.js b/public/js/scripts.js index f50b0215..64557de8 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,5 +1,4 @@ const loadTable = function(jsonData) { - console.log(jsonData) var table = document.getElementById("resultTableBody"); table.innerHTML = ""; for (var i = 0; i < jsonData.length; i++) { diff --git a/server.improved.js b/server.improved.js index 69e20362..60c376fb 100644 --- a/server.improved.js +++ b/server.improved.js @@ -22,7 +22,6 @@ const calculateFitness = function(record) { }; const server = http.createServer(function(request, response) { - console.log(request.method); if (request.method === "GET") { handleGet(request, response); } else if (request.method === "POST") { @@ -53,7 +52,6 @@ const handlePost = function(request, response) { request.on("end", function() { if (request.url === "/submit") { var newRecord = JSON.parse(dataAsString); //get new record json - console.log(newRecord); appdata.push({ route: newRecord.route, time: newRecord.time, @@ -63,7 +61,6 @@ const handlePost = function(request, response) { } sendAppData(response); }); - console.log("appdata\n" + JSON.stringify(appdata)); return true; }; From 7b9e195ee4646aaef56d57be45e61869e640a7e1 Mon Sep 17 00:00:00 2001 From: Alex Simoneau Date: Wed, 16 Sep 2020 21:44:53 -0400 Subject: [PATCH 05/10] finished status, need readme --- README.md | 7 +++++ public/css/style.css | 75 +++++++++++++++++++++++++++++++++++++++++++- public/index.html | 7 +++-- public/js/scripts.js | 24 +++++++------- server.improved.js | 26 +++++++-------- 5 files changed, 111 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 3945c152..a989b9d5 100755 --- a/README.md +++ b/README.md @@ -91,3 +91,10 @@ Include a very brief summary of your project here. Be sure to include the CSS po ### Design/Evaluation Achievements - **Design Achievement 1**: + + +Alexa: +as route name gets longer it squishes other fields +expand outward instead of squishing +easy to use and see what's going on +warns if you do it wrong \ No newline at end of file diff --git a/public/css/style.css b/public/css/style.css index d5f842ab..1cd86a27 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1,74 @@ -/*Style your own assignment! This is fun! */ \ No newline at end of file +/*Style your own assignment! This is fun! */ + +h1 { + color: #ccffed; + width: 25%; + margin-left: 35%; +} + +hr { + color: #ccffed; +} +body { + grid-template-rows: auto; + align-content: center; + font-size: x-large; + text-align: center; + font-family: "Kumbh Sans", sans-serif; + background-color: #455953; +} + +input[type="text"] { + border: none; + background-color: #4ea68a; + margin: 10px 0; + padding: 10px 10px; + width: 15%; + font-size: x-large; + color: #ccffed; +} + +button { + background-color: #4ea68a; + border: none; + color: #ccffed; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-flex; + font-size: 16px; + border-radius: 50px; +} +form { + padding: 15px; + margin: 10px; + color: #ccffed; + text-align: center; +} + +table { + color: #ccffed; + margin-left: 20%; + margin-right: 20%; + + align-items: center; + justify-content: center; + border-collapse: collapse; + width: 60%; + background-color: #4ea68a; +} + +th, +td, +tr { + padding-top: 12px; + padding-bottom: 12px; + text-align: center; + border: 2px solid #ccffed; +} + +thead, +table td:nth-child(1) { + /*highlight header row and first column*/ + background-color: #2a594a; +} diff --git a/public/index.html b/public/index.html index f7011992..67f4f5cf 100755 --- a/public/index.html +++ b/public/index.html @@ -1,13 +1,16 @@ - + + + CS4241 Assignment 2

Alex's Training Log

+

@@ -16,7 +19,7 @@

Alex's Training Log


- +
diff --git a/public/js/scripts.js b/public/js/scripts.js index 64557de8..b7b1601f 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,4 +1,4 @@ -const loadTable = function(jsonData) { +const loadTable = function (jsonData) { var table = document.getElementById("resultTableBody"); table.innerHTML = ""; for (var i = 0; i < jsonData.length; i++) { @@ -10,7 +10,7 @@ const loadTable = function(jsonData) { } }; -const submit = function(e) { +const submit = function (e) { // prevent default form action from being carried out e.preventDefault(); @@ -35,7 +35,7 @@ const submit = function(e) { const json = { route: inputRoute.value, time: inputTime.value, - distance: inputDistance.value + distance: inputDistance.value, }, body = JSON.stringify(json); @@ -43,26 +43,26 @@ const submit = function(e) { method: "POST", headers: { Accept: "application/json, text/plain, */*", - "Content-Type": "application/json" + "Content-Type": "application/json", }, - body + body, }) - .then(response => response.json()) - .then(jsonData => loadTable(jsonData)); + .then((response) => response.json()) + .then((jsonData) => loadTable(jsonData)); return false; }; -window.onload = function() { +window.onload = function () { fetch("/loadData", { method: "POST", headers: { Accept: "application/json, text/plain, */*", - "Content-Type": "application/json" - } + "Content-Type": "application/json", + }, }) - .then(response => response.json()) - .then(jsonData => loadTable(jsonData)); + .then((response) => response.json()) + .then((jsonData) => loadTable(jsonData)); const button = document.querySelector("button"); button.onclick = submit; }; diff --git a/server.improved.js b/server.improved.js index 60c376fb..1e55c1bf 100644 --- a/server.improved.js +++ b/server.improved.js @@ -7,21 +7,21 @@ const http = require("http"), port = 3000; const appdata = [ - { route: "test1", time: 7, distance: 1, fitness: 7 }, - { route: "test2", time: 14, distance: 2, fitness: 14 }, - { route: "test3", time: 21, distance: 3, fitness: 21 } + { route: "Normal Run", time: 30, distance: 4, fitness: 120 }, + { route: "Workout", time: 15, distance: 2.5, fitness: 37.5 }, + { route: "Long Run", time: 60, distance: 9, fitness: 540 }, ]; -const sendAppData = function(response) { +const sendAppData = function (response) { response.writeHead(200, "OK", { "Content-Type": "text/plain" }); response.end(JSON.stringify(appdata)); }; -const calculateFitness = function(record) { +const calculateFitness = function (record) { return record.time * record.distance; }; -const server = http.createServer(function(request, response) { +const server = http.createServer(function (request, response) { if (request.method === "GET") { handleGet(request, response); } else if (request.method === "POST") { @@ -29,7 +29,7 @@ const server = http.createServer(function(request, response) { } }); -const handleGet = function(request, response) { +const handleGet = function (request, response) { const filename = dir + request.url.slice(1); if (request.url === "/") { @@ -39,24 +39,24 @@ const handleGet = function(request, response) { } }; -const handlePost = function(request, response) { +const handlePost = function (request, response) { if (request.url === "/loadData") { sendAppData(response); return true; } let dataAsString = ""; - request.on("data", function(dataBuffer) { + request.on("data", function (dataBuffer) { dataAsString += dataBuffer; }); //parse data buffer as string - request.on("end", function() { + request.on("end", function () { if (request.url === "/submit") { var newRecord = JSON.parse(dataAsString); //get new record json appdata.push({ route: newRecord.route, time: newRecord.time, distance: newRecord.distance, - fitness: calculateFitness(newRecord) + fitness: calculateFitness(newRecord), }); //put record data into "database" } sendAppData(response); @@ -64,10 +64,10 @@ const handlePost = function(request, response) { return true; }; -const sendFile = function(response, filename) { +const sendFile = function (response, filename) { const type = mime.getType(filename); - fs.readFile(filename, function(err, content) { + fs.readFile(filename, function (err, content) { // if the error = null, then we've loaded the file successfully if (err === null) { // status code: https://httpstatuses.com From df15344c61a09e63eb27d6f738e87ed3fcc8afee Mon Sep 17 00:00:00 2001 From: Alex Simoneau Date: Wed, 16 Sep 2020 22:17:32 -0400 Subject: [PATCH 06/10] readme done --- README.md | 107 +++++++----------------------------------------------- 1 file changed, 14 insertions(+), 93 deletions(-) diff --git a/README.md b/README.md index a989b9d5..351657ad 100755 --- a/README.md +++ b/README.md @@ -1,100 +1,21 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +# Alex's Training Log -Due: September 16th, by 11:59 PM. +## Description -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 `
` tag for this, but `
    ` could also work and might be simpler to work with. -- All pages should [validate](https://validator.w3.org) - -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 and acheive a base grade of 85%: - -1. Fork the starting project code (make sure to fork the 2020 repo!). 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 - -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. These are recommended acheivements, but feel free to create/implement your own... just make sure you thoroughly describe what you did in your README and why it was challenging. ALL ACHIEVEMENTS MUST BE DESCRIBED IN YOUR README IN ORDER TO GET CREDIT FOR THEM. - -*Technical* -- (10 points) 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/UX* -- (5 points per person, with a max of 10 points) Test your user interface with other students in the class. Define a specific task for them to complete (ideally something short that takes <10 minutes), and then use the [think-aloud protocol](https://en.wikipedia.org/wiki/Think_aloud_protocol) to obtain feedback on your design (talk-aloud is also find). Important considerations when designing your study: - -1. Make sure you start the study by clearly stating the task that you expect your user to accomplish. -2. You shouldn't provide any verbal instructions on how to use your interface / accomplish the task you give them. Make sure that your interface is clear enough that users can figure it out without any instruction, or provide text instructions from within the interface itself. -3. If users get stuck to the point where they give up, you can then provde instruction so that the study can continue, but make sure to discuss this in your README. You won't lose any points for this... all feedback is good feedback! - -You'll need to use sometype of collaborative software that will enable you both to see the test subject's screen and listen to their voice as they describe their thoughts. After completing each study, briefly (one to two sentences for each question) address the following in your README: - -1. Provide the last name of each student you conduct the evaluation with. -2. What problems did the user have with your design? -3. What comments did they make that surprised you? -4. What would you change about the interface based on their feedback? - -*You do not need to actually make changes based on their feedback*. This acheivement is designed to help gain experience testing user interfaces. If you run two user studies, you should answer two sets of questions. - -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. Be sure to include the CSS positioning technique you used, and any required instructions to use your application. +I created this project to be a running log for my daily training. I centered all of the major CSS elements in a grid layout and margin centering. It calculates a relative fitness score using the distance traveled and the time taken to approximate the training effect of a run. The form checks if you submit empty data and raises alerts to avoid blank fields in the application data ## Technical Achievements -- **Tech Achievement 1**: Using a combination of... -### Design/Evaluation Achievements -- **Design Achievement 1**: +- **Single-page App**: Using POST requests, data is updated from the server on initial page load and on submission. +## Design/Evaluation Achievements -Alexa: -as route name gets longer it squishes other fields -expand outward instead of squishing -easy to use and see what's going on -warns if you do it wrong \ No newline at end of file +- **Student Client Tests**: + - *Alexa Freglette* + - ***(issue)*** As route name gets longer, squishes other fields + - ***(feedback)*** Expand outward instead of squishing + - ***(positive)*** Easy to use and see what's going on + - ***(positive)*** Warns if you do it wrong + - *Jenna Galli* + - ***(positive)*** Like the colors and layout + - ***(feedback)*** More clarity on what fitness score means From b0b79f79ef12cea3e1a73e80c18dce536fdfc72d Mon Sep 17 00:00:00 2001 From: Alex Simoneau Date: Wed, 16 Sep 2020 22:18:45 -0400 Subject: [PATCH 07/10] added link --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 351657ad..bfa04f5c 100755 --- a/README.md +++ b/README.md @@ -2,11 +2,13 @@ ## Description +[https://a2-afsimoneau.glitch.me/](https://a2-afsimoneau.glitch.me/) + I created this project to be a running log for my daily training. I centered all of the major CSS elements in a grid layout and margin centering. It calculates a relative fitness score using the distance traveled and the time taken to approximate the training effect of a run. The form checks if you submit empty data and raises alerts to avoid blank fields in the application data ## Technical Achievements -- **Single-page App**: Using POST requests, data is updated from the server on initial page load and on submission. +- **Single-page App**: Using POST requests, data is updated from the server on initial page load and on submission. ## Design/Evaluation Achievements From 16142bd967135595566f7cb9fa43f9429cd3ed02 Mon Sep 17 00:00:00 2001 From: Alex Simoneau Date: Wed, 16 Sep 2020 22:22:06 -0400 Subject: [PATCH 08/10] validate fixes --- public/index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index 67f4f5cf..741f3e31 100755 --- a/public/index.html +++ b/public/index.html @@ -1,9 +1,8 @@ - + - + - CS4241 Assignment 2 From 2451e8f558694ebe543af3cbe956b080d291c769 Mon Sep 17 00:00:00 2001 From: Alex Simoneau Date: Wed, 16 Sep 2020 22:23:28 -0400 Subject: [PATCH 09/10] adding lang back --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 741f3e31..b02b391f 100755 --- a/public/index.html +++ b/public/index.html @@ -1,7 +1,7 @@ - + CS4241 Assignment 2 From 6ca8bfe83fd295b3b06562d89cf7ec8694bba02b Mon Sep 17 00:00:00 2001 From: Alex Simoneau Date: Wed, 16 Sep 2020 22:24:16 -0400 Subject: [PATCH 10/10] moving links, still not validating? --- public/index.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index b02b391f..53f24011 100755 --- a/public/index.html +++ b/public/index.html @@ -1,7 +1,11 @@ - - + + + CS4241 Assignment 2