diff --git a/students/copy-and-rename/index.html b/students/copy-and-rename/index.html index 836579a..b3e5d6d 100644 --- a/students/copy-and-rename/index.html +++ b/students/copy-and-rename/index.html @@ -7,6 +7,7 @@ Piano Application + @@ -44,71 +45,69 @@

Ebony and Ivory meet CSS.
Tap a key to play its note

  • B
    • - - - +
  • C
    • +
  • C# D♭
    • +
  • D
    • +
  • D# E♭
    • +
  • E
    • +
  • F
    • +
  • F# G♭
    • +
  • G
    • +
  • G# A♭
    • +
  • A
    • ¨ +
  • A# B
    • +
  • B
    • + + - C - C# - D - D# - E - F - F# - G - G# - A - A# - B + C + C# + D + D# + E + F + F# + G + G# + A + A# + B \ No newline at end of file diff --git a/students/copy-and-rename/js/scripts.js b/students/copy-and-rename/js/scripts.js index 9bcd216..e773f6a 100644 --- a/students/copy-and-rename/js/scripts.js +++ b/students/copy-and-rename/js/scripts.js @@ -1,7 +1,16 @@ /* -Is you use this in a project, drop me a line. I'd love to see it used in action! - +document.addEventListener("DOMContentLoaded", function(event) { + var buttons = document.getElementsByClassName('keyboard'); + var index = buttons.length; + + while (index--) { + buttons[index].addEventListener('click', function(){ + var note = this.dataset.note.replace('s', '-sharp'); + document.getElementById(note).play(); + }); + } + }); */ $(document).ready(function() { var c = $("#mid-c")[0]; diff --git a/students/michaela-karkia/css/styling.css b/students/michaela-karkia/css/styling.css new file mode 100644 index 0000000..c0de099 --- /dev/null +++ b/students/michaela-karkia/css/styling.css @@ -0,0 +1,125 @@ +@import url(https://fonts.googleapis.com/css?family=Pirata+One); + +* { + box-sizing: border-box; +} + +body { + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RjZGNkYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dcdcdc)); + background: -moz-linear-gradient(top, #ffffff, #dcdcdc 100%); + background: -webkit-linear-gradient(top, #ffffff, #dcdcdc 100%); + background: linear-gradient(to bottom, #ffffff, #dcdcdc 100%); + background-size: cover; +} + +audio { + display: block; + margin-bottom: 1rem; +} + +h1, +h2 { + color: #646464; + line-height: 1.2; + margin: 0 0 1rem; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); +} + +h1 b, +h2 b { + color: #640000; + text-shadow: 0px 1px 5px #ccc; +} + +h1 { + font-family: "Pirata One", cursive; + font-size: 3rem; +} + +.page { + margin: 30px auto; + text-align: center; + width: 75%; + overflow: hidden; +} + +ol { + position: relative; + padding: 0; + margin: 0 0 10px; + display: inline-block; + font-size: 0; +} + +li { + font-size: 16px; + font-size: 1rem; + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MwYzFiZCIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZjBmMGYwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmFmMGU2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c1bd), color-stop(10%, #f0f0f0), color-stop(100%, #faf0e6)); + background: -moz-linear-gradient(top, #c0c1bd, #f0f0f0 10%, #faf0e6); + background: -webkit-linear-gradient(top, #c0c1bd, #f0f0f0 10%, #faf0e6); + background: linear-gradient(to bottom, #c0c1bd, #f0f0f0 10%, #faf0e6); + transition: all 0.1s ease-in-out; + padding: 0; + margin: 0; + display: inline-block; + border: 1px solid #ccc; + padding: 220px 15px 50px; + border-radius: 0 0 5px 5px; + box-shadow: 0 5px 5px #aaa; + position: relative; + z-index: 1; + cursor: pointer; + color: transparent; +} + +li:hover { + color: #c0c1bd; +} + +li:active { + box-shadow: none; + top: 5px; + color: #333; +} + +li.ebony { + /* build the key shape */ + z-index: 2; + position: absolute; + width: 32px; + top: 0px; + margin-left: -16px; + padding: 130px 0px 10px; + /* Typography */ + text-align: center; + font-size: 0.66667rem; + color: transparent; + border-radius: 0 0 2px 2px; + border-width: 0 6px 12px; + border-color: #000; + border-bottom-color: #424546; + background: #171c1a; + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVmNjI2NSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMTUxYjE5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTcxYzFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5f6265), color-stop(25%, #151b19), color-stop(100%, #171c1a)); + background: -moz-linear-gradient(#5f6265, #151b19 25%, #171c1a); + background: -webkit-linear-gradient(#5f6265, #151b19 25%, #171c1a); + background: linear-gradient(#5f6265, #151b19 25%, #171c1a); + box-shadow: 0 3px 5px #ccc, inset 0px 0px 0px 1px rgba(220, 220, 220, 0.2); +} + +li.ebony:hover { + color: gainsboro; +} + +li.ebony:active { + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVmNjI2NSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMTUxYjE5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTcxYzFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5f6265), color-stop(50%, #151b19), color-stop(100%, #171c1a)); + background: -moz-linear-gradient(#5f6265, #151b19 50%, #171c1a); + background: -webkit-linear-gradient(#5f6265, #151b19 50%, #171c1a); + background: linear-gradient(#5f6265, #151b19 50%, #171c1a); + border-bottom-width: 8px; + padding-top: 135px; + color: white; +} diff --git a/students/michaela-karkia/index.html b/students/michaela-karkia/index.html new file mode 100644 index 0000000..6133d23 --- /dev/null +++ b/students/michaela-karkia/index.html @@ -0,0 +1,116 @@ + + + + + + + + Piano Application + + + + + + +
    +

    Play The CSS3 Piano!

    +

    Ebony and Ivory meet CSS.
    Tap a key to play its note

    +
      +
    1. C
      2. +
    2. C# D♭
      3. +
    3. D
      4. +
    4. D# E♭
      5. +
    5. E
      6. +
    6. F
      7. +
    7. F# G♭
      8. +
    8. G
      9. +
    9. G# A♭
      10. +
    10. A
      11. +
    11. A# B♭
      12. +
    12. B
      13. +
    + +
      +
    1. C
      2. +
    2. C# D♭
      3. +
    3. D
      4. +
    4. D# E♭
      5. +
    5. E
      6. +
    6. F
      7. +
    7. F# G♭
      8. +
    8. G
      9. +
    9. G# A♭
      10. +
    10. A
      11. +
    11. A# B♭
      12. +
    12. B
      13. +
    + +
    + + + + C + C# + D + D# + E + F + F# + G + G# + A + A# + B + + + \ No newline at end of file diff --git a/students/michaela-karkia/js/scripts.js b/students/michaela-karkia/js/scripts.js new file mode 100644 index 0000000..9bcd216 --- /dev/null +++ b/students/michaela-karkia/js/scripts.js @@ -0,0 +1,112 @@ +/* + +Is you use this in a project, drop me a line. I'd love to see it used in action! + +*/ +$(document).ready(function() { + var c = $("#mid-c")[0]; + var cs = $("#mid-c-sharp")[0]; + var d = $("#mid-d")[0]; + var ds = $("#mid-d-sharp")[0]; + var e = $("#mid-e")[0]; + var f = $("#mid-f")[0]; + var fs = $("#mid-f-sharp")[0]; + var g = $("#mid-g")[0]; + var gs = $("#mid-g-sharp")[0]; + var a = $("#mid-a")[0]; + var as = $("#mid-a-sharp")[0]; + var b = $("#mid-b")[0]; + + //c.play(); + $("li").click(function() { + var note = this.dataset.note; + //alert(note); + switch (note) { + case "a": + a.play(); + break; + case "b": + b.play(); + break; + case "c": + c.play(); + break; + case "d": + d.play(); + break; + + case "e": + e.play(); + break; + + case "f": + f.play(); + break; + + case "g": + g.play(); + break; + + case "as": + as.play(); + break; + + case "cs": + cs.play(); + break; + + case "ds": + ds.play(); + break; + + case "fs": + fs.play(); + break; + + case "gs": + gs.play(); + break; + } + }); + +}); +//audio.play(); + +// Javascript adapted from here: +// https://www.html5rocks.com/en/tutorials/webaudio/intro/ + +// Notes can be found here: +// http://www.vibrationdata.com/piano.htm +/* +window.onload = init; +var context; +var bufferLoader; + +function init() { + context = new webkitAudioContext(); + + bufferLoader = new BufferLoader( + context, + [ + 'http://www.vibrationdata.com/piano_middle_C.mp3', + 'http://www.vibrationdata.com/piano_middle_C.mp3', + ], + finishedLoading + ); + + bufferLoader.load(); +} + +function finishedLoading(bufferList) { + // Create two sources and play them both together. + var source1 = context.createBufferSource(); + var source2 = context.createBufferSource(); + source1.buffer = bufferList[0]; + source2.buffer = bufferList[1]; + + source1.connect(context.destination); + source2.connect(context.destination); + source1.noteOn(0); + source2.noteOn(0); +} + */ \ No newline at end of file