Ihemebiri Egonduā¢ 120
@ihemebiriegondu
Submitted
What are you most proud of, and what would you do differently next time?
The smooth animations I implemented throughout the game and how I developed the game logic.
Sarah
@Sarah-okolo
All comments
- Sarahā¢ 150
@Sarah-okolo
Posted
This looks really greatš. You might want to consider moving the content to the center. You can easily achieve this by adding
margin: 0 auto;at the top of both your.originalSectionandheadercode blocks. This should make everything look perfect. Great Job.0 - George Kandelakiā¢ 560
@GeorgeKandelaki
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of how I handled the detail page of the country. I did it without using server/express or any other back-end tool.
What challenges did you encounter, and how did you overcome them?
I encountered only one challenge, which is dark mode and responsiveness(to be honest I got too lazy to do that). I am sorry, I will do better next time.
What specific areas of your project would you like help with?
There is nothing in particular that I want a help with. Feel free to leave a feedback, every feedback is welcomed. Also, Please tell my mistakes in the Code and how can I Improve my code, So I can get better at Writing Code and Improve My Skills. Thanks!
Sarahā¢ 150@Sarah-okolo
Posted
Awesome solution, but I can't seem to access the details page. You might want to look into that.
0 What are you most proud of, and what would you do differently next time?
adding count up text animation for summary section
Sarahā¢ 150@Sarah-okolo
Posted
Awesome solution, but it seems the data for the scores are not displayed correctly.
0- MaelkMarkā¢ 150
@MaelkMark
Submitted
What are you most proud of, and what would you do differently next time?
I'm really proud of that this multi-step form is created with only pure css, without a line of js code. I know this isn't the correct approach for more complicated and bigger projects but I challenged myself and I've learnt a lot from it.
I know that the css is very messy, some parts lost their reusability, maybe I will refactor it some day, but for now, I'm happy with this.
What challenges did you encounter, and how did you overcome them?
This CSS-only challenge was not easy there were many difficulties. I used a lot of hidden (
appearance: none) checkboxes and radio buttons to be able to step between the steps.Sarahā¢ 150@Sarah-okolo
Posted
I meannnn... I am really blown away by this. I can't believe only CSS was used to achieve all that functionality. I had no idea CSS was even that capable. Your approach just goes to show its versatility and it's really awesome. Might not be reasonable for a real-world application, but that's beside the point right nowš .
1 - Muhammad Zohaibā¢ 190
@zohaibxJackie
Submitted
What are you most proud of, and what would you do differently next time?
I am proud to make this multi-step form. It was a new experience and I have made this type of form for the first time in my life. Next time when I am making this form, I will focus on efficiency and security more.
What challenges did you encounter, and how did you overcome them?
The biggest challenge was to maintain the states when the user goes back after selecting everything, and what if the user wants to change the plan after changing their mind. I still don't have the good solution, but what I did was to reset the total price and the user have to select from it again. Not efficient, I know.
What specific areas of your project would you like help with?
I would like help with managing the states when user changes the plan after going to the last page.
Sarahā¢ 150@Sarah-okolo
Posted
Hi, I believe you are having trouble managing state because you are treating the form as multi-page rather than a single-page multistep form.
This approach is also what is affecting your site's URL where if it is reloaded in a certain step the page becomes non-existent resulting in a 404 error, and also what causes the resetting of all the data when the user decides to go back a step. I mean, it's not really a multistep form if the user's data keeps resetting from step to step.
You are already using React, whose main feature is to dynamically update changes to the UI without reloading the site, so my advice is to remove the routing, make the form a single page, create a component for each step, and simply display the component for the corresponding step as the user moves back or forth in the form.
You can then manage the values from each component by setting them in state and passing them through context. I hope you find this helpful.
0 - ubaidrashidā¢ 530
@ubaidrashid
Submitted
Sarahā¢ 150@Sarah-okolo
Posted
Nice solution. You should consider adding a max width to your form card to prevent it from overstretching on wider screens. max-width: 900px should do.
0 - Marianoā¢ 60
@nanopiva
Submitted
What are you most proud of, and what would you do differently next time?
I think I did a good job with the JS logic in general, especially with the form validations. I think the css file could be neater and less confusing. I also think the mobile design is fine, but it could definitely be improved.
What challenges did you encounter, and how did you overcome them?
The responsive design took longer than I thought it would. Having the form container with position: absolute overlapping the current step container gave me more than one headache. I was able to solve it by trial and error and, in the case of very small resolutions, sacrificing some design for better user accessibility.
What specific areas of your project would you like help with?
Any help or advice is welcome! Whether it's about React, CSS or HTML.
Sarahā¢ 150@Sarah-okolo
Posted
Hi, you might want to check out the format you specified for the phone number input field. I tried different phone number formats, even the example shown in the placeholder, but it still kept saying "invalid phone number format"
1 What challenges did you encounter, and how did you overcome them?
Using CSS grid as a whole was quite a challenge for me. I feel more confident in using it after this project, but I struggled still to figure it out here. I also tried using BEM style of naming my classes, but I feel as though I fell quite short here. I think I need to do more research on BEM to utilize it better.
Sarahā¢ 150@Sarah-okolo
Posted
Nice precision.
0
