From c69ab3d78b7f9be4a0b5d822eb11bf562cc08385 Mon Sep 17 00:00:00 2001 From: "Glitch (overjoyed-nebulous-cardamom)" Date: Tue, 20 Sep 2022 01:42:55 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8C=95=F0=9F=98=82=20Updated=20with?= =?UTF-8?q?=20Glitch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .glitch-assets | 2 ++ package-lock.json | 9 +++++++ public/css/style.css | 34 ++++++++++++++++++++++- public/index.html | 55 ++++++++++++++++--------------------- public/js/scripts.js | 64 ++++++++++++++++++++++++++++++++++++++++++-- server.improved.js | 13 ++++++--- shrinkwrap.yaml | 15 +++++++++++ 7 files changed, 153 insertions(+), 39 deletions(-) create mode 100644 .glitch-assets create mode 100644 package-lock.json create mode 100644 shrinkwrap.yaml diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 0000000..c636641 --- /dev/null +++ b/.glitch-assets @@ -0,0 +1,2 @@ +{"name":"675c20fe-58dc-436f-8f00-58367f888830.image.png","date":"2022-09-20T00:24:05.160Z","url":"https://cdn.glitch.global/2ed50ea0-eb24-4cf5-b2a3-8b5189b32fe9/675c20fe-58dc-436f-8f00-58367f888830.image.png","type":"image/png","size":715092,"imageWidth":996,"imageHeight":1250,"thumbnail":"https://cdn.glitch.global/2ed50ea0-eb24-4cf5-b2a3-8b5189b32fe9/thumbnails%2F675c20fe-58dc-436f-8f00-58367f888830.image.png","thumbnailWidth":263,"thumbnailHeight":330,"uuid":"dw3S7ye1jowE6fCq"} +{"name":"4ba96f5d-d31f-4974-8c53-9f4c592e5b1f.image.png","date":"2022-09-20T00:24:11.968Z","url":"https://cdn.glitch.global/2ed50ea0-eb24-4cf5-b2a3-8b5189b32fe9/4ba96f5d-d31f-4974-8c53-9f4c592e5b1f.image.png","type":"image/png","size":715092,"imageWidth":996,"imageHeight":1250,"thumbnail":"https://cdn.glitch.global/2ed50ea0-eb24-4cf5-b2a3-8b5189b32fe9/thumbnails%2F4ba96f5d-d31f-4974-8c53-9f4c592e5b1f.image.png","thumbnailWidth":263,"thumbnailHeight":330,"uuid":"YimAs18vu0ladptG"} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..9a79af7 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,9 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "mime": { + "version": "2.6.0" + } + } +} diff --git a/public/css/style.css b/public/css/style.css index d5f842a..f34c31b 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1,33 @@ -/*Style your own assignment! This is fun! */ \ No newline at end of file + body { + background-color: #88A5F5; + display: grid; + grid-template-columns: 25% 75%; + } +img{ + grid-column: 1; + +} +a:link, a:visited { + background-color: #f44336; + color: white; + padding: 14px 25px; + text-align: center; + text-decoration: none; + display: inline-block; +} + +a:hover, a:active { + background-color: red; +} +p, h1{ + grid-column-start: 2; + font-family: "Trirong", serif; +} +#results{ + grid-column-start: 2; +} +.column1{ + margin: auto; + width: 50%; + +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index c56d620..ddc92f2 100644 --- a/public/index.html +++ b/public/index.html @@ -1,41 +1,32 @@ - + + + + CS4241 Assignment 2 - + + + +

+ Insight on Age According To Opinions In NY Times Article About Millenials +

+ Girl in a jacket
- - + + + +
+
+ Learn About Article +
+
+
+

+ Disclaimer: these ratings are not representative of the programmer/publishers opinions on age +

- diff --git a/public/js/scripts.js b/public/js/scripts.js index de052ea..bbd4484 100644 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,63 @@ -// Add some Javascript code here, to run on the front end. +const submit = function (e) { + e.preventDefault(); -console.log("Welcome to assignment 2!") \ No newline at end of file + const name = document.querySelector("#yourname"); ////was comma is that bad? + //gonna replicate for more fields + const age = document.querySelector("#age"); + const favLet = document.querySelector("#favoriteletter"); //is it going away???? + + function isOld(int) { + // turn string into number + var pointNum = parseFloat(int); + if (pointNum < 39) { + return " not old."; + + }else if (pointNum > 39){ + return " old." + } else return " not a proper age."; + } + + const json = { + yourname: name.value, + age: age.value, + favoriteLetter: favLet.value, + old: isOld(age.value), + }, + body = JSON.stringify(json); + const myObj = JSON.parse(body); + + + fetch("/submit", { + method: "POST", + body, + }).then(function(response){ + return response.json() + }).then(function(json){ + + + + + + + let p = document.createElement('li'); + let str = "Hello " + json.yourname + ", " + "your favorite letter is " + + json.favoriteLetter + ". You are " + json.age + ". Therefore you are" + + json.old; + + p.innerHTML = str; + document.getElementById("results").appendChild(p); +}) + + + + + return false; //keep is important +};///important for function to end here + +window.onload = function () { + const button = document.querySelector("#submit"); + button.onclick = submit; +}; + + +console.log("Welcome to assignment 2!"); diff --git a/server.improved.js b/server.improved.js index 26673fc..b3ab438 100644 --- a/server.improved.js +++ b/server.improved.js @@ -22,7 +22,9 @@ const server = http.createServer( function( request,response ) { const handleGet = function( request, response ) { const filename = dir + request.url.slice( 1 ) + + if( request.url === '/' ) { sendFile( response, 'public/index.html' ) }else{ @@ -32,7 +34,7 @@ const handleGet = function( request, response ) { const handlePost = function( request, response ) { let dataString = '' - + request.on( 'data', function( data ) { dataString += data }) @@ -41,9 +43,12 @@ const handlePost = function( request, response ) { console.log( JSON.parse( dataString ) ) // ... do something with the data here!!! - - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() + + let dataJson = JSON.parse(dataString) + dataJson.remark = "never mind" + + response.writeHead( 200, "All good!", {'Content-Type': 'text/plain' }) + response.end(JSON.stringify(dataJson)) }) } diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 0000000..43c1986 --- /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 5323c3e35dd1919de8ed3c135710312e2def6d77 Mon Sep 17 00:00:00 2001 From: "Glitch (overjoyed-nebulous-cardamom)" Date: Tue, 20 Sep 2022 02:11:32 +0000 Subject: [PATCH 2/2] a2-havanahail-hailey-anderson --- README.md | 99 ++++---------------------------------------- public/css/style.css | 4 +- public/index.html | 4 +- 3 files changed, 13 insertions(+), 94 deletions(-) diff --git a/README.md b/README.md index f229958..e06ea5a 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,15 @@ -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 (complete at least two) 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 `