diff --git a/package.json b/package.json index 988f135f..6002f097 100755 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "", + "name": "To Do List", "version": "", - "description": "", - "author": "", + "description": "Create a todo list", + "author": "Nicole Cotto", "scripts": { "start": "node server.improved.js" }, diff --git a/public/css/style.css b/public/css/style.css index d5f842ab..c3efeb56 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1,56 @@ -/*Style your own assignment! This is fun! */ \ No newline at end of file +/*Style your own assignment! This is fun! */ +body { + background-color: violet; +} + +table, +th, +td { + border: 1px solid black; + text-align: center; + background: white; +} + +input { + padding: 10px 2px; + margin: 2px 0 10px 10px; +} + +h1 { + font-family: verdana; + color: purple; +} + +button{ + margin: 2px 0 2px 10px; +} + +label{ + font-size: 20px; + margin: 2px 0 2px 10px; +} + +#add { + background-color: green; + color: white; +} + +#submit { + background-color: blue; + color: white; +} + +#delete { + background-color: red; + color: white; +} + +#edit { + background-color: yellow; + color: black; +} + +#results { + background-color: orange; + color: black; +} diff --git a/public/index.html b/public/index.html index c56d620e..5bd1f464 100755 --- a/public/index.html +++ b/public/index.html @@ -1,41 +1,45 @@ - + + + + + CS4241 Assignment 2 - + +

+ To-Do List +

- - -
- - + - window.onload = function() { - const button = document.querySelector( 'button' ) - button.onclick = submit - } +
+
+
+ + - diff --git a/public/js/scripts.js b/public/js/scripts.js index de052eae..9b2cf7fd 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,50 @@ // Add some Javascript code here, to run on the front end. -console.log("Welcome to assignment 2!") \ No newline at end of file +console.log("Welcome to assignment 2!"); + + let data = []; +const submit = function(e) { + // prevent default form action from being carried out + e.preventDefault(); + + const input = document.querySelector("#task"); + const input2 = document.querySelector("#date"); + const input3 = document.querySelector("#time"), + json = { task: input.value, date: input2.value, time: input3.value }, + body = JSON.stringify(json); + + + fetch("/submit", { + method: "POST", + body + }) + .then(function(response) { + // do something with the reponse + return response.json(); + }) + + .then(function(json) { + data.push(json); + console.log(json); + }); + + return false; +}; + +function dataTable(){ + var dataLength = data.length; + for (var i = 0; i <= dataLength; i++) { + + document.write(""); + document.write(""+JSON.stringify(data[i])+""); + document.write(""+data[i+1]+""); + document.write(""+data[i+2]+""); + console.log(i); + document.write(""); + } +}; + +window.onload = function() { + const button = document.querySelector("button"); + button.onclick = submit; +}; diff --git a/server.improved.js b/server.improved.js index 26673fc0..61ecee0b 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,72 +1,69 @@ -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 ) + { 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 ) +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 ) { +let dataString = []; +const handlePost = function(request, response) { - // if the error = null, then we've loaded the file successfully - if( err === null ) { + request.on("data", function(data) { + dataString.push(JSON.parse(data)); - // status code: https://httpstatuses.com - response.writeHeader( 200, { 'Content-Type': type }) - response.end( content ) + }); - }else{ + request.on("end", function() { + //console.log(JSON.parse(dataString)); - // file not found, error code 404 - response.writeHeader( 404 ) - response.end( '404 Error: File Not Found' ) - - } - }) -} + // ... do something with the data here!!! -server.listen( process.env.PORT || port ) + response.writeHead(200, "OK", { "Content-Type": "text/plain" }); + response.end(JSON.stringify(dataString)); + + }); +}; + +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); diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 00000000..f6d7ea4f --- /dev/null +++ b/shrinkwrap.yaml @@ -0,0 +1,15 @@ +dependencies: + mime: 2.4.6 +packages: + /mime/2.4.6: + dev: false + engines: + node: '>=4.0.0' + hasBin: true + resolution: + integrity: sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA== +registry: 'https://registry.npmjs.org/' +shrinkwrapMinorVersion: 9 +shrinkwrapVersion: 3 +specifiers: + mime: ^2.4.4