codefellows-javascript-401d17 · nharren · Sep 14, 2017 · Sep 14, 2017
diff --git a/lab-nathan/.babelrc b/lab-nathan/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}
diff --git a/lab-nathan/.gitignore b/lab-nathan/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/lab-nathan/app/entry.js b/lab-nathan/app/entry.js
@@ -0,0 +1,61 @@
+'use strict';
+
+require('./scss/reset.scss');
+require('./scss/main.scss');
+
+const angular = require('angular');
+const cowsay = require('cowsay-browser');
+
+const cowsayApp = angular.module('cowsayApp', []);
+
+cowsayApp.controller('CowsayController', ['$log', CowsayController]);
+
+function CowsayController($log) {
+  $log.debug('CowsayController');
+
+  this.title = 'Welcome to Cowville!';
+  this.history = [];
+
+  cowsay.list((err, cowfiles) => {
+    this.cowfiles = cowfiles;
+    this.current = this.cowfiles[0];
+  });
+
+  this.update = function(input) {
+    $log.debug('coswsayCtrl.update()');
+    return cowsay.say({ text: input || 'moooooo', f: this.current });
+  }
+
+  this.speak = function(input) {
+    $log.debug('cowsayCtrl.speak()');
+    this.spoken = this.update(input);
+    this.history.push(this.spoken);
+  }
+
+  this.undo = function() {
+    $log.debug('cowsayCtrl.undo()');
+    this.history.pop();
+    this.spoken = this.history.pop() || '';
+  }
+}
+
+cowsayApp.controller('NavController', ['$log', NavController]);
+
+function NavController($log) {
+  $log.debug('NavController');
+
+  this.routes = [
+    {
+      name: 'home',
+      url: '/home',
+    },
+    {
+      name: 'about',
+      url: '/about-us'
+    },
+    {
+      name: 'contact',
+      url: '/contact-us'
+    }
+  ];
+}
diff --git a/lab-nathan/app/index.html b/lab-nathan/app/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html ng-app="cowsayApp">
+  <head>
+    <title>Cowsay App</title>
+  </head>
+  <body>
+    <header>
+      <nav ng-controller="NavController as navCtrl">
+        <ul>
+          <li ng-repeat="route in navCtrl.routes">
+            <a href="{{ route.url }}">{{ route.name }}</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+      <section
+        class="container"
+        ng-controller="CowsayController as cowsayCtrl"
+        ng-init="cowsayCtrl.current = 'squirrel'">
+        <h2>{{ cowsayCtrl.title }}</h2>
+        <pre class="cow">
+          {{ cowsayCtrl.update(cowsayCtrl.text) }}
+        </pre>
+        <form
+          ng-submit="cowsayCtrl.speak(cowsayCtrl.text)"
+          name="cowsayForm">
+          <select ng-model="cowsayCtrl.current">
+            <option ng-repeat="cowfile in cowsayCtrl.cowfiles" value="{{ cowfile }}">
+              {{ cowfile }}
+            </option>
+          </select>
+
+          <input type="text" ng-model="cowsayCtrl.text" required>
+          <button type="submit">Speak!</button>
+
+          <div ng-show="cowsayCtrl.spoken" class="history">
+            <pre>
+              {{ cowsayCtrl.spoken }}
+            </pre>
+          </div>
+        </form>
+        <button type="button" ng-click="cowsayCtrl.undo()">Undo!</button>
+      </section>
+    <main>
+  </body>
+</html>
diff --git a/lab-nathan/app/scss/main.scss b/lab-nathan/app/scss/main.scss
@@ -0,0 +1,77 @@
+// ::::: $vars ::::: //
+$brand-primary: #444;
+$btn-primary: $brand-primary / 2;
+$btn-hover: #31b1c1;
+$black: #000;
+$white: #fff;
+$box-std: 100%;
+$gutter-std: 5%;
+$gutter-sm: $gutter-std / 2;
+$radius: 3px;
+$transition: 350ms all;
+
+// ::::: global styles ::::: //
+body {
+  font-family: helvetica, sans-serif;
+  font-size: 2vw;
+  background: $brand-primary * 3;
+}
+
+a {
+  text-decoration: none;
+  color: $black;
+  cursor: pointer;
+}
+
+h2 {
+  font-size: 5vw;
+  text-align: center;
+  text-decoration: underline;
+  color: $brand-primary;
+  margin-bottom: $gutter-std;
+}
+
+button {
+  width: 100%;
+  padding: 2% 0;
+  border: 1px;
+  margin-bottom: 20px;
+  background: $btn-primary / 3;
+  color: $white;
+  border: none;
+  border-radius: $radius;
+  cursor: pointer;
+  transition: $transition;
+
+  &:hover {
+    background: $btn-hover;
+  }
+}
+
+input[type="text"] {
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 2%;
+  border: none;
+  border-radius: $radius;
+  transition: $transition;
+
+  &:focus {
+    background: $black;
+    color: $white;
+  }
+}
+
+select {
+  width: 100%;
+  margin-bottom: $gutter-sm;
+}
+
+pre {
+  overflow: auto;
+  font-family: monospace;
+  width: 100%;
+  margin: $gutter-std;
+}
+
diff --git a/lab-nathan/app/scss/reset.scss b/lab-nathan/app/scss/reset.scss
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/lab-nathan/package.json b/lab-nathan/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "angular-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "watch": "webpack-dev-server --inline --hot",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "angular": "^1.6.6",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "cowsay-browser": "^1.1.8",
+    "css-loader": "^0.28.7",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "html-webpack-plugin": "^2.30.1",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.5.6",
+    "webpack-dev-server": "^2.8.0"
+  }
+}
diff --git a/lab-nathan/webpack.config.js b/lab-nathan/webpack.config.js
@@ -0,0 +1,33 @@
+'use strict';
+
+const HtmlPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+  entry: `${__dirname}/app/entry.js`,
+  output: {
+    filename: 'bundle.js',
+    path: `${__dirname}/build`
+  },
+  plugins: [
+    new HtmlPlugin({ template: `${__dirname}/app/index.html` }),
+    new ExtractTextPlugin('bundle.css')
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          "style-loader",
+          "css-loader",
+          "sass-loader"
+        ]
+      }
+    ]
+  } 
+};