From c1c633ea33d33ed3bef9171fd02eeae1cf826853 Mon Sep 17 00:00:00 2001 From: Tien Hoang Pham Date: Tue, 2 Apr 2019 12:52:29 +0300 Subject: [PATCH 1/4] suggested refactor --- students/copy-and-rename/index.html | 48 +++++++++++++------------- students/copy-and-rename/js/scripts.js | 13 +++++-- 2 files changed, 35 insertions(+), 26 deletions(-) diff --git a/students/copy-and-rename/index.html b/students/copy-and-rename/index.html index 836579a..4ddac83 100644 --- a/students/copy-and-rename/index.html +++ b/students/copy-and-rename/index.html @@ -15,33 +15,33 @@

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. +
  13. C
    14. +
  14. C# D♭
    15. +
  15. D
    16. +
  16. D# E♭
    17. +
  17. E
    18. +
  18. F
    19. +
  19. F# G♭
    20. +
  20. G
    21. +
  21. G# A♭
    22. +
  22. A
    23. +
  23. A# B♭
    24. +
  24. B
    -
  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. +
  13. C
    14. +
  14. C# D♭
    15. +
  15. D
    16. +
  16. D# E♭
    17. +
  17. E
    18. +
  18. F
    19. +
  19. F# G♭
    20. +
  20. G
    21. +
  21. G# A♭
    22. +
  22. A
    23. +
  23. A# B♭
    24. +
  24. 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 From 35ba2b0450755b01c4e49f28cff52dc047c780b2 Mon Sep 17 00:00:00 2001 From: MichaelaKarkia <48679466+MichaelaKarkia@users.noreply.github.com> Date: Tue, 2 Apr 2019 13:45:38 +0300 Subject: [PATCH 3/4] new folder michaela-karkia from copy-and-rename --- students/michaela-karkia/css/styling.css | 125 +++++++++++++++++++++++ students/michaela-karkia/index.html | 115 +++++++++++++++++++++ students/michaela-karkia/js/scripts.js | 112 ++++++++++++++++++++ 3 files changed, 352 insertions(+) create mode 100644 students/michaela-karkia/css/styling.css create mode 100644 students/michaela-karkia/index.html create mode 100644 students/michaela-karkia/js/scripts.js 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..e6c3e2e --- /dev/null +++ b/students/michaela-karkia/index.html @@ -0,0 +1,115 @@ + + + + + + + + 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 From c74e10cd8e6cd0138ff4cf46f7955be36d7a85fa Mon Sep 17 00:00:00 2001 From: MichaelaKarkia <48679466+MichaelaKarkia@users.noreply.github.com> Date: Tue, 2 Apr 2019 13:57:46 +0300 Subject: [PATCH 4/4] Create index.html --- students/michaela-karkia/index.html | 115 ++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 students/michaela-karkia/index.html diff --git a/students/michaela-karkia/index.html b/students/michaela-karkia/index.html new file mode 100644 index 0000000..7bd6b49 --- /dev/null +++ b/students/michaela-karkia/index.html @@ -0,0 +1,115 @@ + + + + + + + + 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