A2-arundelain-KarenRoyer

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. `<div>`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

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"
   }
 }

public/css/style.css

@@ -1 +1,84 @@
-/*Style your own assignment! This is fun! */
+/* 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%;
+}

public/index.html

@@ -1,41 +1,29 @@
 <!doctype html>
+<!-- Karen Royer - 09/09/2019 -->
 <html lang="en">
   <head>
     <title>CS4241 Assignment 2</title>
     <meta charset="utf-8">
+    <script src="js/scripts.js" ></script>
+    <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
-    <form action="">
-      <input type='text' id='yourname' value="your name here">
-      <button>submit</button>
-    </form>
+    <video alt="A video of moving particles in bright colors." src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/Universe%20-%2013100.mp4" controls muted autoplay loop></video>
+    <main role="main content" class="modal">
+      <form name="data entered here" action="">
+        <h1>Play WebLibs</h1>
+        <section class="conatiner">
+          <input type="text" id="noun_01" value="Enter a noun">
+          <input type="text" id="noun_02" value="Enter a noun">
+          <input type="text" id="adjective_01" value="Enter an adjective">
+          <input type="text" id="adjective_02" value="Enter an adjective">
+          <button id="submitButton">Build Story</button>
+        </section>
+      </form>
+      <section class="list">
+        <ul></ul>
+        <textarea></textarea>
+      </section>
+    </main>
   </body>
-  <script>
-
-  const submit = function( e ) {
-    // prevent default form action from being carried out
-    e.preventDefault()
-
-    const input = document.querySelector( '#yourname' ),
-          json = { yourname: input.value },
-          body = JSON.stringify( json )
-
-    fetch( '/submit', {
-      method:'POST',
-      body 
-    })
-    .then( function( response ) {
-      // do something with the reponse 
-      console.log( response )
-    })
-
-    return false
-  }
-
-  window.onload = function() {
-    const button = document.querySelector( 'button' )
-    button.onclick = submit
-  }
-
-  </script>
 </html>

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!")
+
+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;
+  }