Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor JavaScript: Reduce Redundancy and Implement Modern Practices (…
…#367) <!-- Thank you for sending a pull request ❤️ --> ## Issues Identification Closes: #364 ## Description **This PR refactors our JavaScript codebase to improve efficiency and adopt modern practices. Key changes include:** * Consolidated form validation functions to reduce redundancy * Streamlined event listeners under a single DOMContentLoaded event * Implemented optional chaining for safer property access * Optimized DOM manipulations and calculations * Enhanced error handling in forms * Utilized modern JS features (arrow functions, template literals) * Improved eco-tips slider logic These changes maintain existing functionality while making the code more maintainable, performant, and aligned with current JavaScript best practices. The refactoring reduces potential errors and improves overall code quality. Testing All existing functionalities have been manually tested Unit tests updated to reflect new code structure Cross-browser compatibility verified ### Summary Provide a brief description of what this pull request does and why it is needed. This issue addresses the need to enhance our JavaScript codebase's efficiency and maintainability. The proposed changes include consolidating redundant functions, optimizing event listeners and DOM manipulations, implementing modern JavaScript features, enhancing error handling in forms, and streamlining calculations. These improvements aim to reduce code complexity and boost performance without altering functionality. Motivated by the codebase's organic growth and future scalability needs, this refactoring will reduce potential bugs, improve load times, and align with modern best practices. Specific issues to be fixed include duplicate form validation code, inefficient DOM operations, lack of error prevention in property access, suboptimal event listener usage, and overly complex UI calculations. While no new dependencies are introduced, the changes require ECMAScript 2020 support and modern browser compatibility. The implementation will be incremental, accompanied by updated unit tests and documentation. Potential impacts include improved page load times and developer onboarding, with some consideration needed for older browser compatibility. Next steps involve reviewing the changes, assigning developers, setting up a testing plan, scheduling code reviews, and planning a progressive rollout. ### Details Include any detailed information about the changes in this pull request. ## Types of Changes *Code Redundancy/ Efficiency and minimizing lines of code _Please check the boxes that apply_ - [x] Bugfix (non-breaking change that fixes an issue) - [ ] New feature (non-breaking change that adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Documentation update (Documentation content changed) - [x] Other (Code Efficiency and Maintainability): ## Checklist _Please check the boxes that apply_ - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] My changes do not break the current system and pass all existing test cases - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules ## Screenshots **Before:** ![image](https://github.com/user-attachments/assets/b0064d14-a03a-4d5e-892d-68938c3a48e8) ![image](https://github.com/user-attachments/assets/99fc91fe-e228-482f-a768-0f88e02c5ddf) ![image](https://github.com/user-attachments/assets/d4007b7c-216f-4607-b030-b9b7d5f429cd) ![image](https://github.com/user-attachments/assets/6628dbc7-f4c5-40fe-8ee5-af48e00fb1ed) ![image](https://github.com/user-attachments/assets/c13937e7-bdce-4fe6-9993-020c78700c23) **After:** ![image](https://github.com/user-attachments/assets/1a417921-63c8-4606-97a9-5472f8eeb487) ![image](https://github.com/user-attachments/assets/6cdf6b3a-c39f-48c9-ab77-439c76d9822a) ![image](https://github.com/user-attachments/assets/06090aee-faa9-4f78-9c7b-825563f3b0d0) ![image](https://github.com/user-attachments/assets/f647fef0-11d8-4457-abf4-48d835f5b99f) ![image](https://github.com/user-attachments/assets/b1ed0552-edae-4d4c-820c-2e81668be4b2) **You can see that before changes there were 279 lines of code which has is now 187 lines after making changes in it.** **Please add #hacktoberfest-accpted, #hacktoberfest, #level2 labels** ## Additional Information Please provide any other information that is relevant to this pull request. <!-- We're looking forward to merging your contribution!! --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced smooth scrolling functionality for improved user experience. - Consolidated form validation into a single function for both signup and login forms. - Enhanced event listeners for form submissions to improve error handling and readability. - Improved slider functionality for eco-tips with better navigation controls. - **Bug Fixes** - Reduced risk of errors in event listeners through safer element access methods. <!-- end of auto-generated comment: release notes by coderabbit.ai -->