Skip to content
OverviewSolutions
13
Comments
176

Tesla_Ambassador

@tesla-ambassadorKampala Uganda3,070 points

I love web development and Teslas. I am currently a frontend developer although the "f" is soon standing for fullstack in a short while😁

I’m currently learning...

I am honing my REACT skills and I am also learning the backend

Latest solutions

View more solutions

Latest comments

  • Svitlana Suslenkova•5,340
    @SvitlanaSuslenkova
    What are you most proud of, and what would you do differently next time?

    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?

    Practice-30-Form

    #next#typescript
    4
    Tesla_Ambassador•3,070
    @tesla-ambassador

    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!

  • Tesla_Ambassador•3,070
    @tesla-ambassador

    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 🥳

  • Tesla_Ambassador•3,070
    @tesla-ambassador

    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. 👋

    Marked as helpful
  • Tesla_Ambassador•3,070
    @tesla-ambassador

    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! 🎉

    Marked as helpful
  • Tesla_Ambassador•3,070
    @tesla-ambassador

    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!

    Marked as helpful
  • Tesla_Ambassador•3,070
    @tesla-ambassador

    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!

    Marked as helpful
View more comments