Calculator App html5, Css and JavaScript

Community feedback

• 

  Yevgeny•210

  @YevgeniyMakkaveevPosted over 3 years ago

  Thx! Glad that it helps.

  0
• 

  Yevgeny•210

  @YevgeniyMakkaveevPosted over 3 years ago

  Very good looking site! But it is a good practise to check values before calculating the results, with your solution you may get Infinity or a NaN. For this app it may be not a big deal, but when you start working with the api checking data on input will be a good practise, since unexpected null in render function may crash your website. Hope it helps Good luck and happy coding!

  0

  ---

  

  Jennifer Andrea Largo Castro•25

  @andrealargo19Posted over 3 years ago

  @YevgeniyMakkaveev thank you very much for the recommendation. for some reason the result of the mathematical procedure could only be obtained if values ​​were entered first in the two inputs and later in the tip percentages. that way I can get the mathematical calculation. so when we enter values ​​in the input and then apply the percentage it gives me infinite values. I think it's something that I can't define. but I appreciate your recommendation to improve in the future.

  0

  

  Yevgeny•210

  @YevgeniyMakkaveevPosted over 3 years ago

  @andrealargo19 I'm not a native speaker, so I can get the message incorrectly. What I was trying to say, is instead of getting value right in a declaration like > document.getElementById("input-bill").value Add event listener on a document.getElementById("input-bill") and in a function check if the value is a positive number, like

  billField.addEventListener("input", (e) => handleBill(e));

  and in handleBill check e.target.value With this you can prevent any input you don’t want, by simply changing value to null if it is not correct. I do it like this

  const handleBill = (e) => {
    const value = e.target.value;
    if (!isNaN(value) && value.length < 6 && value > 0) {
      bill = value;
  //bill is a variable just to store value i guess you can use billField.value for it. 
      startCount();
  //function that count the %
    } else {
      billField.value = null 
    }
  }
  

  It may be not the best example, but it works. I hope if my English fail my js will find the way.

  0

  

  Jennifer Andrea Largo Castro•25

  @andrealargo19Posted over 3 years ago

  @YevgeniyMakkaveev ahhh already understood. No problem . your English is very good :). I will keep in mind you recommendation. Thank you so much .

  0
• 

  Shahin NJ•1,190

  @SJ-NosratPosted over 3 years ago

  Hi Jennifer, Awesome project! I don't any issues with the colors.

  However, what I do see that can be improved on is that you're giving hard widths to .principal-container class (and other classes too). What I mean by that is that you're giving exact values in pixels for the widths for different screen sizes; although not wrong to achieve the correct look for the different screen sizes; it can feel a little un-natural.

  You should instead try and allow for the content to dictate the overall width. For example: just by adding the HTML structure with only the default browser styles, and if you inspect in responsive mode, you'll see how fluidly the content reacts to the different screen sizes, in conjuction with margin and padding rules you can achieve a fluid responsive feel.

  Also, .container-img class looks like it is a <heading> tag for your logo instead of <div> tag. Try and look into semantic HTML, here is the MDN article on semantic HTML

  Hope the above helps!

  Best of luck with your coding journey!

  0

  ---

  

  Jennifer Andrea Largo Castro•25

  @andrealargo19Posted over 3 years ago

  @shahin1987 Thank you very much for the feedback. Your comments are very important for me. I really appreciate the recommendations about my projects because I can improve many things in the future.

  1