html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drum machine</title>
</head>
<body>
<div class="container" id="drum-machine">
<h1>DRUM MACHINE</h1>
<input type="text" id="display">
<div class="align-items-center text-center ">
<button class="drum-pad btn col-3 btn-dark" id="Heater-1" onclick="display('Heater-1');play('Q');"> Q
<audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" type="audio/mpeg" class="clip" id="Q">
</button>
<button class="drum-pad btn col-3 btn-warning" id="Heater-2" onclick="display('Heater-2');play('W');"> W
<audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" type="audio/mpeg" class="clip" id="W">
</button>
<button class="drum-pad btn col-3 btn-dark" id="Heater-3" onclick="display('Heater-3'); play('E');"> E
<audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" type="audio/mpeg" class="clip" id="E">
</button>
</div>
<br>
<div class="align-items-center text-center">
<button class="drum-pad btn col-3 btn-dark" id="Heater-4" onclick="display('Heater-4'); play('A');"> A
<audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" type="audio/mpeg" class="clip" id="A">
</button>
<button class="drum-pad btn col-3 btn-warning" id="Clap" onclick="display('Clap'); play('S');"> S
<audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3" type="audio/mpeg" class="clip" id="S">
</button>
<button class="drum-pad btn col-3 btn-dark" id="Open-Open-HH" onclick="display('Open-Open-HH'); play('D');"> D
<audio src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3" type="audio/mpeg" class="clip" id="D">
</button>
</div>
<br>
<div class="align-items-center text-center">
<button class="drum-pad btn col-3 btn-dark" id="Kick-n-Hat" onclick="display('Kick-n-Hat'); play('Z');"> Z
<audio src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3" type="audio/mpeg" class="clip" id="Z">
</button>
<button class="drum-pad btn col-3 btn-warning" id="Kick" onclick="display('Kick'); play('X');"> X
<audio src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3" type="audio/mpeg" class="clip" id="X">
</button>
<button class="drum-pad btn col-3 btn-dark" id="Closed-Open-Open-H" onclick="display('Closed-Open'); play('C');"> C
<audio src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3" type="audio/mpeg" class="clip" id="C">
</button>
</div>
<div class="volume">
<div class="slider">
<input type="range" id="control" min="0" max="1" step="0.1"
value="0.3" onchange="volumeRange();">
</div>
</div>
<script src="app.js"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
css code
*{
padding: auto;
margin: auto;
}
body{
align-items: center;
background-color: aquamarine;
}
.container{
display: flex;
align-items: center;
border-radius: 15px;
border: #3838 solid 0.3px;
display: block;
background-color: rgb(26, 63, 63);
margin-top: 3%;
padding: 10px;
height: fit-content;
width: max-content;
box-shadow: 0px 4px 4px 4px rgb(0, 0, 0.25);}
h1{
text-align: center;
text-transform: uppercase;
margin: 10px;
width: 355px;
border: #3838 solid 0.3px;
border-radius: 10px;
padding: 5px;
font: 2em sans-serif;
font-weight: 600;
background-color: rgb(28, 53, 45);
color: rgb(248, 237, 237);
box-shadow: 0px 1px 1px 1px rgb(0, 0, 0.25);
}
.container #display{
margin-left: 45px;
margin-top: 2px;
margin-bottom: 15px;
width: 275px;
height: 50px;
align-items: center;
border: #3838 solid 0.3px;
border-radius: 10px;
padding: 5px;
font: 1em sans-serif;
font-weight: 400;
background-color: rgb(235, 235, 235);
color: rgb(88, 68, 68);
box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.4);
}
button{
width: 10px;
height: 99px;
gap: 0px;
margin: 0%;
box-shadow: 0px 4px 4px 4px rgb(0, 0, 0.25);
}
.volume{
margin: 10px;
border: #3838 solid 0.3px;
border-radius: 10px;
padding: 10px;
margin-left: 38px;
margin-top: 20px;
width: fit-content;
background-color: rgb(28, 53, 45);
color: rgb(248, 237, 237);
box-shadow: 0px 1px 1px 1px rgb(0, 0, 0.25);
}
.volume .slider{
display: flex;
height: 5px;
width: 275px;
align-items: center;
}
.volume .slider input{
width: 100%;
height: 2px;
outline: none;
border-radius: 10px;
-webkit-appearance:none;
margin-right: 1px;
color: rgb(8, 66, 66);
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.5);
}
js code
function display(value){
document.getElementById('display').value=value;
}
function play(str){
var audio = document.getElementById(str);
audio.play();
audio.volume = document.getElementById("control").value;
}
function keyPress(evt){
if (evt.keyCode == 81)
{
document.getElementById("Q").click();
}
else if (evt.keyCode == 87)
{
document.getElementById("W").click();
}
else if (evt.keyCode == 69)
{
document.getElementById("E").click();
}
else if (evt.keyCode == 65)
{
document.getElementById("A").click();
}
else if (evt.keyCode == 83)
{
document.getElementById("S").click();
}
else if (evt.keyCode == 68)
{
document.getElementById("D").click();
}
else if (evt.keyCode == 90)
{
document.getElementById("Z").click();
}
else if (evt.keyCode == 88)
{
document.getElementById("X").click();
}
else if (evt.keyCode == 67)
{
document.getElementById("C").click();
}
}
document.addEventListener("keydown", keyPress);