Improve UI and Code Readability

[Sn0w3y]

Refactor and Enhance World Map Application

Summary

This pull request introduces several enhancements and refactors to improve the functionality, appearance, and maintainability of the World Map application.

---

Changes Overview

1. Separate index.html and index.php Files

• Commit: Make index.html and index.php different Files

• Description:

  • Separated the front-end (index.html) and back-end (index.php) code.
  • Benefit: Improves code organization, making it easier to maintain and update.

---

2. Improve Styling

• Commit: Improve Styling

• Description:

  • Enhanced the overall design with modern styling.
  • Introduced CSS variables for consistent theming.
  • Improved typography using Google Fonts (Open Sans).
  • Updated colors and hover effects for better user experience.
  • Benefit: Provides a more appealing and user-friendly interface.

---

3. Center Map on Screen

• Commit: Center Map on Screen

• Description:

  • Adjusted CSS to center the world map both horizontally and vertically.
  • Utilized Flexbox to align items centrally.
  • Ensured responsiveness across different screen sizes.
  • Benefit: Enhances visual balance and improves focus on the map.

---

4. Add Double-Click Functionality for Adding/Removing Countries

• Commit: Improvements in showToast and in "Add and Remove"

• Description:

  • Implemented double-click events on the map to add or remove countries.
  • Updated JavaScript to handle dblclick on country paths.
  • Improved user feedback through toast notifications.
  • Benefit: Makes the application more interactive and intuitive.

---

5. Implement Toast Notifications

• Commit: Improvements in showToast and in "Add and Remove"

• Description:

  • Replaced standard alerts with custom toast notifications.
  • Created a showToast function for displaying messages.
  • Styled to match the application's theme.
  • Included country names in notifications for clarity.
  • Benefit: Provides non-intrusive and aesthetically pleasing user feedback.

---

6. Ensure Tooltip Always Appears Above SVG

• Commit: Always show "demo" above svg

• Description:

  • Fixed the tooltip positioning issue where it appeared under the SVG.
  • Adjusted z-index and positioning in CSS to control stacking order.
  • Benefit: Improves usability by ensuring important information is always visible.

---

7. Add "X" Button to Remove Countries from the List

• Commit: Add possibility to remove country from List

• Description:

  • Added an "X" button next to each country in the visited countries list.
  • Updated build() function to include the remove button.
  • Styled the button for consistency.
  • Users can now remove countries directly from the list.
  • Benefit: Enhances user control and convenience.

---

Additional Enhancements

• Code Refactoring:

  • Organized CSS for better readability.
  • Removed inline styles.
  • Improved variable naming.

• Responsive Design:

  • Ensured application responsiveness.
  • Added media queries for different screen sizes.

• Accessibility:

  • Increased clickable areas.
  • Used semantic HTML elements.

• Performance:

  • Optimized event listeners.
  • Minimized DOM manipulations.

---

Testing

• Verified adding/removing countries by double-clicking.
• Confirmed toast notifications display correctly.
• Ensured tooltip appears above the SVG.
• Checked "X" button functionality in the list.
• Tested responsiveness on various devices.

---

Conclusion

These changes significantly enhance the World Map application by improving its user interface, interactivity, and code structure. The application now offers a better user experience and is easier to maintain.

---

Feel free to reach out if there are any questions or need further adjustments.