Example code should pass JSHint and generally look good

scripts/image-app-improved.js

@@ -1,4 +1,6 @@
+/* global console */
 (function() {
+  'use strict';
   // http://stackoverflow.com/questions/10906734/how-to-upload-image-into-html5-canvas
   var original;
   var imageLoader = document.querySelector('#imageLoader');
@@ -17,9 +19,9 @@
         canvas.height = img.height;
         ctx.drawImage(img,0,0);
         original = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      }
+      };
       img.src = event.target.result;
-    }
+    };
     reader.readAsDataURL(e.target.files[0]);
   }
 
@@ -29,34 +31,36 @@
     var buttons = document.querySelectorAll('button');
     for (var i = 0; i < buttons.length; i++) {
       if (buttons[i].hasAttribute('disabled')) {
-        buttons[i].removeAttribute('disabled')
+        buttons[i].removeAttribute('disabled');
       } else {
         buttons[i].setAttribute('disabled', null);
       }
-    };
+    }
   }
 
   function manipulateImage(type) {
-    var a, b, g, i, imageData, j, length, pixel, r, ref;
-    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     toggleButtonsAbledness();
     imageWorker.postMessage({'imageData': imageData, 'type': type});
 
     imageWorker.onmessage = function(e) {
       toggleButtonsAbledness();
       var image = e.data;
-      if (image) return ctx.putImageData(e.data, 0, 0);
-      console.log("No manipulated image returned.")
-    }
+      if (image) {
+        return ctx.putImageData(e.data, 0, 0);
+      }
+      console.log("No manipulated image returned.");
+    };
 
     imageWorker.onerror = function(error) {
-      function WorkerException(message) {
-        this.name = "WorkerException";
-        this.message = message;
-      };
       throw new WorkerException('Worker error.');
     };
-  };
+  }
+
+  function WorkerException(message) {
+    this.name = "WorkerException";
+    this.message = message;
+  }
 
   function revertImage() {
     return ctx.putImageData(original, 0, 0);

scripts/image-app-solution.js

@@ -1,4 +1,5 @@
 (function() {
+  'use strict';
   // http://stackoverflow.com/questions/10906734/how-to-upload-image-into-html5-canvas
   var original;
   var imageLoader = document.querySelector('#imageLoader');
@@ -17,9 +18,9 @@
         canvas.height = img.height;
         ctx.drawImage(img,0,0);
         original = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      }
+      };
       img.src = event.target.result;
-    }
+    };
     reader.readAsDataURL(e.target.files[0]);
   }
 
@@ -29,35 +30,36 @@
     var buttons = document.querySelectorAll('button');
     for (var i = 0; i < buttons.length; i++) {
       if (buttons[i].hasAttribute('disabled')) {
-        buttons[i].removeAttribute('disabled')
+        buttons[i].removeAttribute('disabled');
       } else {
         buttons[i].setAttribute('disabled', null);
       }
-    };
+    }
   }
 
   function manipulateImage(type) {
-    var a, b, g, i, imageData, j, length, pixel, r, ref;
-    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     toggleButtonsAbledness();
     imageWorker.postMessage({'imageData': imageData, 'type': type});
 
     imageWorker.onmessage = function(e) {
       toggleButtonsAbledness();
       var image = e.data;
-      if (image) return ctx.putImageData(e.data, 0, 0);
-      console.log("No manipulated image returned.")
-    }
+      if (image) {
+        return ctx.putImageData(e.data, 0, 0);
+      }
+      console.log("No manipulated image returned.");
+    };
 
     imageWorker.onerror = function(error) {
-      function WorkerException(message) {
-        this.name = "WorkerException";
-        this.message = message;
-      };
       throw new WorkerException('Worker error.');
     };
-  };
+  }
 
+  function WorkerException(message) {
+    this.name = "WorkerException";
+    this.message = message;
+  }
   function revertImage() {
     return ctx.putImageData(original, 0, 0);
   }

scripts/image-app.js

@@ -1,4 +1,6 @@
+/* global manipulate */
 (function(){
+  'use strict';
   // http://stackoverflow.com/questions/10906734/how-to-upload-image-into-html5-canvas
   var original;
   var imageLoader = document.querySelector('#imageLoader');
@@ -15,9 +17,9 @@
         canvas.height = img.height;
         ctx.drawImage(img,0,0);
         original = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      }
+      };
       img.src = event.target.result;
-    }
+    };
     reader.readAsDataURL(e.target.files[0]);
   }
 
@@ -27,11 +29,11 @@
     var buttons = document.querySelectorAll('button');
     for (var i = 0; i < buttons.length; i++) {
       if (buttons[i].hasAttribute('disabled')) {
-        buttons[i].removeAttribute('disabled')
+        buttons[i].removeAttribute('disabled');
       } else {
         buttons[i].setAttribute('disabled', null);
       }
-    };
+    }
   }
 
   function manipulateImage(type) {
@@ -57,7 +59,7 @@
     }
     toggleButtonsAbledness();
     return ctx.putImageData(imageData, 0, 0);
-  };
+  }
 
   function revertImage() {
     return ctx.putImageData(original, 0, 0);

scripts/imageManips-improved.js

@@ -1,6 +1,8 @@
+/* global console */
  // Image manipulation logic from github.com/jwill/psychic-lana
 
 function getManipFunc(type) {
+  'use strict';
 
   var func = function() {};
 
@@ -9,7 +11,7 @@ function getManipFunc(type) {
     g = 255 - g;
     b = 255 - b;
     return [r, g, b, a];
-  };
+  }
 
   function makePixelChroma(r, g, b, a) {
     var max;
@@ -19,7 +21,7 @@ function getManipFunc(type) {
     } else {
       return [r, g, b, a];
     }
-  };
+  }
 
   function makePixelGreyScale(r, g, b, a) {
     var y;
@@ -28,7 +30,7 @@ function getManipFunc(type) {
     g = y;
     b = y;
     return [r, g, b, a];
-  };
+  }
 
   function makePixelVibrant(r, g, b, a) {
     var amt, avg, bs, gs, mx, rs;
@@ -39,7 +41,7 @@ function getManipFunc(type) {
     gs = g + (amt * (mx - g));
     bs = b + (amt * (mx - b));
     return [rs, gs, bs, a];
-  };
+  }
 
   switch (type) {
     case "invert":

scripts/imageManips.js

@@ -1,6 +1,8 @@
+/* global console */
  // Image manipulation logic from github.com/jwill/psychic-lana
 
 function manipulate(type, r, g, b, a) {
+  'use strict';
 
   var func = function() {};
 
@@ -9,7 +11,7 @@ function manipulate(type, r, g, b, a) {
     g = 255 - g;
     b = 255 - b;
     return [r, g, b, a];
-  };
+  }
 
   function makePixelChroma(r, g, b, a) {
     var max;
@@ -19,7 +21,7 @@ function manipulate(type, r, g, b, a) {
     } else {
       return [r, g, b, a];
     }
-  };
+  }
 
   function makePixelGreyScale(r, g, b, a) {
     var y;
@@ -28,7 +30,7 @@ function manipulate(type, r, g, b, a) {
     g = y;
     b = y;
     return [r, g, b, a];
-  };
+  }
 
   function makePixelVibrant(r, g, b, a) {
     var amt, avg, bs, gs, mx, rs;
@@ -39,7 +41,7 @@ function manipulate(type, r, g, b, a) {
     gs = g + (amt * (mx - g));
     bs = b + (amt * (mx - b));
     return [rs, gs, bs, a];
-  };
+  }
 
   switch (type) {
     case "invert":

scripts/time-animator.js

@@ -1,4 +1,5 @@
 (function(){
+  'use strict';
   var canvas, context;
 
   init();
@@ -35,7 +36,7 @@
       "Thursday",
       "Friday",
       "Saturday"
-    ]
+    ];
 
     var months = [
       "January",
@@ -50,7 +51,7 @@
       "October",
       "November",
       "December"
-    ]
+    ];
 
     var now = new Date(Date.now());
 
@@ -64,9 +65,9 @@
     var ms = now.getMilliseconds();
 
     // add some zeros to keep time strings the same length
-    if (hours < 10) hours = "0" + hours;
-    if (mins < 10) mins = "0" + mins;
-    if (secs < 10) secs = "0" + secs;
+    if (hours < 10) { hours = "0" + hours; }
+    if (mins < 10) { mins = "0" + mins; }
+    if (secs < 10) { secs = "0" + secs; }
     if (ms < 10) {
       ms = "00" + ms;
     } else if (ms < 100 && ms >= 10) {
@@ -77,6 +78,7 @@
     var timeString = hours + ":" + mins + ":" + secs + ":" + ms;
 
     // calc the time diff between frames, starting with the second frame
+    var frameTimeDiff;
     if (lastTime > 0) {
       frameTimeDiff = now - lastTime;
     } else {
@@ -112,5 +114,5 @@
     // save the data about this frame for future comparison
     lastTime = now;
     lastDiff = frameTimeDiff;
-  };
+  }
 })();

scripts/worker-improved.js

@@ -1,30 +1,35 @@
-importScripts('imageManips-improved.js');
+/* jshint worker:true */
+/* global getManipFunc */
+(function() {
+  'use strict';
+  importScripts('imageManips-improved.js');
 
-this.onmessage = function(e) {
-  var imageData = e.data.imageData;
-  var type = e.data.type;
+  this.onmessage = function (e) {
+    var imageData = e.data.imageData;
+    var type = e.data.type;
 
-  try {
-    length = imageData.data.length / 4;
-    var manipulatePixel = getManipFunc(type);
-    for (i = j = 0, ref = length; 0 <= ref ? j <= ref : j >= ref; i = 0 <= ref ? ++j : --j) {
-      r = imageData.data[i * 4 + 0];
-      g = imageData.data[i * 4 + 1];
-      b = imageData.data[i * 4 + 2];
-      a = imageData.data[i * 4 + 3];
-      pixel = manipulatePixel(r, g, b, a);
-      imageData.data[i * 4 + 0] = pixel[0];
-      imageData.data[i * 4 + 1] = pixel[1];
-      imageData.data[i * 4 + 2] = pixel[2];
-      imageData.data[i * 4 + 3] = pixel[3];
+    try {
+      var a, b, g, i, j, length, pixel, r, ref;
+      length = imageData.data.length / 4;
+      var manipulatePixel = getManipFunc(type);
+      for (i = j = 0, ref = length; 0 <= ref ? j <= ref : j >= ref; i = 0 <= ref ? ++j : --j) {
+        r = imageData.data[i * 4 + 0];
+        g = imageData.data[i * 4 + 1];
+        b = imageData.data[i * 4 + 2];
+        a = imageData.data[i * 4 + 3];
+        pixel = manipulatePixel(r, g, b, a);
+        imageData.data[i * 4 + 0] = pixel[0];
+        imageData.data[i * 4 + 1] = pixel[1];
+        imageData.data[i * 4 + 2] = pixel[2];
+        imageData.data[i * 4 + 3] = pixel[3];
+      }
+      this.postMessage(imageData);
+    } catch (err) {
+      throw new InverterException("Image manipulation error");
     }
-    postMessage(imageData);
-  } catch (e) {
     function InverterException(message) {
       this.name = "InverterException";
       this.message = message;
-    };
-    throw new InverterException("Image manipulation error");
-    postMessage(undefined);
-  }
-}
+    }
+  };
+}).call(this);