Skip to content
OverviewSolutions
11
Comments
10
Paola
@paolas771

All comments

  • Paola•320
    @paolas771Posted over 2 years ago

    Hello, you did a good job! Some tips

    • their is a form attribute(<form></form>) that you can use instead of using a div for forms.
    • When naming variable and functions, I would recommend using camelcase so it is easier to read for example firstName, lastName. So the first world starts with a lowercase and every word after that the first letter should be uppercase.
    • As for the javascript they should be if else statements in all the validate functions so if(x === "") {....; return false} else {return true} otherwise it will always return true.
    • you also want to do x == "" instead of x === " " in the if statements since the === compares data type as well.
    • On the input type submit you want to change the onsubmit to onclick.
    • In the css file on line 93 take away the .form-p class name that is what is causing the errors not to show.
    • instead of using classList.toggle I would recommend using classList.add in the if statement and then add classList.remove in the else statement that way if the user makes more than one mistake it is not toggling back and forth every time they click the button.
    • also add a event.preventDefault() in the validate() function so it is not reloading the page every time the user click the submit button. I hope this helps if anything is not clear let know so I can explain it better!!
    Marked as helpful
    0
  • Amos Machora•330
    @AmohPrinceSubmitted over 2 years ago

    There is some serious spaghetti code here but at least it works 😂😂😂😂😂. Question. How do I put the box shadows on my tabs? I couldnt figure it out.

    Job listing with filtering ReactJs

    1
    Paola•320
    @paolas771Posted over 2 years ago

    Good job it looks great. You can add the box shadow using box-shadow css property. You add the amount you want on each side like you do margin and padding and then add a color at the end. Hope this helps!

    0
  • Paola•320
    @paolas771Posted over 2 years ago

    Good Job on this challenge, there could be some improvements. When tip amount and total are given you want to round to two decimal places for a cleaner look you can do that by using variable.toFixed(2). Also instead of having event listener on the tip buttons you should do it on the number of people input so it will not give the user an infinity value.

    0
  • Tuya Senff•40
    @trekiSubmitted over 2 years ago

    Please check it out. Please give advice or suggestions.

    HTML CSS JS

    1
    Paola•320
    @paolas771Posted over 2 years ago

    You did a good job instead of having values in bill input and number of people input in JavaScript you should do placeholders in the html inputs so placeholder=“0” so when the user clicks on the inputs the number goes away and they do not have to delete themselves.

    Marked as helpful
    1
  • Paola•320
    @paolas771Posted over 2 years ago

    Hello some of you math is wrong in the calculate function else statement. The billamounttotalperson should be the (tip amount + bill total) / number of people. What you are doing is taking the tip amount and multiplying it by 2 which there is no need. On the billamountperperson you should do (bill amount * tip value) / number of people. I would also recommend doing an event listener on the number of people input instead of the tip button just cause the user will be filling out the form from top to bottom. Other you did a good job!!

    Marked as helpful
    0
  • Alucard•870
    @Alucard2169Submitted over 2 years ago

    First time doing this kind of project, I know the functionality is terrible and really build on best practice, but i am still learning JS and will come back to it to make it better.

    If you guys have any feedback, criticism than please feel free to reply, i will appreciate that.

    Thank you.

    HTML and SCSS and Vanilla JS

    2
    Paola•320
    @paolas771Posted over 2 years ago

    Hello you did a good job. When using this page I’m assuming they are filling it out from top to bottom. To improve your site, instead of having an event listener on the tip buttons you can have it on the number of people input and have your calculate function in there so the user does not have to press the tip button again. So as soon as the user enters number of people the outputs are updated You could also make the number of people box the same size of the bill input box so it’s looks nicer.

    Marked as helpful
    0
  • Paola•320
    @paolas771Posted over 2 years ago

    Hi you do a great job! Another way you can have a smooth effect is by having an event listener on the number of people input so when user enters a number it automatically updates. Here is my solution if you want to see what I mean https://www.frontendmentor.io/challenges/tip-calculator-app-ugJNGbJUX/hub/tip-calculator-app-with-javascript-G00OTLZW4

    0
  • Devonte•50
    @devontecpennamonSubmitted over 2 years ago

    Working on projects to add to my portfolio and this seemed like a good challenge for my first project. I would love some feedback on my CSS & JavaScript, this was my first time writing my own CSS & JS without watching a tutorial so I'm looking to improve if anyone has suggestions. Written with plain HTML, CSS, & JS. Thank you in advance for the feedback!

    Tipper: Responsive Tip Calculator

    2
    Paola•320
    @paolas771Posted over 2 years ago

    The layout is good. For the JavaScript instead of having an event listener on the tip buttons you should have it on the number of people input because they will be going top to bottom on entering info so they will select top amount then enter number of people. Also you need to add the tip value to the total amount. Here is my solution if you want to check it out https://www.frontendmentor.io/challenges/tip-calculator-app-ugJNGbJUX/hub/tip-calculator-app-with-javascript-G00OTLZW4

    0
  • Paola•320
    @paolas771Posted over 2 years ago

    You did a good job, but the way the user would use this is going down so entering bill first than tip amount than number of people so when they finish and they still do not get total amounts they will be confused and will not know that they have to go back and press tip amount again. The way I did it is I put an event listener on number of people input instead so as soon as user enters number of people input is given. Here is my solution if you want to check it out https://www.frontendmentor.io/challenges/tip-calculator-app-ugJNGbJUX/hub/tip-calculator-app-with-javascript-G00OTLZW4

    0
  • leoenter•130
    @leoenterSubmitted over 2 years ago

    Show me how would you do it with modern javascript...i didnt want to use a global variable, but that's the only way i found to use the tip percentaje variable all way.

    tip-calculator-app

    1
    Paola•320
    @paolas771Posted over 2 years ago

    For the tips you could give each tip button a different ID name and make them variables in js for example const tip1 = document.getElementById("tip5); from there you would want to do an event listener for each button to set that tip and have the style of the button change. From there you would create a function to calculate the tip and use the function with the tip as a parameter in an event listener for number of people input to get the total and tip amount. Here is my solution if you want to check it out how I did it https://www.frontendmentor.io/solutions/tip-calculator-app-with-javascript-G00OTLZW4 Let me know if you need any more explanation!

    Marked as helpful
    0