Front-end / Drum Machine - Not passed tests although the app works, what did I do wrong?

JavaScript
1

I did the app and it works properly, it displays the name and plays the sound when clicked, I don’t understand/see what is wrong, can someone offer me a helping eye?

I will value any help, critic and comment you give me.
Thanks you!

error received:

  1. When I click on a .drum-pad element, the audio clip contained in its child <>audio> element should be triggered.
    The <>audio> element with id=“Q” does not play when the Q .drum-pad is clicked : expected true to be false
  1. When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).
    Each time a drum pad is triggered, a unique string should be displayed in the element with the id “display”: expected false to be true

This is my KeyComp

Declarations / Initializers:

 const pressedButton = useSelector((state) => state.button.pressedButton);
    const volumeLevel = useSelector((state) => state.volume.volumeLevel);
    const isOn = useSelector((state) => state.power.isOn);
    const dispatch = useDispatch();


    const audios = {
        Q: {src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3", name: "Heater 1"},
        W: {src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3", name: "Heater 2"},
        E: {src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3", name: "Heater 3"},
        A: {src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3", name: "Heater 4"},
        S: {src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3", name: "Heater 6"},
        D: {src: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3", name: "Dsc Oh"},
        Z: {src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3", name: "Kick n Hat"},
        X: {src: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3", name: "RP4 KICK 1"},
        C: {src: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3", name: "Cev H2"},
    }

    const colors = [
        "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#FFC0CB",
        "#800080", "#FFA500", "#FF4500", "#1E90FF", "#8B008B", "#FF1493",
        "#9400D3", "#00BFFF", "#FF69B4"
      ];

    const name = audios[keyName].name;
    const source = audios[keyName].src;
    

    const generateRandomColor = () => {
        return colors[Math.floor(Math.random() * colors.length)];
      };

Press/Click handler:

  const handleClick = () => {
        const audio = document.getElementById(keyName);
        
        if(isOn) {
            audio.volume = volumeLevel / 100;
        } else {
            audio.volume = 0;
        }
        const playPromise = audio.play();
        if (playPromise !== undefined) {
            playPromise
            .then(() => {
                dispatch(setDisplayName(name))
                dispatch(setPressedButton(keyName))
                setTimeout(() => {
                    dispatch(clearPressedButton());
                }, 75);
            })
            .catch(error => {
                console.error("failed to play audio", error);
            })
        }
    }  

    const handleKeyPress = (event) => {
        if(event.key.toLowerCase() === keyName.toLowerCase()) {
            handleClick();
        }
    };

    useEffect(() => {
        window.addEventListener("keydown", handleKeyPress);
        return () => {
          window.removeEventListener("keydown", handleKeyPress);
        };
      });

returned HTML Comp:

return (
        <div
            id={name}
            tabIndex="0"
            onKeyDown={handleKeyPress} 
            className="drum-pad text-center col-4 pt-4 pb-4">
            <Button 
                style={{backgroundColor: isPressed ? generateRandomColor() : "gray"}}
                onClick={handleClick}
                className={`w-100 drum-button fs-3 h-100 shadow ${isPressed ? "press" : ""}`} 
                variant="outline-success"
                size="lg"
                >
                {keyName}
            </Button>
            <audio 
                id={keyName}
                src={source} 
                autoPlay={true}
                className="clip" 
            >
                
            </audio>
        </div>
    )

This is the KeyDisplayComp

const displayName = useSelector((state) => state.display.displayName);
    return (
        <div className="text text-start align-items-center mt-0">
            <p id="display">
                {displayName}
            </p>
        </div>
    )
2

Hi @Pankeking

I would recommend you host the project on an online IDE like Codepen, Code sandbox or Stackblitz. It makes it easier to trace the problem.

1 Like
3

I’m using VS Code and have several files in my project folder, how should I properly transfer it there?

4

Open codepen account and copy and paste your project, that will do it.

1 Like
5

Solved it, it was because I misplaced some names/ids
Thank you!

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.