Updated Website and Wrote ReadMe

README.md

@@ -1,89 +1,24 @@
-Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js  
-===
 
-Due: September 9th, by 11:59 AM.
+## Pirate Crew Generator
+This project is a Pirate Crew generator used for generating and keeping track of members in a pirate crew
+- You generate a crew by selcting the crew member you wish to add's rank from a drop down menu and entering their name and year of birth into repective feilds and pressing the submit button.
+- The current crew will is shown in a table on screen.
+- Any crew member can be modified by entering thier name into the name feild, entering thier new rank and/or year of birth and then pressing the modify button.
+- Any crew member can also be removed from the crew by entering their name into the name feild and pressing the delete button.
+- "Reset" and "Clear" buttons are also present under the crew table which, when pressed, will reset the crew back to the default list and clear the entire crew respectively
 
-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. `<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. Only one member needs to submit a pull request.
-
-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-brian-earl.glitch.me/
 
 ## Technical Achievements
-- **Tech Achievement 1**: Using a combination of...
-- **Tech Achievement 2**: ...
+- **Tech Achievement 1**: Rewrote the server using Express to handle the Post and Get requests 
+- **Tech Achievement 2**: Implemented Jquery in the client to handle Get requests and manipulate HTML elements
+- **Tech Achievement 3**: Used SQLite as a database to store the users data on the server
+- **Tech Achievement 4**: Generate a unique id for each entry based on the crew member's name  
 
 ### 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**: Changed the color scheme to a sepia tone color pallete well as making changes to the HTML elements such as adding borders in the table and changing the spacing between elements to make the whole website more readable, as seen in style.css
+- **Design Achievement 2**: Used the website https://www.bestcssbuttongenerator.com/ to generate css code for the buttons
+- **Design Achievement 3**: Used the website enjoycss.com to generate css code for the inputs
+- **Design Achievement 4**: Disallowed invalid actions such as trying to delete or modifying a crew memvers who are not in the table or adding a crew member that is already in the table by using alerts telling the user that their input is invalid
+- **Design Achievement 5**: Sort the table by the crew member's rank in the same way it is arranged in the drop down menu 

public/css/style.css

@@ -67,7 +67,7 @@ body {
 	top:1px;
 }
 
-input {
+input, select {
   display: inline-block;
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;

public/index.html

@@ -7,19 +7,33 @@
 
   </head>
   <body>
+    <font size = "6"><h1>Pirate Crew Generator</h1></font>
     <iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>
     <form id ="data" action="/data" method="POST" target="hiddenFrame">
-      <input type="text" id="model" name="model" placeholder="Model here">
-      <input type="number" id="year" name="year" placeholder="Year here">
-      <input type="number" id="mpg" name="mpg" placeholder="MPG here">
+       <select id = "rank" name="rank">
+        <option value="Captain">Captain</option>
+        <option value="First Mate">First Mate</option>
+        <option value="Sailing Master">Sailing Master</option>
+        <option value="Quartermaster">Quartermaster</option>
+         <option value="Boatswain">Boatswain</option>
+        <option value="Cook">Cook</option>
+         <option value="Doctor">Doctor</option>
+         <option value="Carpenter">Carpenter</option>
+        <option value="Powder Monkey">Powder Monkey</option>
+         <option value="Sailor">Sailor</option>
+         <option value="Cabin Boy">Cabin Boy</option>
+      </select> 
+      <input type="name" id="name" name="name" placeholder="Name Here">
+      <input type="number" id="year" name="year" placeholder="Year of birth here">
+      <input type="hidden" id="rankID" name="rankID" value="">
     </form>
     <button id="submit" class="inputbutton" onclick="submitNClear()" > Submit </button>
     <button id="modify" class="inputbutton" onclick="modify()" > Modify </button>
     <button id="delete" class="inputbutton" onclick="deleteData()" > Delete </button>
     <table id = "table">
-    <th>Model</th>
-    <th>Year</th> 
-    <th>MPG</th>
+    <th>Rank</th>
+    <th>Name</th> 
+    <th>Year Born</th>
     <th>Age</th>
     </table>
     <p><a href="/reset">Reset</a> | <a href="/clear">Clear</a></p>
@@ -28,28 +42,15 @@
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>
 
   <script>
-
-    function reset(){
-      console.log("Resetting table");
-      document.getElementById('resetForm').submit()
-      reloadData()
-    }
-
-    function clear(){
-      //<form id ="clearForm" action="/clear" method="POST" target="hiddenFrame"> <button id="clear" onclick="reloadData()"> Clear </button></form>
-      console.log("Clearing Table");
-      document.getElementById('clearForm').submit()
-      reloadData()
-    }
 
   function deleteData(){
-    if(document.querySelector('#model').value == ''){
-      alert("Enter the model you with to delete")
+    if(document.querySelector('#name').value == ''){
+      alert("Enter the member you with to delete")
       return false
     }
 
-      if(!checkIfIn(document.querySelector('#model').value)){
-        alert("That model is already not in the table")
+      if(!checkIfIn(document.querySelector('#name').value)){
+        alert("That member is already not in the table")
         return false
       }
       document.getElementById('data').action = '/delete'
@@ -61,17 +62,17 @@
   }
 
   function modify(){
-    if(document.querySelector('#model').value!= '' && document.querySelector( '#year').value !='' && document.querySelector( '#mpg').value != '') {
-      if(isNaN(document.querySelector( '#year').value) || isNaN(document.querySelector( '#mpg').value)){
-        alert("Year and MPG must be numbers")
+    if(document.querySelector('#name').value!= '' && document.querySelector( '#year').value !='') {
+      if(isNaN(document.querySelector( '#year').value)){
+        alert("Year must be numbers")
         return false
       }else if(document.querySelector( '#year').value > 2019){
-        alert("That year has not occured yet, sorry")
+        alert("Year must be before 2019")
         return false
       }
 
-        if(!checkIfIn(document.querySelector('#model').value)){
-        alert("You can only modify car models that are in the table")
+        if(!checkIfIn(document.querySelector('#name').value)){
+        alert("You can only modify crew members that are in the table")
         return false
       }
       document.getElementById('data').action = '/modify'
@@ -87,21 +88,26 @@
   }
 
   function submitNClear(){
-    console.log(document.querySelector('#model'))
-    if(document.querySelector('#model').value!= '' && document.querySelector( '#year').value !='' && document.querySelector( '#mpg').value != '') {
-      if(isNaN(document.querySelector( '#year').value) || isNaN(document.querySelector( '#mpg').value)){
-        alert("Year and MPG must be numbers")
+    if(document.querySelector('#name').value!= '' && document.querySelector( '#year').value !='') {
+      if(isNaN(document.querySelector( '#year').value) ){
+        alert("Year must be numbers")
         return false
-      } else if(document.querySelector( '#year').value > 2019){
-        alert("That year has not occured yet, sorry")
+      }else if(document.querySelector( '#year').value > 2019){
+        alert("Year must be before 2019")
         return false
       }
 
-      if(checkIfIn(document.querySelector('#model').value)){
-        alert("That model is already in the table")
+      if(checkIfIn(document.querySelector('#name').value)){
+        alert("That person is already in the table")
         return false
       }
 
+        var x = document.getElementById("rank").selectedIndex;
+        var y = document.getElementById("rank").options;
+
+      document.getElementById("rankID").value = y[x].index
+      console.log(document.getElementById("rankID").value)
+      console.log(document.getElementById('data'))
       document.getElementById('data').submit()
       document.getElementById('data').reset()
       $("#table_of_items tr").remove();
@@ -130,11 +136,11 @@
       document.getElementById("table").deleteRow(1)
   }
 
- function checkIfIn(model){
-   console.log(model)
+ function checkIfIn(name){
+   console.log(name)
     for(let i = 1; i<document.getElementById("table").rows.length;i++){
-      console.log(document.getElementById("table").rows[i].cells[0].innerText)
-      if(document.getElementById("table").rows[i].cells[0].innerText == model)
+      console.log(document.getElementById("table").rows[i].cells[1].innerText)
+      if(document.getElementById("table").rows[i].cells[1].innerText == name)
          return true
     }
       return false;

server.improved.js

@@ -17,9 +17,9 @@ express.use(bodyParser.json());
 express.use(Express.static('public'));
 
 const appdata = [
-  { 'model': 'toyota', 'year': 1999, 'mpg': 23 },
-  { 'model': 'honda', 'year': 2004, 'mpg': 30 },
-  { 'model': 'ford', 'year': 1987, 'mpg': 14} 
+  { 'rank': 'Boatswain', name: "Edgar", 'year': 1987, rankID: 4},
+  { 'rank': 'Sailor', name: "John John", 'year': 1999, rankID: 9},
+  { 'rank': 'Cabin Boy', name: "Big Eyes", 'year': 2004, rankID: 10}
 ]
 
 
@@ -37,17 +37,20 @@ var sequelize = new Sequelize('database', process.env.DB_USER, process.env.DB_PA
 sequelize.authenticate()
   .then(function(err) {
     dbSeq = sequelize.define('data', {
-      model: {
+      rank: {
         type: Sequelize.STRING
       },
-      year: {
+      name: {
         type: Sequelize.STRING
       },
-      mpg: {
+      year: {
         type: Sequelize.STRING
       },
       age: {
         type: Sequelize.STRING
+      },
+      rankID: {
+        type: Sequelize.INTEGER
       }
 
     });
@@ -74,9 +77,15 @@ express.get("/", function (request, response) {
 express.get("/data", function (request, response) {
   var dbSend = []
   dbSeq.findAll().then(function(data) {
-    data.forEach(function(car) {
-      dbSend.push([car.model, car.year, car.mpg, car.age])
+    data.forEach(function(member) {
+      dbSend.push([member.rank, member.name, member.year, member.age, member.rankID])
     })
+
+    dbSend.sort(function(a,b) {
+      console.log(a[4] - b[4])
+      return a[4] - b[4]
+    })
+
     console.log(dbSend)
     response.send(dbSend)
   })
@@ -134,35 +143,36 @@ const sendFile = function( response, filename ) {
 }
 
 const deleteEntry = function(newData){
-  console.log( newData.model + " is being destroyed" )
+  console.log( newData.name + " is being destroyed" )
 
-    var id = 0;
-    for(var i=0;i<newData.model.length;i++) {
-        id += (newData.model.charCodeAt(i) * i) + (newData.model.charCodeAt(i) + i);
-    }
-  id = parseInt(id, 16);
+  var id = getID(newData);
 
   dbSeq.destroy({where: {id: id}})
 
-    console.log('Successfully destroyed ' +id+ ' ' + newData.model + ' ' +newData.year + ' ' + newData.mpg +' from database');
+    console.log('Successfully destroyed ' +id+ ' ' + newData.rank + ' ' +newData.name + ' ' + newData.year +' from database');
 }
 
 const addData = function(newData){
+  console.log(newData)
+  console.log( newData.rank + ' '+ newData.name + " has been received " + newData.rankID )
 
-  console.log( newData.model + " has been received" )
-
-    var id = 0;
-    for(var i=0;i<newData.model.length;i++) {
-        id += (newData.model.charCodeAt(i) * i) + (newData.model.charCodeAt(i) + i);
-    }
-  id = parseInt(id, 16);
+  var id = getID(newData);
   var age = (2019 - parseInt(newData.year))
   var ageString = age + " Year(s) Old"
-  dbSeq.create({ id:id, model: newData.model, year: newData.year, mpg: newData.mpg, age: ageString}); 
-  console.log('Successfully added ' +id+ ' ' + newData.model + ' ' +newData.year + ' ' + newData.mpg +' '+ageString+ ' to database');
+  dbSeq.create({ id:id, rank: newData.rank, name: newData.name, year: newData.year, age: ageString, rankID: parseInt(newData.rankID)}); 
+  console.log('Successfully added ' +id+ ' ' + newData.rank + ' ' +newData.name + ' ' + newData.year +' '+ageString+' ' +newData.rankID+' to database');
 }
 
+ function getID(newData){
+  var id = 0;
+  for(var i=0;i<newData.name.length;i++) {
+        id += (newData.name.charCodeAt(i) + i) + (newData.name.charCodeAt(i) * i);
+    }
+  id = parseInt(id, 16);
+   return id
+ }
 
 var listener = express.listen(process.env.PORT, function () {
   console.log('Listening to port ' + listener.address().port);
 });
+