diff --git a/README.md b/README.md index 9434c98..3374823 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,41 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== - -Due: September 8th, by 11:59 AM. - -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, modify, or delete data items residing in the server's memory -- a `Server Logic` which, upon receiving new or modified "incoming" data, includes and uses a function that adds at least one additional derived field to this incoming data before integrating it with the existing dataset -- the `Derived field` for a new row of data must be computed based on fields already existing in the row. -For example, a `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 `
+ + + + + + +
SongArtistDurationAlbumPlaylist length
+
+ diff --git a/public/js/scripts.js b/public/js/scripts.js index de052ea..d4a18ef 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,90 @@ -// Add some Javascript code here, to run on the front end. -console.log("Welcome to assignment 2!") \ No newline at end of file +const submit = function(e) +{ + e.preventDefault() + + let songname = document.querySelector("#songname") + let artist = document.querySelector("#artist") + let duration = document.querySelector("#songduration") + let album = document.querySelector("#album") + + let json = { + songname: songname.value, + artist: artist.value, + duration: duration.value, + album: album.value, + playlistDur: 0 + } + let body = JSON.stringify(json) + + fetch( '/submit', { + method:'POST', + body + }) + .then( async function ( response ) { + let newData = await response.json() + addToPlaylist(newData) + console.log( newData ) + }) + return false +} + +function addToPlaylist(newData) +{ + const table = document.getElementById("results") + table.innerHTML = "SongArtistDurationAlbumPlaylist length" + + newData.forEach((element, index) => { + + // if(element.songname === undefined) + // { + // ; + // } + // else + // { + table.innerHTML += + "" + element.songname + "" + + element.artist + "" + + element.duration + "" + + element.album + "" + + element.playlistDur + "" + //} + }) + } + + +// const reset = function(e) +// { +// e.preventDefault() +// body = JSON.stringify("") + +// fetch( '/reset', { +// method:'POST', +// body +// }) +// .then(async function(response) +// { +// let emptyData = await response.json() +// emptyPlaylist(emptyData) +// console.log(emptyData) +// }) +// return false + +// } + + function emptyPlaylist(newData) + { + const table = document.getElementById("results") + table.innerHTML = "SongArtistDurationAlbumPlaylist length" + } + + + window.onload = function() + { + const submitButton = document.getElementById( 'submitButton' ) + submitButton.onclick = submit + + const resetButton = document.getElementById( 'resetButton' ) + resetButton.onclick = reset + } + diff --git a/public/newsboys.PNG b/public/newsboys.PNG new file mode 100644 index 0000000..0fa7609 Binary files /dev/null and b/public/newsboys.PNG differ diff --git a/server.improved.js b/server.improved.js index 26673fc..4cb12c7 100644 --- a/server.improved.js +++ b/server.improved.js @@ -6,11 +6,8 @@ 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} -] +appdata = [] +let playlistLength = 0 const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { @@ -33,16 +30,28 @@ const handleGet = function( request, response ) { const handlePost = function( request, response ) { let dataString = '' + if(request.url === '/reset') + { + appdata = [] + playlistLength = 0 + } + request.on( 'data', function( data ) { dataString += data }) request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) + console.log( JSON.parse( dataString ).duration ) - // ... do something with the data here!!! + let newSong = JSON.parse(dataString) + newSong.playlistDur = parseInt(newSong.duration) + playlistLength + playlistLength = newSong.playlistDur + console.log( newSong ) + appdata.push( newSong ) response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.write(JSON.stringify(appdata)) + console.log(appdata) response.end() }) }