Vani• 160
@VANIMEHTA
Submitted
Looks like my java script is not working fine. Pls suggest changes.
Paola
@paolas771
All comments
- Paola• 320
@paolas771
Posted
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
@AmohPrince
Submitted
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.
Paola• 320@paolas771
Posted
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 - Ali Akbar Qasimi• 850
@Ali-Akbar-Qasimi
Submitted
Paola• 320@paolas771
Posted
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
@treki
Submitted
Please check it out. Please give advice or suggestions.
Paola• 320@paolas771
Posted
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 - Yohannes Teshome• 50
@johannesteshome
Submitted
How is my implementation?
Paola• 320@paolas771
Posted
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
@Alucard2169
Submitted
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.
Paola• 320@paolas771
Posted
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 - Sophia Koulen• 150
@sophiakoulen
Submitted
Hi! I used
requestAnimationFrameto update the output.I was wondering what other ways you can use to give a smooth effect.
Thanks in advance!
Paola• 320@paolas771
Posted
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
@devontecpennamon
Submitted
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!
Paola• 320@paolas771
Posted
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 - Siddhant Sharma• 70
@siddhants1
Submitted
Hi, This is my first solution for a challenge. I would like community to give me constructive feedback.
Paola• 320@paolas771
Posted
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
@leoenter
Submitted
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.
Paola• 320@paolas771
Posted
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
