@Suryaprakash2006
Latest solutions
Responsive Mortgage Calculator
#react#sass/scssSubmitted about 1 month agoModularity, some of my functions are not able to be exported and added to another project without additional code
Latest comments
- @Quae03
The mortgage calculation works as expected. The design is identical to the example. The form is able to be tabbed through and the button for clearing all content works as intended. You did not group the radio inputs which could add unnecessary Javascript code, which I can't locate all the Javascript is in 1 file which is not good for readability
- P@AdamHaniffWhat are you most proud of, and what would you do differently next time?
• I'm really proud of how the project came out. My React skills definitely leveled up after completing this challenge.
• I gained a better understanding of the React component lifecycle and how/when components are mounted and unmounted. I definitely got better using the 'useEffect' hook as a result.
• One challenge that I faced was trying to add the fade out effect when the modal disappeared. I was adding an animation class to the component when it was being unmounted, but I wasn't seeing the animation because the component was being immediately removed from the DOM. To handle this problem, I added a delay to unmount the Modal so that you could see the fade out effect.
• I used some new hooks in this project like 'useRef' and 'useCallback'. I also created some custom hooks and made sure that they were reusable.
• I implemented 'localStorage' for the first time so that when a user refreshes the page, the contents of their cart persists.
• I used the 'matchMedia' method for the first time instead of the 'resize' event listener for better performance. The 'resize' event listener will call your callback function every time the page gets resized. If you changed your viewport width from 800px to 700px, your callback function would be called 100 times. When you use the 'matchMedia' method, your callback function only gets called when your media query breakpoint changes. This is much more efficient and I should have discovered this earlier.
• Let me know what you guys think and I appreciate any feedback! Thanks!
@Quae03The code is readable and well structured. The webpage is responsive and adjusts to small and large screen sizes. Good amount of modularity in the functions making them reusable. The solution follows the design well and is accurate
- @JOYBOi3D2YWhat challenges did you encounter, and how did you overcome them?
is there any resources for javascript with examples. if anyone knowns?
@Quae03To implement javascript I watched login and register youtube vids. Youtube and W3school is what I recommend
- P@codejerooWhat are you most proud of, and what would you do differently next time?
That I was able to work with forms using javascript and utilize regex to validate emails.
What challenges did you encounter, and how did you overcome them?It was hard at first since I don't have an idea how to validate emails but a quick google solve the issue.
What specific areas of your project would you like help with?How can I make the project better ?
@Quae03All you can add is a :hover to the button but its responsive to big & small screens and the email works correctly. Good job
- @m-aboelnaga@Quae03
Your code well-written and structured, the semantic HTML used is where it should be. The solution provided is almost identical to the design, however the use of a white background on the body is not easy on the eye. Your use of media queries ensures that most users can view the page on many screen sizes.
