Drumpad Machine: Code recommendations and tidying up

Drumpad Machine: Code recommendations and tidying up
0

#1

I just finished this challenge. I used Jquery and vanilla Javascript because I want to become proficient in them before moving onto other frameworks such as React. While my code works (as in does what it I intend it to), it just looks ugly and unprofessional to me: my biggest beef is with the “display” bit I run after each event, which could be summed up in a function (but I have no idea how to “word” it, sort to speak, because the outcome always depends on the ID of the event target). Any thoughts and recommendations you could make to make it look better? Thanks a lot in advance!
PS: The divs in the button section are there because I use flexbox on them, and it sort of makes sense to group them into groups of three.

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Drump pad</title>
	<link rel="stylesheet" type="text/css" href="drumpad.css">
</head>
<body>
	<div id="drum-machine">
		<div id="display">
			<p id="displaytext"></p>
		</div>
			<div id="controls1">
			<button id="Heater1button"  class="drum-pad"><audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" preload="auto"></audio>Q</button>
			<button id="Heater2button" class="drum-pad"><audio class="clip" id='W' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" preload="auto"></audio>W</button>
			<button id="Heater3button" class="drum-pad"><audio class="clip" id='E' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" preload="auto"></audio>E</button>
			</div>
		<div id="controls2">
			<button id="Heater4button" class="drum-pad"><audio class="clip" id='A' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" preload="auto"></audio>A</button>
			<button id="Heater6button"  class="drum-pad"><audio class="clip" id='S'src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>S</button>
			<button id="OpenHHbutton"  class="drum-pad"><audio class="clip" id='D'src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>D</button>
		</div>
        <div id="controls3">
        	<button id="KicknHat" class="drum-pad"><audio class="clip" id='Z'src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>Z</button>
        	<button id="Kickbutton"class="drum-pad"><audio class="clip" id='X'src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>X</button>
        	<button id="ClosedHHbutton"class="drum-pad"><audio class="clip" id='C' src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>C</button>
    	</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
	<script src="drumpad.js"></script>
</body>
</html>

Javascript:

$(document).click(function(e) {
var id = e.target.id;
  switch (id) {
    case "Heater1button":
      document.getElementById('Q').play(), $("#displaytext").text("Heater 1")
      break;
    case "Heater2button":
      document.getElementById('W').play(), $("#displaytext").text("Heater 2")
      break;
    case "Heater3button":
      document.getElementById('E').play(), $("#displaytext").text("Heater 3")
      break;
    case "Heater4button":
      document.getElementById('A').play(), $("#displaytext").text("Heater 4")
    case "Heater6button":
      document.getElementById('S').play(), $("#displaytext").text("Heater 6")
      break;
   case "OpenHHbutton":
    document.getElementById('D').play(), $("#displaytext").text("Open HH")
    break;
    case "KicknHat":
      document.getElementById('Z').play(), $("#displaytext").text("KicknHat")
      break;
    case "Kickbutton":
      document.getElementById('X').play(), $("#displaytext").text("Kick")
      break;
      case "ClosedHHbutton":
      document.getElementById('C').play(), $("#displaytext").text("Closed HH")
      break; 

  }
});

$(document).keydown(function(e){
			switch(e.keyCode){
                    case 81: document.getElementById('Q').play(),$("#displaytext").text("Heater 1")
break;
                    case 87: document.getElementById('W').play(),$("#displaytext").text("Heater 2")
break;
                    case 69: document.getElementById('E').play(),$("#displaytext").text("Heater 3")
break;
                    case 65: document.getElementById('A').play(),$("#displaytext").text("Heater 4")
break;
                    case 83: document.getElementById('S').play(),$("#displaytext").text("Heater 6")
break;
                   case 68: document.getElementById('D').play(),$("#displaytext").text("Open HH")
break;
                        
                   case 90: document.getElementById('Z').play(),$("#displaytext").text("KicknHat")
break;
                   case 88: document.getElementById('X').play(),$("#displaytext").text("Kick")
break;
                   case 67: document.getElementById('C').play(),$("#displaytext").text("Closed HH")
break;
}})

#2

You are missing something important after the line above.

Also, do you have link to your live project, so we can test it out?


#3

Oh, the break! Sorry, a slip!
Yeah. It doesn´t have styling yet, so please ignore that!