Such a nice project! My first time using react-router. Also, first time using Context api for managing state. It was very challenging, and a great learning experience. Any tips on how it could've been done better, faster, or smarter are welcomed. Cheers!
Hello, looking at your code I noticed the input element for the phone number is a "number", which provides stepper arrows for users to increase and decrease the value. However, this input type is used for integers. While it may sound logical that a type="number" should be applicable to a phone number, I learned from trial and error that the correct type is <input type="tel">. Using that, you can then figure out how to validate the phone number (i.e. format, area code, length).
Also, in step 2, there is a buggy behavior where the "Next Step" button turns red after a plan has been selected. I noticed that when I choose a plan, then toggle the subscription term between "Monthly" and "Yearly" the "Next Step" button turns red and I cannot proceed. It's possible the state is being reset incorrectly, which disables the "Next Step" button.
Couldn't implement a system for email and number validation. The project is incomplete in that regard, but still submitting anyway to look hopefully get feedback. Also didn't use proper libraries to ensure an easier way of rerouting from page to page. Please do suggest some useful libraries that I can use for a validation system and a routing library. If possible, do suggest anything other than react-router-dom.
For form validation you can check out React Form Hook. Alternatively, you can build your own form validation by looking on Stack Overflow where there are plenty of RegEx code for email or phone number validation. Then, you can validate the data directly or you can wrap the RegEx in a function and pass in the email or phone number to validate.
although i could not get exactly what was given but i tried my best
Hello, I tried clicking on the individual plans in Step 2 but the click is not registering. I see that you built the entire project in pure HTML and CSS, which is impressive, but in order to fulfill the full functionalities of the project you'll need to use some JavaScript to hold the state of each step so that users will see a dynamically calculated total based on those states when reaching Step 4.
If anyone could put me through the functionality of the play again button without having to reload the webpage.
Hello, regarding your question about how to continue playing the game without reloading the webpage, if I'm reading your code correctly, there is a game-body element and a selection element. You hide the game-body when the user makes a choice and then show the selection. So when the user chooses to play again, you have use JS to hide the selection element and show the game-body element.
A heuristic for creating these elements is to treat them as modular blocks that you can either show or hide using CSS or simply attach or remove from the DOM using JavaScript.
