diff --git a/README.md b/README.md index 304a16f1..cb6a0a07 100755 --- a/README.md +++ b/README.md @@ -1,89 +1,21 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js === +## Work-Play Balance -Due: September 9th, by 11:59 AM. +The website intends to help user find a balance between work and leisure tasks in their day. It helps to combat a +person's unhealthy tendency to either work, or stay unproductive for a long period of time. The website has a table +showing their list of tasks and a single bar visualization to show the work-play ratio on that day. These address +the problem as intended as they help keep track of the user's tasks. Possible future plans for this include displaying +more interactive visualizations related to the results. -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. -Another aim of this assignment is to establish creative boundaries in which you and your partner can explore designing, implementing, and evaluating usable, useful, novel, and technically efficient web applications. - -Baseline Requirements ---- - -Note that there is a very large range of application areas and possibilities that meet these baseline requirements. -Games, internet of things, organizational tools, commerce, media - all are possibilities with a two-tiered form-focused web application. - -Do not limit yourselves to any of the examples given below. -Examples like the upcoming `efficiency_ratio` idea for the `cars` dataset are meant to be illustrative and easy to understand. -They are not intended to be sensible or useful ideas. - -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 `cars` dataset with `year`, `horsepower`, and `fuel_efficiency` may create a new field `efficiency_ratio` by dividing `fuel_efficiency` by `horsepower` - -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 - - Clarification: the results page can be implemented in any way. `
`s, `table`s, and `list`s are common choices - -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 sizing of the primary visual elements in the application: - - CSS to cause at least one element to be horizontally centered on the page - - CSS to cause at least one pair of elements to appear side-by-side - - 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: - -1. Fork the starting project code. 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 - -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. -Images are encouraged, along with concise, high-level text. - -Here is a sample formula for summarizing your activities, talk about: -- the domain area the project pertains to -- the main challenges or problems the application addresses -- the key innovations that make it possible to address the problem -- the main results of the implementation, does it really address the problem? -- any additional implications of the resulting application, or possibly areas for future work that have been discovered as part of the design and implementation activities - -(Note that when I use the above formula, I aim to have only one sentence per thought in order to remain concise.) - -http://a2-charlieroberts.glitch.me +https://a2-rkayastha98.glitch.me/ ## Technical Achievements -- **Tech Achievement 1**: Using a combination of... -- **Tech Achievement 2**: ... +- **Tech Achievement 1**: Used an html form to add in a task +- **Tech Achievement 2**: I have code to update an array on the server side every time a new task is added and then + displays the results of the current dataset in three different forms;I have code to delete an array of the server side on the click of a button for any row on + the tables, and changes the displays subsequently. ### Design/Evaluation Achievements -- **Design Achievement 1**: Shown in `style.css`, the code... -- **Design Achievement 2**: We tested the application with n=X users, finding that... +- **Design Achievement 1**: Used google fonts for the heading and the table fonts; Used css in a separate stylesheet +- **Design Achievement 2**: Used gridbox, justify-content, and align items to align all contents on the webpage; Used element selectors, id selectors, class selectors, and relative selectors for the css diff --git a/public/css/style.css b/public/css/style.css index 973ef274..7cee9259 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -18,18 +18,28 @@ header{ } +#pBar { + background-color: #20201F; + border-radius: 5px; /* (heightOfInnerDiv / 2) + padding */ + padding: 4px; +} + +#prog{ + background-color: darksalmon; + width: 50%; + /* Adjust with JavaScript */ + height: 50px; + border-radius: 2px; +} + .tg {border-collapse:collapse;border-spacing:0;} .tg td{border-color: lightskyblue;border-style:solid;border-width:5px;font-family:Arial, sans-serif;font-size:14px; overflow:hidden;padding:20px 10px;word-break:normal;} .tg th{border-color: lightskyblue;border-style:solid;border-width:5px;font-family:Arial, sans-serif;font-size:14px; font-weight:normal;overflow:hidden;padding:20px 10px;word-break:normal;} -.tg .tg-cly1{text-align:left;vertical-align:middle} -.tg .tg-0lax{text-align:left;vertical-align:top} +.tg .tg-cly1{text-align:center;vertical-align:middle; font-family: 'Andika';font-size:15px} +.tg .tg-0lax{text-align:center;vertical-align:top;font-family: 'Andika';font-size:15px} -.tabs{ - background-color: darksalmon; - color: white; -} /* width */ ::-webkit-scrollbar { @@ -51,7 +61,7 @@ header{ /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #b30000; -} +} #add_box:hover{ color: #b30000; @@ -81,7 +91,11 @@ button{ .item2{ background-color: darksalmon; - align-content: center; + text-align:center; + display:flex; + align-content:space-between; + justify-content:space-between; + flex-direction:column; width: 15vw; margin: 15px; box-shadow: 2px 5px 5px saddlebrown; diff --git a/public/index.html b/public/index.html index bfce0f85..158bd8b1 100755 --- a/public/index.html +++ b/public/index.html @@ -5,16 +5,16 @@ - - + + +
Work-Play Balance
- - +
@@ -24,19 +24,19 @@
-
-
-
-
-
-
    * -
+ + *

+
+ Enter Start Time: *
+ Enter End Time: *

+ + *

- +
@@ -148,7 +148,6 @@
- -
- +
+ + diff --git a/public/js/scripts.js b/public/js/scripts.js index 1dc59140..4baffe64 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -21,14 +21,17 @@ document.getElementById("history").addEventListener("click",function () { hist.style.display = 'inline'; cal.style.display="none"; prog.style.display='none' + document.getElementById("mainContainer").style.overflowY="hidden" }) document.getElementById("today").addEventListener("click", function () { cal.style.display='inline' hist.style.display='none' prog.style.display='none' + document.getElementById("mainContainer").style.overflowY="scroll" }) document.getElementById("progress").addEventListener("click", function () { playProg() + document.getElementById("mainContainer").style.overflowY="hidden" }) diff --git a/server.improved.js b/server.improved.js index 4affc785..a23d3e0b 100644 --- a/server.improved.js +++ b/server.improved.js @@ -3,6 +3,7 @@ const http = require( 'http' ), // 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' ), + url = require('url'), dir = 'public/', port = 3000 @@ -28,26 +29,47 @@ const handleGet = function( request, response ) { const handlePost = function( request, response ) { let dataString = '' - - request.on( 'data', function( data ) { - dataString += data - }) - - request.on( 'end', function() { - var obj=JSON.parse( dataString ) + + switch(request.url){ + case '/submit': + request.on( 'data', function( data ) { + dataString += data + }) + + request.on( 'end', function() { + var obj=JSON.parse( dataString ) - var hh=(parseInt(obj["eventETime"].substring(0,2))-parseInt((obj["eventSTime"]).substring(0,2)))*60 - var mm=parseInt((obj["eventETime"]).substring(3,5))-parseInt((obj["eventSTime"]).substring(3,5)) + var hh=(parseInt(obj["eventETime"].substring(0,2))-parseInt((obj["eventSTime"]).substring(0,2)))*60 + var mm=parseInt((obj["eventETime"]).substring(3,5))-parseInt((obj["eventSTime"]).substring(3,5)) + + obj["duration"]= (hh+mm).toString() - obj["duration"]= (hh+mm).toString() + calArray.push(obj) + + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.end(JSON.stringify(calArray[calArray.length-1])) + }) - calArray.push(obj) - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end(JSON.stringify(calArray[calArray.length-1])) - }) + break; + case '/delete': + request.on( 'data', function( data ) { + dataString += data + }) + + request.on( 'end', function() { + // var obj=JSON.parse( dataString ) + + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.end() + }) + + delete calArray[parseInt(dataString)] + break; + } } + const sendFile = function( response, filename ) { const type = mime.getType( filename ) @@ -70,4 +92,4 @@ const sendFile = function( response, filename ) { }) } -server.listen( process.env.PORT || port ) +server.listen( process.env.PORT || port ) \ No newline at end of file