From bed4352201d5f1a98db83f0747ec09aab4c43dbb Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Thu, 31 Aug 2023 16:07:36 -0400
Subject: [PATCH 01/29] Added gitignore and cleared readme

---
 .gitignore |  1 +
 README.md  | 93 ++----------------------------------------------------
 2 files changed, 3 insertions(+), 91 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..e43b0f98
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.md b/README.md
index 493995c1..c5ef197e 100644
--- a/README.md
+++ b/README.md
@@ -1,96 +1,7 @@
-Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js  
-===
 
-Due: September 11th, by 11:59 AM.
+# a2-SmeeBoi: 
+Sameer Desai glitchURL
 
-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 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 `<table>` tag for this, but `<ul>` or `<ol>` could also work and might be simpler to work with. Alternatively, you can create a single-page app (see Technical Acheivements) but this is not a requirement.
-- All pages should [validate](https://validator.w3.org)
-- If your app contains multple pages, they should all be accessible from the homepage (index.html)
-
-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 styling of the primary visual elements in the application:
-    - Use of either a CSS grid or flexbox for layout
-    - Rules defining fonts for all text used; no default fonts! Be sure to use a web safe font or a font from a web service like [Google Fonts](http://fonts.google.com/)
-
-- 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, and also creates the required `Derived Fields` in your data. 
-A starting point is provided in this repository.
-
-Deliverables
----
-
-Do the following to complete this assignment and acheive a base grade of 85%:
-
-1. Fork the starting project code (make sure to fork the 2023 repo!). 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-yourGithubUsername` so we can find it.
-6. Modify the README to the specifications below, and delete all of the instructions originally found in this README.
-7. Create and submit a Pull Request to the original repo. Label the pull request as follows: a2-gitusername-firstname-lastname
-
-Acheivements
----
-
-Below are suggested technical and design achievements. You can use these to help boost your grade up to an A and customize the assignment to your personal interests. These are recommended acheivements, but feel free to create/implement your own... just make sure you thoroughly describe what you did in your README and why it was challenging. ALL ACHIEVEMENTS MUST BE DESCRIBED IN YOUR README IN ORDER TO GET CREDIT FOR THEM. Remember, the highest grade you can get on any individual assignment is a 100%.
-
-*Technical*
-- (5 points) Create a single-page app that both provides a form for users to submit data and always shows the current state of the server-side data. To put it another way, when the user submits data, the server should respond sending back the updated data (including the derived field calculated on the server) and the client should then update its data display.
-
-- (5 points) In addition to a form enabling adding and deleting data on the server, also add the ability to modify existing data.
-
-*Design/UX*
-- (5 points per person, with a max of 10 points) Test your user interface with other students in the class. Define a specific task for them to complete (ideally something short that takes <10 minutes), and then use the [think-aloud protocol](https://en.wikipedia.org/wiki/Think_aloud_protocol) to obtain feedback on your design (talk-aloud is also fine). Important considerations when designing your study:
-
-1. Make sure you start the study by clearly stating the task that you expect your user to accomplish.
-2. You shouldn't provide any verbal instructions on how to use your interface / accomplish the task you give them. Make sure that your interface is clear enough that users can figure it out without any instruction, or provide text instructions from within the interface itself. 
-3. If users get stuck to the point where they give up, you can then provde instruction so that the study can continue, but make sure to discuss this in your README. You won't lose any points for this... all feedback is good feedback!
-
-You'll need to use sometype of collaborative software that will enable you both to see the test subject's screen and listen to their voice as they describe their thoughts, or conduct the studies in person. After completing each study, briefly (one to two sentences for each question) address the following in your README:
-
-1. Provide the last name of each student you conduct the evaluation with.
-2. What problems did the user have with your design?
-3. What comments did they make that surprised you?
-4. What would you change about the interface based on their feedback?
-
-*You do not need to actually make changes based on their feedback*. This acheivement is designed to help gain experience testing user interfaces. If you run two user studies, you should answer two sets of questions. 
-
-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. Be sure to include the CSS positioning technique you used, and any required instructions to use your application.
 
 ## Technical Achievements

From f684c51c090499de64766a7a73f22429452110bf Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Thu, 31 Aug 2023 17:12:34 -0400
Subject: [PATCH 02/29] changed title in html and installed node modules for
 mime to work. added node_modules and package-lock.json into gitignore

---
 .gitignore        | 3 +++
 public/index.html | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index e43b0f98..9bbf1f77 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,4 @@
 .DS_Store
+node_modules
+package-lock.json
+
diff --git a/public/index.html b/public/index.html
index b6de0443..56b0ee2d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <title>CS4241 Assignment 2</title>
+    <title>a2-SmeeBoi</title>
     <meta charset="utf-8">
     <script src="js/main.js"></script>
     <link rel="stylesheet" href="css/main.css">

From 534019043a44e9a7587e76c26bacafcd9d9857bd Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Wed, 6 Sep 2023 13:43:27 -0400
Subject: [PATCH 03/29] thinking about doing audio visualizer for assignment

---
 public/index.html  | 54 +++++++++++++++++++++++++++++++++++++++++-----
 server.improved.js | 31 +++++++++++++++-----------
 2 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/public/index.html b/public/index.html
index 56b0ee2d..b27c73c3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,16 +3,60 @@
   <head>
     <title>a2-SmeeBoi</title>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <script src="js/main.js"></script>
     <link rel="stylesheet" href="css/main.css">
     
     <!-- get rid of favicon error -->
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
   </head>
+
+
   <body>
-    <form>
-      <input type="text" id="yourname" value="your name here">
-      <button>submit</button>
-    </form>
-  </body>
+    <h1>Audio Visualizer Form</h1>
+
+    <form action="#" method="POST" enctype="multipart/form-data">
+      <label for="name">Username:</label>
+      <input type="text" id="name" name="name" required><br><br>
+
+      <label for="audio">Audio File (Max 30 seconds):</label>
+      <input type="file" id="audio" name="audio" accept=".mp3, .wav" required><br><br>
+
+      <label for="color">Color:</label>
+      <select id="color" name="color" required>
+          <option value="white">White</option>
+          <option value="blue">Blue</option>
+          <option value="green">Green</option>
+      </select><br><br>
+
+      <label for="style">Style:</label>
+      <input type="radio" id="lines" name="style" value="lines" required>
+      <label for="lines">Lines</label>
+      <input type="radio" id="dots" name="style" value="dots" required>
+      <label for="dots">Dots</label><br><br>
+
+      <input type="submit" value="Submit">
+  </form>
+
+  <p> When form is submitted, hide form and visualizer canvas takes its place. </p>
+
+  <p> AUDIO VISUALIZER OOOO </p>
+
+  <p> User can scroll down while it is playing to view the data section</p>
+  
+  <p> Audio Visualizer data</p>
+  <ul>
+
+    <li>Username: </li>
+    <li>File Name: </li>
+    <li>File Duration: </li>
+    <li>File Size: </li>
+    <li>Color Choice: </li>
+    <li>Style Choice: </li>
+
+
+  </ul>
+
+</body>
 </html>
diff --git a/server.improved.js b/server.improved.js
index 9ac27fb8..5ca21697 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -1,27 +1,32 @@
-const http = require( 'http' ),
-      fs   = require( 'fs' ),
-      // IMPORTANT: you must run `npm install` in the directory for this assignment
-      // to install the mime library if you're testing this on your local machine.
-      // However, Glitch will install it automatically by looking in your package.json
-      // file.
-      mime = require( 'mime' ),
-      dir  = 'public/',
-      port = 3000
-
+"use strict"; // Use strict mode for better practices
+
+// Import necessary modules
+const http = require( 'http' ), // to create an http server
+      fs   = require( 'fs' ), // work with files and directories on the server's file system
+      mime = require( 'mime' ), // determine the MIME type of a file, it is a library not included in node.js which required npm install on local machine
+      dir  = 'public/', // directory where server files are located
+      port = 3000 // port number the server will listen for requests on
+
+// Data which is hard-coded into the server (no database yet)
+// Client can access this data from the server with GET request
+// Or they can add to this data on the server with a POST request      
 const appdata = [
   { 'model': 'toyota', 'year': 1999, 'mpg': 23 },
   { 'model': 'honda', 'year': 2004, 'mpg': 30 },
   { 'model': 'ford', 'year': 1987, 'mpg': 14} 
 ]
 
+// Create HTTP Server which handles both GET and POST requests
+// Every time a request is made to the server, this callback function is called
 const server = http.createServer( function( request,response ) {
-  if( request.method === 'GET' ) {
+  if( request.method === 'GET' ) { // GET - ask for content from server
     handleGet( request, response )    
-  }else if( request.method === 'POST' ){
+  }else if( request.method === 'POST' ){ // POST - send content to server
     handlePost( request, response ) 
   }
 })
 
+// GET request handler
 const handleGet = function( request, response ) {
   const filename = dir + request.url.slice( 1 ) 
 
@@ -32,6 +37,7 @@ const handleGet = function( request, response ) {
   }
 }
 
+// POST request handler
 const handlePost = function( request, response ) {
   let dataString = ''
 
@@ -71,4 +77,5 @@ const sendFile = function( response, filename ) {
    })
 }
 
+// Tell server Listen for requests on HTTP port 3000
 server.listen( process.env.PORT || port )

From a74a8c7ec5bc236acc8f54c11c9f219ab0402ef0 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Thu, 7 Sep 2023 11:43:22 -0400
Subject: [PATCH 04/29] updated favicon error code from discord

---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index b27c73c3..9bbdff01 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="css/main.css">
     
     <!-- get rid of favicon error -->
-    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
   </head>
 
 

From bc55ab7a8312be9ff594c5fdc5f8f56ae2edc2e0 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Sun, 10 Sep 2023 18:37:40 -0400
Subject: [PATCH 05/29] delete button added inside li and works

---
 public/index.html  | 87 +++++++++++++++++++---------------------------
 public/js/main.js  | 87 ++++++++++++++++++++++++++++++++++++++++------
 server.improved.js | 60 +++++++++++++++-----------------
 3 files changed, 140 insertions(+), 94 deletions(-)

diff --git a/public/index.html b/public/index.html
index 9bbdff01..46fb6469 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,62 +1,45 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <title>a2-SmeeBoi</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script src="js/main.js"></script>
-    <link rel="stylesheet" href="css/main.css">
-    
-    <!-- get rid of favicon error -->
-    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
-  </head>
-
-
-  <body>
-    <h1>Audio Visualizer Form</h1>
-
-    <form action="#" method="POST" enctype="multipart/form-data">
-      <label for="name">Username:</label>
-      <input type="text" id="name" name="name" required><br><br>
-
-      <label for="audio">Audio File (Max 30 seconds):</label>
-      <input type="file" id="audio" name="audio" accept=".mp3, .wav" required><br><br>
-
-      <label for="color">Color:</label>
-      <select id="color" name="color" required>
-          <option value="white">White</option>
-          <option value="blue">Blue</option>
-          <option value="green">Green</option>
-      </select><br><br>
-
-      <label for="style">Style:</label>
-      <input type="radio" id="lines" name="style" value="lines" required>
-      <label for="lines">Lines</label>
-      <input type="radio" id="dots" name="style" value="dots" required>
-      <label for="dots">Dots</label><br><br>
-
-      <input type="submit" value="Submit">
-  </form>
 
-  <p> When form is submitted, hide form and visualizer canvas takes its place. </p>
+<head>
+  <title>a2-SmeeBoi</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <p> AUDIO VISUALIZER OOOO </p>
+  <script src="js/main.js"></script>
+  <link rel="stylesheet" href="css/main.css">
+
+  <!-- get rid of favicon error -->
+  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+</head>
 
-  <p> User can scroll down while it is playing to view the data section</p>
-  
-  <p> Audio Visualizer data</p>
-  <ul>
 
-    <li>Username: </li>
-    <li>File Name: </li>
-    <li>File Duration: </li>
-    <li>File Size: </li>
-    <li>Color Choice: </li>
-    <li>Style Choice: </li>
+<body>
+  <h1>Spacebar Game</h1>
 
+  <form>
+    <label for="yourname">Your name:</label>
+    <input type="text" id="yourname">
 
-  </ul>
+    <label for="color">Color:</label>
+    <input type="text" id="color">
+<!-- 
+    <label for="colorPick">Choose a color:</label>
+    <select id="colorPick" name="colorPick">
+      <option value="red">Red</option>
+      <option value="white">White</option>
+      <option value="blue">Blue</option>
+    </select>
+
+    <label for="image">Upload an image:</label>
+    <input type="file" id="image" name="image" accept="image/png, image/jpeg"> -->
+
+    <button id="playbutton">PLAY</button>
+  </form>
+  
+  <p> Player Results</p>
+  
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index a569258f..ee763167 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,5 +1,5 @@
 // FRONT-END (CLIENT) JAVASCRIPT HERE
-
+let list = null;
 const submit = async function( event ) {
   // stop form submission from trying to load
   // a new .html page for displaying results...
@@ -7,21 +7,88 @@ const submit = async function( event ) {
   // remains to this day
   event.preventDefault()
   
-  const input = document.querySelector( '#yourname' ),
-        json = { yourname: input.value },
-        body = JSON.stringify( json )
+  const name = document.querySelector( '#yourname' ), // get form input element with id=yourname
+        color = document.querySelector( '#color' )
+        
+        json = {}  // create json object
+        json.name = name.value // add name
+        json.color = color.value // add color
 
-  const response = await fetch( '/submit', {
+        console.log( 'printing json object:')
+        console.log( json) // print json object to console
+        clientData = JSON.stringify( json ) // create json string from json object
+  
+  const response = await fetch( '/submit', { // send client data to server to /submit path??
     method:'POST',
-    body 
+    body: clientData // set body of request to clientData json string
   })
 
-  const text = await response.text()
+  let data = await response.json() // get json string from server response
 
-  console.log( 'text:', text )
+  // only create 1 list element the first time submit is clicked
+  // then just add list items to the list
+  
+
+if (document.getElementById('playerList') == null) {
+  list = document.createElement('ul') // create unordered list element in html
+  list.id = 'playerList'
+  populateList(data)
+} else {
+  document.getElementById('playerList').innerHTML = ''
+  populateList(data)
+}
+
+function populateList(data) {
+  data.forEach( d => { // for each element in json string, create a list item and append to list
+    
+  // look through list and if name already exists, don't add new item
+  if (list.innerHTML.includes(d.name)) {
+    console.log('name already exists')
+    return
+  }
+
+    const item = document.createElement('li')
+
+    // add edit button
+    // const editButton = document.createElement('button')
+    // editButton.innerHTML = 'edit'
+
+    // add delete button
+    const deleteButton = document.createElement('button')
+    deleteButton.innerHTML = 'delete'
+    deleteButton.id = 'deleteButton'
+
+    // add delete button inside list item
+    item.innerHTML = `<b>Name</b> : ${d.name}, <b>Color</b>: ${d.color}`
+    item.id = 'player'
+
+    item.appendChild(deleteButton)
+
+    list.appendChild( item )
+    // add edit and delete buttons after list item
+    // list.appendChild( editButton )
+  })
+}
+  document.body.appendChild( list )
+
+  
 }
 
 window.onload = function() {
-   const button = document.querySelector("button");
-  button.onclick = submit;
+  const playbutton = document.querySelector('#playbutton');
+  playbutton.onclick = submit;
+
+  // if delete button is clicked, delete list item
+  document.addEventListener('click', function(e) {
+    if (e.target && e.target.id == 'deleteButton') {
+      console.log('delete button clicked');
+      let listItem = e.target.closest('#player');
+      console.log(`listItem: ${listItem}`);
+
+      if (listItem) {
+        listItem.remove();
+      }
+    }
+  });
+  
 }
\ No newline at end of file
diff --git a/server.improved.js b/server.improved.js
index 5ca21697..9dfd9db5 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -1,60 +1,57 @@
-"use strict"; // Use strict mode for better practices
-
-// Import necessary modules
-const http = require( 'http' ), // to create an http server
-      fs   = require( 'fs' ), // work with files and directories on the server's file system
-      mime = require( 'mime' ), // determine the MIME type of a file, it is a library not included in node.js which required npm install on local machine
-      dir  = 'public/', // directory where server files are located
-      port = 3000 // port number the server will listen for requests on
-
-// Data which is hard-coded into the server (no database yet)
-// Client can access this data from the server with GET request
-// Or they can add to this data on the server with a POST request      
-const appdata = [
-  { 'model': 'toyota', 'year': 1999, 'mpg': 23 },
-  { 'model': 'honda', 'year': 2004, 'mpg': 30 },
-  { 'model': 'ford', 'year': 1987, 'mpg': 14} 
+const http = require( 'http' ), // http server core module
+      fs   = require( 'fs' ), // needed for loading static files
+      // IMPORTANT: you must run `npm install` in the directory for this assignment
+      // to install the mime library if you're testing this on your local machine.
+      // However, Glitch will install it automatically by looking in your package.json
+      // file.
+      mime = require( 'mime' ), // mime to determine file type from file name extension
+      dir  = 'public/', // directory where static files are stored
+      port = 3000 // 3000 is the port where the server is listening
+
+// appdata is the test data that will be sent to the client
+let appdata = [
+ {name: 'serverDefault', color: 'red'}
 ]
 
-// Create HTTP Server which handles both GET and POST requests
-// Every time a request is made to the server, this callback function is called
+// Create http server
 const server = http.createServer( function( request,response ) {
-  if( request.method === 'GET' ) { // GET - ask for content from server
+  if( request.method === 'GET' ) { // client requests a resource
     handleGet( request, response )    
-  }else if( request.method === 'POST' ){ // POST - send content to server
+  }else if( request.method === 'POST' ){ // client is adding data to server
     handlePost( request, response ) 
   }
 })
 
-// GET request handler
+// Client requests a resource
 const handleGet = function( request, response ) {
-  const filename = dir + request.url.slice( 1 ) 
+  const filename = dir + request.url.slice( 1 )  // remove leading '/' from URL
 
   if( request.url === '/' ) {
-    sendFile( response, 'public/index.html' )
+    sendFile( response, 'public/index.html' ) // send index.html to client
   }else{
-    sendFile( response, filename )
+    sendFile( response, filename ) // send requested file to client
   }
 }
 
-// POST request handler
+// Client is adding data to server
 const handlePost = function( request, response ) {
   let dataString = ''
 
-  request.on( 'data', function( data ) {
+  request.on( 'data', function( data ) { // add data to dataString as it comes in
       dataString += data 
   })
 
-  request.on( 'end', function() {
-    console.log( JSON.parse( dataString ) )
-
+  request.on( 'end', function() { // end when client is done sending data
+    console.log( JSON.parse( dataString ))
+    appdata.push(JSON.parse(dataString))
     // ... do something with the data here!!!
 
-    response.writeHead( 200, "OK", {'Content-Type': 'text/plain' })
-    response.end('test')
+    response.writeHead( 200, "OK", {'Content-Type': 'text/json' }) // send response to client
+    response.end( JSON.stringify( appdata ) )
   })
 }
 
+// Send file to client (called by handleGet when client requests a resource)
 const sendFile = function( response, filename ) {
    const type = mime.getType( filename ) 
 
@@ -77,5 +74,4 @@ const sendFile = function( response, filename ) {
    })
 }
 
-// Tell server Listen for requests on HTTP port 3000
 server.listen( process.env.PORT || port )

From 6c5de8b5e5a7c8a8562622ddf39da8f1e4992caa Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Mon, 11 Sep 2023 11:03:22 -0400
Subject: [PATCH 06/29] added to readme. cringe

---
 README.md          |  2 +-
 package.json       |  6 +++---
 public/js/main.js  | 29 +++++++++++++++++++++++++----
 server.improved.js | 28 ++++++++++++++++++++++++++--
 4 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index c5ef197e..c565c64a 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 # a2-SmeeBoi: 
 Sameer Desai glitchURL
 
-Include a very brief summary of your project here. Be sure to include the CSS positioning technique you used, and any required instructions to use your application.
+Text form with name and color inputs. Sends json to server. Can delete players with delete button.
 
 ## Technical Achievements
 - **Tech Achievement 1**: Using a combination of...
diff --git a/package.json b/package.json
index 988f135f..0e9515fa 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "",
+  "name": "a2-SmeeBoi",
   "version": "",
-  "description": "",
-  "author": "",
+  "description": "Spacebar Game",
+  "author": "Sameer Desai",
   "scripts": {
     "start": "node server.improved.js"
   },
diff --git a/public/js/main.js b/public/js/main.js
index ee763167..4180a516 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -42,6 +42,7 @@ function populateList(data) {
   data.forEach( d => { // for each element in json string, create a list item and append to list
     
   // look through list and if name already exists, don't add new item
+  // check if high score is higher than existing high score
   if (list.innerHTML.includes(d.name)) {
     console.log('name already exists')
     return
@@ -50,18 +51,21 @@ function populateList(data) {
     const item = document.createElement('li')
 
     // add edit button
-    // const editButton = document.createElement('button')
-    // editButton.innerHTML = 'edit'
+    const editButton = document.createElement('button')
+    editButton.innerHTML = 'edit'
 
     // add delete button
     const deleteButton = document.createElement('button')
     deleteButton.innerHTML = 'delete'
     deleteButton.id = 'deleteButton'
 
-    // add delete button inside list item
-    item.innerHTML = `<b>Name</b> : ${d.name}, <b>Color</b>: ${d.color}`
+    // Data to be displayed in list item
+    item.innerHTML = `<b>Name</b> : ${d.name}, <b>Color</b>: ${d.color}, <b>High Score: </b> ${d.highscore}`
+    // add high sch
     item.id = 'player'
 
+    // Add buttons in li item
+    item.appendChild(editButton)
     item.appendChild(deleteButton)
 
     list.appendChild( item )
@@ -78,6 +82,8 @@ window.onload = function() {
   const playbutton = document.querySelector('#playbutton');
   playbutton.onclick = submit;
 
+
+
   // if delete button is clicked, delete list item
   document.addEventListener('click', function(e) {
     if (e.target && e.target.id == 'deleteButton') {
@@ -88,7 +94,22 @@ window.onload = function() {
       if (listItem) {
         listItem.remove();
       }
+
+      deletePlayer(listItem.name);
     }
   });
+
+  // if edit button is clicked
+  
   
+}
+
+
+function deletePlayer(playerName){
+   // delete from server
+   console.log(`Request Server to delete player: ${playerName}`)
+   const response = fetch( '/delete', {
+    method:'DELETE',
+    body: playerName
+  })
 }
\ No newline at end of file
diff --git a/server.improved.js b/server.improved.js
index 9dfd9db5..3e1163d7 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -10,7 +10,7 @@ const http = require( 'http' ), // http server core module
 
 // appdata is the test data that will be sent to the client
 let appdata = [
- {name: 'serverDefault', color: 'red'}
+ {name: 'defaultplayer', color: 'red', score: 0, rank: 0}
 ]
 
 // Create http server
@@ -19,6 +19,10 @@ const server = http.createServer( function( request,response ) {
     handleGet( request, response )    
   }else if( request.method === 'POST' ){ // client is adding data to server
     handlePost( request, response ) 
+  }else if( request.method === 'DELETE' ){ // client is deleting data
+    handleDelete( request, response )
+  }else if( request.method === 'PUT' ){ // client is updating data
+    handlePut( request, response )
   }
 })
 
@@ -42,7 +46,12 @@ const handlePost = function( request, response ) {
   })
 
   request.on( 'end', function() { // end when client is done sending data
-    console.log( JSON.parse( dataString ))
+    let clientData = JSON.parse( dataString ) // parse dataString into JSON object
+    console.log( clientData)
+
+    clientData.highscore
+
+    let finalData = { }// create new object with data from client
     appdata.push(JSON.parse(dataString))
     // ... do something with the data here!!!
 
@@ -51,6 +60,21 @@ const handlePost = function( request, response ) {
   })
 }
 
+// Client is deleting data from server
+const handleDelete = function( request, response ){
+  // request is playerName string from client to delete
+  // delete that player from appdata
+  // send appdata back to client
+  let playerName = request
+  if (appdata.name === playerName) {
+    // delete player entry in appdata
+    delete appdata.name
+    
+  }
+}
+
+
+
 // Send file to client (called by handleGet when client requests a resource)
 const sendFile = function( response, filename ) {
    const type = mime.getType( filename ) 

From 1f3f5153699d0cec78823e061b55ad98f1a55f97 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Mon, 11 Sep 2023 11:06:07 -0400
Subject: [PATCH 07/29] added to readme

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c565c64a..42d86d8d 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,10 @@
 # a2-SmeeBoi: 
 Sameer Desai glitchURL
 
-Text form with name and color inputs. Sends json to server. Can delete players with delete button.
+Text form with name and color inputs. Sends json to server. Can delete players with delete button. Checks player name so cannot add duplicate player with same name.
 
 ## Technical Achievements
-- **Tech Achievement 1**: Using a combination of...
+- **Tech Achievement 1**: none
 
 ### Design/Evaluation Achievements
-- **Design Achievement 1**: 
+- **Design Achievement 1**: none

From e161412b9acab4cd49cb2e0afe180dcdf1a9ddb2 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Mon, 11 Sep 2023 11:07:25 -0400
Subject: [PATCH 08/29] edit

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 42d86d8d..969d09f3 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 
 # a2-SmeeBoi: 
-Sameer Desai glitchURL
+Sameer Desai 
 
 Text form with name and color inputs. Sends json to server. Can delete players with delete button. Checks player name so cannot add duplicate player with same name.
 

From a7e1c04d8e50d3b25a0feb93b2e6e90271484215 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Mon, 11 Sep 2023 11:51:57 -0400
Subject: [PATCH 09/29] add css. functionality still nothing. cringe

---
 README.md           |  4 +++
 public/css/main.css | 72 +++++++++++++++++++++++++++++++++++++++++++--
 public/index.html   | 28 ++++++++----------
 3 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 969d09f3..f53cf2df 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,12 @@ Sameer Desai
 
 Text form with name and color inputs. Sends json to server. Can delete players with delete button. Checks player name so cannot add duplicate player with same name.
 
+Used Jost Google Font
+
+
 ## Technical Achievements
 - **Tech Achievement 1**: none
 
 ### Design/Evaluation Achievements
 - **Design Achievement 1**: none
+
diff --git a/public/css/main.css b/public/css/main.css
index 7cf6207b..8cbf03f9 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,4 +1,70 @@
+*{
+  margin: 0;
+  padding: 0;
+  font-family: 'Josefin Sans', sans-serif;
+font-family: 'Jost', sans-serif;
+}
+
 body {
-  background:black;
-  color:white;
-}
\ No newline at end of file
+  background:white;
+  color:black;
+font-size: 3rem;
+}
+
+.container {
+  min-height: 100vh;
+  min-width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.input-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+
+h1.vert-move {
+  -webkit-animation: mover 1.0s infinite  alternate;
+  animation: mover 0.8s infinite  alternate;
+}
+
+@keyframes mover {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(-8px); }
+}
+
+input{
+width: 100%;
+height: 80%;
+}
+
+
+/* CSS */
+.playbutton {
+  margin-top: 20px;
+  align-items: center;
+  background-color: white;
+  border-radius: 12px;
+  cursor: pointer;
+  font-size: 1.2rem;
+  outline: none;
+  padding: 0.5rem 0.5rem;
+  text-align: center;
+  text-decoration: none;
+  transition: box-shadow .2s,-webkit-box-shadow .2s;
+  white-space: nowrap;
+  border: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.playbutton:hover {
+  box-shadow: #121212 0 0 0 3px, transparent 0 0 0 0;
+}
diff --git a/public/index.html b/public/index.html
index 46fb6469..93386012 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,33 +11,29 @@
 
   <!-- get rid of favicon error -->
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Jost&display=swap" rel="stylesheet">
 </head>
 
 
 <body>
-  <h1>Spacebar Game</h1>
+  <div class="container">
+  <h1 class ="vert-move">Spacebar Game</h1>
 
-  <form>
-    <label for="yourname">Your name:</label>
+<div class="input-container">
+    <label for="yourname">Player name:</label>
     <input type="text" id="yourname">
 
     <label for="color">Color:</label>
     <input type="text" id="color">
-<!-- 
-    <label for="colorPick">Choose a color:</label>
-    <select id="colorPick" name="colorPick">
-      <option value="red">Red</option>
-      <option value="white">White</option>
-      <option value="blue">Blue</option>
-    </select>
-
-    <label for="image">Upload an image:</label>
-    <input type="file" id="image" name="image" accept="image/png, image/jpeg"> -->
-
-    <button id="playbutton">PLAY</button>
-  </form>
+  </div>
+
+    <button class="playbutton" id="playbutton">Play</button>
   
   <p> Player Results</p>
+</div>
   
 
 </body>

From a4bb45bd76328e75659133ef2452ef620490bc79 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Mon, 11 Sep 2023 11:53:18 -0400
Subject: [PATCH 10/29] change readme

---
 README.md           | 7 +++++--
 public/css/main.css | 1 -
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index f53cf2df..a0a64ad9 100644
--- a/README.md
+++ b/README.md
@@ -4,12 +4,15 @@ Sameer Desai
 
 Text form with name and color inputs. Sends json to server. Can delete players with delete button. Checks player name so cannot add duplicate player with same name.
 
-Used Jost Google Font
+Need to scroll down to see results. not enough time to fix
 
 
 ## Technical Achievements
 - **Tech Achievement 1**: none
 
 ### Design/Evaluation Achievements
-- **Design Achievement 1**: none
+- **Design Achievement 1**:
+Used Jost Google Font
+CSS animate header to move up and down
+Button outline on hover
 
diff --git a/public/css/main.css b/public/css/main.css
index 8cbf03f9..0ec6f6e7 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -45,7 +45,6 @@ height: 80%;
 }
 
 
-/* CSS */
 .playbutton {
   margin-top: 20px;
   align-items: center;

From 605e6b4884e51dc3b96c6ef10b52dc726a6c93b5 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Mon, 11 Sep 2023 11:53:43 -0400
Subject: [PATCH 11/29] readme

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a0a64ad9..870934f7 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ Need to scroll down to see results. not enough time to fix
 
 ### Design/Evaluation Achievements
 - **Design Achievement 1**:
-Used Jost Google Font
-CSS animate header to move up and down
+Used Jost Google Font,
+CSS animate header to move up and down,
 Button outline on hover
 

From 721fade8940d3c41031c2fbcd3e1f1c7f738a3ae Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Mon, 11 Sep 2023 11:55:27 -0400
Subject: [PATCH 12/29] add glitch

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 870934f7..37ba5051 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 
 # a2-SmeeBoi: 
 Sameer Desai 
+Glitch: https://a2-smeeboi.glitch.me
 
 Text form with name and color inputs. Sends json to server. Can delete players with delete button. Checks player name so cannot add duplicate player with same name.
 

From 88ce2de61a5539851828087e6b83fee7618d5ccc Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Mon, 11 Sep 2023 23:30:45 -0400
Subject: [PATCH 13/29] client, server behavior works and now server adds rank
 derived field and orders players by rank

---
 public/index.html  |   2 +-
 public/js/main.js  | 160 ++++++++++++++++++++++--------------------
 server.improved.js | 171 ++++++++++++++++++++++++++++-----------------
 3 files changed, 192 insertions(+), 141 deletions(-)

diff --git a/public/index.html b/public/index.html
index 93386012..b4e50e4a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <script src="js/main.js"></script>
-  <link rel="stylesheet" href="css/main.css">
+  <!-- <link rel="stylesheet" href="css/main.css"> -->
 
   <!-- get rid of favicon error -->
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
diff --git a/public/js/main.js b/public/js/main.js
index 4180a516..f3e3f0f3 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,115 +1,123 @@
 // FRONT-END (CLIENT) JAVASCRIPT HERE
 let list = null;
-const submit = async function( event ) {
+const submit = async function (event) {
   // stop form submission from trying to load
   // a new .html page for displaying results...
   // this was the original browser behavior and still
   // remains to this day
   event.preventDefault()
-  
-  const name = document.querySelector( '#yourname' ), // get form input element with id=yourname
-        color = document.querySelector( '#color' )
-        
-        json = {}  // create json object
-        json.name = name.value // add name
-        json.color = color.value // add color
-
-        console.log( 'printing json object:')
-        console.log( json) // print json object to console
-        clientData = JSON.stringify( json ) // create json string from json object
-  
-  const response = await fetch( '/submit', { // send client data to server to /submit path??
-    method:'POST',
-    body: clientData // set body of request to clientData json string
-  })
 
-  let data = await response.json() // get json string from server response
+  const name = document.querySelector('#yourname'), // get form input element with id=yourname
+    color = document.querySelector('#color')
 
-  // only create 1 list element the first time submit is clicked
-  // then just add list items to the list
-  
-
-if (document.getElementById('playerList') == null) {
-  list = document.createElement('ul') // create unordered list element in html
-  list.id = 'playerList'
-  populateList(data)
-} else {
-  document.getElementById('playerList').innerHTML = ''
-  populateList(data)
-}
+  json = {}  // create json object
+  json.name = name.value // add name
+  json.color = color.value // add color
+  let min = Math.ceil(0);
+  let max = Math.floor(100);
+  json.score = Math.floor(Math.random() * (max - min) + min); // add random score for now
 
-function populateList(data) {
-  data.forEach( d => { // for each element in json string, create a list item and append to list
-    
-  // look through list and if name already exists, don't add new item
-  // check if high score is higher than existing high score
-  if (list.innerHTML.includes(d.name)) {
-    console.log('name already exists')
-    return
-  }
 
-    const item = document.createElement('li')
 
-    // add edit button
-    const editButton = document.createElement('button')
-    editButton.innerHTML = 'edit'
+  console.log('printing client json object:')
+  console.log(json) // print json object to console
+  clientData = JSON.stringify(json) // create json string from json object
 
-    // add delete button
-    const deleteButton = document.createElement('button')
-    deleteButton.innerHTML = 'delete'
-    deleteButton.id = 'deleteButton'
+  const response = await fetch('/submit', { // send client data to server 
+    method: 'POST',
+    body: clientData // set body of request to clientData json string
+  })
 
-    // Data to be displayed in list item
-    item.innerHTML = `<b>Name</b> : ${d.name}, <b>Color</b>: ${d.color}, <b>High Score: </b> ${d.highscore}`
-    // add high sch
-    item.id = 'player'
+  let serverData = await response.json() // get json string from server response
+  console.log('printing server json object:')
+  console.log(serverData) // print json string to console
+
+  if (document.getElementById('playerList') == null) {
+    list = document.createElement('ul') // create unordered list element in html
+    list.id = 'playerList'
+    populateList(serverData)
+  } else {
+    document.getElementById('playerList').innerHTML = ''
+    populateList(serverData)
+  }
 
-    // Add buttons in li item
-    item.appendChild(editButton)
-    item.appendChild(deleteButton)
+  function populateList(serverData) {
+    serverData.forEach(d => { // for each element in json string, create a list item and append to list
+
+      // look through list and if name already exists, don't add new item
+      // check if high score is higher than existing high score
+      // if (list.innerHTML.includes(d.name)) {
+      //   console.log('name already exists')
+      //   alert(`Player name ${d.name} already exists. Please enter a different name.`);
+      //   return; 
+      // }
+
+      const item = document.createElement('li')
+
+      // add edit button
+      const editButton = document.createElement('button')
+      editButton.innerHTML = 'edit'
+
+      // add delete button
+      const deleteButton = document.createElement('button')
+      deleteButton.innerHTML = 'delete'
+      deleteButton.id = 'deleteButton'
+
+      // Server Data to be displayed in list item
+      item.innerHTML = `Name: ${d.name}, Color: ${d.color}, Score: ${d.score}, Rank: ${d.rank}`
+      item.className = 'player'
+      item.id = `${d.name}`; // set id of list item to name of player
+
+      // Add buttons in li item
+      item.appendChild(editButton)
+      item.appendChild(deleteButton)
+
+      list.appendChild(item)
+      // add edit and delete buttons after list item
+      // list.appendChild( editButton )
+    })
+  }
+  document.body.appendChild(list)
 
-    list.appendChild( item )
-    // add edit and delete buttons after list item
-    // list.appendChild( editButton )
-  })
-}
-  document.body.appendChild( list )
 
-  
 }
 
-window.onload = function() {
+window.onload = function () {
   const playbutton = document.querySelector('#playbutton');
   playbutton.onclick = submit;
 
 
 
   // if delete button is clicked, delete list item
-  document.addEventListener('click', function(e) {
+  document.addEventListener('click', function (e) {
     if (e.target && e.target.id == 'deleteButton') {
       console.log('delete button clicked');
-      let listItem = e.target.closest('#player');
-      console.log(`listItem: ${listItem}`);
+      let player = e.target.closest('.player');
 
-      if (listItem) {
-        listItem.remove();
-      }
+      if (player) {
+        // Get the player name from the list item
+        console.log(`Player to delete: ${player.id}`);
 
-      deletePlayer(listItem.name);
+        // Call the deletePlayer function with the player name
+        deletePlayer(player.id);
+
+        // Remove the list item from the HTML
+        player.remove();
+      }
     }
   });
 
   // if edit button is clicked
-  
-  
+
+
 }
 
 
-function deletePlayer(playerName){
-   // delete from server
-   console.log(`Request Server to delete player: ${playerName}`)
-   const response = fetch( '/delete', {
-    method:'DELETE',
+async function deletePlayer(playerName) {
+  // delete from server
+  console.log(`Request Server to delete player: ${playerName}`)
+  const response = await fetch('/delete', {
+    method: 'DELETE',
     body: playerName
   })
 }
\ No newline at end of file
diff --git a/server.improved.js b/server.improved.js
index 3e1163d7..62e3f2ee 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -1,101 +1,144 @@
-const http = require( 'http' ), // http server core module
-      fs   = require( 'fs' ), // needed for loading static files
-      // IMPORTANT: you must run `npm install` in the directory for this assignment
-      // to install the mime library if you're testing this on your local machine.
-      // However, Glitch will install it automatically by looking in your package.json
-      // file.
-      mime = require( 'mime' ), // mime to determine file type from file name extension
-      dir  = 'public/', // directory where static files are stored
-      port = 3000 // 3000 is the port where the server is listening
-
-// appdata is the test data that will be sent to the client
-let appdata = [
- {name: 'defaultplayer', color: 'red', score: 0, rank: 0}
+const { randomInt } = require('crypto')
+
+const http = require('http'), // http server core module
+  fs = require('fs'), // needed for loading static files
+  // IMPORTANT: you must run `npm install` in the directory for this assignment
+  // to install the mime library if you're testing this on your local machine.
+  // However, Glitch will install it automatically by looking in your package.json
+  // file.
+  mime = require('mime'), // mime to determine file type from file name extension
+  dir = 'public/', // directory where static files are stored
+  port = 3000 // 3000 is the port where the server is listening
+
+// serverPlayerLog is the test data that is stored on server
+let serverPlayerLog = [
+  { name: 'defaultplayer', color: 'red', score: 0, rank: 0 }
 ]
 
 // Create http server
-const server = http.createServer( function( request,response ) {
-  if( request.method === 'GET' ) { // client requests a resource
-    handleGet( request, response )    
-  }else if( request.method === 'POST' ){ // client is adding data to server
-    handlePost( request, response ) 
-  }else if( request.method === 'DELETE' ){ // client is deleting data
-    handleDelete( request, response )
-  }else if( request.method === 'PUT' ){ // client is updating data
-    handlePut( request, response )
+const server = http.createServer(function (request, response) {
+  if (request.method === 'GET') { // client requests a resource
+    handleGet(request, response)
+  } else if (request.method === 'POST') { // client is adding data to server
+    handlePost(request, response)
+  } else if (request.method === 'DELETE') { // client is deleting data
+    handleDelete(request, response)
+  } else if (request.method === 'PUT') { // client is updating data
+    handlePut(request, response)
   }
 })
 
 // Client requests a resource
-const handleGet = function( request, response ) {
-  const filename = dir + request.url.slice( 1 )  // remove leading '/' from URL
+const handleGet = function (request, response) {
+  const filename = dir + request.url.slice(1)  // remove leading '/' from URL
 
-  if( request.url === '/' ) {
-    sendFile( response, 'public/index.html' ) // send index.html to client
-  }else{
-    sendFile( response, filename ) // send requested file to client
+  if (request.url === '/') {
+    sendFile(response, 'public/index.html') // send index.html to client
+  } else {
+    sendFile(response, filename) // send requested file to client
   }
 }
 
 // Client is adding data to server
-const handlePost = function( request, response ) {
-  let dataString = ''
+const handlePost = function (request, response) {
+  let clientDataString = ''
 
-  request.on( 'data', function( data ) { // add data to dataString as it comes in
-      dataString += data 
+  request.on('data', function (data) { // add data to clientDataString as it comes in
+    clientDataString += data
   })
 
-  request.on( 'end', function() { // end when client is done sending data
-    let clientData = JSON.parse( dataString ) // parse dataString into JSON object
-    console.log( clientData)
+  request.on('end', function () { // end when client is done sending data
+    let clientData = {}
+    clientData = JSON.parse(clientDataString) // parse clientDataString into JSON object
+    
+  
+    let serverData = {}
+    serverData.name = clientData.name;
+    serverData.color = clientData.color;
+    serverData.score = clientData.score;
+    serverData.rank = 0; // default rank is 0
+
+
+    console.log('Client Data:' + JSON.stringify(clientData))
+    console.log('Server Data (Client Data with rank):' + JSON.stringify(serverData))
 
-    clientData.highscore
 
-    let finalData = { }// create new object with data from client
-    appdata.push(JSON.parse(dataString))
+    serverPlayerLog.push(serverData) // add new object to serverPlayerLog array
     // ... do something with the data here!!!
 
-    response.writeHead( 200, "OK", {'Content-Type': 'text/json' }) // send response to client
-    response.end( JSON.stringify( appdata ) )
+    // loop through serverPlayerLog and compare each players scores to calculate rank for each player
+    // assign player with highest score rank 1 and so on
+    serverPlayerLog.forEach(player => {
+      let rank = 1;
+      serverPlayerLog.forEach(otherPlayer => {
+        if (player.score < otherPlayer.score) {
+          rank++;
+        }
+      })
+      player.rank = rank;
+    })
+
+    // sort players by rank so that rank 1 is at the top of the list
+    serverPlayerLog.sort((a, b) => (a.rank > b.rank) ? 1 : -1)
+
+
+    response.writeHead(200, "OK", { 'Content-Type': 'text/json' }) // send response to client
+    response.end(JSON.stringify(serverPlayerLog))
   })
 }
 
 // Client is deleting data from server
-const handleDelete = function( request, response ){
+const handleDelete = function (request, response) {
   // request is playerName string from client to delete
-  // delete that player from appdata
-  // send appdata back to client
-  let playerName = request
-  if (appdata.name === playerName) {
-    // delete player entry in appdata
-    delete appdata.name
-    
-  }
+  // delete that player from serverPlayerLog
+
+  request.on('data', function (data) { // add data to clientDataString as it comes in
+    console.log('Server received a DELETE request')
+  })
+
+  request.on('end', function () { // end when client is done sending data
+    console.log('Server received complete DELETE request')
+    let deletePlayer = request
+
+    console.log('before delete: ' + JSON.stringify(serverPlayerLog))
+
+
+    //loop through serverPlayerLog and delete player with matching name
+    serverPlayerLog.forEach(player => {
+      if (player.name === deletePlayer) {
+        // delete player entry in serverPlayerLog with slice
+        serverPlayerLog.slice(serverPlayerLog.indexOf(deletePlayer), 1);
+        console.log('after delete: ' + JSON.stringify(serverPlayerLog))
+      }
+    })
+  })
 }
 
 
 
+
+
 // Send file to client (called by handleGet when client requests a resource)
-const sendFile = function( response, filename ) {
-   const type = mime.getType( filename ) 
+const sendFile = function (response, filename) {
+  const type = mime.getType(filename)
 
-   fs.readFile( filename, function( err, content ) {
+  fs.readFile(filename, function (err, content) {
 
-     // if the error = null, then we've loaded the file successfully
-     if( err === null ) {
+    // 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 )
+      // status code: https://httpstatuses.com
+      response.writeHeader(200, { 'Content-Type': type })
+      response.end(content)
 
-     }else{
+    } else {
 
-       // file not found, error code 404
-       response.writeHeader( 404 )
-       response.end( '404 Error: File Not Found' )
+      // file not found, error code 404
+      response.writeHeader(404)
+      response.end('404 Error: File Not Found')
 
-     }
-   })
+    }
+  })
 }
 
-server.listen( process.env.PORT || port )
+server.listen(process.env.PORT || port)

From 3e38c0148406c00ce7e26a4fd89ed86e0a464291 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 00:17:11 -0400
Subject: [PATCH 14/29] properly adds players with rank

---
 public/js/main.js  | 97 +++++++++++++++++++++++-----------------------
 server.improved.js | 41 ++++++++++----------
 2 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index f3e3f0f3..119c2993 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,5 +1,5 @@
 // FRONT-END (CLIENT) JAVASCRIPT HERE
-let list = null;
+let list = undefined;
 const submit = async function (event) {
   // stop form submission from trying to load
   // a new .html page for displaying results...
@@ -32,54 +32,58 @@ const submit = async function (event) {
   console.log('printing server json object:')
   console.log(serverData) // print json string to console
 
+  // clear the old list completely (remove the entire list element)
+  if (list) {
+    list.remove();
+  }
+
   if (document.getElementById('playerList') == null) {
-    list = document.createElement('ul') // create unordered list element in html
+    list = document.createElement('ol') // create ordered list element in html
     list.id = 'playerList'
     populateList(serverData)
   } else {
-    document.getElementById('playerList').innerHTML = ''
+    document.getElementById('playerList').innerHTML = '';
     populateList(serverData)
   }
+  document.body.appendChild(list) // append list to body of html
+}
 
-  function populateList(serverData) {
-    serverData.forEach(d => { // for each element in json string, create a list item and append to list
-
-      // look through list and if name already exists, don't add new item
-      // check if high score is higher than existing high score
-      // if (list.innerHTML.includes(d.name)) {
-      //   console.log('name already exists')
-      //   alert(`Player name ${d.name} already exists. Please enter a different name.`);
-      //   return; 
-      // }
-
-      const item = document.createElement('li')
-
-      // add edit button
-      const editButton = document.createElement('button')
-      editButton.innerHTML = 'edit'
-
-      // add delete button
-      const deleteButton = document.createElement('button')
-      deleteButton.innerHTML = 'delete'
-      deleteButton.id = 'deleteButton'
-
-      // Server Data to be displayed in list item
-      item.innerHTML = `Name: ${d.name}, Color: ${d.color}, Score: ${d.score}, Rank: ${d.rank}`
-      item.className = 'player'
-      item.id = `${d.name}`; // set id of list item to name of player
-
-      // Add buttons in li item
-      item.appendChild(editButton)
-      item.appendChild(deleteButton)
-
-      list.appendChild(item)
-      // add edit and delete buttons after list item
-      // list.appendChild( editButton )
-    })
-  }
-  document.body.appendChild(list)
+function populateList(serverData) {
+
+  serverData.forEach(d => { // for each element in json string, create a list item and append to list
+
+    // look through list and if name already exists, don't add new item
+    // check if high score is higher than existing high score
+    // if (list.innerHTML.includes(d.name)) {
+    //   console.log('name already exists')
+    //   alert(`Player name ${d.name} already exists. Please enter a different name.`);
+    //   return; 
+    // }
+
+    const item = document.createElement('li')
+
+    // add edit button
+    const editButton = document.createElement('button')
+    editButton.innerHTML = 'edit'
+
+    // add delete button
+    const deleteButton = document.createElement('button')
+    deleteButton.innerHTML = 'delete'
+    deleteButton.id = 'deleteButton'
 
+    // Server Data to be displayed in list item
+    item.innerHTML = `Name: ${d.name}, Color: ${d.color}, Score: ${d.score}, Rank: ${d.rank}`
+    item.className = 'player'
+    item.id = `${d.name}`; // set id of list item to name of player
 
+    // Add buttons in li item
+    item.appendChild(editButton)
+    item.appendChild(deleteButton)
+
+    list.appendChild(item)
+    // add edit and delete buttons after list item
+    // list.appendChild( editButton )
+  })
 }
 
 window.onload = function () {
@@ -94,17 +98,10 @@ window.onload = function () {
       console.log('delete button clicked');
       let player = e.target.closest('.player');
 
-      if (player) {
-        // Get the player name from the list item
-        console.log(`Player to delete: ${player.id}`);
-
         // Call the deletePlayer function with the player name
         deletePlayer(player.id);
-
-        // Remove the list item from the HTML
-        player.remove();
-      }
     }
+
   });
 
   // if edit button is clicked
@@ -120,4 +117,8 @@ async function deletePlayer(playerName) {
     method: 'DELETE',
     body: playerName
   })
+
+  let serverData = await response.json() // get json string from server response
+
+    populateList(serverData)
 }
\ No newline at end of file
diff --git a/server.improved.js b/server.improved.js
index 62e3f2ee..23e7961c 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -66,22 +66,12 @@ const handlePost = function (request, response) {
     serverPlayerLog.push(serverData) // add new object to serverPlayerLog array
     // ... do something with the data here!!!
 
-    // loop through serverPlayerLog and compare each players scores to calculate rank for each player
-    // assign player with highest score rank 1 and so on
-    serverPlayerLog.forEach(player => {
-      let rank = 1;
-      serverPlayerLog.forEach(otherPlayer => {
-        if (player.score < otherPlayer.score) {
-          rank++;
-        }
-      })
-      player.rank = rank;
+    // sort serverPlayerLog by score
+    serverPlayerLog.sort((a, b) => (a.score < b.score) ? 1 : -1)
+    serverPlayerLog.forEach((player, index) => {
+      player.rank = index + 1;
     })
 
-    // sort players by rank so that rank 1 is at the top of the list
-    serverPlayerLog.sort((a, b) => (a.rank > b.rank) ? 1 : -1)
-
-
     response.writeHead(200, "OK", { 'Content-Type': 'text/json' }) // send response to client
     response.end(JSON.stringify(serverPlayerLog))
   })
@@ -92,26 +82,35 @@ const handleDelete = function (request, response) {
   // request is playerName string from client to delete
   // delete that player from serverPlayerLog
 
-  request.on('data', function (data) { // add data to clientDataString as it comes in
-    console.log('Server received a DELETE request')
-  })
+  // request.on('data', function (data) { // add data to clientDataString as it comes in
+  //   console.log('Server received a DELETE request')
+  // })
 
   request.on('end', function () { // end when client is done sending data
     console.log('Server received complete DELETE request')
-    let deletePlayer = request
+    let playerToDelete = request; 
 
     console.log('before delete: ' + JSON.stringify(serverPlayerLog))
 
-
     //loop through serverPlayerLog and delete player with matching name
     serverPlayerLog.forEach(player => {
-      if (player.name === deletePlayer) {
+      if (player.name === playerToDelete) {
         // delete player entry in serverPlayerLog with slice
-        serverPlayerLog.slice(serverPlayerLog.indexOf(deletePlayer), 1);
+        serverPlayerLog.slice(serverPlayerLog.indexOf(playerToDelete), 1);
+
+        // sort serverPlayerLog by score
+        serverPlayerLog.sort((a, b) => (a.score < b.score) ? 1 : -1)
+        serverPlayerLog.forEach((player, index) => {
+          player.rank = index + 1;
+        })
+
         console.log('after delete: ' + JSON.stringify(serverPlayerLog))
       }
     })
   })
+
+  response.writeHead(200, "OK", { 'Content-Type': 'text/json' }) // send response to client
+    response.end(JSON.stringify(serverPlayerLog))
 }
 
 

From e9678f21a7e506801f5ea6491567423cffd41f7d Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 00:49:01 -0400
Subject: [PATCH 15/29] delete is working for serverlog but not working on
 client result side

---
 public/js/main.js  | 10 +++++----
 server.improved.js | 54 +++++++++++++++++++++++++++++-----------------
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index 119c2993..4ba53441 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -17,8 +17,6 @@ const submit = async function (event) {
   let max = Math.floor(100);
   json.score = Math.floor(Math.random() * (max - min) + min); // add random score for now
 
-
-
   console.log('printing client json object:')
   console.log(json) // print json object to console
   clientData = JSON.stringify(json) // create json string from json object
@@ -113,12 +111,16 @@ window.onload = function () {
 async function deletePlayer(playerName) {
   // delete from server
   console.log(`Request Server to delete player: ${playerName}`)
+
+  json = {}  // create json object
+  json.name = playerName // add name
+
+  // let playerNameJSON = JSON.stringify(playerName) // create json string 
   const response = await fetch('/delete', {
     method: 'DELETE',
-    body: playerName
+    body: JSON.stringify(json)
   })
 
   let serverData = await response.json() // get json string from server response
-
     populateList(serverData)
 }
\ No newline at end of file
diff --git a/server.improved.js b/server.improved.js
index 23e7961c..148da5cd 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -50,8 +50,8 @@ const handlePost = function (request, response) {
   request.on('end', function () { // end when client is done sending data
     let clientData = {}
     clientData = JSON.parse(clientDataString) // parse clientDataString into JSON object
-    
-  
+
+
     let serverData = {}
     serverData.name = clientData.name;
     serverData.color = clientData.color;
@@ -72,6 +72,9 @@ const handlePost = function (request, response) {
       player.rank = index + 1;
     })
 
+    // print full serverPlayerLog to console
+    console.log('Server Player Log: ' + JSON.stringify(serverPlayerLog))
+
     response.writeHead(200, "OK", { 'Content-Type': 'text/json' }) // send response to client
     response.end(JSON.stringify(serverPlayerLog))
   })
@@ -82,41 +85,52 @@ const handleDelete = function (request, response) {
   // request is playerName string from client to delete
   // delete that player from serverPlayerLog
 
-  // request.on('data', function (data) { // add data to clientDataString as it comes in
-  //   console.log('Server received a DELETE request')
-  // })
+  let clientDataString = ''
+
+  request.on('data', function (data) { // add data to clientDataString as it comes in
+    clientDataString += data
+  })
 
   request.on('end', function () { // end when client is done sending data
     console.log('Server received complete DELETE request')
-    let playerToDelete = request; 
 
-    console.log('before delete: ' + JSON.stringify(serverPlayerLog))
+    let clientData = {}
+    clientData = JSON.parse(clientDataString) // parse clientDataString into JSON object
+    let playerToDelete = clientData;
 
-    //loop through serverPlayerLog and delete player with matching name
-    serverPlayerLog.forEach(player => {
-      if (player.name === playerToDelete) {
-        // delete player entry in serverPlayerLog with slice
-        serverPlayerLog.slice(serverPlayerLog.indexOf(playerToDelete), 1);
+    // print playerToDelete to console
+    console.log('Player to delete: ' + JSON.stringify(playerToDelete))
 
-        // sort serverPlayerLog by score
-        serverPlayerLog.sort((a, b) => (a.score < b.score) ? 1 : -1)
-        serverPlayerLog.forEach((player, index) => {
-          player.rank = index + 1;
-        })
+    console.log('BEFORE delete: ' + JSON.stringify(serverPlayerLog))
 
-        console.log('after delete: ' + JSON.stringify(serverPlayerLog))
+    //loop through serverPlayerLog and delete player with matching name
+    serverPlayerLog.forEach(player => {
+      if (playerToDelete.name === player.name) {
+        console.log('INSIDE DELETE PORTION BEFORE SLICE')
+        // delete playerToDelete entry in serverPlayerLog with slice
+        serverPlayerLog.splice(serverPlayerLog.indexOf(player), 1)
       }
     })
-  })
 
+    // sort serverPlayerLog by score
+    serverPlayerLog.sort((a, b) => (a.score < b.score) ? 1 : -1)
+    serverPlayerLog.forEach((player, index) => {
+      player.rank = index + 1;
+    })
+
+    console.log('AFTER delete: ' + JSON.stringify(serverPlayerLog))
+  })
   response.writeHead(200, "OK", { 'Content-Type': 'text/json' }) // send response to client
-    response.end(JSON.stringify(serverPlayerLog))
+  response.end(JSON.stringify(serverPlayerLog))
 }
 
 
 
 
 
+
+
+
 // Send file to client (called by handleGet when client requests a resource)
 const sendFile = function (response, filename) {
   const type = mime.getType(filename)

From 22893391bfefd87215d6c49873fef086f1d236f8 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 07:41:56 -0400
Subject: [PATCH 16/29] delete now looks to work on server with updating rank.
 but still new list gets added on client :(

---
 public/js/main.js  | 2 ++
 server.improved.js | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index 4ba53441..cd2394ab 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -122,5 +122,7 @@ async function deletePlayer(playerName) {
   })
 
   let serverData = await response.json() // get json string from server response
+  console.log('printing NEW server json object:')
+  console.log(serverData) // print json string to console
     populateList(serverData)
 }
\ No newline at end of file
diff --git a/server.improved.js b/server.improved.js
index 148da5cd..f0136a2b 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -119,9 +119,9 @@ const handleDelete = function (request, response) {
     })
 
     console.log('AFTER delete: ' + JSON.stringify(serverPlayerLog))
+    response.writeHead(200, "OK", { 'Content-Type': 'text/json' }) // send response to client
+    response.end(JSON.stringify(serverPlayerLog))
   })
-  response.writeHead(200, "OK", { 'Content-Type': 'text/json' }) // send response to client
-  response.end(JSON.stringify(serverPlayerLog))
 }
 
 

From 90a42592b4afee7c71fa37f812eaf2fd690d388a Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 08:18:19 -0400
Subject: [PATCH 17/29] add and delete appears to work ok on client ??

---
 public/js/main.js  | 66 +++++++++++++++++++++++++++++++---------------
 server.improved.js |  1 +
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index cd2394ab..ba96446a 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,3 +1,6 @@
+'use strict'
+
+
 // FRONT-END (CLIENT) JAVASCRIPT HERE
 let list = undefined;
 const submit = async function (event) {
@@ -10,7 +13,7 @@ const submit = async function (event) {
   const name = document.querySelector('#yourname'), // get form input element with id=yourname
     color = document.querySelector('#color')
 
-  json = {}  // create json object
+  let json = {}  // create json object
   json.name = name.value // add name
   json.color = color.value // add color
   let min = Math.ceil(0);
@@ -19,7 +22,7 @@ const submit = async function (event) {
 
   console.log('printing client json object:')
   console.log(json) // print json object to console
-  clientData = JSON.stringify(json) // create json string from json object
+  let clientData = JSON.stringify(json) // create json string from json object
 
   const response = await fetch('/submit', { // send client data to server 
     method: 'POST',
@@ -30,24 +33,36 @@ const submit = async function (event) {
   console.log('printing server json object:')
   console.log(serverData) // print json string to console
 
-  // clear the old list completely (remove the entire list element)
-  if (list) {
-    list.remove();
-  }
-
-  if (document.getElementById('playerList') == null) {
-    list = document.createElement('ol') // create ordered list element in html
-    list.id = 'playerList'
-    populateList(serverData)
-  } else {
-    document.getElementById('playerList').innerHTML = '';
-    populateList(serverData)
-  }
-  document.body.appendChild(list) // append list to body of html
+   // create a new list element
+  //  list = document.createElement('ol'); // create ordered list element in html
+  //  list.id = 'playerList';
+ 
+  //  if (document.getElementById('playerList') == null) {
+  //    // Append the new list to the body of the HTML
+  //    document.body.appendChild(list);
+  //  }
+
+  clearList();
+   populateList(serverData);
+
+   // old version
+  // if (document.getElementById('playerList') == null) {
+  //   list = document.createElement('ol') // create ordered list element in html
+  //   list.id = 'playerList'
+  //   populateList(serverData)
+  // } else {
+  //   document.getElementById('playerList').innerHTML = '';
+  //   populateList(serverData)
+  // }
+  // document.body.appendChild(list) // append list to body of html
 }
 
 function populateList(serverData) {
 
+  list = document.createElement('ol'); // create ordered list element 
+  list.id = 'playerList';
+  document.body.appendChild(list); // append list to body of html
+
   serverData.forEach(d => { // for each element in json string, create a list item and append to list
 
     // look through list and if name already exists, don't add new item
@@ -56,7 +71,7 @@ function populateList(serverData) {
     //   console.log('name already exists')
     //   alert(`Player name ${d.name} already exists. Please enter a different name.`);
     //   return; 
-    // }
+    // }  
 
     const item = document.createElement('li')
 
@@ -112,7 +127,7 @@ async function deletePlayer(playerName) {
   // delete from server
   console.log(`Request Server to delete player: ${playerName}`)
 
-  json = {}  // create json object
+  let json = {}  // create json object
   json.name = playerName // add name
 
   // let playerNameJSON = JSON.stringify(playerName) // create json string 
@@ -122,7 +137,16 @@ async function deletePlayer(playerName) {
   })
 
   let serverData = await response.json() // get json string from server response
-  console.log('printing NEW server json object:')
-  console.log(serverData) // print json string to console
-    populateList(serverData)
+  console.log('printing NEW server json object:');
+  console.log(serverData); // print json string to console
+  clearList();
+  populateList(serverData);
+}
+
+function clearList() {
+  // clear the old list, removes all list items
+  list = document.getElementById('playerList');
+  if (list) {
+    list.remove();
+  }
 }
\ No newline at end of file
diff --git a/server.improved.js b/server.improved.js
index f0136a2b..9d0c5c3b 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -1,3 +1,4 @@
+'use strict'
 const { randomInt } = require('crypto')
 
 const http = require('http'), // http server core module

From 218d9d9c1c2a6f7dd26f8e3ff70e72c25bb35785 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 09:12:45 -0400
Subject: [PATCH 18/29] edit works

---
 public/js/main.js  | 38 +++++++++++++++++++++++++++++++++++---
 server.improved.js | 41 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 75 insertions(+), 4 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index ba96446a..bfc72510 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -94,8 +94,6 @@ function populateList(serverData) {
     item.appendChild(deleteButton)
 
     list.appendChild(item)
-    // add edit and delete buttons after list item
-    // list.appendChild( editButton )
   })
 }
 
@@ -104,7 +102,6 @@ window.onload = function () {
   playbutton.onclick = submit;
 
 
-
   // if delete button is clicked, delete list item
   document.addEventListener('click', function (e) {
     if (e.target && e.target.id == 'deleteButton') {
@@ -118,11 +115,46 @@ window.onload = function () {
   });
 
   // if edit button is clicked
+  document.addEventListener('click', function (e) {
+    if (e.target && e.target.innerHTML == 'edit') {
+      console.log('edit button clicked');
+      let player = e.target.closest('.player');
+
+      // Call the editPlayer function with the player name
+      editPlayer(player.id);
+    }
+
+  });
+}
 
 
+async function editPlayer(playerName) {
+  // edit player name
+  console.log(`Request Server to edit player: ${playerName}`)
+  let newName = prompt("Please enter new name:", "New Name");
+  if (newName == null || newName == "") {
+    alert("Player name not changed");
+  } else {
+    console.log(`New name: ${newName}`);
+    let json = {}  // create json object
+    json.name = playerName // add name
+    json.newName = newName // add new name
+
+    const response = await fetch('/edit', {
+      method: 'PUT',
+      body: JSON.stringify(json)
+    })
+
+    let serverData = await response.json() // get json string from server response
+    console.log('printing NEW server json object:');
+    console.log(serverData); // print json string to console
+    clearList();
+    populateList(serverData);
+  }
 }
 
 
+
 async function deletePlayer(playerName) {
   // delete from server
   console.log(`Request Server to delete player: ${playerName}`)
diff --git a/server.improved.js b/server.improved.js
index 9d0c5c3b..09a92a42 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -24,7 +24,7 @@ const server = http.createServer(function (request, response) {
     handlePost(request, response)
   } else if (request.method === 'DELETE') { // client is deleting data
     handleDelete(request, response)
-  } else if (request.method === 'PUT') { // client is updating data
+  } else if (request.method === 'PUT') { // client is editing data
     handlePut(request, response)
   }
 })
@@ -125,6 +125,45 @@ const handleDelete = function (request, response) {
   })
 }
 
+// Client is editing data on server
+const handlePut = function (request, response) {
+  // request is json string with name and newName
+  // find player in serverplayerlog with name and change name to newName
+  // finish by sending updated serverPlayerLog to client
+  // complete this code
+  let clientDataString = ''
+
+  request.on('data', function (data) { // add data to clientDataString as it comes in
+    clientDataString += data
+  })
+
+  request.on('end', function () { // end when client is done sending data
+    let clientData = {}
+    clientData = JSON.parse(clientDataString) // parse clientDataString into JSON object
+
+    let playerToEdit = clientData.name;
+    let newName = clientData.newName;
+
+    // loop through serverPlayerLog and edit player with matching name
+    serverPlayerLog.forEach(player => {
+      if (playerToEdit === player.name) {
+        player.name = newName;
+      }
+    })
+
+    response.writeHead(200, "OK", { 'Content-Type': 'text/json' }) // send response to client
+    response.end(JSON.stringify(serverPlayerLog))
+  })
+
+}
+
+
+
+
+
+
+
+
 
 
 

From 9b8dde79e5f35c8c8b6d0bd61fff45cb89584003 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 10:25:48 -0400
Subject: [PATCH 19/29] code works but is a mess

---
 public/js/main.js  | 59 ++++++++--------------------------------------
 server.improved.js | 49 +++++++++++---------------------------
 2 files changed, 24 insertions(+), 84 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index bfc72510..fd8bcb48 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,14 +1,10 @@
 'use strict'
 
+// CLIENT CODE
 
-// FRONT-END (CLIENT) JAVASCRIPT HERE
 let list = undefined;
-const submit = async function (event) {
-  // stop form submission from trying to load
-  // a new .html page for displaying results...
-  // this was the original browser behavior and still
-  // remains to this day
-  event.preventDefault()
+const submit = async function (event) {  
+  event.preventDefault(); // stop page from reloading when form is submitted
 
   const name = document.querySelector('#yourname'), // get form input element with id=yourname
     color = document.querySelector('#color')
@@ -20,7 +16,7 @@ const submit = async function (event) {
   let max = Math.floor(100);
   json.score = Math.floor(Math.random() * (max - min) + min); // add random score for now
 
-  console.log('printing client json object:')
+  console.log('Client json object:')
   console.log(json) // print json object to console
   let clientData = JSON.stringify(json) // create json string from json object
 
@@ -33,46 +29,23 @@ const submit = async function (event) {
   console.log('printing server json object:')
   console.log(serverData) // print json string to console
 
-   // create a new list element
-  //  list = document.createElement('ol'); // create ordered list element in html
-  //  list.id = 'playerList';
- 
-  //  if (document.getElementById('playerList') == null) {
-  //    // Append the new list to the body of the HTML
-  //    document.body.appendChild(list);
-  //  }
-
-  clearList();
    populateList(serverData);
-
-   // old version
-  // if (document.getElementById('playerList') == null) {
-  //   list = document.createElement('ol') // create ordered list element in html
-  //   list.id = 'playerList'
-  //   populateList(serverData)
-  // } else {
-  //   document.getElementById('playerList').innerHTML = '';
-  //   populateList(serverData)
-  // }
-  // document.body.appendChild(list) // append list to body of html
 }
 
 function populateList(serverData) {
 
+  // Remove list from body of html
+  list = document.getElementById('playerList');
+  if (list) {
+    list.remove();
+  }
+
   list = document.createElement('ol'); // create ordered list element 
   list.id = 'playerList';
   document.body.appendChild(list); // append list to body of html
 
   serverData.forEach(d => { // for each element in json string, create a list item and append to list
 
-    // look through list and if name already exists, don't add new item
-    // check if high score is higher than existing high score
-    // if (list.innerHTML.includes(d.name)) {
-    //   console.log('name already exists')
-    //   alert(`Player name ${d.name} already exists. Please enter a different name.`);
-    //   return; 
-    // }  
-
     const item = document.createElement('li')
 
     // add edit button
@@ -105,7 +78,6 @@ window.onload = function () {
   // if delete button is clicked, delete list item
   document.addEventListener('click', function (e) {
     if (e.target && e.target.id == 'deleteButton') {
-      console.log('delete button clicked');
       let player = e.target.closest('.player');
 
         // Call the deletePlayer function with the player name
@@ -117,7 +89,6 @@ window.onload = function () {
   // if edit button is clicked
   document.addEventListener('click', function (e) {
     if (e.target && e.target.innerHTML == 'edit') {
-      console.log('edit button clicked');
       let player = e.target.closest('.player');
 
       // Call the editPlayer function with the player name
@@ -148,7 +119,6 @@ async function editPlayer(playerName) {
     let serverData = await response.json() // get json string from server response
     console.log('printing NEW server json object:');
     console.log(serverData); // print json string to console
-    clearList();
     populateList(serverData);
   }
 }
@@ -171,14 +141,5 @@ async function deletePlayer(playerName) {
   let serverData = await response.json() // get json string from server response
   console.log('printing NEW server json object:');
   console.log(serverData); // print json string to console
-  clearList();
   populateList(serverData);
 }
-
-function clearList() {
-  // clear the old list, removes all list items
-  list = document.getElementById('playerList');
-  if (list) {
-    list.remove();
-  }
-}
\ No newline at end of file
diff --git a/server.improved.js b/server.improved.js
index 09a92a42..aa9aad3e 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -1,5 +1,6 @@
 'use strict'
-const { randomInt } = require('crypto')
+
+// SERVER CODE
 
 const http = require('http'), // http server core module
   fs = require('fs'), // needed for loading static files
@@ -13,7 +14,7 @@ const http = require('http'), // http server core module
 
 // serverPlayerLog is the test data that is stored on server
 let serverPlayerLog = [
-  { name: 'defaultplayer', color: 'red', score: 0, rank: 0 }
+  { name: 'example-player', color: 'red', score: 0, rank: 0 }
 ]
 
 // Create http server
@@ -32,7 +33,6 @@ const server = http.createServer(function (request, response) {
 // Client requests a resource
 const handleGet = function (request, response) {
   const filename = dir + request.url.slice(1)  // remove leading '/' from URL
-
   if (request.url === '/') {
     sendFile(response, 'public/index.html') // send index.html to client
   } else {
@@ -81,6 +81,8 @@ const handlePost = function (request, response) {
   })
 }
 
+
+
 // Client is deleting data from server
 const handleDelete = function (request, response) {
   // request is playerName string from client to delete
@@ -127,10 +129,7 @@ const handleDelete = function (request, response) {
 
 // Client is editing data on server
 const handlePut = function (request, response) {
-  // request is json string with name and newName
-  // find player in serverplayerlog with name and change name to newName
-  // finish by sending updated serverPlayerLog to client
-  // complete this code
+  
   let clientDataString = ''
 
   request.on('data', function (data) { // add data to clientDataString as it comes in
@@ -157,41 +156,21 @@ const handlePut = function (request, response) {
 
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 // Send file to client (called by handleGet when client requests a resource)
-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) {
+const sendFile = function (response, fileName) {
+  const type = mime.getType(fileName);
 
+  fs.readFile(fileName, function (err, content) {
+    if (err === null) { // No error means file exists
       // status code: https://httpstatuses.com
       response.writeHeader(200, { 'Content-Type': type })
-      response.end(content)
-
+      response.end(content);
     } else {
-
-      // file not found, error code 404
-      response.writeHeader(404)
-      response.end('404 Error: File Not Found')
-
+      response.writeHeader(404);
+      response.end('404 Error: File Not Found');
     }
   })
 }
 
 server.listen(process.env.PORT || port)
+

From 93b7e5a089a6524929ef1a67a7a045ea89f2ecbb Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 11:06:17 -0400
Subject: [PATCH 20/29] add, delete, edit work

---
 public/js/main.js  | 14 +++-----------
 server.improved.js | 45 +++++++++++----------------------------------
 2 files changed, 14 insertions(+), 45 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index fd8bcb48..5546a32a 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -16,8 +16,6 @@ const submit = async function (event) {
   let max = Math.floor(100);
   json.score = Math.floor(Math.random() * (max - min) + min); // add random score for now
 
-  console.log('Client json object:')
-  console.log(json) // print json object to console
   let clientData = JSON.stringify(json) // create json string from json object
 
   const response = await fetch('/submit', { // send client data to server 
@@ -26,7 +24,7 @@ const submit = async function (event) {
   })
 
   let serverData = await response.json() // get json string from server response
-  console.log('printing server json object:')
+  console.log('SERVER DATA (after add player):')
   console.log(serverData) // print json string to console
 
    populateList(serverData);
@@ -100,13 +98,10 @@ window.onload = function () {
 
 
 async function editPlayer(playerName) {
-  // edit player name
-  console.log(`Request Server to edit player: ${playerName}`)
   let newName = prompt("Please enter new name:", "New Name");
   if (newName == null || newName == "") {
     alert("Player name not changed");
   } else {
-    console.log(`New name: ${newName}`);
     let json = {}  // create json object
     json.name = playerName // add name
     json.newName = newName // add new name
@@ -117,7 +112,7 @@ async function editPlayer(playerName) {
     })
 
     let serverData = await response.json() // get json string from server response
-    console.log('printing NEW server json object:');
+    console.log('SERVER DATA (after edit):');
     console.log(serverData); // print json string to console
     populateList(serverData);
   }
@@ -126,9 +121,6 @@ async function editPlayer(playerName) {
 
 
 async function deletePlayer(playerName) {
-  // delete from server
-  console.log(`Request Server to delete player: ${playerName}`)
-
   let json = {}  // create json object
   json.name = playerName // add name
 
@@ -139,7 +131,7 @@ async function deletePlayer(playerName) {
   })
 
   let serverData = await response.json() // get json string from server response
-  console.log('printing NEW server json object:');
+  console.log('SERVER DATA (after delete):');
   console.log(serverData); // print json string to console
   populateList(serverData);
 }
diff --git a/server.improved.js b/server.improved.js
index aa9aad3e..f33213d7 100644
--- a/server.improved.js
+++ b/server.improved.js
@@ -43,7 +43,6 @@ const handleGet = function (request, response) {
 // Client is adding data to server
 const handlePost = function (request, response) {
   let clientDataString = ''
-
   request.on('data', function (data) { // add data to clientDataString as it comes in
     clientDataString += data
   })
@@ -52,30 +51,21 @@ const handlePost = function (request, response) {
     let clientData = {}
     clientData = JSON.parse(clientDataString) // parse clientDataString into JSON object
 
+    let newPlayer = {
+      name: clientData.name,
+      color: clientData.color,
+      score: clientData.score,
+      rank: 0,
+    }
 
-    let serverData = {}
-    serverData.name = clientData.name;
-    serverData.color = clientData.color;
-    serverData.score = clientData.score;
-    serverData.rank = 0; // default rank is 0
-
-
-    console.log('Client Data:' + JSON.stringify(clientData))
-    console.log('Server Data (Client Data with rank):' + JSON.stringify(serverData))
-
-
-    serverPlayerLog.push(serverData) // add new object to serverPlayerLog array
-    // ... do something with the data here!!!
+    serverPlayerLog.push(newPlayer) // add new player to serverPlayerLog array
 
-    // sort serverPlayerLog by score
+    // Sort serverPlayerLog by score and add rank to each player
     serverPlayerLog.sort((a, b) => (a.score < b.score) ? 1 : -1)
     serverPlayerLog.forEach((player, index) => {
       player.rank = index + 1;
     })
 
-    // print full serverPlayerLog to console
-    console.log('Server Player Log: ' + JSON.stringify(serverPlayerLog))
-
     response.writeHead(200, "OK", { 'Content-Type': 'text/json' }) // send response to client
     response.end(JSON.stringify(serverPlayerLog))
   })
@@ -85,43 +75,30 @@ const handlePost = function (request, response) {
 
 // Client is deleting data from server
 const handleDelete = function (request, response) {
-  // request is playerName string from client to delete
-  // delete that player from serverPlayerLog
-
   let clientDataString = ''
-
   request.on('data', function (data) { // add data to clientDataString as it comes in
     clientDataString += data
   })
 
   request.on('end', function () { // end when client is done sending data
-    console.log('Server received complete DELETE request')
 
     let clientData = {}
     clientData = JSON.parse(clientDataString) // parse clientDataString into JSON object
     let playerToDelete = clientData;
 
-    // print playerToDelete to console
-    console.log('Player to delete: ' + JSON.stringify(playerToDelete))
-
-    console.log('BEFORE delete: ' + JSON.stringify(serverPlayerLog))
-
-    //loop through serverPlayerLog and delete player with matching name
+    // Delete player from serverPlayerLog
     serverPlayerLog.forEach(player => {
       if (playerToDelete.name === player.name) {
-        console.log('INSIDE DELETE PORTION BEFORE SLICE')
-        // delete playerToDelete entry in serverPlayerLog with slice
         serverPlayerLog.splice(serverPlayerLog.indexOf(player), 1)
       }
     })
 
-    // sort serverPlayerLog by score
+    // Sort serverPlayerLog by score
     serverPlayerLog.sort((a, b) => (a.score < b.score) ? 1 : -1)
     serverPlayerLog.forEach((player, index) => {
       player.rank = index + 1;
     })
 
-    console.log('AFTER delete: ' + JSON.stringify(serverPlayerLog))
     response.writeHead(200, "OK", { 'Content-Type': 'text/json' }) // send response to client
     response.end(JSON.stringify(serverPlayerLog))
   })
@@ -129,7 +106,7 @@ const handleDelete = function (request, response) {
 
 // Client is editing data on server
 const handlePut = function (request, response) {
-  
+
   let clientDataString = ''
 
   request.on('data', function (data) { // add data to clientDataString as it comes in

From 1bd09c062e9418b86d399a964d851d0da10d780b Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 11:11:06 -0400
Subject: [PATCH 21/29] did some cleanup in main.js. overall still gross

---
 public/js/main.js | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index 5546a32a..f6bedaca 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -26,7 +26,6 @@ const submit = async function (event) {
   let serverData = await response.json() // get json string from server response
   console.log('SERVER DATA (after add player):')
   console.log(serverData) // print json string to console
-
    populateList(serverData);
 }
 
@@ -49,11 +48,13 @@ function populateList(serverData) {
     // add edit button
     const editButton = document.createElement('button')
     editButton.innerHTML = 'edit'
+    editButton.class = 'editButton'
+
 
     // add delete button
     const deleteButton = document.createElement('button')
     deleteButton.innerHTML = 'delete'
-    deleteButton.id = 'deleteButton'
+    deleteButton.class = 'deleteButton'
 
     // Server Data to be displayed in list item
     item.innerHTML = `Name: ${d.name}, Color: ${d.color}, Score: ${d.score}, Rank: ${d.rank}`
@@ -72,31 +73,25 @@ window.onload = function () {
   const playbutton = document.querySelector('#playbutton');
   playbutton.onclick = submit;
 
-
-  // if delete button is clicked, delete list item
+  // Delete button clicked
   document.addEventListener('click', function (e) {
-    if (e.target && e.target.id == 'deleteButton') {
+    if (e.target && e.target.class == 'deleteButton') {
       let player = e.target.closest('.player');
-
-        // Call the deletePlayer function with the player name
-        deletePlayer(player.id);
+      // Call the deletePlayer function with the player name
+      deletePlayer(player.id);
     }
-
   });
 
-  // if edit button is clicked
+  // Edit button clicked
   document.addEventListener('click', function (e) {
-    if (e.target && e.target.innerHTML == 'edit') {
+    if (e.target && e.target.class == 'editButton') {
       let player = e.target.closest('.player');
-
       // Call the editPlayer function with the player name
       editPlayer(player.id);
     }
-
   });
 }
 
-
 async function editPlayer(playerName) {
   let newName = prompt("Please enter new name:", "New Name");
   if (newName == null || newName == "") {

From 26410ec8362d2dbf9201b35653d24d3a77be60a5 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 11:35:05 -0400
Subject: [PATCH 22/29] added some comments. but still a loooot of repeated
 code :(

---
 public/js/main.js | 116 +++++++++++++++++++++++-----------------------
 1 file changed, 57 insertions(+), 59 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index f6bedaca..78317453 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -2,73 +2,73 @@
 
 // CLIENT CODE
 
-let list = undefined;
-const submit = async function (event) {  
-  event.preventDefault(); // stop page from reloading when form is submitted
+function randomNum(min, max) {
+  return Math.floor(Math.random() * (max - min +1)) + min;
+}
 
-  const name = document.querySelector('#yourname'), // get form input element with id=yourname
-    color = document.querySelector('#color')
+let playerList = undefined;
+const submit = async function (event) {  
+  event.preventDefault(); // Stop page defualt reload behavior
 
-  let json = {}  // create json object
-  json.name = name.value // add name
-  json.color = color.value // add color
-  let min = Math.ceil(0);
-  let max = Math.floor(100);
-  json.score = Math.floor(Math.random() * (max - min) + min); // add random score for now
+  const name = document.querySelector('#yourname'); // get form input element with id=yourname
+  const color = document.querySelector('#color');
 
-  let clientData = JSON.stringify(json) // create json string from json object
+  let formData = {}  // json for client data
+  formData.name = name.value 
+  formData.color = color.value 
+  formData.score = randomNum(1,100); // Add random score between 1-100
 
-  const response = await fetch('/submit', { // send client data to server 
+  const response = await fetch('/submit', { // Send client data to server 
     method: 'POST',
-    body: clientData // set body of request to clientData json string
+    body: JSON.stringify(formData) // Convert clientData to JSON string
   })
 
-  let serverData = await response.json() // get json string from server response
+  let serverData = await response.json() // Get server response
   console.log('SERVER DATA (after add player):')
-  console.log(serverData) // print json string to console
-   populateList(serverData);
+  console.log(serverData) // Print current server data
+  populateList(serverData); // Populate list of players in html with server data
 }
 
+// Populate list of players in html with server data
 function populateList(serverData) {
-
-  // Remove list from body of html
-  list = document.getElementById('playerList');
-  if (list) {
-    list.remove();
+  playerList = document.getElementById('playerList');
+  if (playerList) {
+    playerList.remove();  // Reset player list by removing old list
   }
 
-  list = document.createElement('ol'); // create ordered list element 
-  list.id = 'playerList';
-  document.body.appendChild(list); // append list to body of html
+  playerList = document.createElement('ol'); // Ordered list of players 
+  playerList.id = 'playerList';
+  document.body.appendChild(playerList);
 
-  serverData.forEach(d => { // for each element in json string, create a list item and append to list
+  // For each player in server data, create a list item
+  serverData.forEach(d => { 
+    const player = document.createElement('li') // Player list item
 
-    const item = document.createElement('li')
-
-    // add edit button
+    // Add edit button
     const editButton = document.createElement('button')
     editButton.innerHTML = 'edit'
     editButton.class = 'editButton'
 
-
-    // add delete button
+    // Add delete button
     const deleteButton = document.createElement('button')
     deleteButton.innerHTML = 'delete'
     deleteButton.class = 'deleteButton'
 
-    // Server Data to be displayed in list item
-    item.innerHTML = `Name: ${d.name}, Color: ${d.color}, Score: ${d.score}, Rank: ${d.rank}`
-    item.className = 'player'
-    item.id = `${d.name}`; // set id of list item to name of player
+    // Server Data to be displayed in list player
+    player.innerHTML = `Name: ${d.name}, Color: ${d.color}, Score: ${d.score}, Rank: ${d.rank}`
+    player.className = 'player'
+    player.id = `${d.name}`; // Set id of player list item to name of player
 
-    // Add buttons in li item
-    item.appendChild(editButton)
-    item.appendChild(deleteButton)
+    // Add buttons in li player
+    player.appendChild(editButton)
+    player.appendChild(deleteButton)
 
-    list.appendChild(item)
+    // Add player <li> to list <ol>
+    playerList.appendChild(player) 
   })
 }
 
+// When page loads, add event listeners to buttons
 window.onload = function () {
   const playbutton = document.querySelector('#playbutton');
   playbutton.onclick = submit;
@@ -77,8 +77,7 @@ window.onload = function () {
   document.addEventListener('click', function (e) {
     if (e.target && e.target.class == 'deleteButton') {
       let player = e.target.closest('.player');
-      // Call the deletePlayer function with the player name
-      deletePlayer(player.id);
+      deletePlayer(player.id); // player id is name of player
     }
   });
 
@@ -86,47 +85,46 @@ window.onload = function () {
   document.addEventListener('click', function (e) {
     if (e.target && e.target.class == 'editButton') {
       let player = e.target.closest('.player');
-      // Call the editPlayer function with the player name
-      editPlayer(player.id);
+      editPlayer(player.id); // player id is name of player
     }
   });
 }
 
+// Edit player name on server
 async function editPlayer(playerName) {
-  let newName = prompt("Please enter new name:", "New Name");
+  let newName = prompt("Enter new name:", "New Name"); // Get new name from user
   if (newName == null || newName == "") {
-    alert("Player name not changed");
+    alert("Player name not changed"); // If user cancels or enters empty string, do nothing
   } else {
-    let json = {}  // create json object
-    json.name = playerName // add name
-    json.newName = newName // add new name
+    let editPlayer = {}
+    editPlayer.name = playerName
+    editPlayer.newName = newName // New name to be changed to
 
     const response = await fetch('/edit', {
       method: 'PUT',
-      body: JSON.stringify(json)
+      body: JSON.stringify(editPlayer)
     })
 
-    let serverData = await response.json() // get json string from server response
+    let serverData = await response.json()
     console.log('SERVER DATA (after edit):');
-    console.log(serverData); // print json string to console
+    console.log(serverData);
     populateList(serverData);
   }
 }
 
 
-
+// Delete player from server
 async function deletePlayer(playerName) {
-  let json = {}  // create json object
-  json.name = playerName // add name
+  let deletePlayer = {}
+  deletePlayer.name = playerName // Player name to be deleted
 
-  // let playerNameJSON = JSON.stringify(playerName) // create json string 
   const response = await fetch('/delete', {
     method: 'DELETE',
-    body: JSON.stringify(json)
+    body: JSON.stringify(deletePlayer)
   })
 
-  let serverData = await response.json() // get json string from server response
+  let serverData = await response.json()
   console.log('SERVER DATA (after delete):');
-  console.log(serverData); // print json string to console
+  console.log(serverData);
   populateList(serverData);
-}
+}
\ No newline at end of file

From c7dceb3fabb24381b7dcd539666ad28deabb9c9a Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 11:43:13 -0400
Subject: [PATCH 23/29] added to readme

---
 README.md         | 12 ++++++++++--
 public/js/main.js | 10 ++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 37ba5051..f26a7862 100644
--- a/README.md
+++ b/README.md
@@ -3,9 +3,17 @@
 Sameer Desai 
 Glitch: https://a2-smeeboi.glitch.me
 
-Text form with name and color inputs. Sends json to server. Can delete players with delete button. Checks player name so cannot add duplicate player with same name.
+Random number "game". 
 
-Need to scroll down to see results. not enough time to fix
+Create player name and color with form inputs. Then "game" generates a random number between 1-100 for the score. Then this player info name, color, score gets sent to server.
+
+Server creates rank derived field by looking at all player's score and assigning rank for each player. Now all players info gets sent back to client and displayed under Results section with added rank derived field.
+
+Then user can delete players with delete button which deletes player info on server and server also fixes rank of all players. 
+
+Then user can edit player name with edit button which edits player info on server and will change all players with that name.
+
+Need to scroll down to see results. Not enough time to fix
 
 
 ## Technical Achievements
diff --git a/public/js/main.js b/public/js/main.js
index 78317453..5b4bbf1f 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -2,11 +2,14 @@
 
 // CLIENT CODE
 
+let playerList = undefined;
+
+// Random int between min and max
 function randomNum(min, max) {
   return Math.floor(Math.random() * (max - min +1)) + min;
 }
 
-let playerList = undefined;
+// When play button is clicked, submit form data to server
 const submit = async function (event) {  
   event.preventDefault(); // Stop page defualt reload behavior
 
@@ -46,12 +49,12 @@ function populateList(serverData) {
 
     // Add edit button
     const editButton = document.createElement('button')
-    editButton.innerHTML = 'edit'
+    editButton.innerHTML = 'Edit'
     editButton.class = 'editButton'
 
     // Add delete button
     const deleteButton = document.createElement('button')
-    deleteButton.innerHTML = 'delete'
+    deleteButton.innerHTML = 'Delete'
     deleteButton.class = 'deleteButton'
 
     // Server Data to be displayed in list player
@@ -112,7 +115,6 @@ async function editPlayer(playerName) {
   }
 }
 
-
 // Delete player from server
 async function deletePlayer(playerName) {
   let deletePlayer = {}

From b0987d8ced7eb5470acd4963f21214633c667d9d Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 11:49:08 -0400
Subject: [PATCH 24/29] adding css

---
 public/css/main.css | 12 +++++++++---
 public/index.html   |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 0ec6f6e7..ed891dfa 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -40,13 +40,19 @@ h1.vert-move {
 }
 
 input{
-width: 100%;
+width: 70%;
 height: 80%;
+font-size: 60%;
+border: none;
+  outline: none;
+  border-bottom: 1px solid black;
+
 }
 
 
-.playbutton {
+button {
   margin-top: 20px;
+  margin-left: 10px;
   align-items: center;
   background-color: white;
   border-radius: 12px;
@@ -64,6 +70,6 @@ height: 80%;
   touch-action: manipulation;
 }
 
-.playbutton:hover {
+button:hover {
   box-shadow: #121212 0 0 0 3px, transparent 0 0 0 0;
 }
diff --git a/public/index.html b/public/index.html
index b4e50e4a..93386012 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <script src="js/main.js"></script>
-  <!-- <link rel="stylesheet" href="css/main.css"> -->
+  <link rel="stylesheet" href="css/main.css">
 
   <!-- get rid of favicon error -->
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">

From 150668d42d07b3a6f6cbc9419b8c30a102375ef0 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 11:52:51 -0400
Subject: [PATCH 25/29] bad

---
 public/js/main.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/js/main.js b/public/js/main.js
index 5b4bbf1f..2239524e 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -34,6 +34,7 @@ const submit = async function (event) {
 
 // Populate list of players in html with server data
 function populateList(serverData) {
+
   playerList = document.getElementById('playerList');
   if (playerList) {
     playerList.remove();  // Reset player list by removing old list
@@ -43,6 +44,7 @@ function populateList(serverData) {
   playerList.id = 'playerList';
   document.body.appendChild(playerList);
 
+
   // For each player in server data, create a list item
   serverData.forEach(d => { 
     const player = document.createElement('li') // Player list item

From 9ca2a6bbbe9b897750a28e1e80c82e2292d1605e Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 11:53:47 -0400
Subject: [PATCH 26/29] add to readme

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f26a7862..90d0be63 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ Then user can delete players with delete button which deletes player info on ser
 
 Then user can edit player name with edit button which edits player info on server and will change all players with that name.
 
-Need to scroll down to see results. Not enough time to fix
+NOTE: Need to scroll down to see results. Not enough time to fix :(
 
 
 ## Technical Achievements
@@ -21,7 +21,7 @@ Need to scroll down to see results. Not enough time to fix
 
 ### Design/Evaluation Achievements
 - **Design Achievement 1**:
-Used Jost Google Font,
+Flexbox, Used Jost Google Font,
 CSS animate header to move up and down,
 Button outline on hover
 

From a9d9f146a87a1a4487a0ae49123bcadd8646bcc5 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Tue, 12 Sep 2023 11:54:44 -0400
Subject: [PATCH 27/29] i guess i should submit :(

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 90d0be63..77aeff51 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
 # a2-SmeeBoi: 
 Sameer Desai 
-Glitch: https://a2-smeeboi.glitch.me
+Glitch: 
 
 Random number "game". 
 

From a934fd2a94f9b40efe441b0f683c53fb06801f59 Mon Sep 17 00:00:00 2001
From: Sameer Desai <32615775+SmeeBoi@users.noreply.github.com>
Date: Tue, 12 Sep 2023 11:56:33 -0400
Subject: [PATCH 28/29] added glitch

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 77aeff51..08f95127 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 
 # a2-SmeeBoi: 
 Sameer Desai 
-Glitch: 
+Glitch: https://a2-smeeboi-sameer-desai.glitch.me/
 
 Random number "game". 
 

From c2d4148420ec46ebaeb6dee8f987e3004d043233 Mon Sep 17 00:00:00 2001
From: SmeeBoi <sameer.desai.boston@gmail.com>
Date: Wed, 13 Sep 2023 12:49:51 -0400
Subject: [PATCH 29/29] added confirm popup when delete button clicked

---
 public/css/main.css | 21 +++++++++++++++++----
 public/index.html   | 30 ++++++++++++++----------------
 public/js/main.js   | 31 ++++++++++++++++++++++---------
 3 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index ed891dfa..16c1a5c5 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,6 +1,7 @@
 *{
-  margin: 0;
-  padding: 0;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
   font-family: 'Josefin Sans', sans-serif;
 font-family: 'Jost', sans-serif;
 }
@@ -11,7 +12,7 @@ body {
 font-size: 3rem;
 }
 
-.container {
+#container {
   min-height: 100vh;
   min-width: 100vw;
   display: flex;
@@ -20,8 +21,20 @@ font-size: 3rem;
   align-items: center;
 }
 
+#playerList {
+  font-size: 1rem;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+li{
+  size: 1rem;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 
-.input-container {
+#input-container {
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/public/index.html b/public/index.html
index 93386012..ef254a6d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,28 +13,26 @@
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Jost&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Jost&display=swap" rel="stylesheet">
 </head>
 
 
 <body>
-  <div class="container">
-  <h1 class ="vert-move">Spacebar Game</h1>
-
-<div class="input-container">
-    <label for="yourname">Player name:</label>
-    <input type="text" id="yourname">
-
-    <label for="color">Color:</label>
-    <input type="text" id="color">
+  <div id="container">
+    <h1 class="vert-move">Spacebar Game</h1>
+
+    <div id="input-container">
+      <label for="yourname">Player name:</label>
+      <input type="text" id="yourname">
+      <label for="color">Color:</label>
+      <input type="text" id="color">
+      <button id="playbutton">Play</button>
+    </div>
+
+    <p> Player Results</p>
   </div>
 
-    <button class="playbutton" id="playbutton">Play</button>
-  
-  <p> Player Results</p>
-</div>
-  
 
 </body>
 
diff --git a/public/js/main.js b/public/js/main.js
index 2239524e..6e54d2ff 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -6,20 +6,24 @@ let playerList = undefined;
 
 // Random int between min and max
 function randomNum(min, max) {
-  return Math.floor(Math.random() * (max - min +1)) + min;
+  return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
 // When play button is clicked, submit form data to server
-const submit = async function (event) {  
+const submit = async function (event) {
   event.preventDefault(); // Stop page defualt reload behavior
 
+  // hide div with input-container
+  const inputContainer = document.querySelector('#input-container');
+  inputContainer.style.display = 'none';
+
   const name = document.querySelector('#yourname'); // get form input element with id=yourname
   const color = document.querySelector('#color');
 
   let formData = {}  // json for client data
-  formData.name = name.value 
-  formData.color = color.value 
-  formData.score = randomNum(1,100); // Add random score between 1-100
+  formData.name = name.value
+  formData.color = color.value
+  formData.score = randomNum(1, 100); // Add random score between 1-100
 
   const response = await fetch('/submit', { // Send client data to server 
     method: 'POST',
@@ -35,6 +39,8 @@ const submit = async function (event) {
 // Populate list of players in html with server data
 function populateList(serverData) {
 
+
+
   playerList = document.getElementById('playerList');
   if (playerList) {
     playerList.remove();  // Reset player list by removing old list
@@ -42,11 +48,15 @@ function populateList(serverData) {
 
   playerList = document.createElement('ol'); // Ordered list of players 
   playerList.id = 'playerList';
-  document.body.appendChild(playerList);
 
+  // document.body.appendChild(playerList);
+
+  // add playerList to body inside the div with id=container
+  let container = document.getElementById('container');
+  container.appendChild(playerList);
 
   // For each player in server data, create a list item
-  serverData.forEach(d => { 
+  serverData.forEach(d => {
     const player = document.createElement('li') // Player list item
 
     // Add edit button
@@ -69,7 +79,7 @@ function populateList(serverData) {
     player.appendChild(deleteButton)
 
     // Add player <li> to list <ol>
-    playerList.appendChild(player) 
+    playerList.appendChild(player)
   })
 }
 
@@ -82,7 +92,9 @@ window.onload = function () {
   document.addEventListener('click', function (e) {
     if (e.target && e.target.class == 'deleteButton') {
       let player = e.target.closest('.player');
-      deletePlayer(player.id); // player id is name of player
+      if (confirm(`Are you sure you want to delete Player: ${deletePlayer.name}?`) == true) {
+        deletePlayer(player.id); // player id is name of player
+      }
     }
   });
 
@@ -93,6 +105,7 @@ window.onload = function () {
       editPlayer(player.id); // player id is name of player
     }
   });
+
 }
 
 // Edit player name on server