diff --git a/README.md b/README.md index 2c6e21e2..ba1659c2 100755 --- a/README.md +++ b/README.md @@ -1,89 +1,25 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +# Play WebLibs by Karen Royer +![](https://cdn.glitch.com/9e6ce424-13fc-458f-9a75-d60479a742c5%2Fscreenshot.jpg?v=1568061935920) +Like the old madlibs, this app takes two nouns and two adjectives and constructs random sentence output. -Due: September 9th, by 11:59 AM. +## Techanical Achievements: +- **Tech Achievement 1**: populated list elements from the scripts.js file +- **Tech Achievement 2**: randomly selected elements from an array +- **Tech Achievement 3**: sliced the appdata database to delete a user selected record +- **Tech Achievement 4**: used grid layout for css -This assignment aims to introduce you to the concepts and practice involved in creating a prototype (i.e. not deployment ready) two-tiered web application. +## Design Achievements: +- **Design Achievement 1**: Accessible +- **Design Achievement 2**: recreated a frosted glass, blurred background for the center of the page +- **Design Achievement 3**: fully scalable layout +- **Design Achievement 4**: video in the background -The baseline aims of this assignment involve creating an application that demonstrates the use of several specific pieces of HTML, CSS, JavaScript, and Node.js functionality. -Another aim of this assignment is to establish creative boundaries in which you and your partner can explore designing, implementing, and evaluating usable, useful, novel, and technically efficient web applications. -Baseline Requirements ---- - -Note that there is a very large range of application areas and possibilities that meet these baseline requirements. -Games, internet of things, organizational tools, commerce, media - all are possibilities with a two-tiered form-focused web application. - -Do not limit yourselves to any of the examples given below. -Examples like the upcoming `efficiency_ratio` idea for the `cars` dataset are meant to be illustrative and easy to understand. -They are not intended to be sensible or useful ideas. - -Your application is required to implement the following functionalities: - -- a `Server` which not only serves files, but also maintains a tabular dataset with 3 or more fields related to your application -- a `Results` functionality which shows the entire dataset residing in the server's memory -- a `Form/Entry` functionality which allows a user to add, modify, or delete data items residing in the server's memory -- a `Server Logic` which, upon receiving new or modified "incoming" data, includes and uses a function that adds at least one additional derived field to this incoming data before integrating it with the existing dataset - - the `Derived field` for a new row of data must be computed based on fields already existing in the row. For example, a `cars` dataset with `year`, `horsepower`, and `fuel_efficiency` may create a new field `efficiency_ratio` by dividing `fuel_efficiency` by `horsepower` - -Your application is required to demonstrate the use of the following concepts: - -HTML: -- One or more [HTML Forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), with any combination of form tags appropriate for the user input portion of the application - - Clarification: the results page can be implemented in any way. `
`s, `table`s, and `list`s are common choices - -CSS: -- CSS styling of the primary visual elements in the application -- Various CSS Selector functionality must be demonstrated: - - Element selectors - - ID selectors - - Class selectors -- CSS positioning and sizing of the primary visual elements in the application: - - CSS to cause at least one element to be horizontally centered on the page - - CSS to cause at least one pair of elements to appear side-by-side - - CSS defined in a maintainable, readable form, in external stylesheets - -JavaScript: -- At minimum, a small amount of front-end JavaScript to get / fetch data from the server; a sample is provided in this repository. - -Node.js: -- An HTTP Server that delivers all necessary files and data for the application. A starting point is provided in this repository. - -Deliverables ---- - -Do the following to complete this assignment: - -1. Fork the starting project code. This repo contains some starter code that may be used or discarded as needed. -2. Implement your project with the above requirements. -3. Test your project to make sure that when someone goes to your main page, it displays correctly. -4. Deploy your project to Glitch, and fill in the appropriate fields in your package.json file. -5. Ensure that your project has the proper naming scheme `a2-yourname` so we can find it. -6. Modify the Readme to the specifications below. -7. Create and submit a Pull Request to the original repo. Only one member needs to submit a pull request. - -Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions) ---- - -## Your Web Application Title -Include a very brief summary of your project here. -Images are encouraged, along with concise, high-level text. - -Here is a sample formula for summarizing your activities, talk about: -- the domain area the project pertains to -- the main challenges or problems the application addresses -- the key innovations that make it possible to address the problem -- the main results of the implementation, does it really address the problem? -- any additional implications of the resulting application, or possibly areas for future work that have been discovered as part of the design and implementation activities - -(Note that when I use the above formula, I aim to have only one sentence per thought in order to remain concise.) +- This is a small game +- A challenge it addresses is removing the data records a user chooses +- Future work would include improving the appearance, adding grammarly to help user enter only + words and fixing the text area to update after deletion. http://a2-charlieroberts.glitch.me -## Technical Achievements -- **Tech Achievement 1**: Using a combination of... -- **Tech Achievement 2**: ... - -### Design/Evaluation Achievements -- **Design Achievement 1**: Shown in `style.css`, the code... -- **Design Achievement 2**: We tested the application with n=X users, finding that... +https://glitch.com/~a2-arundelain \ No newline at end of file diff --git a/package.json b/package.json index 988f135f..cddd80bc 100755 --- a/package.json +++ b/package.json @@ -1,12 +1,13 @@ { - "name": "", - "version": "", - "description": "", - "author": "", + "name": "WebLibs", + "version": "1.0", + "description": "Madlibs for the web", + "author": "Karen Royer", "scripts": { "start": "node server.improved.js" }, "dependencies": { + "imdb-api": "^4.0.3", "mime": "^2.4.4" } } diff --git a/public/assets/screenshot.jpg b/public/assets/screenshot.jpg new file mode 100644 index 00000000..167e85d3 Binary files /dev/null and b/public/assets/screenshot.jpg differ diff --git a/public/css/style.css b/public/css/style.css index d5f842ab..a62cd2f4 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1,84 @@ -/*Style your own assignment! This is fun! */ \ No newline at end of file +/* Karen Royer - 09/09/2019 */ + +body { + display:grid; + background: skyblue; + font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif; + background-image: url('https://41.media.tumblr.com/efd15be8d41b12a7b0ef17fba27c3e20/tumblr_mqqy59HMaf1qzattso1_1280.jpg'); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + height: 80vh; + margin: 30px; + place-items: center; +} + +h1 { + font-style: italic; + color: navy; + font-size:55px; +} + +textarea{ + font-family: system-ui, sans-serif; + font-size:16px; + background-color: rgba(255, 255, 224, 0.5); + border-radius: 5px; + color: black; + width:90%; + height:300px; +} + +video { + object-fit: cover; + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; +} + +button{ + margin:5px; + font-family:"Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif; + font-size:16px; + font-style:bold; +} + +@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { + .modal { + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + background-color: rgba(255, 255, 255, 0.5); + } +} + +.modal { + background-color: rgba(255, 225, 255, 0.5); + border-radius: 5px; + color: #333; + font-family: system-ui, sans-serif; + line-height: 1.5; + max-width: 75%; + padding: 1rem 2rem; +} + +.container{ + display:grid; + grid-template-columns: 130px 100px 100px 100px 100px 100px; + grid-template-rows: 20px; + border-radius: 5px; + color: #333; + font-family: system-ui, sans-serif; + line-height: 1.5; + max-width: 50%; + padding: 1rem 2rem; +} + +.list{ + margin:20px; + display:grid; + font-family: system-ui, sans-serif; + color: white; + grid-template-columns:35% 65%; +} diff --git a/public/index.html b/public/index.html index c56d620e..48472dfd 100755 --- a/public/index.html +++ b/public/index.html @@ -1,41 +1,29 @@ + CS4241 Assignment 2 + + -
- - -
+ +
+
+

Play WebLibs

+
+ + + + + +
+
+
+
    + +
    +
    - diff --git a/public/js/scripts.js b/public/js/scripts.js index de052eae..09e5452a 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,105 @@ -// Add some Javascript code here, to run on the front end. +//***** Karen Royer - https://github.com/Arundelain/a2-arundelain +//***** Assignment 2 CS4241 +//***** 09/09/2019 +//***** -console.log("Welcome to assignment 2!") \ No newline at end of file + +console.log("Welcome to assignment 2!") + +// initial data - declare a key counter for the data structure and +// arrays to hold a collection of verbs, prepositions and colors +var keyCounter = 0; +//story details here +var verb = ['jumped', 'hiked', 'rode', 'traipsed', 'skipped','meandered','fell','hopped','trekked', 'tramped']; +var where = ['over', 'under', 'around','through', 'beyond', 'between', 'across','past','inside', 'near']; +var color = ['red','green', 'blue', 'yellow','orange', 'purple','brown','black','white','sky blue pink']; + +// data structure - key, noun, noun, adjective, adjective, verb, where +// this is the first record - key is zero +var appdata = [{ key:keyCounter, noun_01: 'noun', noun_02:'noun', adjective_01:'adjective', adjective_02:'adjective', verb:'verb', where:'preposition'}]; + +//increment key to prepare to receive user data +keyCounter = 1; + +//submit function from submit button +const submitF = function( e ) { + // prevent default form action from being carried out + e.preventDefault() + +// setup up initial values of data + var nounItem_01 = document.querySelector( '#noun_01' ), + nounItem_02 = document.querySelector('#noun_02'), + adItem_01 = document.querySelector('#adjective_01'), + adItem_02 = document.querySelector('#adjective_02'), + fullSentence = document.querySelector('textarea'), + list = document.querySelector('ul'), + listString = [], + // get a random verb, color and preposition for the sentence. + json = { key:keyCounter, noun_01: nounItem_01.value, noun_02:nounItem_02.value, adjective_01:adItem_01.value, adjective_02:adItem_02.value, verb:verb[Math.floor(Math.random() * 10)], where:where[Math.floor(Math.random() * 10)]}, + body = JSON.stringify( json ), + data = ''; + + + fetch( '/submit', { + method:'POST', + body + }) + .then( function( response ) { + console.log( "this is response" + response ); + //after the user clicks on the submit button, get the data in the input areas to push onto the end of + //the data array. + var tempObj = {}; + tempObj['key'] = keyCounter; + tempObj['noun_01'] = json.noun_01; + tempObj['noun_02'] = json.noun_02; + tempObj['adjective_01'] = json.adjective_01; + tempObj['adjective_02'] = json.adjective_02; + tempObj['verb'] = verb[Math.floor(Math.random() * 10)]; + tempObj['where'] = where[Math.floor(Math.random() * 10)]; + appdata.push(tempObj); + + // construct the sentence for the text area then output the full sentence + listString.push(' The '+ appdata[keyCounter].adjective_01 +' '+ color[Math.floor(Math.random() * 10)]+' '+ appdata[keyCounter].noun_01 +' '+ appdata[keyCounter].verb +' '+ appdata[keyCounter].where +' '+ 'the '+' '+ appdata[keyCounter].adjective_02 +' '+ appdata[keyCounter].noun_02 +'. '+'\n'); + fullSentence.textContent += listString; + + + //create the list items for the document using the modified database + let listItem = document.createElement('li'); + let listText = document.createElement('span'); + let listBtn = document.createElement('button'); + var myListItem = [keyCounter, listItem]; + listItem.appendChild(listText); + listText.textContent = keyCounter + '-'+ appdata[keyCounter].noun_01+ ', '+appdata[keyCounter].noun_02+ ', '+appdata[keyCounter].adjective_01+ ', '+appdata[keyCounter].adjective_02; + listItem.appendChild(listBtn); + listBtn.textContent = 'Delete'; + list.appendChild(listItem); + //increment the keycounter and wait for the next input + keyCounter++; + + //add actions for the onclick delete button + listBtn.onclick = function(e) { + /// let appLength = appdata.length; + listString = '' + fullSentence.textContent = ''; + + if(myListItem[0]>1){ + list.removeChild(listItem); + console.log('cut off item'+ appdata[myListItem[0]].nouns_01); + appdata.splice(myListItem[0],1); + fullSentence.textContent = ""; + }else{ + fullSentence.textContent = "This first item on the list cannot be deleted."+ "\n"; + } + } + + //return focus to the first input area and return response.json + nounItem_01.focus(); + return response.json; + }) + return false + } + + window.onload = function() { + const button = document.querySelector( '#submitButton' ); + button.onclick = submitF; + } diff --git a/server.improved.js b/server.improved.js index 26673fc0..8a9b7139 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,27 +1,21 @@ const http = require( 'http' ), fs = require( 'fs' ), // IMPORTANT: you must run `npm install` in the directory for this assignment - // to install the mime library used in the following line of code + // to install the mime library used in the following line of code - done. mime = require( 'mime' ), 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 server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { - handleGet( request, response ) + handleGet( request, response ) }else if( request.method === 'POST' ){ - handlePost( request, response ) + handlePost( request, response ) } }) const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) + const filename = dir + request.url.slice( 1 ) if( request.url === '/' ) { sendFile( response, 'public/index.html' ) @@ -34,7 +28,7 @@ const handlePost = function( request, response ) { let dataString = '' request.on( 'data', function( data ) { - dataString += data + dataString += data }) request.on( 'end', function() { @@ -48,7 +42,7 @@ const handlePost = function( request, response ) { } const sendFile = function( response, filename ) { - const type = mime.getType( filename ) + const type = mime.getType( filename ) fs.readFile( filename, function( err, content ) {