<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="#" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
                           integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="drumMachine.css">
    <title>Drum Machine - Build A Drum Machine - Front End Libraries Projects</title>
  </head>

  <body>
    <div id="test">
      <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    </div>
    <div id="drum-machine">
      <a href="https://github.com/TrentSPalmer/fcc-challenges/tree/gh-pages/drum-machine" target="_blank">
        <img src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149"
        class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
      </a>
      <div id="display">
        <div id="display-top"></div>
        <div id="display-middle">
          <div id="display-middle-left">
            <div id="display-middle-left-a"></div>
            <div id="display-middle-left-b">
              <div id="drum-pad-grid">
                <div class="drum-pad-row">
                  <div class="drum-pad" id="Qpad" title="" onclick="playSample($(this).attr('id'))">
                    Q
                  </div>
                  <div class="drum-pad" id="Wpad" title="" onclick="playSample($(this).attr('id'))">
                    W
                  </div>
                  <div class="drum-pad" id="Epad" title="" onclick="playSample($(this).attr('id'))">
                    E
                  </div>
                </div>
                <div class="drum-pad-row">
                  <div class="drum-pad" id="Apad" title="" onclick="playSample($(this).attr('id'))">
                    A
                  </div>
                  <div class="drum-pad" id="Spad" title="" onclick="playSample($(this).attr('id'))">
                    S
                  </div>
                  <div class="drum-pad" id="Dpad" title="" onclick="playSample($(this).attr('id'))">
                    D
                  </div>
                </div>
                <div class="drum-pad-row">
                  <div class="drum-pad" id="Zpad" title="" onclick="playSample($(this).attr('id'))">
                    Z
                  </div>
                  <div class="drum-pad" id="Xpad" title="" onclick="playSample($(this).attr('id'))">
                    X
                  </div>
                  <div class="drum-pad" id="Cpad" title="" onclick="playSample($(this).attr('id'))">
                    C
                  </div>
                </div>
              </div>
            </div>
            <div id="display-middle-left-c"></div>
          </div>
          <div id="display-middle-right">
            <div id="display-middle-right-a"></div>
            <div id="display-middle-right-b">
              <div id="selection" class="selection" title=''><p>select<br/>a sound</p>
              </div>
              <div id="select-volume" class="selection" title=''><p>select<br/>a volume</p>
              </div>
              <div id="metronome" class="selection" title=''><p>metronome</p>
              </div>
            </div>
            <div id="display-middle-right-c">
            </div>
            <div id="display-middle-right-d">
              <div id="reset" class="selection" title=''><p>RESET</p>
              </div>
              <div id="stop" class="selection" title=''><p>STOP</p>
              </div>
            </div>
            <div id="display-middle-right-e" title="">
            </div>
            <div id="display-middle-right-f" title="">
              <div id="volume-container">
                <i class="fa fa-volume-up"></i>
                <div id="volume"></div>
                <i class="fa fa-volume-down"></i>
              </div>
            </div>
            <div id="display-middle-right-g" title="">
            </div>
          </div>
        </div>
        <div id="display-bottom"></div>
      </div>
    </div>
    <script type="text/javascript" src="metronomeTempos.js"></script>
    <script type="text/javascript" src="makeSelection.js"></script>
    <script type="text/javascript" src="wavFiles.js"></script>
    <script type="text/javascript" src="drumMachine.js"></script>
  </body>

</html>