diff --git a/piano_keys/index.html b/piano_keys/index.html
new file mode 100644
index 0000000..bdbb297
--- /dev/null
+++ b/piano_keys/index.html
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+
+
+ Piano Player
+ Follow the song below to play the piano.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/piano_keys/main.js b/piano_keys/main.js
new file mode 100644
index 0000000..7c4a7c6
--- /dev/null
+++ b/piano_keys/main.js
@@ -0,0 +1,105 @@
+// The keys and notes variables store the piano keys
+const keys = ['c-key', 'd-key', 'e-key', 'f-key', 'g-key', 'a-key', 'b-key', 'high-c-key', 'c-sharp-key', 'd-sharp-key', 'f-sharp-key', 'g-sharp-key', 'a-sharp-key'];
+const notes = [];
+keys.forEach(function(key){
+ notes.push(document.getElementById(key));
+})
+
+// Write named functions that change the color of the keys below
+function keyPlay(event) {
+ event.target.style.backgroundColor = "rgb(150, 150, 150)";
+}
+
+function keyReturn(event) {
+ event.target.style.backgroundColor = "";
+}
+
+// Write a named function with event handler properties
+function keyBehavior(note) {
+ note.addEventListener("mousedown", keyPlay);
+ note.addEventListener("mouseup", keyReturn);
+}
+
+// Write a loop that runs the array elements through the function
+notes.forEach(function(note) {
+ keyBehavior(note);
+})
+
+// These variables store the buttons that progress the user through the lyrics
+let nextOne = document.getElementById('first-next-line');
+let nextTwo = document.getElementById('second-next-line');
+let nextThree = document.getElementById('third-next-line');
+let startOver = document.getElementById('fourth-next-line');
+
+// This variable stores the '-END' lyric element
+let lastLyric = document.getElementById('column-optional');
+
+// These statements are "hiding" all the progress buttons, but the first one
+nextTwo.hidden = true;
+nextThree.hidden = true;
+startOver.hidden= true;
+
+// Write anonymous event handler property and function for the first progress button
+
+nextOne.addEventListener("click", function(){
+ nextTwo.hidden = false;
+ nextOne.hidden = true;
+ document.getElementById("letter-note-five").innerHTML = "D";
+ document.getElementById("letter-note-six").innerHTML = "C";
+});
+
+// Write anonymous event handler property and function for the second progress button
+
+nextTwo.addEventListener("click", function(){
+ nextThree.hidden = false;
+ nextTwo.hidden = true;
+ document.getElementById("word-five").innerHTML = "DEAR";
+ document.getElementById("word-six").innerHTML = "FRI-";
+ lastLyric.style.display = "inline-block";
+ document.getElementById("letter-note-three").innerHTML = "G";
+ document.getElementById("letter-note-four").innerHTML = "E";
+ document.getElementById("letter-note-five").innerHTML = "C";
+ document.getElementById("letter-note-six").innerHTML = "B";
+});
+
+// Write anonymous event handler property and function for the third progress button
+
+nextThree.addEventListener("click", function() {
+ startOver.hidden = false;
+ nextThree.hidden = true;
+ // change box words
+ document.getElementById("word-one").innerHTML = "HAP-";
+ document.getElementById("word-two").innerHTML = "PY";
+ document.getElementById("word-three").innerHTML = "BIRTH";
+ document.getElementById("word-four").innerHTML = "DAY";
+ document.getElementById("word-five").innerHTML = "TO";
+ document.getElementById("word-six").innerHTML = "YOU !";
+ // change piano key notes
+ document.getElementById("letter-note-one").innerHTML = "F";
+ document.getElementById("letter-note-two").innerHTML = "F";
+ document.getElementById("letter-note-three").innerHTML = "E";
+ document.getElementById("letter-note-four").innerHTML = "C";
+ document.getElementById("letter-note-five").innerHTML = "D";
+ document.getElementById("letter-note-six").innerHTML = "C";
+ // hidding lastLyric
+ lastLyric.style.display = "none";
+})
+
+// This is the event handler property and function for the startOver button
+startOver.onclick = function() {
+ nextOne.hidden = false;
+ startOver.hidden = true;
+ lastLyric.style.display = 'none'; // as recommended by the AI code-reviewer
+ document.getElementById('word-one').innerHTML = 'HAP-';
+ document.getElementById('letter-note-one').innerHTML = 'G';
+ document.getElementById('word-two').innerHTML = 'PY';
+ document.getElementById('letter-note-two').innerHTML = 'G';
+ document.getElementById('word-three').innerHTML = 'BIRTH-';
+ document.getElementById('letter-note-three').innerHTML = 'A';
+ document.getElementById('word-four').innerHTML = 'DAY';
+ document.getElementById('letter-note-four').innerHTML = 'G';
+ document.getElementById('word-five').innerHTML = 'TO';
+ document.getElementById('letter-note-five').innerHTML = 'C';
+ document.getElementById('word-six').innerHTML = 'YOU!';
+ document.getElementById('letter-note-six').innerHTML = 'B';
+}
\ No newline at end of file
diff --git a/piano_keys/style.css b/piano_keys/style.css
new file mode 100644
index 0000000..3db8bd3
--- /dev/null
+++ b/piano_keys/style.css
@@ -0,0 +1,114 @@
+body{
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+ background: #ffc63f;
+}
+.title{
+ font-size: 36px;
+ margin-top: 10px;
+ margin-bottom: 0px;
+ padding: 0;
+ color: #141c3a;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ text-align: center;
+}
+#demo{
+ text-align: center;
+ font-size: 18px;
+ margin-top: 15px;
+ color: #141c3a;
+ letter-spacing: 1px;
+ font-style: italic;
+}
+.piano{
+ width: 305px;
+ height: 210px;
+ display: block;
+ margin: 0 auto;
+ background-color: #fd4d3f;
+ margin-top: 30px;
+}
+.key{
+ width: 30px;
+ height: 200px;
+ display: inline-block;
+ border: solid #141c3a 2px;
+ box-shadow: 2px 5px;
+ background-color: white;
+ color: #141c3a;
+}
+.black-key{
+ width: 25px;
+ height: 100px;
+ display: inline-block;
+ background-color: #141c3a;
+ color: white;
+ position: absolute;
+ margin-left: -12px;
+ padding: 0px;
+}
+.keynote{
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ display: block;
+ margin: 0 auto;
+ margin-top: 175px;
+ color: #141c3a;
+}
+.black-keynote{
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ display: block;
+ margin: 0 auto;
+ margin-top: 75px;
+}
+#lyrics{
+ width: 400px;
+ height: 240px;
+ display: block;
+ margin: 0 auto;
+ padding-left: 20px;
+ margin-top: 50px;
+ background-color: #fd4d3f;
+}
+#column-one, #column-two, #column-three, #column-four, #column-five, #column-six, #column-optional{
+ width: 90px;
+ display: inline-block;
+ text-align: center;
+ margin-top: 30px;
+}
+#column-optional{
+ display: none;
+}
+#word-one, #word-two, #word-three, #word-four, #word-five, #word-six, #word-optional{
+ background-color: white;
+ width: 90px;
+ height: 25px;
+ padding-top: 10px;
+ letter-spacing: 5px;
+ color: #141c3a;
+}
+#letter-note-one, #letter-note-two, #letter-note-three, #letter-note-four, #letter-note-five, #letter-note-six, #letter-note-optional{
+ color: white;
+ width: 25px;
+ height: 25px;
+ margin-top: 15px;
+ margin-left: 35px;
+}
+#first-next-line, #second-next-line, #third-next-line, #fourth-next-line{
+ width: 80px;
+ height: 40px;
+ font-size: 16px;
+ position: absolute;
+ margin-top: 30px;
+ margin-left: 10px;
+ border: none;
+ background-color: #ffc63f;
+ color: #141c3a;
+ letter-spacing: 1px;
+ cursor: pointer;
+}
\ No newline at end of file