@ansarstellar
Latest solutions
Article Preview Component
Submitted 10 months agoThe positioning of the icons' dev and any feedback is welcomed :)
Latest comments
- @Gehad28
Nice work!
Your code is well-structured and readable. I like how you handled the rating options.
For the background, I used
radial-gradientwith different alpha values from inside to outside as following:background: radial-gradient(circle at top, rgba(37,45,55,1) 10%, rgba(37,45,55,1) 15%, rgba(37,45,55,0.95) 20%, rgba(37,45,55,0.9) 25%, rgba(37,45,55,0.8) 40%, rgba(37,45,55,0.7) 50%, rgba(37,45,55,0.6) 60%, rgba(37,45,55,0.5) 70%);Keep going ☘️
- @gk6294@Gehad28
Nice Work!
One comment on the error message; it appears when I try to input a decimal number. Also, if I wrote the bill and the number of people before choosing a tip, it calculates a tip amount and when I choose the tip the result doesn't change.
Other than that, the UI looks good! Keep going ☘️
- @gk6294@Gehad28
Nice work!
It is really nice that you used tailwind Keep going ☘️
- P@cacesasaWhat are you most proud of, and what would you do differently next time?
I'm happy that I was able to complete the challenge with some good results. Next time I will try to use a styling extension like sass.
What challenges did you encounter, and how did you overcome them?How to implement form validation was a challenge to me but I was able to do it by trial and error.
What specific areas of your project would you like help with?Any feedback is always welcome. Thanks.
@Gehad28Nice work!
One thing that I have learnt from another member here: To change the image according to the screen size, use
<picture>tag instead of an empty div withbackground-img. You can use it as following:<picture> <source media="(max-width: 380px)" srcset="assets/images/illustration-sign-up-mobile.svg"> <img src="assets/images/illustration-sign-up-desktop.svg" alt="..."> </picture>In the
sourcetag we put the image for a certian screen size, and in theimgtag we put the default image.Keep going ☘️
Marked as helpful - @cas1092What are you most proud of, and what would you do differently next time?
i'm very proud of knowing i have the html/css part very controlled by now, adding java made me think a little bit more about the components on the design (now the button has more attributes) differently, i tried making all at once, creating all the styles and maybe, when working with javascript i should try going on parts, so i can get organized
What challenges did you encounter, and how did you overcome them?the pop-up design, until now almost all my items/class/attributes had a relative position, this challenge requiered a absolute on the action, so that made me work extra hard. i went to the discord channel and to sleep and in the morning, with some distance, the solution was there (also match with the comments i got). maybe i should obssed too much when things aren't working
What specific areas of your project would you like help with?the javascript get me a little scared, in this case it wasn't that hard
@Gehad28Nice work! Some comments:
-
You are displaying the card as flex, so you can use the property
gapto make the gap between the rows equal:gap: 1rem;. -
You also can center the card by giving the body a height
height: 100vh;andalign-content: center;. This will center the card vertically. Now give the card itself an auto margin and it will be centered horizontally!
Keep going! ☘️
-
- @KostexxWhat specific areas of your project would you like help with?
Any constructive criticism is welcome.
@Gehad28Wow! It's perfect! and your code is really organized. Nice work ☘️
