enchanced the travelsafty.html file #1876
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our contributing.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
✅ Deploy Preview for buddytrail ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
kindly add gssoc-ext and hacktoberfest-accepted label |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
issue no 1875
Issues Found in the Previous Code
Code Redundancy: The code had repeated HTML structures and inline styles, especially in the navbar and circle animation, which could make maintenance harder.
Fixed Positioning for Animated Circles: All circles were positioned absolutely without dynamic generation or cleanup, leading to potential performance issues as the number of circles increased.
Poor Code Structure: Inline HTML and JavaScript for circle animations cluttered the code, making it less readable and hard to maintain.
Hard-Coded Color Choices: The circles’ color palette was hardcoded in an inline array in JavaScript, making it harder to edit or theme. Including these colors dynamically could simplify changes.
Lack of Responsiveness and Styling Consistency: Some elements (e.g., interactive map and buttons) lacked responsive styling and could potentially overflow on smaller screens.
Accessibility Issues: There were minimal accessibility features such as aria-label attributes, and color choices might not be readable for all users.
Improvements Applied in the Enhanced Code
Optimized Circle Generation with Loops: Instead of manually creating individual circle elements, a for loop was used to generate circles dynamically. This approach keeps the code short and easy to modify if the number of circles changes.
Event Handling Simplification: The mousemove event handler was used efficiently with a centralized coords object, updating circle positions in a single frame rather than recalculating them per circle, improving performance.
Better Color Management: Colors were managed through an array and applied in sequence across the circles, making it easy to modify or add new themes.
Responsive Navbar and Layout: Bootstrap’s responsive grid layout and navigation were improved to ensure the elements adapt smoothly on different screen sizes, making the design more mobile-friendly.
Code Organization for Readability: Code was reorganized to group similar sections together (HTML structure, styles, and scripts), making it easier to navigate and understand.
Accessibility Improvements: Added aria-label attributes for interactive elements to enhance usability for screen readers, creating a more inclusive design.
Commenting and Cleanup: Added comments to key parts of the JavaScript code to improve readability and understanding for future developers.
This enhanced code should provide a more maintainable, responsive, and accessible design with a smoother user experience.