Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add drum machine to new cert #57603

Merged
merged 9 commits into from
Dec 18, 2024
Merged

feat: add drum machine to new cert #57603

merged 9 commits into from
Dec 18, 2024
+568 −1

Conversation

ilenia-magoni
Copy link
Contributor

@ilenia-magoni ilenia-magoni commented Dec 18, 2024 •
edited
Loading

Checklist:

Closes freeCodeCamp/CurriculumExpansion#656

@github-actions github-actions bot added scope: curriculum Lessons, Challenges, Projects and other Curricular Content in curriculum directory. platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. scope: i18n language translation/internationalization. Often combined with language type label labels Dec 18, 2024
@ilenia-magoni ilenia-magoni added status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. full stack cert This label is for the new full stack certification labels Dec 18, 2024
@ilenia-magoni ilenia-magoni marked this pull request as ready for review December 18, 2024 17:06
@ilenia-magoni ilenia-magoni requested a review from a team as a code owner December 18, 2024 17:06
@moT01
Copy link
Member

moT01 commented Dec 18, 2024

Do we want to use the same challenge ID here as the existing drum machine project?

@naomi-lgbt naomi-lgbt merged commit 19b54ff into freeCodeCamp:main Dec 18, 2024
21 checks passed
moT01
moT01 reviewed Dec 18, 2024
View reviewed changes
Copy link
Member

@moT01 moT01 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty fun @ilenia-magoni 🎉

Here's the code I used to pass 
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Drum Machine</title>
  <link rel="stylesheet" href="styles.css" >
</head>

<body>
  <div id="drum-machine">
    <p id="display"></p>
    <div id="pad-bank">
      <div class="drum-pad">Q<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></div>
      <div class="drum-pad">W<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></div>
      <div class="drum-pad">E<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></div>
      <div class="drum-pad">A<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></div>
      <div class="drum-pad">S<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></div>
      <div class="drum-pad">D<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></div>
      <div class="drum-pad">Z<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z"></div>
      <div class="drum-pad">X<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></div>
      <div class="drum-pad">C<audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #3b3b4f;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#display {
  width: 400px;
  height: 60px;
  color:  #d0d0d5;
  border: 4px solid #0a0a23;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-family: sans-serif;
  margin: 0 0 20px 0;
}

#pad-bank {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 400px;
  height: 400px;
  padding: 30px;
  border: 4px solid #0a0a23;
  border-radius: 15px;
  background-color: #3b3b4f;
}

.drum-pad {
  cursor: pointer;
  justify-self: center;
  align-self: center;
  padding: 30px;
  font-size: 40px;
  width: 80px;
  height: 80px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d0d0d5;
  background-color:  #2a2a40;
  border: 2px solid #0a0a23;
  border-radius: 5px;
}
const drumPadEls = document.querySelectorAll('.drum-pad');
const displayEl = document.getElementById('display');
const validKeys = ['Q', 'W', 'E', 'A', 'S', 'D', 'Z', 'X', 'C'];

drumPadEls.forEach(el => {
  el.addEventListener('click', e => {
    e.target.firstElementChild.currentTime = 0;
    e.target.firstElementChild.play();
    displayEl.innerText = `${e.target.firstElementChild.id}!`
  });
});

document.addEventListener('keydown', function (event) {
  const key = event.key.toUpperCase();
  if (validKeys.includes(key)) {
    const audioEl = document.getElementById(key)
    audioEl.currentTime = 0;
    audioEl.play();
    displayEl.innerText = `${key}!`
  }
});

Didn't really run into any issues. Left one suggestion - A couple other things I wrote down...

We could maybe include the URL to the sound files so people don't have to open and copy it? Feels like that would be a lot of text - maybe there's a way to just include the base URL once. Maybe something like, "audio samples you can use for your drum machine can be found at https://cdn.freecodecamp.org/curriculum/drum/<filename>.mp3 - then a small table with the titles you have and the filename to go with it? I noticed the titles don't match the filename - so maybe it's just best how you have it. I think it's fine as it is, but feel free to make adjustments if you want.

The other thing I wrote down is that I noticed a lot of "you should have another div with an id of pad-bank" in the user stories and test text. Not sure if this is common in the other labs and challenges, but I would either use ID (no backticks) if we want it as an abbreviation for "identification", or `id` (backticks) if we want it as the id attribute. Either way works, but the lowercase id doesn't seem right to me without the code highlight. Pretty minor, I would be fine without changing those as well. Your call. I think I would vote to use ID so there isn't as many code blocks.

...lum/challenges/english/25-front-end-development/lab-drum-machine/6762ec275cef87635acc4fe3.md

3. Inside the `#drum-machine` element you should have a `p` element with an id of `display`.

4. Inside your `#pad-bank` element you should have 9 clickable drum pad elements each with a class of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
4. Inside your `#pad-bank` element you should have 9 clickable drum pad elements each with a class of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order.
4. Inside your `#pad-bank` element you should have nine clickable drum pad elements each with a class of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order.

@moT01
Copy link
Member

moT01 commented Dec 18, 2024

oh geez, looks like I'm late - lol

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@moT01 moT01 moT01 left review comments

@Dario-DC Dario-DC Dario-DC approved these changes

@naomi-lgbt naomi-lgbt naomi-lgbt approved these changes

Assignees
No one assigned
Labels
full stack cert This label is for the new full stack certification platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. scope: curriculum Lessons, Challenges, Projects and other Curricular Content in curriculum directory. scope: i18n language translation/internationalization. Often combined with language type label status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add drum machine lab to main repo
4 participants
@ilenia-magoni @moT01 @naomi-lgbt @Dario-DC