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!
Hey sheikhhaseeb559 this looks impressive and I'm glad you learned about text and alignments and how to work with images after completing this challenge that's a great start! Your challenge however lacks 2 things that is:
This is a good solution. Keep up the good work!
Hey Arun Bohra. I think this is near perfect and it's responsive. You could just add a shadow to the main card and It'll make it look a lot more like the design.
Happy coding!
Hey Leonel! Great solution it's looking pretty sharp 👌 I took a peek at your code and it's actually neat, don't beat up yourself too much on that. I also had a hard time writting proper css when I started out. It gets better with more and more practice. Also I like how you are using grid for your layouts, you are among the rare breed 😎
<main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.attribution so that it's not so much at the bottom border. It'll make the solution look a little neater.
Keep up the great work and keep on coding!😎Hey Troy! It's great to see that you have uploaded yet another awesome solution.
Your report is looking so clean, kudos! 👌
Anyways It's responsiveness is consistent on all screens but I think it'd be a lot better if you switched to one grid column at a minimum screen width of 650px because your card component still fits in the layout even at that screen width. (I also recommend using pixels instead of em or rem to specify screen widths in your media queries)
@APG, this is a very great solution! I like the blobbing animation and I think I will make use of that gradient changing resource. It might have been a year ago but man am I so glad to see you submit a solution (It's like that feeling when a marvel movie drops 😁).
What library do you use for animations these days?
Hey Rebeitte! Congratulations on completing this challenge! It looks really sharp and I hope you had fun completing it. 👏 Here's a few pointers:
id tag to the <span> that contains the number 4 in your html. Then you can select that span in your javaScript using document.querySelector( '#element' ) or whatever selector you are comfortable with. So you need to save the value of the button selected by the user in a variable and set that variable as the innerText property of the <span> in your javaScript. To know a little more on innerText, follow this linkHappy coding and keep up the good work 👍
Hey Nathan! Congratulations on completing this wonderful challenge! Looks like you had lots of fun doing it and I also love tailwind css 😎 Here's a few pointers:
726px - 1168px you can just increase the width of the card to 75% of the screen so that your components within your card can be displayed better and your layout won't break.<main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.Happy coding and keep up the good work👍
Hey Victor! Congratulations on completing this great challenge. Your solution is pretty solid!😎 Here's a few tips and some suggestions to your inquiry:
px, rem, em etc. So don't worry about this, just keep on practicing and also look at how other people write their code to be able to notice those common patterns and to borrow a few ideas. You did really well with this solution!<h2> - <h6> ) in your <article>. In your case, you have two options, you can use <div> instead of the <article> because the div doesn't require you to add heading tags or you can make the headings to your articles <h2> tags. This will clear all your HTML validation issues<main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.Happy coding and keep up the great work! 👍
Hey 12Nuskek, congratulations on completing this challenge! I hope you had lots of fun doing this! Here's a few tips and a few answers to your questions:
width and height properties to 100% so that it occupies that container and then you can set the size of the container to a percentage relative to it's parent element say width: 90% and the image will always resize according to the change in the size of its container.px as a matter of fact most people use px to set their margin and padding properties. Also yes, it's always advisable to add margins and paddings where necessary.alt text to your images. This is because it tells the browser what image is being displayed and this can also help those using screen readers to know what image is being displayed on the website. It will also clear some of your HTML validation issues and accessibility issues<main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.Happy coding and keep up the good work! 👍
Hey Olena! Congrats on completing this challenge. I think you nailed it so well and while it might have been a lot more easier with the figma files, sometimes we need to be able to work without them and you did so well 🎉 Here's a little pointers:
<main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.Happy coding and keep up the great work! 👍
Hey David! This is a great solution, kudos to completing the challenge! 😎 Here's a few pointers you could use:
aria-label property and set it to star icon button to your button incase you were not going to add text because the browser needs to identify what button that is and it also helps those using screen readers. Your button should look like this
<button aria-label = "star icon button"> <svg><path></path></svg></button>
That will resolve some of your accessibility issues.<main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.Happy coding and keep up the good work👍
Hey Stephen, congrats on completing this challenge, It must have been fun!!! Here's a few pointers:
z-orderDiv within a button is sure to generate some errors, you might consider just removing the divs containing the button text and the <img> tag and you could just let me be as they are so your code will look like this <button> text <img></img> </button> That should solve some of your HTML validation issues.<main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.Happy Coding! 👍