Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["es2015"]
}
21 changes: 21 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"rules": {
"no-console": "off",
"indent": [ "error", 2 ],
"quotes": [ "error", "single" ],
"semi": ["error", "always"],
"linebreak-style": [ "error", "unix" ]
},
"env": {
"es6": true,
"node": true,
"mocha": true,
"jasmine": true
},
"ecmaFeatures": {
"modules": true,
"experimentalObjectRestSpread": true,
"impliedStrict": true
},
"extends": "eslint:recommended"
}
116 changes: 116 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
# Created by https://www.gitignore.io/api/node,macos,windows

### macOS ###
*.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon


# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env


### Windows ###
# Windows thumbnail cache files
Thumbs.db
ehthumbs.db
ehthumbs_vista.db

# Folder config file
Desktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msm
*.msp

# Windows shortcuts
*.lnk

# Angular Build Directory
build/

# End of https://www.gitignore.io/api/node,macos,windows
62 changes: 62 additions & 0 deletions app/entry.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
'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 Cowtown, pardner!';
this.history = [];

cowsay.list((err, cowfiles) => {
$log.debug(err);
this.cowfiles = cowfiles;
this.current = this.cowfiles[0];
});

this.update = function(input) {
$log.debug('cowsayCtrl.update()');
return cowsay.say({ text: input || 'mooooooove it!', 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'
}
];
}
76 changes: 76 additions & 0 deletions app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html ng-app="cowsayApp">
<head>
<title>Howdy, Cowpoke!</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'">
<div class="top-wrapper large-box">
<h2>{{ cowsayCtrl.title }}</h2>

<div class="cow-container medium-box">
<pre class="cow">
{{ cowsayCtrl.update(cowsayCtrl.text) }}
</pre>
</div><!--end cow container-->

<div class="side-box">
<form
ng-submit="cowsayCtrl.speak(cowsayCtrl.text)"
name="cowsayForm"
no validate>

<div class="select-container small-box">
<select class="small" ng-model="cowsayCtrl.current">
<option ng-repeat="cowfile in cowsayCtrl.cowfiles" value="{{ cowfile }}">
{{ cowfile }}
</option>
</select>
</div><!--end of select container-->

<div class="input-container small-box">
<input class="small" type="text" ng-model="cowsayCtrl.text" required></input>
</div>

<div class="button-container small-box">
<button class="small" type="submit">Speak Cow!</button>
</div>

</form>
</div>
</div><!--end of top wrapper div-->

<div ng-show="cowsayCtrl.spoken" class="bottom-wrapper large-box">
<div class="history medium-box">
<pre class="spoken">
{{ cowsayCtrl.spoken }}
</pre>
</div>

<div class="side-box">
<div class="button-container small-box bottom-button">
<button class="small" type="button" ng-click="cowsayCtrl.undo()">Unspeak!</button>
</div>
</div>
</div><!--end of bottom wrapper-->
</section>
</main>
<footer>
<p>cowcontrol.io</p>
</footer>
</body>
</html>
97 changes: 97 additions & 0 deletions app/scss/main.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
$black: #373737;
$white: #F4F4F4;
$gray: ($black + $white) / 2;

nav ul {
list-style: none;
background-color: $black;
text-align: right;
overflow: auto;
}

nav li {
width: 100%;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline;
}

nav a {
text-decoration: none;
padding: 10px;
color: $white;
display: inline;
}

main {
background-color: $gray;
}

pre {
object-fit: contain;
max-width: 50%;
max-height: 80%;
margin: 0 auto;
}

button {
background-color: $black;
color: $white;
}

footer {
position: absolute;
background-color: $black;
height: 50px;
width: 100%;
color: $white;
}

footer p {
width: 40px;
float: right;
margin-top: 30px;
margin-right: 70px;
}

.large-box {
width: 100%;
height: 400px;
border: 1px solid $black;
overflow: auto;
}

.medium-box {
width: 60%;
height: 60%;
margin-top: 10%;
margin-left: 5%;
border: 4px solid $black;
float: left;
}

.small-box {
margin-right: 5%;
margin-top: 65px;
clear: right;
width: 100%;
height: 5%;
float: right;
}

.side-box {
width: 30%;
height: 60%;
margin-top: 10%;
float: right;
}

.small {
width: 100%;
border-radius: 5px;
}

.bottom-button {
margin-top: 225px;
}
Loading