index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
  <title>Piano</title>
</head>
<body>


  <div id="head">
    <h3>You can play it with your keyboard</h3>
    <div class="head"><button>Z</button> on the keyboard = <button>C</button> (the first white key)</div>
    <div class="head"><button>S</button> on the keyboard = <button>Db</button> (the first black key)</div>
    <div class="head"><button>X</button> on the keyboard = <button>D</button> (the second white key) and so on.</div>
  </div>

  <div class="piano">
    <div data-note="C" class="key white"></div>
    <div data-note="Db" class="key black"></div>
    <div data-note="D" class="key white"></div>
    <div data-note="Eb" class="key black"></div>
    <div data-note="E" class="key white"></div>
    <div data-note="F" class="key white"></div>
    <div data-note="Gb" class="key black"></div>
    <div data-note="G" class="key white"></div>
    <div data-note="Ab" class="key black"></div>
    <div data-note="A" class="key white"></div>
    <div data-note="Bb" class="key black"></div>
    <div data-note="B" class="key white"></div>
  </div>

  

  <audio id="C" src="notes/C.mp3"></audio>
  <audio id="Db" src="notes/Db.mp3"></audio>
  <audio id="D" src="notes/D.mp3"></audio>
  <audio id="Eb" src="notes/Eb.mp3"></audio>
  <audio id="E" src="notes/E.mp3"></audio>
  <audio id="F" src="notes/F.mp3"></audio>
  <audio id="Gb" src="notes/Gb.mp3"></audio>
  <audio id="G" src="notes/G.mp3"></audio>
  <audio id="Ab" src="notes/Ab.mp3"></audio>
  <audio id="A" src="notes/A.mp3"></audio>
  <audio id="Bb" src="notes/Bb.mp3"></audio>
  <audio id="B" src="notes/B.mp3"></audio>
</body>
</html>