@mugiwara1995Submitted 4 months ago
Shakil ahmed
@Shakil-aAll comments
- @Shakil-aPosted 3 months ago
Good job on the solution mugiwara1995!,
improvements can be made in the javascript:
- rather than creating the element multiple times in the loop, you can create it once outside and reference when you need it
0 - @HexerseSubmitted 4 months agoWhat 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-aPosted 4 months agogood job on the solution hexerse!,
this is feedback i found online for your solution:
- Improved tipAmount Function Check:
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.
- Clearing Custom Input on Button Click:
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 Input Handling:
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.
- Formatted Output:
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.- Prevent Default Form Submission:
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 helpful0 - @joshhovisSubmitted 4 months agoWhat 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-aPosted 4 months agoGood 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 helpful0 - @khalagaiSubmitted 4 months agoWhat 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-aPosted 4 months agoGood 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
- Correct Characters: Only allows characters that are usually in email addresses.
- Proper Endings: Makes sure the email ends with something like ".com".
- Correct Format: Prevents wrong characters and checks both parts of the email to be correct.
Marked as helpful1 - @mayor-creatorSubmitted over 1 year ago
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-aPosted 4 months agoGreat job on the challenge Paul, suggestions for improvements would be:
- fill in the alts for the images for better accessibility
- on the desktop version if you decrease your font sizes and also set a max-width of around 70% to the main container you can make the container similiar size to the design
- And then to align it you could set your body to display flex, justify content and align items to centre have a min-height of 100vh to centre your main container.
I also struggled with that part and those changes i gave in the suggestions worked for me
other than that, great job
1 - @kiriasruSubmitted 4 months agoWhat 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-aPosted 4 months agoGreat 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 helpful1 -
- @marce7inaSubmitted 5 months ago@Shakil-aPosted 5 months ago
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 helpful1 - @ArwaZ65Submitted 5 months ago@Shakil-aPosted 5 months ago
Good work on getting it close to the design, improvements can be made in:
- the h1 and paragraph shouldnt be in a navigation tag as its not for navigating
- to make the text bold, rather than using p tags and then styling you could use the bold tag <b> or even strong <strong>.
- the instructions should be in an ordered list <ol>
- for font size use em or rem rather than pixels so it will adjust to different sizes
- background color on container should be white
0 - @apekulSubmitted 5 months ago@Shakil-aPosted 5 months ago
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
0 - @MateoyySubmitted 5 months agoWhat 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-aPosted 5 months agoi think everything looks good, possibly making the class descriptions more meaningful and clear and also the h1 element being more bold
0 - @steve-brodskySubmitted 5 months agoWhat 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-aPosted 5 months agoif they had seperated the css into its own styles.css file
0
