bradabrams · bradabrams · May 25, 2025
diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+# California State Parks Explorer
+
+This is a simple web app that displays an interactive map of some California State Parks. Click on a marker to view details about a park and record the date of your visit. The visit information is stored in your browser using `localStorage`.
+
+## Adding More Parks
+
+The sample data in `main.js` contains only a few parks. To add more, edit the `parks` array in `main.js` with the name, latitude, longitude, and description for each park.
+
+## Running
+
+Open `index.html` in your browser. The page uses Leaflet via a CDN, so an internet connection is required.
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>California State Parks Explorer</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>California State Parks Explorer</h1>
+  </header>
+  <section id="map"></section>
+  <section id="details">
+    <h2>Park Details</h2>
+    <div id="park-info"></div>
+    <label>
+      Date Visited:
+      <input type="date" id="visit-date">
+    </label>
+    <button id="save-visit">Save Visit</button>
+  </section>
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,39 @@
+body {
+  font-family: "Helvetica Neue", Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background: #f8f7f2;
+  color: #333;
+}
+
+header {
+  background: #4caf50;
+  color: white;
+  padding: 1rem;
+  text-align: center;
+}
+
+#map {
+  height: 70vh;
+}
+
+#details {
+  padding: 1rem;
+  background: #fff9e5;
+}
+
+#park-info {
+  margin-bottom: 1rem;
+}
+
+button {
+  background: #4caf50;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #3e8e41;
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,55 @@
+// Simple dataset of some California state parks
+const parks = [
+  {
+    name: 'Big Basin Redwoods State Park',
+    lat: 37.1728,
+    lon: -122.2225,
+    description: 'Home to ancient coast redwoods and lush trails.'
+  },
+  {
+    name: 'Anza-Borrego Desert State Park',
+    lat: 33.2550,
+    lon: -116.3760,
+    description: 'California\'s largest state park with desert landscapes.'
+  },
+  {
+    name: 'Emerald Bay State Park',
+    lat: 38.9547,
+    lon: -120.0980,
+    description: 'Scenic views of Lake Tahoe and historic sites.'
+  }
+];
+
+const map = L.map('map').setView([36.7783, -119.4179], 6);
+
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  attribution: '&copy; OpenStreetMap contributors'
+}).addTo(map);
+
+const visited = JSON.parse(localStorage.getItem('visited-parks') || '{}');
+
+function saveVisited(parkName, date) {
+  visited[parkName] = date;
+  localStorage.setItem('visited-parks', JSON.stringify(visited));
+}
+
+function showParkDetails(park) {
+  const info = document.getElementById('park-info');
+  info.innerHTML = `
+    <h3>${park.name}</h3>
+    <p>${park.description}</p>
+    <p><strong>Visited:</strong> ${visited[park.name] || 'Not yet'}</p>
+  `;
+  document.getElementById('save-visit').onclick = () => {
+    const date = document.getElementById('visit-date').value;
+    if (date) {
+      saveVisited(park.name, date);
+      showParkDetails(park);
+    }
+  };
+}
+
+parks.forEach(park => {
+  const marker = L.marker([park.lat, park.lon]).addTo(map);
+  marker.on('click', () => showParkDetails(park));
+});