Adds better javascript

Erik Mellum · Erik Mellum · commit 7f63ff12f705 · 2015-03-07T11:20:52.000-08:00
diff --git a/coffee/script.coffee b/coffee/script.coffee
@@ -1,2 +1,9 @@
-$ ->
-  $('h1').append('Hello')
+$list = $('#list')
+$('#add').click ->
+  $li = $('<li class="animate">')
+  $list.append $li
+  $li.html 'test'
+  return
+$('#remove').click ->
+  $('#list li:last').remove()
+  return
diff --git a/css/style.css b/css/style.css
@@ -1,2 +1,12 @@
 .test {
+  color: red; }
+
+.animate {
+  transition-property: transform, color;
+  transition-timing: ease-out;
+  transition-duration: .3s;
+  color: red; }
+
+.animation:active {
+  transform: scale(1.02);
   color: blue; }
diff --git a/dist/all.js b/dist/all.js
@@ -1 +1,14 @@
-alert("Hello");
+var $list;
+
+$list = $('#list');
+
+$('#add').click(function() {
+  var $li;
+  $li = $('<li class="animate">');
+  $list.append($li);
+  $li.html('test');
+});
+
+$('#remove').click(function() {
+  $('#list li:last').remove();
+});
diff --git a/dist/all.min.js b/dist/all.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -29,8 +29,7 @@ gulp.task('sass', function() {
 gulp.task('coffee', function() {
   gulp.src('coffee/*.coffee')
   .pipe(coffee({bare: true}))
-    .on('error', gutil.log)
-  .pipe(gulp.dest('scripts'));
+  .pipe(gulp.dest('js'));
 });
 
 // Concatenate & Minify JS
@@ -47,12 +46,13 @@ gulp.task('scripts', function() {
 // Watch Files For Changes
 gulp.task('watch', function() {
     livereload.listen();
+    gulp.watch('coffee/*.coffee', ['coffee']);
     gulp.watch('js/*.js', ['lint', 'scripts']);
-    gulp.watch('scss/*.scss', ['sass']);
     gulp.watch('*.html', function(e){
     livereload.changed(e.path);
   });
+    gulp.watch('scss/*.scss', ['sass']);
 });
 
 // Default Task
-gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
+gulp.task('default', ['lint', 'sass', 'coffee', 'scripts', 'watch']);
diff --git a/index.html b/index.html
@@ -4,9 +4,15 @@
     <title>Bootstrap 101 Template</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="css/style.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
   </head>
   <body>
     <h1 class="test">Hello, world!</h1>
-    <script src="js/script.js"></script>
+    <ul id="list">
+      <li class='animate'>test</li>
+    </ul>
+    <input type="button" value="add" id="add">
+    <input type="button" value="remove" id="remove">
+    <script src="dist/all.min.js"></script>
   </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -1 +1,14 @@
-alert("Hello");
+var $list;
+
+$list = $('#list');
+
+$('#add').click(function() {
+  var $li;
+  $li = $('<li class="animate">');
+  $list.append($li);
+  $li.html('test');
+});
+
+$('#remove').click(function() {
+  $('#list li:last').remove();
+});
diff --git a/scss/style.scss b/scss/style.scss
@@ -1,3 +1,15 @@
 .test{
+  color: red;
+}
+
+.animate{
+  transition-property: transform, color;
+  transition-timing: ease-out;
+  transition-duration: .3s;
+  color: red;
+}
+
+.animation:active{
+  transform: scale(1.02);
   color: blue;
 }
