a2-ncotto-NicoleCotto

README.md

@@ -1,89 +1,18 @@
 Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js  
 ===
 
-Due: September 9th, by 11:59 AM.
+Due: September 16th, by 11:59 PM.
 
-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. 
+Nicole Cotto
+https://glitch.com/~a2-nicolecotto
 
-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.
+## Your Web Application Title: To-Do List
+I attempted to create an application that a user can create a to-do list. I was able to collect 3 points of data and have them show up on the console. I did struggle on making them a result on the webpage. 
 
-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. `<div>`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
+I was able to use CSS to design the application. I have deisgned all the buttons and color coded tehm to be able to tell them apart. I created borders on my table and set a different font for my header.
 
 ## Technical Achievements
-- **Tech Achievement 1**: Using a combination of...
-- **Tech Achievement 2**: ...
+- **Tech Achievement 1**: All of the information is currently on one webpage
 
 ### 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**: 

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"
   },

public/css/style.css

@@ -1 +1,56 @@
-/*Style your own assignment! This is fun! */
+/*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;
+}

public/index.html

@@ -1,41 +1,45 @@
-<!doctype html>
+<!DOCTYPE html>
+
 <html lang="en">
   <head>
+    <link rel="stylesheet" href="css/style.css" />
+    <script type="text/javascript" src="js/scripts.js"></script>
+
     <title>CS4241 Assignment 2</title>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
   </head>
   <body>
+    <h1>
+      To-Do List
+    </h1>
     <form action="">
-      <input type='text' id='yourname' value="your name here">
-      <button>submit</button>
-    </form>
-  </body>
-  <script>
+      <label for="ftask">Task To Do:</label><br />
+      <input type="text" id="task" /><br />
 
-  const submit = function( e ) {
-    // prevent default form action from being carried out
-    e.preventDefault()
+      <label for="fdate">Date to Complete:</label><br />
+      <input type="date" id="date" /><br />
 
-    const input = document.querySelector( '#yourname' ),
-          json = { yourname: input.value },
-          body = JSON.stringify( json )
-
-    fetch( '/submit', {
-      method:'POST',
-      body 
-    })
-    .then( function( response ) {
-      // do something with the reponse 
-      console.log( response )
-    })
+      <label for="ftime">Time to Start:</label><br />
+      <input type="time" id="time" /><br />
+      <button id="submit">Submit</button>
+    </form>
 
-    return false
-  }
+    <table style="width:100%">
+      <caption>
+        To Do List
+      </caption>
+      <tr>
+        <th>Task</th>
+        <th>Date</th>
+        <th>Time</th>
+      </tr>
+      <script>dataTable();</script>
+    </table>
 
-  window.onload = function() {
-    const button = document.querySelector( 'button' )
-    button.onclick = submit
-  }
+    <button id="results">Results</button><br />
+    <button id="add">Add</button><br />
+    <button id="edit">Edit</button><br />
+    <button id="delete">Delete</button>
+  </body>
 
-  </script>
 </html>

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!")
+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("<tr>");
+      document.write("<td>"+JSON.stringify(data[i])+"</td>");
+      document.write("<td>"+data[i+1]+"</td>");
+      document.write("<td>"+data[i+2]+"</td>");
+      console.log(i);
+      document.write("</tr>");
+    }
+};
+
+window.onload = function() {
+  const button = document.querySelector("button");
+  button.onclick = submit;
+};