Swiss Vacation Planner

This skill helps you work with a Swiss vacation planner web application that allows users to mark and track planned vs visited locations on an interactive map. The application is a single-page vanilla JavaScript app with no build system or dependencies beyond CDN-loaded libraries.

Project Architecture

The application consists of three main files:

1. **index.html** - Main HTML structure with Leaflet.js CDN integration

2. **script.js** - Contains the `SwissVacationPlanner` class that handles all application logic

3. **style.css** - Complete styling with CSS Grid layout, glassmorphism effects, and responsive design

Key Technical Details

SwissVacationPlanner Class

The main application class manages:

Data Model

Places are stored as objects with the following structure:

Key Features

Development Workflow

When working with this codebase:

1. **No Build System**: This is a pure vanilla JavaScript application. Make direct file edits and refresh the browser to see changes.

2. **Testing**: Tests are required for this project. When implementing features or fixing bugs, ensure appropriate test coverage is added.

3. **External Dependencies**: All dependencies are loaded via CDN (Leaflet.js). Do not introduce npm packages or build tools unless explicitly requested.

4. **Responsive Design**: The application uses CSS Grid layout that switches to single column on screens <768px. Maintain mobile-first responsive design principles.

5. **Data Persistence**: All place data is stored in localStorage. Be mindful of localStorage size limits and data serialization.

6. **Geocoding Rate Limits**: OpenStreetMap Nominatim has usage policies. Implement appropriate rate limiting or caching if adding features that make multiple geocoding requests.

Common Tasks

Adding New Features

1. Read the existing `script.js` to understand the `SwissVacationPlanner` class structure

2. Identify where the new feature fits (map interaction, place management, UI updates)

3. Implement the feature maintaining the existing architectural patterns

4. Update localStorage schema if data structure changes

5. Add corresponding CSS styling in `style.css` if UI changes are needed

6. Write tests for the new functionality

Fixing Bugs

1. Reproduce the bug in the browser

2. Check browser console for JavaScript errors

3. Verify localStorage data integrity

4. Review the relevant method in `SwissVacationPlanner` class

5. Implement the fix maintaining code style consistency

6. Test the fix across different browsers and viewport sizes

Styling Changes

1. Locate the relevant CSS section in `style.css`

2. Maintain the existing glassmorphism aesthetic (backdrop-filter, semi-transparent backgrounds)

3. Ensure responsive behavior is preserved (check @media queries)

4. Test on mobile viewport (<768px) and desktop

Important Constraints

Testing Strategy

Tests should cover:

Implement tests as requested by the user, following their preferred testing approach for vanilla JavaScript applications.