@mugiwara1995
Latest solutions
Interactive rating component
Submitted 11 months agoi would like help on:
- if there were better ways to refactor my javascipt or structure my html/css
- any accessibility code I could have implemented ( theres one instance i have left out a alt in the success page svg because its purely for looking good)
- anything i can improve on in general
tip calculator app
Submitted 11 months agoareas i would like help in:
- how to make my project more responsive
- possibly there was a better solution for this project
- any bad practises and standards i need to take out
time tracking dashboard
#fetchSubmitted 11 months agoI would like help on:
-
how to make it more responsive from lower sizes to larger screen sizes whilst being smooth, would it be like one column, then two and then the four on the full desktop version
-
possibly a better method to have used for the javascript
-
newsletter sign up page with error message
Submitted 11 months agospecific problems i would be grateful for help in :
-
i still have problems with creating responsive layouts with a mobile first approach and taking the larger screens in consideration, some advice on how i can make it look good for the mobile, tablet and laptop screen sizes
-
any bad practises i implemented and some suggestion how to change that
-
if my javascript logic is okay or was there a better way to achieve this
-
article preview component
Submitted 11 months ago- suggesting other methods i could have used for my pop up
testimonials grid section main
Submitted 12 months ago- any bad practises in the code that i need to change
- suggestions on better ways i could have approached this -any major design detail i may have missed to implement
Latest comments
- @Shakil-a
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
- P@HexerseWhat 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-agood 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 helpful - P@joshhovisWhat 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-aGood 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 - @khalagaiWhat 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-aGood 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 helpful - P@mayor-creator@Shakil-a
Great 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
- @kiriasruWhat 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-aGreat 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 -
