Grid layout and flexbox, and vanilla JavaScript

Community feedback

• 

  Alexander Morse•610

  @SakeranPosted over 2 years ago

  Hi! I noticed a few points of interest reading through your code. I think a number of your pain points stem from how you're trying to use addEventListener. For example, this line:

  // Obs: 'cash' is just undefined here.
  const cash = bill.addEventListener("change", ()=>{
          // ...and returning a value here doesn't actually do anything.
          return Number(bill.value); 
      });
  

  As you can see from reading the documentation, addEventListener doesn't have a return value, so we don't gain anything from assigning the result to a variable.

  It seems like what you're trying to do here is make the value of cash sync up with the input element. To do that, you'll want something more like:

  // Define 'cash' outside of the function's scope...
  let cash = 0;
  bill.addEventListener("change", () => {
      // ...and then we can update the value directly inside of the listener function.
      cash = Number(bill.value);
  }
  

  A few other points:

  • As you've probably noticed, one of the bigger challenges here is in taking the values of multiple inputs and combining them into a single value. I think your strategy of adding the calculate button is a good first step, here. Once you've got the 'calculate' function working correctly, try to think of ways you could run it automatically whenever an input is changed.
  • The Number.isNaN() function could be useful for determining if one of the input values isn't a number.
  • On a slightly more obscure note, there are actually two events you can use with most input elements. You're using 'change', which fires once whenever a change is committed (with text boxes, this usually means when the enter key is pressed, or when the user clicks away). You could also choose to use 'input', which will fire on every keystroke. You aren't doing anything wrong here, but knowing the difference between the two might save you some headache later on.

  Hopefully this was helpful.

  Marked as helpful

  2

  ---

  

  Julie_Gz•450

  @Julie-GzPosted over 2 years ago

  @Sakeran Hi Alexander, Thank you so much for the feedback. I followed your advice and created a variable for cash, tipPercentage, and people and set them to 0 and it made the code clearer and easier to understand. I also changed the event type from "change" to "input", In the beginning of the challenge I did use "input" but when I started to get NaN before even adding any inputs I thought "change" would stop that from happening, but that didn't help either. But after following the tips you and the others gave I came across another problem. I wanted to see what the output for each variable was so I added console.log(typeof variable, variable) because even after making these changes I still got NaN in the results, and I found that the people variable kept giving me undefined both as a type and value and I don't know why that is, that's the only issue left I guess. Thanks again for the detailed post, it was beyond helpful. All the best with your projects :)

  0

  

  Julie_Gz•450

  @Julie-GzPosted over 2 years ago

  @Sakeran I managed to find the issue and solve it. Turns out I was trying to log "people" when it wasn't even defined yet. It's not perfect but I can at least say that I finally completed the challenge. Thanks again for your help :)

  0
• 

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted over 2 years ago

  Hi Julie,

  • So concerning ur question about how to calculate the values instantly everytime the user input something, you can use the oninput, onkeyup or onchange event listeners and then call the function that calculates the values when those events happen.
  • The thing is.. You need three pieces of input from the user (bill, tip percent and number of people). So make sure u don't trigger the function unless the user already gives u them.

  You can check my solution here if u don't sure how to do that. Thank You

  2

  ---

  

  Julie_Gz•450

  @Julie-GzPosted over 2 years ago

  @Ahmed-Elbald Hi Ahmed, Thank you for the tips and for sharing your solution :)

  0

  

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted over 2 years ago

  @Julie-Gz You are welcome

  0
• 

  FalejevV•500

  @FalejevVPosted over 2 years ago

  Hi! I think i found whats the problem with your button.

  Your selector - document.querySelector("#calculator"); Button id is id="calculate".

  They do not match ;)

  2

  ---

  

  Julie_Gz•450

  @Julie-GzPosted over 2 years ago

  @FalejevV You've got a good eye Falejev, I didn't even notice. Thank you so much :)

  1