@xStephx
Latest solutions
Expenses chart component - NextJS, TailwindCSS, ChartJS
#next#tailwind-css#chart-jsSubmitted 8 months agoI'm all good... Just plowing through the free challenges for practice. Thank you
Manage Landing Page - NextJS React Tailwind
#fresh#next#react#tailwind-css#shadcnSubmitted 8 months agoI am good! Thanks for the free challenges.
Loopstudios Landing Page - NextJS Tailwind
#next#react#tailwind-css#framer-motionSubmitted 9 months agoI am good for now. Thank you for the free challenges!
Insure Landing Page - NextJS React Tailwind
#framer-motion#next#preact#tailwind-css#accessibilitySubmitted 9 months agoThanks! I am all good for now.
Crowdfunding Product Page - NextJS Tailwind
#framer-motion#next#tailwind-css#reactSubmitted 9 months agoI am good for now. Thank you for these free challenges!
Intro Section with Dropdown and Ticker - NextJS React Tailwind Framer
#next#react#tailwind-css#framer-motionSubmitted 9 months agoI am good for now. Just practicing and learning a lot from these challenges... cheers!
Latest comments
- @shalri
Nice work as always! Hope this helps: pixelparallel. This extension helped improve workflow. Cheers!
- P@Smailen5What are you most proud of, and what would you do differently next time?
I'm very proud to have written possibly good code, structured much better than my usual.
What challenges did you encounter, and how did you overcome them?The biggest challenge was definitely how to retrieve the correct values and pass them to the function that calculates the tips. In the end, I opted to call the function on every input:
billNumber = Number(event.target.value); calculate(); });To prevent it from being executed when the values are not ready, I used an if statement:
What specific areas of your project would you like help with?if (billNumber && tipNumber && peopleNumber)For the custom button, I always used
type='radio'. I think I could simply usetype='number'.@shalriGood job on the design sir! Although, the Custom tip is not working as expected the rest of the app is working properly.
- @anderutanWhat are you most proud of, and what would you do differently next time?
create layout with grid with tailwindCSS, next time should minimize the component as current Card.jsx take the job of rendering, should use Card for layout only and render in Profile.jsx
What challenges did you encounter, and how did you overcome them?use grid for the layout as i render data inside Cards.jsx so i have to cut the Profile.jsx into 25% | 75% then inside Cards.jsx cut into 25% | 25% | 25%, i don't think this is good practice
What specific areas of your project would you like help with?better way to plan the layout before start writing code
@shalriAnother good job sir! Regarding the grid, you can set the parent container to 4 columns and then just span the children. This way you can avoid using specific percentages and just let the grid do the heavy lifting. I submitted my solution just now. Check my code to see how I implemented it. Cheers.
- @anderutanWhat are you most proud of, and what would you do differently next time?
Try to use React Hook Form for the form and validation
What challenges did you encounter, and how did you overcome them?try to understand the basic of react hook form and implement in this project, the main challenge i face is try to create style for invalid email like when should have red color background and text and when user focus or not
What specific areas of your project would you like help with?Refactor my code to separate it into smaller part
@shalriGood job! The attention to detail is very impressive. I submitted this challenge earlier and getting the the design for the invalid form entries tested my patience. Seeing you implement them perfectly shows effort and a firm grasp of CSS and JavaScript. Well done, sir.
- @anderutanWhat are you most proud of, and what would you do differently next time?
use popover component from headlessui for the popup panel of social media icon
What challenges did you encounter, and how did you overcome them?different design of desktop and mobile for the social media panel, at last i decide to create both version and show when screen size different
What specific areas of your project would you like help with?In mobile version, when you click on the share icon then social media panel will popup but the icons is slightly adjust the gap between and i not sure how to deal with it
@shalriGood job! I am also looking into HeadlessUI for my React projects. Well done, sir.
- @Daniel999lWhat are you most proud of, and what would you do differently next time?
I managed to get the flexbox to work as i wanted it to.
What challenges did you encounter, and how did you overcome them?I need a lot of help in flexbox
What specific areas of your project would you like help with?I need a lot of help in flexbox
@shalriGood job on this one. Just keep on practicing... Cheers!
