From 0543a8c1337e9d138ac1df9795c4d307d4e48b55 Mon Sep 17 00:00:00 2001 From: "Glitch (a2-lorenzockio)" Date: Wed, 11 Sep 2024 03:02:02 +0000 Subject: [PATCH 1/2] a2 update --- README.md | 101 ++++---------------------------------------- package.json | 2 +- public/css/main.css | 49 +++++++++++++++++++-- public/index.html | 42 +++++++++++++++--- public/js/main.js | 22 +++++++--- server.js | 24 ++++++----- shrinkwrap.yaml | 15 +++++++ 7 files changed, 134 insertions(+), 121 deletions(-) create mode 100644 shrinkwrap.yaml diff --git a/README.md b/README.md index 4471f667..24a04c9b 100644 --- a/README.md +++ b/README.md @@ -1,100 +1,15 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== -Due: September 9th, by 11:59 AM. +## a2-Lorenzockio -This assignment will 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. +Late extension was used. -Baseline Requirements ---- +Lorenzo Cassano http://a2-lorenzockio.glitch.me -There are a 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 `` tag for this, but `
+ + + + + + + + + + +
NameDateTickets SoldCapacityStatus
+ diff --git a/public/js/main.js b/public/js/main.js index a569258f..58951bce 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -7,8 +7,11 @@ const submit = async function( event ) { // remains to this day event.preventDefault() - const input = document.querySelector( '#yourname' ), - json = { yourname: input.value }, + const name = document.querySelector('#name'), + date = document.querySelector('#date'), + sold = document.querySelector('#sold'), + capacity = document.querySelector('#capacity'), + json = { name: name.value, date: date.value, sold: parseInt(sold.value), capacity: parseInt(capacity.value)}, body = JSON.stringify( json ) const response = await fetch( '/submit', { @@ -16,12 +19,19 @@ const submit = async function( event ) { body }) - const text = await response.text() + const data = await response.json() - console.log( 'text:', text ) + const tbody = document.querySelector("tbody") + tbody.innerHTML = '' + + data.forEach(function(event) { + const row = document.createElement('tr') + row.innerHTML = '' + event.name + '' + event.date + '' + event.sold + '' + event.capacity + '' + event.status + '' + tbody.appendChild(row) + }); } window.onload = function() { - const button = document.querySelector("button"); - button.onclick = submit; + const button = document.querySelector("button") + button.onclick = submit } \ No newline at end of file diff --git a/server.js b/server.js index 9ac27fb8..8324374a 100644 --- a/server.js +++ b/server.js @@ -8,11 +8,7 @@ const http = require( 'http' ), dir = 'public/', port = 3000 -const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] +const appdata = [] const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { @@ -42,11 +38,17 @@ const handlePost = function( request, response ) { request.on( 'end', function() { console.log( JSON.parse( dataString ) ) - // ... do something with the data here!!! - - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end('test') - }) + let event = JSON.parse(dataString) + if (event.sold == event.capacity) { + event.status = 'Sold Out' + } else { + event.status = 'Filling' + } + appdata.push(event) + + response.writeHead(200, { 'Content-Type': 'application/json' }); + response.end(JSON.stringify(appdata)); + }) } const sendFile = function( response, filename ) { @@ -71,4 +73,4 @@ const sendFile = function( response, filename ) { }) } -server.listen( process.env.PORT || port ) +server.listen( process.env.PORT || port ) \ No newline at end of file diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 00000000..43c1986b --- /dev/null +++ b/shrinkwrap.yaml @@ -0,0 +1,15 @@ +dependencies: + mime: 2.6.0 +packages: + /mime/2.6.0: + dev: false + engines: + node: '>=4.0.0' + hasBin: true + resolution: + integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg== +registry: 'https://registry.npmjs.org/' +shrinkwrapMinorVersion: 9 +shrinkwrapVersion: 3 +specifiers: + mime: ^2.4.4 From d8812ee812afe950c867708321dd6fd622132c47 Mon Sep 17 00:00:00 2001 From: Lorenzockio Date: Tue, 10 Sep 2024 23:05:31 -0400 Subject: [PATCH 2/2] Delete shrinkwrap.yaml no idea what this is --- shrinkwrap.yaml | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 shrinkwrap.yaml diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml deleted file mode 100644 index 43c1986b..00000000 --- a/shrinkwrap.yaml +++ /dev/null @@ -1,15 +0,0 @@ -dependencies: - mime: 2.6.0 -packages: - /mime/2.6.0: - dev: false - engines: - node: '>=4.0.0' - hasBin: true - resolution: - integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg== -registry: 'https://registry.npmjs.org/' -shrinkwrapMinorVersion: 9 -shrinkwrapVersion: 3 -specifiers: - mime: ^2.4.4