Tell us what’s happening:
Salut. je n’arrive pas à passer le test 9, je ne comprends pas ce qui se passe, j’ai pourtant tester mon code manuellement, et il fonctionne à merveille. le problème se trouve peut être dans la fonction handleKeydown, mais je n’arrive pas à l’identifier
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Drum Machine</title>
</head>
<body>
<div id="drum-machine">
<h1>Note de Music</h1>
<p>Entrer des notes</p>
<div id="pad-bank" translate="no">
<button class="drum-pad" id="Heater-1">Q
<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" id="Q"></audio>
</button>
<button class="drum-pad" id="Heater-2">W
<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" id="W"></audio>
</button>
<button class="drum-pad" id="Heater-3">E
<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" id="E"></audio>
</button>
<button class="drum-pad" id="Heater-4">A
<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" id="A"></audio>
</button>
<button class="drum-pad" id="Clap">S
<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3" id="S"></audio>
</button>
<button class="drum-pad" id="Open-HH">D
<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3" id="D"></audio>
</button>
<button class="drum-pad" id="Kick-n-Hat">Z
<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3" id="Z"></audio>
</button>
<button class="drum-pad" id="Kick">X
<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3" id="X"></audio>
</button>
<button class="drum-pad" id="Closed-HH">C
<audio class="clip" src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3" id="C"></audio>
</button>
</div>
<p id="display"></p>
<div id="boutton-power" translate="no"><span>Power: On</span><button><span></span></button></div>
<label id="volume">Volume: <input type="range" name="volume" id="volume-range" value="50" min="0" max="100"></label>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
*{
box-sizing: border-box;
transition: all 0.3s ease-in-out
}
:root{
font-size: 20px;
}
html{
font-family: Arial, sans-serif;
}
body{
height: 100vh;
overflow: hidden;
padding: 0;
}
#drum-machine{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgba(249, 230, 230, 0.662);
}
#pad-bank{
width: 300px;
height: 50%;
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
gap: 8px;
color: white;
font-weight: bold;
cursor: pointer;
}
.drum-pad{
background-color:rgb(76, 93, 76);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
user-select: none;
}
h1{
margin-top: 0;
margin-bottom: 0;
}
#drum-machine p:first-of-type{
font-style: italic;
text-align: center;
margin-bottom: 1rem;
}
#drum-machine p:last-of-type{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 30px;
background-color: rgba(34, 34, 34, 0.991);
border-radius: 10px;
color: white;
font-size: 16px;
margin-bottom: 14px;
}
#volume{
display: flex;
justify-content: space-between;
width: 300px;
margin-top: 10px;
align-items: center;
}
#volume-range{
appearance: none;
flex-grow: 1;
margin-left: 10px;
background: linear-gradient(to right, green 0%, green 50%, rgb(58, 55, 55) 50%, rgb(58, 55, 55) 100%);
height: 7px;
border-radius: 20px;
}
#volume-range::-webkit-slider-thumb {
appearance: none;
height: 20px;
width: 20px;
background:orange;
border-radius: 50%;
}
#boutton-power{
margin-bottom: 8px;
display: flex;
justify-content: space-between;
width: 300px;
margin:0 auto;
}
#boutton-power button{
justify-content: flex-end;
display: flex;
width: 60px;
height: 25px;
border: none;
background-color: rgb(28, 235, 28);
border-radius: 30px;
padding:1px;
}
.toggle{
justify-content: flex-start!important;
background-color: rgb(103, 101, 101)!important;
}
button span{
height: 23px;
width: 23px;
background-color: rgb(255, 254, 254);
border-radius: 100%;
}
.pad-active{
box-shadow: -3px 3px 8px black;
background-color: orange
}
/* file: script.js */
const padBank=document.getElementById("pad-bank");
const display=document.getElementById("display");
const buttonPower=document.getElementById("boutton-power");
const volume= document.getElementById("volume-range");
const button= buttonPower.querySelector("button");
//Audio avec 's', pour dire que c'est un tableau
const audios=Array.from(document.querySelectorAll("audio"));
let isPowerOn=true
function handlePowerbtn(){
isPowerOn=!isPowerOn;
button.classList.toggle("toggle");
}
function handleVolume(e){
audios.forEach((elt)=>elt.volume=e.target.value/100);
e.target.style.background=`linear-gradient(to right, green 0%, green ${e.target.value}%, rgb(58, 55, 55) ${e.target.value}%,rgb(58, 55, 55) 100%)`;
}
function handleClick(e){
if(!Array.from(document.querySelectorAll(".drum-pad")).includes(e.target) || !isPowerOn)
return;
e.target.classList.add("pad-active")
const audio=e.target.querySelector("audio");
audio.currentTime=0;
audio.play();
display.innerText=e.target.id;
setTimeout(()=>e.target.classList.remove("pad-active"),200)
}
function handleKeydown(e){
if(!"azeqsdwxcAZEQSDWXC".includes(e.key) || !isPowerOn)
return;
const audio= document.getElementById(e.key.toUpperCase());
audio.currentTime=0;
audio.play();
display.innerText= audio.closest(".drum-pad").id
audio.closest(".drum-pad").classList.add("pad-active")
window.addEventListener("keyup", ()=>audio.closest(".drum-pad").classList.remove("pad-active"), {once: true})
}
button.addEventListener("click", handlePowerbtn)
padBank.addEventListener("click", handleClick);
window.addEventListener("keydown", handleKeydown);
volume.addEventListener("input", handleVolume);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36
Challenge Information:
Build a Drum Machine - Build a Drum Machine