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! 🎉
Product Preview card template feel free to check and comment my mistakes
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!
I have completed the product preview card. I would appreciate your feedback :)
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!
At first i this design i have learn about text alignments and images settings
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!
Please provide feedback with accessibility.
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!
-What did you find difficult while building the project? Grid took me a while.
-Which areas of your code are you unsure of? Grid again, i think it wasn´t a good coding even when i finished it.
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!😎Next goal to submit a junior challenge that use a sass.
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)
Hey, everybody! 👋
This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.
I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.
I'm quite happy with the result! 😊
Any feedback on both the design and code is welcome and appreciated! 😃
Happy coding! 😁
EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.
@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?
For this solution I used html, css and vanilla JS. I used a for loop to iterate over the botoms to select the ranks, also I added a buttom to close the submit page.
I'm open to any advice, I had problems with the rating point, because I wanted to print the option that user selected and not only "You selected 4 out of 5".
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 👍