Shane, Kate, & Casey - Project for HTML5 as a platform

Shane-Casey-Kate/Jade-HTML Conversion

@@ -0,0 +1,47 @@
+!!! 5
+header
+  h1 Give Us Your Info
+main
+  section.welcome
+    video(poster='welcome-neon-sign.jpg', controls='')
+      source(src='https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.webm', type='video/webm')
+      source(src='https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.mp4', type='video/mp4')
+      p This browser does not support the video element.
+  form
+    fieldset
+      video#video(width='150', height='', autoplay='')
+      button#snap Add a Profile Picture
+      canvas#canvas(width='150', height='150')
+      div
+        label.mid(for='name') Username or Email:
+        input#name(type='text', name='name', value='', tabindex='1', placeholder='youremail@email.com')
+      div
+        label.mid(for='password') Password:
+        input#password(type='password', name='password', value='', tabindex='2', placeholder='password')
+      div
+        label(for='radio-choice-1') Male:
+        input#radio-choice-1.radio(type='radio', name='radio-choice', tabindex='5', value='choice-1')
+      div
+        label(for='radio-choice-2') Female:
+        input#radio-choice-2.radio(type='radio', name='radio-choice', tabindex='6', value='choice-2')
+      div
+        label.mid(for='select-choice-2') Country:
+        select#select-choice-2(name='extraoptions')
+          optgroup(label='1')
+            option(value='Choice 1') United States
+            option(value='Choice 2') Canada
+            option(value='Choice 3') United Kingdome
+          optgroup(label='2')
+            option(value='Choice 1') Country 1
+            option(value='Choice 2') Country 2
+            option(value='Choice 3') Country 3
+      div
+        label(for='textarea') Bio:
+        textarea#textarea(cols='40', rows='10', name='textarea', placeholder='tell us about yourself!')
+      div
+        label(for='check') Click the box if you agree to our termas and conditions:
+        input#check.checkbox(type='checkbox', name='check')
+      div
+        input.submit(type='submit', value='Sign Up')
+        audio#page_audio(src='Yakety_Sax_-_Benny_Hill.mp3', preload='auto')
+script(type='text/javascript', src='media.js')

Shane-Casey-Kate/README.md

@@ -0,0 +1,17 @@
++### A project for Code Fellows B25 by Kate Fleming, Casey Holly, and Shane Kalles.
++
++Our build of HTML5-as-a-platform.
++
++Capturing photos with the camera access was pretty simple, but being able to capture video is really difficult, since  the new file would need to be stored somewhere and local storage doesn't work for this type of information.
++
++Our form layout is simple and we made sure to include local storage. Found that you need to write different JavaScript code for local storage of text items vs. radio checkboxes. Another obstical we came across is that if a button is inside a form is takes on "submit" function which if used to trigger an event you need to change its default to not reload the page.
++
++Adding the video element is very simple and the controls available to you in HTML5 make for an easy addition to any page with the playback results that you want. We didn't add any custom controls but this process seems fairly easy.
++
++Resources:
++* [UX Design](http://www.anotheruiguy.com/ux-design-dev/_book/html5/audio.html)
++* [Custom Video Control](http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473)
++*
++*[Video & Audio Elements](http://www.sitepoint.com/essential-audio-and-video-events-for-html5/)
++*[Radio Local Storage](http://stackoverflow.com/questions/19451862/localstorage-not-saving-changed-radio-button-values-if-checked-is-used)
+

Shane-Casey-Kate/camera.js

@@ -0,0 +1,36 @@
+// Put event listeners into place
+window.addEventListener("DOMContentLoaded", function() {
+  // Grab elements, create settings, etc.
+  var canvas = document.getElementById("canvas"),
+    context = canvas.getContext("2d"),
+    video = document.getElementById("video"),
+    videoObj = { "video": true },
+    errBack = function(error) {
+      console.log("Video capture error: ", error.code);
+    };
+
+  // Put video listeners into place
+  if(navigator.getUserMedia) { // Standard
+    navigator.getUserMedia(videoObj, function(stream) {
+      video.src = stream;
+      video.play();
+    }, errBack);
+  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
+    navigator.webkitGetUserMedia(videoObj, function(stream){
+      video.src = window.webkitURL.createObjectURL(stream);
+      video.play();
+    }, errBack);
+  }
+  else if(navigator.mozGetUserMedia) { // Firefox-prefixed
+    navigator.mozGetUserMedia(videoObj, function(stream){
+      video.src = window.URL.createObjectURL(stream);
+      video.play();
+    }, errBack);
+  }
+
+}, false);
+
+// Trigger photo take
+document.getElementById("snap").addEventListener("click", function() {
+  context.drawImage(video, 0, 0, 640, 480);
+});

Shane-Casey-Kate/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>Video Master</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="main.css">
+  </head>
+  <body>
+    <header>
+      <h1>Give Us Your Info</h1>
+    </header>
+    <main>
+      <section class="welcome">
+        <video poster="welcome-neon-sign.jpg" controls="">
+          <source src="https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.webm" type="video/webm">
+          <source src="https://developers.google.com/web/fundamentals/documentation/introduction-to-media/video/video/chrome.mp4" type="video/mp4">
+          <p>This browser does not support the video element.</p>
+        </video>
+      </section>
+      <video id="video" width="440" height="280" autoplay></video>
+      <button id="snap">Add a Profile Picture</button>
+      <form>
+        <fieldset>
+          <canvas id="canvas" width="440" height="280"></canvas>
+          <div>
+            <label for="email" class="mid">Email:</label>
+            <input type="email" name="email" id="email" tabindex="1" placeholder="youremail@email.com">
+          </div>
+          <div>
+            <label for="password" class="mid">Password:</label>
+            <input type="password" name="password" id="password" value="" tabindex="2" placeholder="password">
+          </div>
+          <div>
+            <label for="gender">Male:</label>
+            <input type="radio" name="radio-choice" id="gender" class="radio" tabindex="5" value="choice-1">
+          </div>
+          <div>
+            <label for="gender">Female:</label>
+            <input type="radio" name="radio-choice" id="gender" class="radio" tabindex="6" value="choice-2">
+          </div>
+          <div>
+            <label for="select-choice-2" class="mid">Country:</label>
+            <select name="extraoptions" id="select-choice-2">
+              <optgroup label="1">
+                <option value="Choice 1">United States</option>
+                <option value="Choice 2">Canada</option>
+                <option value="Choice 3">United Kingdome</option>
+              </optgroup>
+              <optgroup label="2">
+                <option value="Choice 1">Country 1</option>
+                <option value="Choice 2">Country 2</option>
+                <option value="Choice 3">Country 3</option>
+              </optgroup>
+            </select>
+          </div>
+          <div>
+            <label for="textarea">Bio:</label>
+            <textarea cols="40" rows="10" name="textarea" id="textarea" placeholder="tell us about yourself!"></textarea>
+          </div>
+          <div>
+            <label for="check">Click the box if you agree to our terms and conditions:</label>
+            <input type="checkbox" name="check" class="checkbox" id="check">
+          </div>
+          <div>
+            <input type="submit" value="Sign Up" class="submit">
+          </div>
+        </fieldset>
+      </form>
+      <audio id="page_audio" src="Yakety_Sax_-_Benny_Hill.mp3" controls preload="auto"></audio>
+    </main>
+    <script type="text/javascript" src="media.js"></script>
+  </body>
+</html>

Shane-Casey-Kate/main.css

@@ -0,0 +1,142 @@
+@import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700);
+body {
+  background-color: white;
+  color: white;
+  font-size: 100%;
+  font-family: 'PT Sans Caption', sans-serif;
+  font-weight: 100;
+}
+h1 {
+  color: slategray;
+  font-weight: 100;
+  text-align: center;
+  padding-bottom: 0.2em;
+  border-bottom: 1px solid silver;
+
+}
+form {
+  width: 552px;
+  margin: 40px auto;
+}
+fieldset {
+  margin: auto;
+  width: 470px;
+  height: auto;
+  border: 1px solid #e5e5e5;
+  border-top: 0px solid #e5e5e5;
+  background: #fdfdfd;
+  padding: 40px;
+  background-color: lightgray;
+}
+div {
+  padding: 0 0 40px 0;
+}
+label {
+  float: left;
+  width: 200px;
+  font-size: 1em;
+  color: slategray;
+}
+label.mid {
+  line-height: 40px;
+}
+input,
+select {
+  background: coral;
+  border: 2px solid #fff;
+  color: #fff;
+  font-family: 'PT Sans Caption', sans-serif;
+  font-size: 1em;
+  font-weight: 400;
+  height: 40px;
+  margin: 0;
+  padding: 0 10px;
+  width: 240px;
+  vertical-align: middle;
+}
+input:hover,
+select:hover,
+textarea:hover {
+  border: 2px solid grey;
+}
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: silver;
+  outline: none;
+}
+select {
+  float: left;
+  margin-bottom: 40px;
+  appearance: none;
+  width: 260px;
+  border-radius: 0;
+}
+input.checkbox,
+input.radio {
+  margin: 0;
+  padding: 2px 0;
+  width: auto;
+  height: auto;
+}
+input.button {
+  width: 270px;
+  height: 40px;
+  border: 0px solid #fff;
+}
+textarea {
+  width: 240px;
+  height: 200px;
+  padding: 10px;
+  background: coral;
+  border: 2px solid #fff;
+  color: #fff;
+}
+input.submit {
+  float: left;
+  margin-left: 200px;
+  width: 100px;
+  height: 40px;
+  color: #fff;
+}
+input.submit:hover {
+  background: silver;
+  background: -webkit-linear-gradient(#1d9676, #01caa7);
+  background: -moz-linear-gradient(#1d9676, #01caa7);
+  background: -o-linear-gradient(#1d9676, #01caa7);
+  background: -ms-linear-gradient(#1d9676, #01caa7);
+  background: linear-gradient(#1d9676, #01caa7);
+}
+:-webkit-input-placeholder { /* WebKit browsers */
+    color: white;
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+   color: white;
+   opacity:  1;
+}
+:-moz-placeholder { /* Mozilla Firefox 19+ */
+   color: white;
+   opacity:  1;
+}
+:-ms-input-placeholder { /* Internet Explorer 10+ */
+   color: white;
+}
+.welcome {
+  background-color: slategray;
+  margin-top: 1em;
+  margin-bottom: 2em;
+}
+video {
+  margin-left: 20%;
+
+}
+.site,
+h2 {
+  color: slategray;
+  text-size: 0.2em;
+  font-weight: 100;
+}
+.canvas {
+  border 1px solid red;
+  float: left;
+}

Shane-Casey-Kate/media.js

@@ -0,0 +1,66 @@
+window.addEventListener("DOMContentLoaded", function() {
+  var canvas = document.getElementById("canvas"),
+    context = canvas.getContext("2d"),
+    video = document.getElementById("video"),
+    videoObj = { "video" : true },
+    errBack = function(error) {
+      console.log("Video capture error: ", error.code);
+    };
+
+  document.getElementById("snap").addEventListener("click", function() {
+    context.drawImage(video, 0, 0, 440, 280);
+  });
+
+  if(navigator.getUserMedia) {
+    navigator.getUserMedia(videoObj, function(stream) {
+      video.src = stream;
+      video.play();
+    }, errBack);
+  } else if(navigator.webkitGetUserMedia) {
+    navigator.webkitGetUserMedia(videoObj, function(stream){
+      video.src = window.webkitURL.createObjectURL(stream);
+      video.play();
+    }, errBack);
+  }
+  else if(navigator.mozGetUserMedia) {
+    navigator.mozGetUserMedia(videoObj, function(stream){
+      video.src = window.URL.createObjectURL(stream);
+      video.play();
+    }, errBack);
+  }
+
+}, false);
+
+window.onload = function(){
+  email.value = localStorage.getItem(email.id);
+  password.value = localStorage.getItem(password.id);
+  select2.value = localStorage.getItem(select2.id);
+  textarea.value = localStorage.getItem(textarea.id);
+  check.value = localStorage.getItem(check.id);
+};
+
+var email = document.getElementById("email");
+var password = document.getElementById("password");
+var select2 = document.getElementById("select-choice-2");
+var textarea = document.getElementById("textarea");
+var check = document.getElementById("check");
+
+email.onblur = function(){
+  storeData(this.id, this.value);
+};
+password.onblur = function(){
+  storeData(this.id, this.value);
+};
+select2.onblur = function(){
+  storeData(this.id, this.value);
+};
+textarea.onblur = function(){
+  storeData(this.id, this.value);
+};
+check.onblur = function(){
+  storeData(this.id, this.value);
+};
+
+function storeData(name, value){
+  localStorage.setItem(name, value);
+};