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/README.md b/README.md index 3945c152..bfa04f5c 100755 --- a/README.md +++ b/README.md @@ -1,93 +1,23 @@ -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. +[https://a2-afsimoneau.glitch.me/](https://a2-afsimoneau.glitch.me/) -Baseline Requirements ---- +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 -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 `
+ + + + + + + + + +
RouteTimeDistanceFitness Score
- diff --git a/public/js/scripts.js b/public/js/scripts.js index de052eae..b7b1601f 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,68 @@ -// Add some Javascript code here, to run on the front end. +const loadTable = function (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]; + } + } +}; -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(); + + //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, + }, + body = JSON.stringify(json); + + fetch("/submit", { + method: "POST", + headers: { + Accept: "application/json, text/plain, */*", + "Content-Type": "application/json", + }, + body, + }) + .then((response) => response.json()) + .then((jsonData) => loadTable(jsonData)); + + return false; +}; + +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 26673fc0..1e55c1bf 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,72 +1,84 @@ -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} -] - -const server = http.createServer( function( request,response ) { - if( request.method === 'GET' ) { - handleGet( request, response ) - }else if( request.method === 'POST' ){ - handlePost( request, response ) + { 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) { + 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) { + 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 ) +const handleGet = function (request, response) { + const filename = dir + request.url.slice(1); - if( request.url === '/' ) { - sendFile( response, 'public/index.html' ) - }else{ - sendFile( response, filename ) + if (request.url === "/") { + sendFile(response, "public/index.html"); + } else { + sendFile(response, filename); } -} - -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 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 ) +const handlePost = function (request, response) { + if (request.url === "/loadData") { + sendAppData(response); + return true; + } + 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 + appdata.push({ + route: newRecord.route, + time: newRecord.time, + distance: newRecord.distance, + fitness: calculateFitness(newRecord), + }); //put record data into "database" + } + sendAppData(response); + }); + return true; +}; + +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);