My projects has a lot of areas that might need improvements. I tried fixing most of the bugs I could find but I leave the rest to you! I'm not sure whether this project will fail to generate accessibility issues 😂
Could you please look at my file structure and let me know if it's professional and yes... Please look at my testing code and... well generally my code. Let me know what I need to change. If you find problems with the UI and how I could improve it, I'm open to all your wisdom. I tried using a skeleton to prevent that blank space when the fetch API is still fetching data... Pun very much intended 😂
Mainly accessibility and better coding practices when using Next.js/React.
Circle numbers of steps work as buttons too. I thought that it can be useful.
What specific areas of your project would you like help with?Any advice?
Hey! This is a beautiful solution... I'm thinking of doing it as my next challenge. The only problem I faced was with your phone number verification. It only accepts a + followed by 10 digits but my country code has two extra digits, making it 12. I think you could just increase the range of accepted number of digits to be from 10 - 12 digits.
Happy coding!
Hello! I just completed the same solution and all I can say is that it was fun! I hope you had as much fun as I did! 😁
Anyways, I noticed that some of your input fields still have the decrease and increase buttons and this always happens when you specify an input type of number. In order to combat this, I found some tailwind code that would enable me to remove it like this [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none
Also if you want to format your input field to have the comma separator, I documented the solution to that in my README under the heading "Formatting and input field".
I hope your found this helpful! Happy coding 🥳
Hello Rose Mutai! This is a pretty good solution. I also enjoyed completing it... It was fun and challenging. I took a look at your code to find out why your calculator wasn't centered and I added a few styles to the css in my browser to see what would fix it. I recommend you add this to your body tag:
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
I found out that if you want to vertically align something using flex, you need to give it's container a height property. Also, I don't think I implemented this on my solution but It'd be great if your form submission and validation function fires after all fields have been filled in so that people that have no keyboards can find it easier to use.
Have fun programming and I hope you find this helpful. 👋
Hey sheikhhaseeb559. Congratulations on uploading this solution. I see you've been putting in the work even during the holidays 👏
You have improved with the responsive design! That's a good milestone 🥳
The key thing I'd love to address here is the layout. I gleaned over your code and realised that you rely so much on the position: relative; attribute to move your components to your desired space. This method doesn't maintain the consistency of the layout across different screen sizes. I suggest you take a look at how to use flex or grid these will do you a lot of help with your layout. Here are some resources you can use: flex-tutorial and grid-tutorial. I hope this helps you a bunch!
Happy holidays and happy coding! 🎉
Hey sheikhhaseeb559, It's good to see that you have uploaded another solution. I like that you have integrated media queries into your css now! Kudos 🥳!
Anyways, I looked at your css and noticed that there's a few things you could add to enable your container to be placed in the middle of the viewport. Here's some code you can add to your <body></body> tag:
body {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Then you can make these changes to your container element so that the previous changes can be effective...
Remove the following styles from your <div class="container"></div>:
.container {
position: absolute;
left: 300px;
top: 90px;
}
Congrats on completing the challenge, happy coding!
Hey Bongani Masango, Congrats on completing your challenge!
I had a look at your code and found that you set flex-col without setting flex first in your tailwind css. This would have enabled you to use flex instead of grid which would be great for this solution and then you'd change to flex-row at the desired screen width. This would prevent your divs from separating. Otherwise, I think this is really great!
