Help on Piano Keys Project

Web Development Full-Stack
1

I have completed till Task 6, and as per the project walkthrough, the exact code doesn’t run. (i.e. when the keys are clicked, it doesn’t change colour)

// 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
const keyPlay = (event) => {
  event.target.display.backgroundColor = 'green';
}

const keyReturn = (event) => {
  event.target.display.backgroundColor = '';
}



// Write a named function with event handler properties
let keyAssignment = (note) => {

    note.onmousedown = function(){
      keyPlay(event);
    }

    note.onmouseup = function(){
      keyReturn(event);
    }

};

// Write a loop that runs the array elements through the function
notes.forEach(keyAssignment);

// 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


// Write anonymous event handler property and function for the second progress button


// Write anonymous event handler property and function for the third progress button


// This is the event handler property and function for the startOver button
startOver.onclick = function() {
  nextOne.hidden = false;
  startOver.hidden = true;
   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';
}

Of course, I didnt understand this part below

let keyAssignment = (note) => {

    note.onmousedown = function(){
      keyPlay(event);
    }

    note.onmouseup = function(){
      keyReturn(event);
    }

};
2

We have created an array of element nodes called, notes. Using a .forEach() we will iterate over that array and install an event listener on each contained node. That makes those areas of the screen, ‘hot’, as in listening for a ‘mousedown’ (or ‘mouseup’) event which will then trigger the corresponding handler function.

This early immersion in Events is a tad tricky to get our heads around, but take comfort in knowing you’ll be master at event handling in due course. JavaScript is, after all, an event driven language. This is how we turn a script into an application (similar to a compiled executable). Give yourself time and practice to organize the ideas and concepts in your mind, and let us know when you have this ‘app’ up and running.

1 Like