diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 0000000..73e267c --- /dev/null +++ b/.glitch-assets @@ -0,0 +1,2 @@ +{"name":"lukas-blazek-GnvurwJsKaY-unsplash.jpg","date":"2022-09-05T20:02:44.982Z","url":"https://cdn.glitch.global/97d0aa55-f508-4ad6-8727-a9ae2438189c/lukas-blazek-GnvurwJsKaY-unsplash.jpg","type":"image/jpeg","size":4049599,"imageWidth":6144,"imageHeight":4069,"thumbnail":"https://cdn.glitch.global/97d0aa55-f508-4ad6-8727-a9ae2438189c/thumbnails%2Flukas-blazek-GnvurwJsKaY-unsplash.jpg","thumbnailWidth":330,"thumbnailHeight":219,"uuid":"mesJAelSTP7UXzZi"} +{"name":"Caveat-VariableFont_wght.ttf","date":"2022-09-06T21:31:12.789Z","url":"https://cdn.glitch.global/97d0aa55-f508-4ad6-8727-a9ae2438189c/Caveat-VariableFont_wght.ttf","type":"","size":391068,"thumbnail":"https://cdn.glitch.global/97d0aa55-f508-4ad6-8727-a9ae2438189c/thumbnails%2FCaveat-VariableFont_wght.ttf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"NDd6rloGVE0dIQy6"} diff --git a/README.md b/README.md index 9434c98..fcca253 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,32 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +https://a2-rluu1.glitch.me/ -Due: September 8th, by 11:59 AM. +## The Homework Reminder -This assignment aims to introduce you to creating a prototype two-tiered web application. -Your application will include the use of HTML, CSS, JavaScript, and Node.js functionality, with active communication between the client and the server over the life of a user session. - -Baseline Requirements ---- - -There is a large range of application areas and possibilities that meet these baseline requirements. -Try to 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 `
+ + + + + + + + + +
NameDateAssignmentDate DuePriorityOptions
- diff --git a/public/js/authenticate.html b/public/js/authenticate.html new file mode 100644 index 0000000..5556cea --- /dev/null +++ b/public/js/authenticate.html @@ -0,0 +1,26 @@ + + + + CS4241 Assignment 2 + + + + + +

Welcome to the Homework Reminder!!!

+

+ Please input your login information. If you do not have an account, please create simply a new account. +

+
+
+ + +
+
+ + +
+ +
+ + diff --git a/public/js/scripts.js b/public/js/scripts.js index de052ea..ba14b0b 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,96 @@ -// Add some Javascript code here, to run on the front end. +console.log("Welcome to assignment 2!"); + var priorityLevel ="" +const submit = function (e) { + // prevent default form action from being carried out + e.preventDefault(); -console.log("Welcome to assignment 2!") \ No newline at end of file + const nameInput = document.getElementById("yourname").value, + dateInput = document.getElementById("currDate").value, + duedateInput = document.getElementById("dueDate").value, + assignmentInput = document.getElementById("assignment").value; + + updatePriority(duedateInput, dateInput); + + let json = { + yourname: nameInput, + currDate: dateInput, + dueDate: duedateInput, + assignment: assignmentInput, + priority: priorityLevel + }, + body = JSON.stringify(json); + console.log(body); + + + fetch("/submit", { + method: "POST", + body, + }).then(function (response) { + response.text().then(function(){ + console.log("Body: ", body); + const table = document.getElementById("dataTable"); + + let row = table.insertRow(-1); + + let name = row.insertCell(0); + let date = row.insertCell(1); + let assignment = row.insertCell(2); + let duedate = row.insertCell(3); + let priority = row.insertCell(4); + let update = row.insertCell(5); + + name.innerHTML = json.yourname; + date.innerHTML = json.currDate; + assignment.innerHTML = json.assignment; + duedate.innerHTML = json.dueDate; + priority.innerHTML = json.priority; + update.innerHTML = "" + + }); +}); + return false; +}; + +function deleteFirstRow(){ + document.getElementById("dataTable").deleteRow(1); +} + +function update() { + document.getElementById("myDropdown").classList.toggle("show"); +} + +function updatePriority(dueDate,currDate){ + var dueDate = new Date(dueDate); + var currDate = new Date(currDate); + + var Difference_In_Time = dueDate.getTime() - currDate.getTime(); + + var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24); + + console.log(Difference_In_Days) + + if(Difference_In_Days >= 5){ + priorityLevel = "Low" + } else { + priorityLevel = "High" + } + +} + +window.onclick = function(event) { + if (!event.target.matches('.dropbtn')) { + var dropdowns = document.getElementsByClassName("dropdown-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show')) { + openDropdown.classList.remove('show'); + } + } + } +} + +window.onload = function () { + const button = document.querySelector("button"); + button.onclick = submit; +}; \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 26673fc..051a845 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,72 +1,113 @@ -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 express = require( 'express' ), + mongodb = require( 'mongodb' ), + app = express() -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 ) - } -}) - -const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) +app.use( express.static('public') ) +app.use( express.json() ) - if( request.url === '/' ) { - sendFile( response, 'public/index.html' ) - }else{ - sendFile( response, filename ) - } -} +const uri = 'mongodb+srv://'+process.env.USER+':'+process.env.PASS+'@'+process.env.HOST -const handlePost = function( request, response ) { - let dataString = '' +const client = new mongodb.MongoClient( uri, { useNewUrlParser: true, useUnifiedTopology:true }) +let collection = null - request.on( 'data', function( data ) { - dataString += data +client.connect() + .then( () => { + // will only create collection if it doesn't exist + return client.db( 'Cluster0' ).collection( 'userDB.loginInfo' ) }) - - 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() + .then( __collection => { + // store reference to collection + collection = __collection + // blank query returns all documents + return collection.find({ }).toArray() }) -} - -const sendFile = function( response, filename ) { - const type = mime.getType( filename ) - - fs.readFile( filename, function( err, content ) { + .then( console.log ) + +// route to get all docs +app.get( '/', (req,res) => { + if( collection !== null ) { + // get array and pass to res.json + collection.find({ }).toArray().then( result => res.json( result ) ) + } +}) + +app.listen( 3000 ) - // if the error = null, then we've loaded the file successfully - if( err === null ) { +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; - // status code: https://httpstatuses.com - response.writeHeader( 200, { 'Content-Type': type }) - response.end( content ) +const appdata = [ + { + name: "Chris", + date: "09/07/2022", + subject: "Math", + assignment: "Assignment 1", + }, +]; + +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/authenticate.html"); + } else if (request.url === "/getFormData"){ + response.writeHeader(200, {"Content-Type": "text/plain"}); + response.end(JSON.stringify(appdata)); + } else { + const html = + sendFile(response, filename); + } +}; - }else{ +const handlePost = function (request, response) { + let dataString = ""; - // file not found, error code 404 - response.writeHeader( 404 ) - response.end( '404 Error: File Not Found' ) + request.on("data", function (data) { + dataString += data; + }); - } - }) + request.on("end", function () { + console.log(JSON.parse(dataString)); + let newInfoData = JSON.parse(dataString); + // ... do something with the data here!!! + if(request.url === "/submit"){ + console.log("New INFO DATA: ", newInfoData); + appdata.push(newInfoData); + } + response.writeHead(200, "OK", { "Content-Type": "text/plain" }); + response.end(JSON.stringify(appdata)); + +}); } -server.listen( process.env.PORT || port ) +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); \ No newline at end of file diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 0000000..7cc43d7 --- /dev/null +++ b/shrinkwrap.yaml @@ -0,0 +1,15 @@ +dependencies: + mime: 3.0.0 +packages: + /mime/3.0.0: + dev: false + engines: + node: '>=10.0.0' + hasBin: true + resolution: + integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A== +registry: 'https://registry.npmjs.org/' +shrinkwrapMinorVersion: 9 +shrinkwrapVersion: 3 +specifiers: + mime: ^3.0.0