Add exercise 08 and Update showcase

Axel · Axel · commit 1ed999c684a2 · 2017-04-16T09:48:04.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -36,5 +36,6 @@ Temporary Items
 node_modules
 tapas.xcf
 _empty
+JavaScript30
 
 # End of https://www.gitignore.io/api/osx,sass
diff --git a/01 - JavaScript Drum Kit/main.js b/01 - JavaScript Drum Kit/main.js
@@ -4,7 +4,7 @@ function playSound(event) {
   if (!audio) return;
   audio.currentTime = 0;
   audio.play();
-  key.classList.add("playing"); //*
+  key.classList.add("playing");
 }
 
 function removeTransition (e) {
diff --git a/08 - Fun with HTML5 Canvas/dist/main.js b/08 - Fun with HTML5 Canvas/dist/main.js
diff --git a/08 - Fun with HTML5 Canvas/gulpfile.js b/08 - Fun with HTML5 Canvas/gulpfile.js
@@ -0,0 +1,37 @@
+var gulp          = require('gulp'),
+    browserSync   = require('browser-sync').create(),
+    babel         = require("gulp-babel"),
+    uglify        = require('gulp-uglify'),
+    plumber       = require("gulp-plumber");
+
+gulp.task('server', ['babel'], function() {
+
+    browserSync.init({
+        server: "./",
+        open: false
+    });
+
+    gulp.watch("./*.html").on('change', browserSync.reload);
+    gulp.watch("./*.s+(a|c)ss", ['sass']);
+    gulp.watch("./*.js", ['babel']);
+});
+
+gulp.task('babel', function () {
+  return gulp.src("./main.js")
+    .pipe(plumber())
+    .pipe(babel({
+      "presets": ["babel-preset-es2015"].map(require.resolve)
+    }))
+    .pipe(gulp.dest("./dist"))
+    .pipe(browserSync.stream());
+});
+
+gulp.task('miniJS', function () {
+  return gulp.src("dist/main.js")
+    .pipe(uglify())
+    .pipe(gulp.dest("./dist"));
+});
+
+
+gulp.task('mini', ['miniJS']);
+gulp.task('default', ['server']);
diff --git a/08 - Fun with HTML5 Canvas/image/08_port.jpg b/08 - Fun with HTML5 Canvas/image/08_port.jpg
diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>HTML5 Canvas</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+</head>
+<body>
+
+  <style>
+    body, html {
+      padding: 0;
+      margin: 0; }
+  </style>
+
+  <canvas id="draw" width="800" height="800"></canvas>
+
+<script src="dist/main.js"></script>
+</body>
+</html>
diff --git a/08 - Fun with HTML5 Canvas/main.js b/08 - Fun with HTML5 Canvas/main.js
@@ -0,0 +1,50 @@
+const canvas = document.querySelector("#draw");
+const ctx = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+canvas.color = "red";
+
+ctx.lineJoin = "round";
+ctx.lineCap = "round";
+ctx.lineWidth = 0;
+ctx.globalCompositeOperation = "hue";
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let direction = true;
+
+function draw(e){
+  if (!isDrawing) return;
+  // console.log(e);
+
+  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+
+  ctx.beginPath();
+  ctx.moveTo(lastX, lastY);
+  ctx.lineTo(e.offsetX, e.offsetY);
+  ctx.stroke();
+
+  [lastX, lastY] = [e.offsetX, e.offsetY];
+  hue++;
+
+  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+    direction = !direction;
+  }
+  if (direction) {
+  ctx.lineWidth++;
+  } else {
+    ctx.lineWidth--;
+  }
+}
+
+canvas.addEventListener('mousedown', (e) => {
+  isDrawing = true;
+  [lastX, lastY] = [e.offsetX, e.offsetY];
+});
+
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mouseup', () => isDrawing = false);
+canvas.addEventListener('mouseout', () => isDrawing = false);
diff --git a/dist/main.js b/dist/main.js
diff --git a/main.js b/main.js
@@ -43,5 +43,10 @@ const data = [
     title: "Type Ahead",
     url: "06 - Type Ahead/index.html",
     img: "06 - Type Ahead/image/06_port.jpg"
+  },
+  {
+    title: "HTML5 Canvas",
+    url: "08 - Fun with HTML5 Canvas/index.html",
+    img: "08 - Fun with HTML5 Canvas/image/08_port.jpg"
   }
 ];

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ function playSound(event) {`
`4`	`4`	`if (!audio) return;`
`5`	`5`	`audio.currentTime = 0;`
`6`	`6`	`audio.play();`
`7`		`- key.classList.add("playing"); //*`
	`7`	`+ key.classList.add("playing");`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`function removeTransition (e) {`