@LukichLabadzeSubmitted 9 months ago
Hi, I'm Mazen, a passionate programmer with a degree in Game Design and Animation. My background in Game Development has sparked my interest in the programming world. Currently, I am actively expanding my knowledge in Front-End Development.
I’m currently learning...JavaScript and React.JS
Latest solutions
Bento grid using SCSS
#sass/scssSubmitted 6 months agoIf anyone got idea how to get the image's proportion and height in reference, I would appreciate it. Thanks :)
News homepage done with SCSS
#sass/scss#accessibilitySubmitted 8 months agoJust the close button inside my dialog I place it using
position:fixed, while it's mostly responsive I feel like I applied it too manually so if anyone got a better method I would be glad to hear it.Any tips on improvement is appreciated. Thanks :)
Product list with cart using React | Tailwind
#react#tailwind-css#accessibilitySubmitted 8 months agoI am open for any feedback offered, I already asked for enough help from community and I just need to get a better idea on how React works and read docs more often. Thanks for taking a look at my solution :)
Contact form built with React + SCSS
#react#sass/scss#accessibilitySubmitted 9 months agoOnly one thing I tried for accessibility on error handling is using
aria-errormessagewith anidto the error span, looked into docs and tried several times but nothing seems to be announced so I could get some help on this part. Thanks.aria-invalidalthough works alright when focused on input and it announced invalid.
Latest comments
- @Mazz100Posted 9 months ago
Hi, I took a look at your solution and I would strongly recommend taking it a step back and follow up with challenge roadmaps on community. Furthermore, ask on help channel for valuable feedback form others.
Some of the work messing:
-
Responsive design breaks on small screens.
-
Form labels are messing.
-
Both radio inputs shouldn't be selected together so you need to have same
nameattribute for each and not leave them"". -
Design wise it can be improved as well.
Consider looking into non JS challenges first focus on your CSS skills and build up from there.
Good luck and keep going
0 -
- @CairoGarbSubmitted 12 months agoWhat challenges did you encounter, and how did you overcome them?
None was that challenging, I had the concept in my head and knew "how" to do it. I searched how to do it properly a few things but nothing too complex.
What specific areas of your project would you like help with?A overall feedback or some tips/tricks to improve the code will always be appreciated, thanks!
@Mazz100Posted 12 months agoWell done on completing the challenge. some tips that could be of some help:
- I think you can minimize the errors for this particular challenge since it's just calculating a tip so don't be strict with error messages.
- Only try making condition on calculating results after user selects all the options or at least 2 of them eg. bill and persons. See what fits with you
- I notice that sometime I need to double-click on each discount to apply it so it seems they are not radio inputs which should be the ideal approach for this case.
- One last thing about calculation I see that total/person is not getting calculated correctly, maybe you forgot to link some logic to it ?
Overall your solution looks great but these were some points to consider especially accessible HTML semantic as much as possible. Don't hesitate to ask for help on discord community and get feedback 👍 Best of luck!
Marked as helpful0 - @kelvinbamSubmitted 12 months ago@Mazz100Posted 12 months ago
Good job! Your solution looks great and the responsive is really good 😀. Can I ask how did you implement the bonus step on animating age results ? is it with CSS animation or something different ?
0 - @kennylun123Submitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
I implemented
What challenges did you encounter, and how did you overcome them?React Portalfor my custom dialog / modal box and also able to close it when we click the area outside of the dialog. But I'm not sure if it's been used correctly. Next time I'd prefer to use third party library to ensure the correct behaviour of a dialog.Data state management, we usually fetching data in server side and render the UI. However in this challenge, I imported data locally and store in data state in useEffect to simulate fetching data on page load. On the other hand, it has to do everything in client side which basically abandoned the advantages of server side rendering.
Crowdfunding product page using TypeScript, NextJS, TailwindCSS
#accessibility#next#react#typescript#tailwind-css@Mazz100Posted about 1 year agoWell done! I like the unique difference in visuals you got. Keep it going :)
1 - @don-franklitoSubmitted about 1 year ago@Mazz100Posted about 1 year ago
Hey. I just finished mine and would like to give a few suggestions.
-
Firstly just like @Dimitar mentioned you need to display an error text like it's in reference and I achieved that with conditional rendering.
-
For me I wanted to cap the digits because it makes no sense to insert hundreds of them so a simple
bill.lengthcan do the trick and then set it back to empty strings. -
Lastly if you want you could make a condition so the results doesn't render unless both bill and people are not 0.
Marked as helpful0 -
- @kennylun123Submitted about 1 year ago@Mazz100Posted about 1 year ago
Looks Great Well Done! 😃
Was very close to be pixel-perfect you LOST haha 🤣
One small thing I noticed on HTML which I always did too is wrapping
mainin a parentdivcontainer while we could just assign a class like.main-wrapperformainand use it as a grid instead. Got the advice on my last challenge 🙂1
