cookie based config w. dynamic styling

.gitignore

@@ -0,0 +1 @@
+/node_modules/

README.md

@@ -1,2 +1,4 @@
 # assignment_css_garden_of_good_and_evil
 Create a CSS garden that adapts to your whims.
+
+Richard Bell

app.js

@@ -0,0 +1,46 @@
+var express = require('express');
+var path = require('path');
+var favicon = require('serve-favicon');
+var logger = require('morgan');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+
+var index = require('./routes/index');
+
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'hbs');
+
+// uncomment after placing your favicon in /public
+//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
+app.use(logger('dev'));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', index);
+
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  var err = new Error('Not Found');
+  err.status = 404;
+  next(err);
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+module.exports = app;

bin/www

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('assignment-css-garden-of-good-and-evil:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}

npm-debug.log

@@ -0,0 +1,45 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose run-script [ 'prestart', 'start', 'poststart' ]
+5 info lifecycle [email protected]~prestart: [email protected]
+6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
+7 info lifecycle [email protected]~start: [email protected]
+8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
+9 verbose lifecycle [email protected]~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/rabell/Documents/Development/viking/express/assignment_css_garden_of_good_and_evil/node_modules/.bin:~/.npm-packages/bin:/Users/rabell/google-cloud-sdk/bin:/Users/rabell/.rvm/gems/ruby-2.3.3/bin:/Users/rabell/.rvm/gems/ruby-2.3.3@global/bin:/Users/rabell/.rvm/rubies/ruby-2.3.3/bin:/Users/rabell/anaconda/bin:/opt/local/bin:/opt/local/sbin:/Library/Frameworks/Python.framework/Versions/3.5/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/ImageMagick/bin:/usr/local/MacGPG2/bin:/Applications/Postgres.app/Contents/Versions/latest/bin:/Users/rabell/.rvm/bin
+10 verbose lifecycle [email protected]~start: CWD: /Users/rabell/Documents/Development/viking/express/assignment_css_garden_of_good_and_evil
+11 silly lifecycle [email protected]~start: Args: [ '-c', 'node ./bin/www' ]
+12 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
+13 info lifecycle [email protected]~start: Failed to exec start script
+14 verbose stack Error: [email protected] start: `node ./bin/www`
+14 verbose stack Exit status 1
+14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at EventEmitter.emit (events.js:194:7)
+14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at ChildProcess.emit (events.js:194:7)
+14 verbose stack     at maybeClose (internal/child_process.js:899:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
+15 verbose pkgid [email protected]
+16 verbose cwd /Users/rabell/Documents/Development/viking/express/assignment_css_garden_of_good_and_evil
+17 error Darwin 16.5.0
+18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
+19 error node v7.7.4
+20 error npm  v4.1.2
+21 error code ELIFECYCLE
+22 error [email protected] start: `node ./bin/www`
+22 error Exit status 1
+23 error Failed at the [email protected] start script 'node ./bin/www'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the assignment-css-garden-of-good-and-evil package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     node ./bin/www
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs assignment-css-garden-of-good-and-evil
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls assignment-css-garden-of-good-and-evil
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "assignment-css-garden-of-good-and-evil",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "body-parser": "~1.17.1",
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.3",
+    "express": "~4.15.2",
+    "hbs": "~4.0.1",
+    "morgan": "~1.8.1",
+    "serve-favicon": "~2.4.2"
+  }
+}

public/stylesheets/style.css

@@ -0,0 +1,22 @@
+body {
+  padding: 50px;
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #00B7FF;
+}
+
+form {
+  padding: 10px;
+  border: 1px;
+  border-color: black;
+  border-radius: 5px;
+  border-style: solid;;
+}
+
+@keyframes flash {
+	0% { opacity: 1; }
+	50% { opacity: .1; }
+	100% { opacity: 1; }
+}

routes/index.js

@@ -0,0 +1,30 @@
+var express = require('express');
+var router = express.Router();
+
+
+/* GET home page. */
+router.get('/', function(req, res, next) {
+  let morals = req.cookies.morals;
+  if (!morals) morals = 'good';
+  console.log(req.cookies);
+  let flash = req.cookies.insanity ? (1 / parseInt(req.cookies.insanity)) : 0;
+  if (flash == 1) flash = 0;
+  res.render('index', { title: 'CSS Garden of Good and Evil',
+                        morals: (morals === 'good'),
+                        favFood: req.cookies.favFood || 'Favorite Food',
+                        favColor: req.cookies.favColor || 'black',
+                        flash: flash.toString() + 's',
+                        insanity: req.cookies.insanity || 1
+                      });
+});
+
+/* Post home page. */
+router.post('/', function(req, res, next) {
+  res.cookie("morals", req.body.morals);
+  res.cookie("favFood", req.body.favFood || req.cookies.favFood);
+  res.cookie("favColor", req.body.favColor || req.cookies.favColor);
+  res.cookie("insanity", req.body.insanity || req.cookies.insanity)
+  res.redirect("back");
+});
+
+module.exports = router;

views/error.hbs

@@ -0,0 +1,3 @@
+<h1>{{message}}</h1>
+<h2>{{error.status}}</h2>
+<pre>{{error.stack}}</pre>

views/index.hbs

@@ -0,0 +1,61 @@
+<h1 class="flashit">{{title}}</h1>
+<p class="flashit">Welcome to {{title}}</p>
+
+<div class="row">
+  <div class="col-xs-6">
+    <form class="" action="/" method="post">
+      <div class="radio">
+        <label class="flashit">
+          <input type="radio" name="morals" id="optionsGood" value="good" {{#if morals}}checked{{/if}}>
+          Good
+        </label>
+      </div>
+      <div class="radio">
+        <label class="flashit">
+          <input type="radio" name="morals" id="optionsEvil" value="evil" {{#unless morals}}checked{{/unless}}>
+          Evil
+        </label>
+      </div>
+      <div class="form-group">
+    <label class="flashit" for="idFavFood">Favorite Food</label>
+    <input type="text" class="form-control" id="idFavFood" placeholder="{{favFood}}" name="favFood">
+
+  </div>
+  <div class="form-group">
+    <label class="flashit" for="idFavColor">Favorite Color</label>
+    <select class="form-control" name="favColor">
+      <option value="red">Red</option>
+      <option value="orange">Orange</option>
+      <option value="yellow">Yellow</option>
+      <option value="green">Green</option>
+      <option value="blue">Blue</option>
+      <option value="purple">Purple</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <label class="flashit" for="idInsanity">Insanity Slider</label>
+    <input type="range" name="insanity" id="idInsanity" min="1" max="10" value="{{insanity}}">
+  </div>
+
+      <button type="submit" class="btn btn-primary">Update</button>
+    </form>
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-6">
+    <br>
+    {{#if morals}}
+      <h3 class="flashit">Good</h3>
+      <p class="flashit">
+        In its most general context of the study of morality, ethics, religion and philosophy, the good often refers to and denotes that conduct which is to be preferred and prescribed by society and its social constituents as beneficial and useful to the social
+        needs of society and its preferred conventions. The specific meaning and etiology of the meaning and use of the 'good' and its associated translations among ancient and contemporary languages has varied substantially in its inflected meaning depending
+        of circumstances of place, history, religious context and philosophical context.
+      </p>
+    {{else}}
+    <h3 class="flashit">Evil</h3>
+      <p class="flashit">Evil, in a general context, is the absence or opposite of that which is described as being good. Often, evil denotes profound immorality.  In certain religious contexts, evil has been described as a supernatural force. Definitions of evil vary,
+        as does the analysis of its motives. However, elements that are commonly associated with evil involve unbalanced behavior involving expediency, selfishness, ignorance, or neglect.</p>
+
+    {{/if}}
+  </div>
+</div>

views/layout.hbs

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+
+
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+  <title>{{title}}</title>
+  <link rel='stylesheet' href='/stylesheets/style.css' />
+  <style media="screen">
+    {{#unless morals}}
+    body {
+      background-color: grey;
+
+    }
+    h1 {
+      color: red;
+    }
+    h3 {
+      color: red;
+    }
+    {{/unless}}
+    p {
+      color: {{favColor}};
+    }
+    .flashit{
+    	-webkit-animation: flash linear .1s infinite;
+    	animation: flash linear {{flash}} infinite;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    {{{body}}}
+  </div>
+
+
+  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+  <!-- Include all compiled plugins (below), or include individual files as needed -->
+  <!-- Latest compiled and minified JavaScript -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+  <script type="text/javascript">
+    $("select option[value={{favColor}}]").prop('selected', true);
+  </script>
+</body>
+
+</html>