@mugiwara1995
Submitted
@Shakil-a
@mugiwara1995
Submitted
@Shakil-a
Posted
Good job on the solution mugiwara1995!,
improvements can be made in the javascript:
What are you most proud of, and what would you do differently next time?
I was able to manage this decently. I was proud of that. I will learn how to write code in a more dry way next time. This is practice
What challenges did you encounter, and how did you overcome them?
I encountered a problem where I could not pass 0 into an if statement and I had to remove the if. I just kept testing every function.
What specific areas of your project would you like help with?
I need help, please check if my tipAmount function is okay. I had to remove the if function and do it differently as I could not pass 0 inside.
Also I do not know how to remove the default for inputs. Whenever enter is pressed the tip amount is 5%. Even when the custom amount is focused. I already used prevent default. How can I solve this
@Shakil-a
Posted
good job on the solution hexerse!,
this is feedback i found online for your solution:
if (!bill || !people) { return; } Why: Ensures that calculations only occur if both bill and people have valid values (non-zero). This prevents errors when one of them is 0.
button.addEventListener("click", (e) => { custom.value = ""; // Clear custom input when a button is clicked handleTip(e); });
Why: When a tip button is clicked, the custom input should be cleared to avoid conflicts and ensure only one tip value is active at a time.
-Handling Active Class for Tip Buttons:
buttons.forEach(button => button.classList.remove("active")); // Remove active class from all buttons e.target.classList.add("active"); // Add active class to the clicked button Why: Visual feedback is provided by adding an active class to the clicked button and removing it from others, making it clear which tip option is selected.
custom.addEventListener("input", (e) => { buttons.forEach(button => button.classList.remove("active")); // Remove active class from all buttons handleTip(e); handleSubmit(e); }); Why: When the user enters a custom tip, it should clear the active state of the tip buttons and update the tip amount immediately.
calcTip.innerHTML = $ ${tipperPerson.toFixed(2)}
;
totalPerson.innerHTML = $ ${billperPerson.toFixed(2)}
;
Why: Ensure the calculated amounts are displayed with two decimal places for better readability and accuracy.
form.addEventListener("submit", handleSubmit); Why: Ensures that the form does not submit in the traditional way, allowing custom calculations to happen without refreshing the page.
Marked as helpful
@joshhovis
Submitted
What are you most proud of, and what would you do differently next time?
Between mobile, tablet, and desktop viewports, there was a lot of repositioning and resizing, so figuring all of that out to make this as responsive as possible felt good.
What challenges did you encounter, and how did you overcome them?
The fetch was something I haven't done very much of so working through that and adding the information to the page from the json based on what was clicked was a bit challenging but I just messed around with it and scoured stackoverflow until I was able to put together a working solution.
@Shakil-a
Posted
Good job on the solution Joshua!,
The only thing I would say is rather than creating the cards each time you click the timeframes and then displaying it, you could possibly have the cards premade in the html and then grab the title, previous time and current time and then just change those based on which timeframe the user picked.
Marked as helpful
@khalagai
Submitted
What are you most proud of, and what would you do differently next time?
Form validation using JS.
What challenges did you encounter, and how did you overcome them?
Regex expression to check email. The one I have used is simple.
What specific areas of your project would you like help with?
Any tips on a more robust regex expression will be much appreciated.
@Shakil-a
Posted
Good job on the solution Khalagai!,
On the point of the regex pattern, this is one i found online: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/g
Marked as helpful
Hello, I completed another project before shifting my focus to JavaScript. I had fun working with CSS Flex and Grid properties. What are some best practices for using CSS Grid? Any suggestion on how to improve this or my code will be appreciated. Thank you.
@Shakil-a
Posted
Great job on the challenge Paul, suggestions for improvements would be:
I also struggled with that part and those changes i gave in the suggestions worked for me
other than that, great job
@kiriasru
Submitted
What are you most proud of, and what would you do differently next time?
I created a component using HTML and CSS, but what I would do differently next time is to take less time to complete it.
What specific areas of your project would you like help with?
I would love to receive feedback on how to optimize my code.
@Shakil-a
Posted
Great job on completing the challenge Kevin! , suggestions for improvement would be:
always include a main in your index.html and put all your code into that
instead of fixed width sizes, have it as max-width so it is more responsive, I know this challenge doesn’t go into that but it’s best to practise now before you learn about responsive design and how to apply it
for font size rather than using pixels, use em or rem ( search up the reasons why it’s better practise )
and for height apply min-height in most cases rather than height ( so remember for widths we want max-width and for setting heights min-heights, you can search up the benefits and understand why )
Other than that, very good job on the challenge.
Marked as helpful
@marce7ina
Submitted
@Shakil-a
Posted
everything looks really good, i would suggest rather than fixed width sizes, tried to use percentages for a more flexible approach initially, but everything looks really good and the same as the design, I will definitely use your code as a reference to make my improvements to my own solution, thank you
Marked as helpful
@ArwaZ65
Submitted
@Shakil-a
Posted
Good work on getting it close to the design, improvements can be made in:
@apekul
Submitted
@Shakil-a
Posted
i think the solution is perfect, could possibly make the alt of the image more descriptive and also the sections header and footer i dont think is necessary for this small challenge but thats just a difference of opinion, i think its really good
@Mateoyy
Submitted
What are you most proud of, and what would you do differently next time?
Cieszę się że udało się to ukończyć ale następnym razem kod musi być mniej chaotyczny
What challenges did you encounter, and how did you overcome them?
rozdzielenie wszystkiego o 24px - to jest trudne i do popowy w projekcie
@Shakil-a
Posted
i think everything looks good, possibly making the class descriptions more meaningful and clear and also the h1 element being more bold
@steve-brodsky
Submitted
What are you most proud of, and what would you do differently next time?
Using flexbox
What challenges did you encounter, and how did you overcome them?
Learning to use flexbox
@Shakil-a
Posted
if they had seperated the css into its own styles.css file