diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 00000000..be86213f --- /dev/null +++ b/.glitch-assets @@ -0,0 +1,2 @@ +{"name":"soragrit-wongsa-pMEGruJJ6Ko-unsplash.jpg","date":"2019-09-06T19:15:57.874Z","url":"https://cdn.glitch.com/79e54494-5c78-498c-9a09-a20e3f7b3641%2Fsoragrit-wongsa-pMEGruJJ6Ko-unsplash.jpg","type":"image/jpeg","size":1387750,"imageWidth":5472,"imageHeight":3648,"thumbnail":"https://cdn.glitch.com/79e54494-5c78-498c-9a09-a20e3f7b3641%2Fthumbnails%2Fsoragrit-wongsa-pMEGruJJ6Ko-unsplash.jpg","thumbnailWidth":330,"thumbnailHeight":220,"uuid":"JhnRUudcVqhI74LU"} +{"name":"price-tag.png","date":"2019-09-06T19:15:58.047Z","url":"https://cdn.glitch.com/79e54494-5c78-498c-9a09-a20e3f7b3641%2Fprice-tag.png","type":"image/png","size":26499,"imageWidth":512,"imageHeight":512,"thumbnail":"https://cdn.glitch.com/79e54494-5c78-498c-9a09-a20e3f7b3641%2Fthumbnails%2Fprice-tag.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"6AhHVT4GvP91I6KN"} diff --git a/README.md b/README.md index 2ccf40cb..c812b863 100755 --- a/README.md +++ b/README.md @@ -1,87 +1,14 @@ -Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js -=== +## shopr - your online wishlist +shopr is a web app pertaining to e-commerce that allows users to collect and manage an online shopping list. This solution serves as an organizatal tool to alleviate the clutter of maintaining web links and product information in basic note taking or text editor software. shopr is a platform dedicated to simplifying the online shopping experience through providing a minimalistic interface that supports basic actions and a central storage location so that information never gets lost. -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. +Users can add shopping items to their wishlist with an associated external link to help track specific locations on the web. By clicking on wishlist items users can navigate to the associated Internet destination. The app also encourages users to select a rating for each item based on desire (where 5 stars represents the most desirable items). The wishlist is then sorted based on ratings and the top 3 most desired items are displayed in a Favorites section. The remainder of the wishlist is stored in a table below the Favorites panel. Here users can update and delete existing records. -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-yourTeamName` 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.) - -http://a2-charlieroberts.glitch.me +https://a2-benemrick.glitch.me ## Technical Achievements -- **Tech Achievement 1**: Using a combination of... -- **Tech Achievement 2**: ... +- **Javascript Functionality**: I implemented several features utilizing client and server-side javascript to interact with various components of the application. On the client-side I wrote functions to retrieve server-side data and display the appropriate UI components to the view. I also developed a dynamic mechanism for calculating the amount of star icons to display based on the `rating` field present on the data record. On the server-side I implemented the basic logic to handle several different types of HTTP requests. I also implemented a simple algorithm to sort the data array based on the `rating` field. In the case where rating are equal, priority is then deferred to the price (`usd`) value where lesser prices will be regarded as more preferable. ### 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... +- **Bootstrap**: I integrated the Bootstrap CDN (https://getbootstrap.com/) into shopr in order to deliver aesthetically pleasing and highly accessible UI components. I utilized a collection of UI elements including a `card-deck` for the Favorites panel and `table-borderless` for the full Wishlist view. I implemented the add and update forms with Boostrap modals, which takes advantage of built in HTML, CSS and Javascript. +- **Font Awesome**: I used the Font Awesome CDN (https://fontawesome.com/?from=io) kit to incorporate multiple icons into the view. The icons represent actionable items that the user can engage in. The use of icons is consistent with a minimal and efficient UI and also provides a unifying structure throughout the view. +- **Google Fonts**: I chose to employ a single font throughout shopr. This site is using Roboto, which is available through embedding the font from Google Fonts (https://fonts.google.com/) and specifying `font-family: 'Roboto', sans-serif;` in `style.css`. diff --git a/package.json b/package.json index 988f135f..869d72d5 100755 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "start": "node server.improved.js" }, "dependencies": { - "mime": "^2.4.4" + "mime": "^2.4.4", + "unsplash-js": "^5.0.0" } } diff --git a/public/css/style.css b/public/css/style.css index d5f842ab..e0f255f9 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1,65 @@ -/*Style your own assignment! This is fun! */ \ No newline at end of file +/*Style your own assignment! This is fun! */ +body, html { + height: 100%; + font-family: 'Roboto', sans-serif; +} + +h2 { + font-family: 'Roboto', sans-serif; + font-weight: bold; +} + +#title { + font-family: 'Roboto', sans-serif; + font-weight: bold; + font-size: 400%; +} + +.link { + color: black; +} + +.icon { + margin-top: 20px; + +} + +.slogan { + font-family: 'Roboto', sans-serif; + font-weight: bold; + font-size: 150%; +} + +.btn { + font-family: 'Roboto', sans-serif; +} + +.stars { + color: #FFD700; +} + +/* The hero image */ +.header-image { + /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */ + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://source.unsplash.com/FK81rxilUXg/1600x900"); + + /* Set a specific height */ + height: 50%; + + /* Position and center the image to scale nicely on all screens */ + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} + +/* Place text in the middle of the image */ +.header-text { + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-family: 'Roboto', sans-serif; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index c56d620e..8873f965 100755 --- a/public/index.html +++ b/public/index.html @@ -1,41 +1,303 @@ - CS4241 Assignment 2 + shopr + + + + + -
- - -
+
+
+

shopr

+

your online wishlist

+ +
+
+ + + + + + + +
+

Favorites

+
+

Wishlist

+
+
+ + + + + + + + diff --git a/public/js/scripts.js b/public/js/scripts.js index de052eae..e69de29b 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +0,0 @@ -// Add some Javascript code here, to run on the front end. - -console.log("Welcome to assignment 2!") \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 26673fc0..5e9419b5 100644 --- a/server.improved.js +++ b/server.improved.js @@ -7,16 +7,20 @@ const http = require( 'http' ), port = 3000 const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} + { 'name': 'Yeezy 350 Boost', 'category': 'Fashion', 'rating': 5, 'usd': 200, 'eur': 182, 'link': "https://stockx.com/adidas-yeezy-boost-350-v2-cream-white?currencyCode=USD&size=8.5&gclid=CjwKCAjwzdLrBRBiEiwAEHrAYr6Goiw3RGnCl12vXPPsgVqOjI-F36X_4AfNaeBDvt6D-mjEkhmVBBoCRBEQAvD_BwE"}, + { 'name': 'Macbook Pro', 'category': 'Tech', 'rating': 3, 'usd': 1299, 'eur': 1178.31, 'link': "https://www.apple.com/shop/buy-mac/macbook-pro/13-inch-space-gray-1.4ghz-quad-core-processor-with-turbo-boost-up-to-3.9ghz-128gb?afid=p238%7Csbepnohbm-dc_mtid_1870765e38482_pcrid_246386726307_pgrid_14874568330_&cid=aos-us-kwgo-pla-mac--slid-----product-MUHN2LL/A" }, + { 'name': 'Wilson Basketball', 'category': 'Sports', 'rating': 2, 'usd': 20, 'eur': 18.14, 'link': "https://www.wilson.com/en-us/basketball/balls/evolution/evolution-game-basketball?gclid=CjwKCAjwzdLrBRBiEiwAEHrAYsO1rcrobWjAgngQhHvN_RTM9DJZj_zVaqj5c4KJ7Vw5_S4yYuE4QxoCYssQAvD_BwE&source=googleshopping&ef_id=CjwKCAjwzdLrBRBiEiwAEHrAYsO1rcrobWjAgngQhHvN_RTM9DJZj_zVaqj5c4KJ7Vw5_S4yYuE4QxoCYssQAvD_BwE:G:s&s_kwcid=AL!8492!3!179840140943!!!g!430754648574!&CMPID=Google-wilson-basketball_g_shopping_usa---c-179840140943-" } ] const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { handleGet( request, response ) - }else if( request.method === 'POST' ){ + } else if( request.method === 'POST' ){ handlePost( request, response ) + } else if( request.method === 'DELETE' ){ + handleDelete( request, response ) + } else { + handlePut( request, response ) } }) @@ -25,7 +29,11 @@ const handleGet = function( request, response ) { if( request.url === '/' ) { sendFile( response, 'public/index.html' ) - }else{ + } else if ( request.url === '/items' ){ + sortData(); + sendData( response, appdata ); + } + else{ sendFile( response, filename ) } } @@ -39,14 +47,72 @@ const handlePost = function( request, response ) { request.on( 'end', function() { console.log( JSON.parse( dataString ) ) + const item = JSON.parse( dataString ); + + const newItemObj = { + 'name': item.name, + 'category': item.category, + 'rating': parseInt(item.rating), + 'usd': parseFloat(item.usd), + 'eur': calcEuroPrice(parseFloat(item.usd)), + 'link': item.link, + }; + + appdata.push(newItemObj); + + sortData(); + + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + response.end() + }) +} + +const handleDelete = function( request, response ) { + let dataString = '' + + request.on( 'data', function( data ) { + dataString += data + }) - // ... do something with the data here!!! + request.on( 'end', function() { + console.log( JSON.parse( dataString ) ) + const deleteItem = JSON.parse(dataString); + + appdata.splice(deleteItem.index, 1); + + sortData(); response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) response.end() }) } +const handlePut = function( request, response ) { + let dataString = '' + + request.on( 'data', function( data ) { + dataString += data + }) + + request.on( 'end', function() { + const updateItem = JSON.parse(dataString); + + const updatedItemObj = { + 'name': updateItem.name, + 'category': updateItem.category, + 'rating': parseInt(updateItem.rating), + 'usd': parseFloat(updateItem.usd), + 'eur': calcEuroPrice(parseFloat(updateItem.usd)), + 'link': updateItem.link, + }; + + appdata.splice(updateItem.index, 1, updatedItemObj); + + response.writeHead( 200, "OK", {'Content-Type': 'text/plain'}); + response.end(); + }) +} + const sendFile = function( response, filename ) { const type = mime.getType( filename ) @@ -69,4 +135,20 @@ const sendFile = function( response, filename ) { }) } +const sendData = function( response, items ) { + const type = mime.getType( items ); + response.writeHeader(200, { 'Content-Type': type }); + response.write(JSON.stringify({ data: items })); + response.end(); +}; + +function calcEuroPrice(usd) { + return (usd * 0.91).toFixed(2); +} + +function sortData() { + // sort the data to ensure favorite are always first 3 elements + appdata.sort((a, b) => (a.rating < b.rating) ? 1 : (a.rating === b.rating) ? ((a.usd > b.usd) ? 1 : -1) : -1 ); +} + server.listen( process.env.PORT || port ) diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 00000000..978e60ed --- /dev/null +++ b/shrinkwrap.yaml @@ -0,0 +1,55 @@ +dependencies: + mime: 2.4.4 + unsplash-js: 5.0.0 +packages: + /form-urlencoded/1.2.0: + dev: false + resolution: + integrity: sha1-Fs4sr6dtLki55ROrcjIorqWZM5Y= + /lodash.get/4.4.2: + dev: false + resolution: + integrity: sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk= + /mime/2.4.4: + dev: false + engines: + node: '>=4.0.0' + hasBin: true + resolution: + integrity: sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA== + /querystring/0.2.0: + dev: false + engines: + node: '>=0.4.x' + resolution: + integrity: sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA= + /querystringify/2.1.1: + dev: false + resolution: + integrity: sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA== + /requires-port/1.0.0: + dev: false + resolution: + integrity: sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= + /unsplash-js/5.0.0: + dependencies: + form-urlencoded: 1.2.0 + lodash.get: 4.4.2 + querystring: 0.2.0 + url-parse: 1.4.4 + dev: false + resolution: + integrity: sha512-yPh4h0m4y0BbSjjNbn36O+8rDESIgxvElwZMwOrvsZpmbtFspwARMnrHyZ3JbAUw62ZmRxHajlsPqw55qo1iug== + /url-parse/1.4.4: + dependencies: + querystringify: 2.1.1 + requires-port: 1.0.0 + dev: false + resolution: + integrity: sha512-/92DTTorg4JjktLNLe6GPS2/RvAd/RGr6LuktmWSMLEOa6rjnlrFXNgSbSmkNvCoL2T028A0a1JaJLzRMlFoHg== +registry: 'https://registry.npmjs.org/' +shrinkwrapMinorVersion: 9 +shrinkwrapVersion: 3 +specifiers: + mime: ^2.4.4 + unsplash-js: ^5.0.0