@ZenitsuAg
Utkarsh9571
@Utkarsh9571All comments
- @Utkarsh9571
Awesome!!!!!!!
- @amikoelvisWhat are you most proud of, and what would you do differently next time?
Proud Of: Comma Formatting: Nailed input formatting with Intl.NumberFormat for commas (e.g., 1,000,000), keeping raw numbers in Zustand.
const formatDisplayValue = (value: number, allowDecimals: boolean = false) => { if (value === 0) return ''; return allowDecimals ? value.toString() : numberFormatter.format(value); };Do Differently:
- Real-Time Validation: Add instant feedback on input changes, not just on submit.
Challenges and Solutions:
- Comma-Formatted Inputs: Challenge: Displaying commas (e.g., 1,000,000) while storing raw numbers required syncing UI and state.
Solution: Used Intl.NumberFormat for display, parsed inputs with replace(/,/g, '') for the store.
What specific areas of your project would you like help with?const handleNumberChange = (e, setter) => { const rawValue = e.target.value.replace(/,/g, ''); setter(Number(rawValue) || 0); };I’d appreciate community feedback on Real-Time Validation: How can I efficiently implement instant input validation (e.g., check amount > 0 as users type) without performance issues?
const handleNumberChange = (e, setter, field) => { const rawValue = e.target.value.replace(/,/g, ''); const numValue = Number(rawValue) || 0; setter(numValue); setErrors((prev) => ({ ...prev, [field]: numValue <= 0 })); };Responsive mortgage repayment calculator with React and typescript
#react#tailwind-css#typescript#vite#zustand@Utkarsh9571it's awesome brother, I don't know anything about what you are asking, but it looks fine to me, can you look at calculator too and give suggestion.
- @beasta07What challenges did you encounter, and how did you overcome them?
Used Context for the first time , So used chat gpt to add the syntax and some logic which i didn't know (Any other approaches i could have taken that would have been better for my progression?) , i know what the machine did and will try to not use it for similar tasks next time
What specific areas of your project would you like help with?I would love to know if how i wrote the components or the codes could be better optimized , strucuture anything? I am taking any recomendatiosn or suggestions
@Utkarsh9571bhai, i don't know much, i started learning few months back, but i want to point out that,
-
did you forget to update the name and logo of website, in index.html, you can see (vite) written on the website and its logo.
-
also, when i clicked on start new order, it didn't clear the cart, it updated the counter and add to cart button, but the product was still in the cart.
that's it, can you check my project too, it's the latest one and give suggestions.
-
- @amikoelvisWhat are you most proud of, and what would you do differently next time?
I'm most proud of successfully building a fully responsive and accessible results summary component using React and Tailwind CSS. I implemented data fetching, dynamic styling, ARIA roles for accessibility, and improved keyboard navigation.
Next time, I’d plan the asset structure more carefully to avoid path-related deployment issues and test the deployment environment earlier in the process.
What challenges did you encounter, and how did you overcome them?One of the main challenges was loading local JSON data and asset images correctly in a Vite + React setup. Initially, the icons failed to load because they were referenced via relative paths in the JSON file, which doesn't work as expected in Vite. I overcame this by moving the icons to the
publicdirectory and updating the JSON file to use public URLs instead, ensuring they loaded correctly at runtime.Another challenge was ensuring accessibility and responsiveness. I addressed this by incorporating semantic HTML, ARIA roles, keyboard focus styles, and responsive layout utilities from Tailwind CSS.
What specific areas of your project would you like help with?I would like help with the following areas of my project:
-
Optimizing Accessibility Further: While I added ARIA roles and improved semantic structure, I'd appreciate a review to ensure it's fully accessible for screen readers and keyboard users.
-
Improving Asset Handling: I want to better understand best practices for managing and referencing images or other static assets when working with local JSON and Vite.
-
Performance Optimization: Suggestions for making the app more efficient—especially when scaling or preparing for deployment—would be helpful.
-
Design and UI Feedback: I'd love feedback on how to make the UI more intuitive, engaging, and visually polished across all screen sizes.
@Utkarsh9571it's very wide than the design, maybe narrow it down, everything looks fine to me.
-
- @BunchydoWhat are you most proud of, and what would you do differently next time?
I'm proud of how I structured the layout using containers to align elements side-by-side, just like the Moon image on the left and the text content on the right. It made the layout feel clean, organized, and scalable. Using a parent container as a flex container and wrapping the image and content in their own divs made the styling process much easier.
If I were to do it differently next time, I’d plan my containers and class naming more clearly from the start. Early on, I ran into issues because I was styling individual elements without wrapping them properly in containers, which caused alignment issues later on.
What challenges did you encounter, and how did you overcome them?The biggest challenge was aligning content side-by-side while keeping it responsive across devices. Initially, I tried positioning items directly instead of using containers, which broke the layout at smaller screen sizes.
I overcame this by:
Creating a parent flex container to control the horizontal layout.
Wrapping the image and text content in their own containers.
Using media queries to stack the layout on smaller screens.
Using flex-direction: column-reverse at one point, then switching to better container ordering using order in flexbox.
What specific areas of your project would you like help with?How to best handle responsive layout shifts — especially when switching from row to column without breaking alignment or causing spacing issues.
Suggestions for better class naming conventions and structure — especially for complex nested containers.
Any tips for making images scale naturally inside flex containers without overflowing or becoming distorted.
How to manage layout logic cleanly in CSS vs. JavaScript — I sometimes used JS to switch layouts based on screen size. Should that be avoided?
@Utkarsh9571i don't know man how to answer any of your queries, they're making me make a comment on your solution, you know how they do it, keep up the work.
Marked as helpful - @Enisco29What are you most proud of, and what would you do differently next time?
...
What challenges did you encounter, and how did you overcome them?...
What specific areas of your project would you like help with?...
@Utkarsh9571awesome man
- @7osny13@Utkarsh9571
what happened man, is it under progress, i had to made a comment because you came in my learning path.
- P@barriedirkWhat are you most proud of, and what would you do differently next time?
The manipulation of the layout using FLEX and GRID with SASS.
What challenges did you encounter, and how did you overcome them?I had an issue with the gallery where it didn't want to use 100% of the width, and I fixed it by replacing the display of the parent.
What specific areas of your project would you like help with?Any suggestions will be welcome.
Note:
I read an article that says you can create a wiki of your code using Devin (https://deepwiki.com), so I created one for my repository for fun.
This is the link to my repository: https://deepwiki.com/barriedirk/frontend-mentor-exercise-23-loopstudios-landing-page
I shared the information just in case you think it will be useful for your projects.
@Utkarsh9571awesome man, its great can you look at my same project i can't make the black text fully visible when hover on those 8 images.
- @Tonny-Blair-Daniel@Utkarsh9571
amazing man, hey can you look in my css and tell me how do i get the eye icon appear whole white on hover, mine appear with low opacity, or some solution to get that result like yours.
- @fa23bcs233@Utkarsh9571
amazing man, by looking at your css it looks like you're new or don't have much experience, but your website responsiveness layout and you github says that you're very good this and you are learning very great, but you never focused on writing efficient code or codes in minimal lines (like everyone says, you should).
Marked as helpful - P@LandonRGeorge@Utkarsh9571
amazing man.
- @marumaru640@Utkarsh9571
card is fine, just work on background image
- @Maye1122@Utkarsh9571
keep up
- @alinakanivecka@Utkarsh9571
awesome way to retrieve data bro. i also need to learn that way, didn't you did it by yourself. also if you didn't add better screen responsiveness on purpose, we need to work on that.
- @VamshiReddy143@Utkarsh9571
well, its amazing, i have no words man, i mean how long it take to learn all that, i can't find anything in your files, i didn't know what to search for.
- @luizfelipe0413What are you most proud of, and what would you do differently next time?
doing the popup in a different way on mobile.
What challenges did you encounter, and how did you overcome them?a little bit of struggle with positioning but all good.
@Utkarsh9571amazing man, you must be working as a developer, look at my code and please suggest some real life improvements
- @kingskyro64What are you most proud of, and what would you do differently next time?
I'm thrilled to share that I recently had the opportunity to work with JavaScript on one of my projects! This accomplishment is a major milestone for me, showcasing my growth and passion for coding.
What challenges did you encounter, and how did you overcome them?This project took longer than I expected. One of the biggest challenges I faced was the second section, which consumed most of my time.
What specific areas of your project would you like help with?Any comment would be very helpful.
@Utkarsh9571i was about to start this challenge, and am wondering, what to do with the social media logos, do i need to create them, also you used java in this challenge, but this says it only needs html and css.
- @haese-hksWhat are you most proud of, and what would you do differently next time?
I am proud of my layout that I made with CSS grid, in the future I will try to make the responsiveness smoother
What challenges did you encounter, and how did you overcome them?I had trouble making it similar to the example because I didn't use figma to see the design, so I just looked at the example and tried to make it as similar as possible.
What specific areas of your project would you like help with?in the size of the spacing of each element and the font size and everything involved in making a responsive design
@Utkarsh9571awesome man, can you tell me how do you show the quote image in this solution, i looked in your code, you didn't used the provided image so how its showing here. what sorcery is that, my fellow coder??
