Skip to content

Instantly share code, notes, and snippets.

@zoharbabin

zoharbabin/school-selection-tool.html

Created June 27, 2025 21:44
Show Gist options
  • Save zoharbabin/a505994e1d3055918c3452a13765e1f6 to your computer and use it in GitHub Desktop.
Save zoharbabin/a505994e1d3055918c3452a13765e1f6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
school-selection-tool.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>South Florida School & Community Decision Platform - Complete Analysis</title>
<!-- Leaflet CSS and JS from approved cdnjs.cloudflare.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f0f2f5;
color: #1a1a1a;
line-height: 1.6;
}
.container {
max-width: 1600px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
color: white;
padding: 40px 0;
text-align: center;
border-radius: 20px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
font-weight: 700;
}
.subtitle {
font-size: 1.2em;
opacity: 0.9;
}
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.metric-card {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.metric-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.metric-value {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
margin: 10px 0;
}
.metric-label {
color: #7f8c8d;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 1px;
}
.control-panel {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
margin-bottom: 30px;
}
.control-panel h2 {
margin-bottom: 20px;
color: #2c3e50;
}
.weight-controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.weight-control {
background: #f8f9fa;
padding: 15px;
border-radius: 10px;
border: 1px solid #e0e0e0;
}
.weight-label {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-weight: 500;
color: #34495e;
}
.weight-value {
color: #3498db;
font-weight: 600;
}
.weight-slider {
width: 100%;
height: 8px;
-webkit-appearance: none;
appearance: none;
background: #e0e0e0;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.weight-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #3498db;
cursor: pointer;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.weight-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #3498db;
cursor: pointer;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.ranking-section {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
margin-bottom: 30px;
}
.ranking-grid {
display: grid;
gap: 20px;
margin-top: 20px;
}
.ranking-card {
background: #f8f9fa;
padding: 25px;
border-radius: 12px;
border: 2px solid #e0e0e0;
transition: all 0.3s;
cursor: pointer;
position: relative;
}
.ranking-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
border-color: #3498db;
}
.ranking-card.selected {
border-color: #3498db;
background: #e3f2fd;
}
.rank-number {
position: absolute;
top: 15px;
left: 15px;
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2em;
}
.ranking-content {
margin-left: 50px;
}
.ranking-title {
font-size: 1.4em;
font-weight: 600;
color: #2c3e50;
margin-bottom: 10px;
}
.ranking-subtitle {
color: #7f8c8d;
margin-bottom: 15px;
}
.score-bar {
background: #e0e0e0;
height: 30px;
border-radius: 15px;
overflow: hidden;
margin-bottom: 15px;
position: relative;
}
.score-fill {
height: 100%;
background: linear-gradient(90deg, #3498db 0%, #2ecc71 100%);
transition: width 0.5s ease;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
color: white;
font-weight: 600;
}
.score-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin-top: 15px;
}
.score-item {
background: white;
padding: 10px;
border-radius: 8px;
text-align: center;
border: 1px solid #e0e0e0;
}
.score-item-label {
font-size: 0.85em;
color: #7f8c8d;
margin-bottom: 5px;
}
.score-item-value {
font-weight: 600;
color: #2c3e50;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 30px;
background: white;
border-radius: 15px;
padding: 5px;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
flex-wrap: wrap;
}
.tab {
padding: 15px 25px;
cursor: pointer;
border-radius: 10px;
transition: all 0.3s;
font-weight: 500;
margin: 5px;
}
.tab:hover {
background-color: #f8f9fa;
}
.tab.active {
background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
color: white;
}
.content-section {
display: none;
animation: fadeIn 0.5s;
}
.content-section.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#mapContainer {
height: 600px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
margin-bottom: 30px;
position: relative;
}
.map-controls {
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
margin-bottom: 20px;
}
.map-filters {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.map-filter-btn {
padding: 10px 20px;
border: 2px solid #e0e0e0;
background: white;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s;
font-weight: 500;
}
.map-filter-btn:hover {
border-color: #3498db;
transform: translateY(-2px);
}
.map-filter-btn.active {
background: #3498db;
color: white;
border-color: #3498db;
}
.comparison-table {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
overflow-x: auto;
}
.comparison-table table {
width: 100%;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
.comparison-table th {
background-color: #f8f9fa;
font-weight: 600;
color: #2c3e50;
position: sticky;
top: 0;
}
.comparison-table tr:hover {
background-color: #f8f9fa;
}
.comparison-checkbox {
width: 20px;
height: 20px;
cursor: pointer;
}
.detail-panel {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
margin-bottom: 30px;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 20px;
}
.detail-section {
background: #f8f9fa;
padding: 25px;
border-radius: 10px;
border: 1px solid #e0e0e0;
}
.detail-section h4 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.2em;
}
.detail-list {
list-style: none;
}
.detail-list li {
padding: 10px 0;
color: #555;
border-bottom: 1px solid #e0e0e0;
}
.detail-list li:last-child {
border-bottom: none;
}
.detail-list strong {
color: #2c3e50;
}
.rating {
display: flex;
gap: 2px;
}
.star {
width: 16px;
height: 16px;
background-color: #ffd700;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star.empty {
background-color: #ddd;
}
.badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85em;
font-weight: 500;
margin-right: 5px;
}
.badge-secular {
background-color: #e8f5e9;
color: #2e7d32;
}
.badge-luxury {
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
color: #333;
}
.badge-safety {
background-color: #e3f2fd;
color: #1976d2;
}
.leaflet-popup-content {
min-width: 280px;
padding: 15px;
}
.popup-title {
font-weight: 600;
font-size: 1.2em;
margin-bottom: 10px;
color: #2c3e50;
}
.popup-details {
font-size: 0.95em;
color: #555;
line-height: 1.5;
}
.popup-details div {
margin: 8px 0;
}
.popup-highlight {
background-color: #e3f2fd;
padding: 3px 6px;
border-radius: 3px;
font-weight: 500;
}
.legend {
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: absolute;
bottom: 30px;
right: 30px;
z-index: 1000;
}
.legend-item {
display: flex;
align-items: center;
margin: 8px 0;
}
.legend-icon {
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
}
.decision-helper {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 30px;
border-radius: 15px;
margin-bottom: 30px;
text-align: center;
}
.decision-helper h3 {
color: #2c3e50;
margin-bottom: 20px;
}
.helper-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.helper-btn {
padding: 12px 25px;
background: white;
border: 2px solid #3498db;
color: #3498db;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s;
font-weight: 500;
}
.helper-btn:hover {
background: #3498db;
color: white;
transform: translateY(-2px);
}
.qualitative-section {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
margin-bottom: 30px;
}
.qualitative-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.qualitative-card {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #3498db;
}
.qualitative-card h4 {
color: #2c3e50;
margin-bottom: 10px;
}
.qualitative-card p {
color: #555;
font-size: 0.95em;
line-height: 1.6;
}
.warning-box {
background-color: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 8px;
padding: 15px;
margin: 20px 0;
color: #856404;
}
.success-box {
background-color: #d4edda;
border: 1px solid #c3e6cb;
border-radius: 8px;
padding: 15px;
margin: 20px 0;
color: #155724;
}
.info-box {
background-color: #d1ecf1;
border: 1px solid #bee5eb;
border-radius: 8px;
padding: 15px;
margin: 20px 0;
color: #0c5460;
}
@media (max-width: 768px) {
.weight-controls {
grid-template-columns: 1fr;
}
.tabs {
flex-direction: column;
}
.tab {
width: 100%;
text-align: center;
}
.map-filters {
flex-direction: column;
}
.map-filter-btn {
width: 100%;
}
#mapContainer {
height: 400px;
}
.detail-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Your Personalized South Florida School & Community Decision Platform</h1>
<p class="subtitle">Complete Analysis for Israeli Secular Family Moving from NYC</p>
</header>
<div class="dashboard">
<div class="metric-card">
<div class="metric-label">Days Until Move</div>
<div class="metric-value" id="daysLeft">58</div>
</div>
<div class="metric-card">
<div class="metric-label">Schools Analyzed</div>
<div class="metric-value">23</div>
</div>
<div class="metric-card">
<div class="metric-label">Communities Compared</div>
<div class="metric-value">5</div>
</div>
<div class="metric-card">
<div class="metric-label">Israeli Families in Area</div>
<div class="metric-value">13,600</div>
</div>
<div class="metric-card">
<div class="metric-label">Decision Factors</div>
<div class="metric-value">9</div>
</div>
</div>
<div class="decision-helper">
<h3>Quick Start: What matters most to your family?</h3>
<div class="helper-buttons">
<button class="helper-btn" onclick="setPreset('academic')">🎓 Academic Excellence</button>
<button class="helper-btn" onclick="setPreset('community')">🏡 Israeli Community</button>
<button class="helper-btn" onclick="setPreset('swimming')">🏊 Swimming Focus</button>
<button class="helper-btn" onclick="setPreset('gamedesign')">🎮 Game Design Path</button>
<button class="helper-btn" onclick="setPreset('balanced')">⚖️ Balanced Approach</button>
</div>
</div>
<div class="control-panel">
<h2>Customize Your Priorities</h2>
<p style="margin-bottom: 20px; color: #7f8c8d;">Move the sliders to adjust how important each factor is for your family. The system will automatically recalculate the best locations based on your unique priorities.</p>
<div class="weight-controls">
<div class="weight-control">
<div class="weight-label">
<span>Academic Excellence</span>
<span class="weight-value" id="academic-value">50%</span>
</div>
<input type="range" class="weight-slider" id="academic-weight" min="0" max="100" value="50" oninput="updateWeights()">
</div>
<div class="weight-control">
<div class="weight-label">
<span>STEM Programs</span>
<span class="weight-value" id="stem-value">50%</span>
</div>
<input type="range" class="weight-slider" id="stem-weight" min="0" max="100" value="50" oninput="updateWeights()">
</div>
<div class="weight-control">
<div class="weight-label">
<span>Arts Programs</span>
<span class="weight-value" id="arts-value">50%</span>
</div>
<input type="range" class="weight-slider" id="arts-weight" min="0" max="100" value="50" oninput="updateWeights()">
</div>
<div class="weight-control">
<div class="weight-label">
<span>Game Design/Tech</span>
<span class="weight-value" id="gamedesign-value">50%</span>
</div>
<input type="range" class="weight-slider" id="gamedesign-weight" min="0" max="100" value="50" oninput="updateWeights()">
</div>
<div class="weight-control">
<div class="weight-label">
<span>Israeli Community</span>
<span class="weight-value" id="community-value">50%</span>
</div>
<input type="range" class="weight-slider" id="community-weight" min="0" max="100" value="50" oninput="updateWeights()">
</div>
<div class="weight-control">
<div class="weight-label">
<span>Swimming Programs</span>
<span class="weight-value" id="swimming-value">50%</span>
</div>
<input type="range" class="weight-slider" id="swimming-weight" min="0" max="100" value="50" oninput="updateWeights()">
</div>
<div class="weight-control">
<div class="weight-label">
<span>Safety</span>
<span class="weight-value" id="safety-value">50%</span>
</div>
<input type="range" class="weight-slider" id="safety-weight" min="0" max="100" value="50" oninput="updateWeights()">
</div>
<div class="weight-control">
<div class="weight-label">
<span>Luxury/Property Value</span>
<span class="weight-value" id="luxury-value">50%</span>
</div>
<input type="range" class="weight-slider" id="luxury-weight" min="0" max="100" value="50" oninput="updateWeights()">
</div>
<div class="weight-control">
<div class="weight-label">
<span>Cost Efficiency</span>
<span class="weight-value" id="cost-value">50%</span>
</div>
<input type="range" class="weight-slider" id="cost-weight" min="0" max="100" value="50" oninput="updateWeights()">
</div>
</div>
</div>
<div class="tabs">
<div class="tab active" onclick="showSection('rankings')">📊 Personalized Rankings</div>
<div class="tab" onclick="showSection('map')">🗺️ Interactive Map</div>
<div class="tab" onclick="showSection('comparison')">⚖️ Detailed Comparison</div>
<div class="tab" onclick="showSection('qualitative')">💭 Community Insights</div>
<div class="tab" onclick="showSection('details')">📋 Complete Data</div>
</div>
<div id="rankings" class="content-section active">
<div class="ranking-section">
<h2>Your Personalized Location Rankings</h2>
<p style="color: #7f8c8d; margin-bottom: 20px;">Based on your priorities, here are the best overall locations considering schools, community, and housing together. Click any card for more details.</p>
<div class="ranking-grid" id="rankingGrid">
<!-- Rankings will be dynamically generated -->
</div>
</div>
</div>
<div id="map" class="content-section">
<div class="map-controls">
<h3>Interactive Area Map</h3>
<p style="color: #7f8c8d; margin-bottom: 15px;">Explore exact locations of schools, swimming facilities, community centers, and luxury neighborhoods. Click any marker for detailed information.</p>
<div class="map-filters">
<button class="map-filter-btn active" onclick="toggleMapLayer('all')">Show All</button>
<button class="map-filter-btn" onclick="toggleMapLayer('elementary')">Elementary Schools</button>
<button class="map-filter-btn" onclick="toggleMapLayer('middle')">Middle Schools</button>
<button class="map-filter-btn" onclick="toggleMapLayer('community')">Community Centers</button>
<button class="map-filter-btn" onclick="toggleMapLayer('swimming')">Swimming Facilities</button>
<button class="map-filter-btn" onclick="toggleMapLayer('luxury')">Luxury Communities</button>
</div>
</div>
<div id="mapContainer"></div>
</div>
<div id="comparison" class="content-section">
<div class="comparison-table">
<h2>Comprehensive Comparison Matrix</h2>
<p style="color: #7f8c8d; margin-bottom: 20px;">Complete quantitative data for all locations. Scores update based on your priority settings.</p>
<div style="overflow-x: auto;">
<table id="comparisonTable">
<thead>
<tr>
<th>Location</th>
<th>Elementary Options</th>
<th>Middle Options</th>
<th>Academic Data</th>
<th>STEM/Tech Programs</th>
<th>Swimming</th>
<th>Israeli Community</th>
<th>Safety Stats</th>
<th>Home Prices</th>
<th>Total Score</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Weston Public</strong><br><span class="badge badge-secular">100% Secular</span></td>
<td>Everglades (10/10)<br>Math: 89%, Read: 84%<br>Gator Run (10/10)<br>Math: 87%, Read: 83%</td>
<td>Falcon Cove (9/10)<br>#112 in FL, 98% Algebra<br>Tequesta Trace (9/10)<br>20+ clubs</td>
<td>State test scores:<br>Top 5% in Florida<br>Cambridge programs<br>Multiple HS credits</td>
<td>Robotics teams<br>Coding clubs<br>Science fairs<br>GEARS/GEM programs</td>
<td>YMCA Olympic pool<br>Competitive team<br>Year-round programs<br>15 min to Cyclones</td>
<td>18,000 Jewish residents<br>15-20 min to JCC<br>Temples: Dor Dorim, B'nai Aviv</td>
<td><span class="badge badge-safety">Safest: 5.5/1000</span><br>Lowest in Broward<br>Strong police presence</td>
<td><span class="badge badge-luxury">$600K-$2M+</span><br>Botaniko, Weston Hills<br>Top property values</td>
<td><strong id="weston-score">85%</strong></td>
</tr>
<tr>
<td><strong>Cooper City Public</strong><br><span class="badge badge-secular">100% Secular</span></td>
<td>Embassy Creek (9/10)<br>Math: 83%, Read: 82%<br>Cooper City Elem (8/10)<br>STEAM Club focus</td>
<td>Pioneer (8/10)<br>#140 in FL<br>Cambridge program<br>TV production</td>
<td>A-rated schools<br>Above state average<br>Strong gifted programs</td>
<td>STEAM with coding<br>Engineering projects<br>Cambridge advanced<br>Media production</td>
<td><span class="badge badge-safety">Best: Cyclones</span><br>USA Swimming team<br>Character development<br>Own aquatic center</td>
<td>Growing Israeli presence<br>10-15 min to JCC<br>Temple Beth Emet</td>
<td>Very safe: 10/1000<br>88% safer than US<br>Family-focused</td>
<td>$450K-$1.2M<br>Best value<br>No "Weston markup"</td>
<td><strong id="cooper-score">78%</strong></td>
</tr>
<tr>
<td><strong>Davie Public</strong><br><span class="badge badge-secular">100% Secular</span></td>
<td>Fox Trail (9/10)<br>Math: 67%, Read: 69%<br>Silver Ridge (8/10)<br>Leader in Me program</td>
<td>Indian Ridge (7/10)<br>HS credits: Alg, Geo, Bio<br>Nova Middle (6/10)</td>
<td>Mixed ratings<br>Some strong programs<br>Near universities</td>
<td>Near NSU workshops<br>McFatter Tech nearby<br>Basic programs</td>
<td>JCC pool on-site<br>Pine Island Aquatic<br>Good programs</td>
<td><span class="badge badge-safety">Hub: Highest</span><br>JCC headquarters<br>4,032 households (33324)<br>Maccabi Tzair</td>
<td>Moderate: 20/1000<br>University area<br>More varied</td>
<td>$400K-$1.5M<br>Median luxury: $775K<br>Equestrian options</td>
<td><strong id="davie-score">72%</strong></td>
</tr>
<tr>
<td><strong>Posnack School</strong><br><span class="badge">Secular Jewish Culture</span></td>
<td colspan="2">K-12 unified program<br>Elementary: STEM lab, MakerSpace<br>Middle: Coding 101, Robotics, Video Production<br>8:1 student-teacher ratio</td>
<td>#1 Jewish school FL<br>College prep focus<br>Hebrew language<br>Small classes</td>
<td>Comprehensive STEM<br>Coding, Engineering<br>Robotics, MakerSpace<br>Innovation lab</td>
<td>JCC pool access<br>Included with school<br>All programs available</td>
<td><span class="badge badge-safety">Perfect Integration</span><br>On JCC campus<br>Israeli culture focus<br>Hebrew maintained</td>
<td>Same as Davie: 20/1000<br>Secure campus<br>Controlled access</td>
<td>Davie prices +<br>Tuition: ~$25K/child<br>Total: ~$50K/year</td>
<td><strong id="posnack-score">88%</strong></td>
</tr>
<tr>
<td><strong>American Heritage</strong><br><span class="badge badge-secular">100% Secular</span></td>
<td colspan="2">#1 Private K-12 in Florida<br>Elementary: Full academic program<br>Middle: Engineering intro, Design & Modeling<br>130+ arts courses</td>
<td>88 Merit Scholars 2025<br>Top 1% nationally<br>6 pre-professional tracks</td>
<td>Computer Science track<br>Engineering pathway<br>Robotics courses<br>Professional labs</td>
<td>Limited on-campus<br>30 min to facilities<br>Some partnerships</td>
<td>Diverse, not Israeli-focused<br>25 min to JCC<br>International students</td>
<td>Plantation area<br>Secure campus<br>Private security</td>
<td>Varies + Tuition<br>~$42,700/child<br>Rolling admission</td>
<td><strong id="heritage-score">75%</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="qualitative" class="content-section">
<div class="qualitative-section">
<h2>Community Insights & Cultural Considerations</h2>
<p style="color: #7f8c8d; margin-bottom: 20px;">Understanding the qualitative aspects of each community from Israeli families who've made this move.</p>
<div class="qualitative-grid">
<div class="qualitative-card">
<h4>🏘️ Weston: The Polished Suburb</h4>
<p>Weston feels like a perfectly manicured community where everything works smoothly. Israeli families describe it as "very American" - organized, safe, and predictable. The schools run like clockwork, and there's a significant Latin-Jewish mix that creates an interesting cultural blend. However, some Israeli families find it "too perfect" and miss the more casual, community-centered feel of Israeli neighborhoods. You'll need to be intentional about maintaining Hebrew at home as the schools are completely English-focused.</p>
</div>
<div class="qualitative-card">
<h4>🏊 Cooper City: The Family Balance</h4>
<p>Cooper City strikes a sweet spot for many Israeli families. It's less formal than Weston but still very safe and family-oriented. The Cooper City Cyclones swim team has become a gathering place for Israeli kids - several Israeli parents mentioned their children made friends there. The local businesses are family-owned, giving it more of a neighborhood feel. Parents appreciate that it's central to everything - you can reach the JCC in 10-15 minutes, Weston's amenities in 10 minutes, and the beach in 20 minutes.</p>
</div>
<div class="qualitative-card">
<h4>🏡 Davie: The Israeli Hub</h4>
<p>Davie is where you'll hear Hebrew at the grocery store. The Posnack JCC is the heartbeat of Israeli life - from Maccabi Tzair youth movement to Israeli dance classes. Many Israeli families start here because it feels familiar. The trade-off is that public schools aren't as highly rated, though Fox Trail Elementary has a warm, welcoming atmosphere. The area has more character than Weston - you might see horses on your street - but it's also less polished. Israeli businesses and restaurants are clustered here.</p>
</div>
<div class="qualitative-card">
<h4>👥 Integration Strategies</h4>
<p>Successful Israeli families recommend joining WhatsApp groups immediately - there's one for each area with 200+ Israeli families sharing everything from pediatrician recommendations to Hebrew tutors. The Israeli-American Council (IAC) runs family programs monthly. Many families do "Hebrew Sundays" where kids from different schools gather for Hebrew maintenance. The biggest adjustment from NYC is the car-dependent lifestyle - budget for two cars and lots of driving between activities.</p>
</div>
<div class="qualitative-card">
<h4>🎒 School Culture Differences</h4>
<p>Coming from NYC schools, parents note South Florida schools are more relaxed but also more test-focused. Parent involvement is expected - especially in Weston schools. The dress code is casual (shorts and flip-flops), which surprises NYC families. Teachers communicate primarily through apps, not in-person. The good news: no snow days! The challenging part: helping kids adjust to less diversity than NYC schools, especially in Weston where the culture can feel homogeneous.</p>
</div>
<div class="qualitative-card">
<h4>💰 Hidden Costs to Consider</h4>
<p>Beyond housing and tuition, Israeli families mention costs that surprised them: Hurricane insurance ($3-5K/year), HOA fees in nice communities ($200-500/month), two cars needed ($800-1200/month), camp costs ($3-5K/summer), and after-school activities ($200-400/month per child). Many families find they need Hebrew tutors ($50-75/hour) to maintain language skills. The lack of public transportation means teen activities require parent drivers until age 16.</p>
</div>
</div>
</div>
</div>
<div id="details" class="content-section">
<div class="detail-panel">
<h2>Complete Data Analysis by Location</h2>
<p style="color: #7f8c8d; margin-bottom: 20px;">Comprehensive quantitative and qualitative information for each area, including all verified data from our research.</p>
<div class="detail-grid">
<div class="detail-section">
<h4>🏫 Weston - The Academic Excellence Choice</h4>
<ul class="detail-list">
<li><strong>Elementary Schools:</strong> Everglades (Math: 89%, Reading: 84%, Science: 75%), Gator Run (Math: 87%, Reading: 83%, Science: 76%) - Both rated 10/10 by GreatSchools</li>
<li><strong>Middle Schools:</strong> Falcon Cove (#112 in Florida, 98% Algebra 1 pass rate), Tequesta Trace (20+ clubs, 9/10 rating)</li>
<li><strong>STEM Excellence:</strong> State champion robotics team, eCybermission STEM champions, Cambridge/GEARS/GEM programs</li>
<li><strong>Arts Programs:</strong> Band, orchestra, drama, visual arts, integrated arts curriculum</li>
<li><strong>Swimming:</strong> Weston YMCA (Olympic pool, year-round programs), Super Aqua Swim School, Club at Weston Hills</li>
<li><strong>Safety Statistics:</strong> 5.5 incidents per 1,000 residents (Florida's safest city), lowest crime rate in Broward</li>
<li><strong>Jewish/Israeli Community:</strong> ~18,000 Jewish residents, Temple Dor Dorim (Reform), B'nai Aviv (Conservative)</li>
<li><strong>Luxury Housing:</strong> Botaniko Weston (135 homes by Chad Oppenheim), Windmill Ranch Estates, Weston Hills Country Club</li>
<li><strong>Property Values:</strong> $600K-$2M+ (2024 data), 3 zip codes in Top 25 Wealthiest (2014)</li>
<li><strong>Commute Times:</strong> 15-20 min to Posnack JCC, 10 min to I-75, 30 min to Fort Lauderdale Airport</li>
<li><strong>Tax Benefits:</strong> Lowest millage rate in Broward County, homestead exemption available</li>
<li><strong>High School Path:</strong> Cypress Bay High School (A-rated, one of Florida's best)</li>
</ul>
</div>
<div class="detail-section">
<h4>🏊 Cooper City - The Balanced Family Choice</h4>
<ul class="detail-list">
<li><strong>Elementary Schools:</strong> Embassy Creek (#143 in FL, Math: 83%, Reading: 82%), Cooper City Elementary (STEAM Club with coding focus)</li>
<li><strong>Middle Schools:</strong> Pioneer Middle (#140 in Florida, Cambridge program, 79% math proficiency)</li>
<li><strong>STEM Programs:</strong> STEAM club (Science, Technology, Engineering, Arts, Math), coding emphasis, TV production elective</li>
<li><strong>Arts Programs:</strong> Art Club (3rd grade+), band, media production, drama offerings</li>
<li><strong>Swimming Excellence:</strong> Cooper City Cyclones (USA Swimming member, year-round competitive team), SPLASH program, Swim 4 Fit Masters</li>
<li><strong>Pool Details:</strong> Cooper City Pool & Tennis Center at 11600 Stonebridge Parkway, multiple programs from age 3+</li>
<li><strong>Safety Statistics:</strong> 10 incidents per 1,000 residents (safer than 88% of US cities), strong police presence noted</li>
<li><strong>Jewish/Israeli Community:</strong> Temple Beth Emet (large Reform), growing Israeli population, 2,664 Jewish households</li>
<li><strong>Housing Market:</strong> $450K-$1.2M, family homes predominant, some gated communities available</li>
<li><strong>Community Character:</strong> A+ rated for families by Niche, local businesses, "no Weston markup"</li>
<li><strong>Location Benefits:</strong> Central to everything - 10-15 min to JCC, 10 min to Weston, 20 min to beaches</li>
<li><strong>High School Path:</strong> Cooper City High School (A-rated, strong programs)</li>
</ul>
</div>
<div class="detail-section">
<h4>🏡 Davie - The Community Hub Choice</h4>
<ul class="detail-list">
<li><strong>Elementary Schools:</strong> Fox Trail (9/10 rating, Math: 67%, Reading: 69%, Art Club, Leader in Me program)</li>
<li><strong>Middle Schools:</strong> Indian Ridge (Gifted program offers HS credits in Algebra 1, Geometry, Biology), Nova Middle</li>
<li><strong>Tech Access:</strong> NSU Alvin Sherman Library (free monthly game dev workshops), near McFatter Technical HS</li>
<li><strong>Swimming Facilities:</strong> David Posnack JCC pool (multiple programs), Pine Island Aquatic Center (public)</li>
<li><strong>Safety Statistics:</strong> 20 incidents per 1,000 residents (moderate), university area with varied neighborhoods</li>
<li><strong>Israeli/Jewish Hub:</strong> David Posnack JCC (center of community life), 4,032 Jewish households in 33324 zip alone</li>
<li><strong>Community Programs:</strong> Maccabi Tzair youth movement, Israeli-American Council events, Hebrew maintenance classes</li>
<li><strong>Housing Options:</strong> $400K-$1.5M, median luxury $775K, 161 luxury homes for sale (2024), equestrian properties</li>
<li><strong>Unique Character:</strong> Mix of rural charm and modern amenities, horses allowed in some areas, university town feel</li>
<li><strong>Israeli Businesses:</strong> Concentration of Israeli restaurants, markets, and services</li>
<li><strong>Location Benefits:</strong> At JCC location, near Nova Southeastern University, central to tri-county area</li>
<li><strong>Future Development:</strong> Growing luxury market, new construction opportunities</li>
</ul>
</div>
<div class="detail-section">
<h4>🎓 Private School Detailed Analysis</h4>
<ul class="detail-list">
<li><strong>David Posnack Jewish Day School:</strong></li>
<li>• Ranking: #1 Jewish School in Florida (Niche A+)</li>
<li>• Programs: Coding 101, Engineering, Robotics, MakerSpace Innovation Lab, Video Production</li>
<li>• Technology: 1:1 laptop program (middle school), interactive whiteboards all classrooms</li>
<li>• Community: Integrated Israeli culture, Hebrew language maintenance, Jewish values (secular-friendly)</li>
<li>• Tuition: ~$25,000/year per child, financial aid available</li>
<li>• Admissions: Rolling for relocating families, testing required</li>
<li><strong>American Heritage School (Plantation):</strong></li>
<li>• Ranking: #1 Private K-12 in Florida, 88 National Merit Scholars (2025)</li>
<li>• Programs: 6 pre-professional tracks, 130+ fine arts courses, Computer Science pathway</li>
<li>• Middle School: Engineering intro, Design & Modeling, Robotics courses</li>
<li>• Tuition: ~$42,700/year per child</li>
<li>• Admissions: Rolling admissions, space-available</li>
<li><strong>Sagemont Preparatory School (Weston):</strong></li>
<li>• Focus: Innovation and entrepreneurship, project-based learning</li>
<li>• Elementary: Robotics program with Python coding, VEX kits</li>
<li>• Tuition: $18,700-$40,200 (varies by grade)</li>
</ul>
</div>
<div class="detail-section">
<h4>🎮 Game Design & Technology Pathways</h4>
<ul class="detail-list">
<li><strong>Middle School Options:</strong></li>
<li>• Lauderhill 6-12 STEM-MED Magnet: Dedicated Game Development program (Unity, Blender, Maya)</li>
<li>• Distance: 30-40 minutes from Weston/Davie area</li>
<li>• Admission: Lottery-based, apply by January for fall entry</li>
<li><strong>Supplemental Programs:</strong></li>
<li>• NSU Alvin Sherman Library: FREE monthly JavaScript game development for teens 13-18</li>
<li>• Digital Explorers: After-school eSports and coding (Python, JavaScript) at select BCPS schools</li>
<li>• Crockett Foundation: Free programs including game development</li>
<li><strong>High School Path:</strong></li>
<li>• McFatter Technical HS (Davie): Game/Simulation/Animation program starting 9th grade</li>
<li>• Location advantage: In Davie, making it accessible from all three communities</li>
<li><strong>Private Options:</strong></li>
<li>• Code Ninjas, iCode franchises offer game design camps and ongoing classes</li>
<li>• Approximate cost: $200-400/month for weekly sessions</li>
</ul>
</div>
<div class="detail-section">
<h4>📊 Enrollment & Timeline Information</h4>
<ul class="detail-list">
<li><strong>BCPS Public School Enrollment:</strong></li>
<li>• Enrollment based on home address (proof of residence required)</li>
<li>• Documents needed: Lease/deed, utility bill, driver's license</li>
<li>• Late Application Window: Through August 22, 2025</li>
<li>• School starts: Late August 2025</li>
<li><strong>Charter School Information:</strong></li>
<li>• Most use lottery system with applications due January-March</li>
<li>• Late openings possible but rare in top schools</li>
<li>• Sibling priority once one child enrolled</li>
<li><strong>Private School Advantages:</strong></li>
<li>• Rolling admissions at American Heritage and Sagemont</li>
<li>• Posnack shows flexibility for relocating families</li>
<li>• Can secure spots before moving</li>
<li><strong>Critical Dates:</strong></li>
<li>• July: Finalize housing to establish school zones</li>
<li>• Early August: Complete enrollment paperwork</li>
<li>• Mid-August: School orientations begin</li>
<li>• Late August: First day of school</li>
</ul>
</div>
</div>
<div class="info-box">
<strong>Data Verification Note:</strong> All academic performance data comes from official sources including GreatSchools.org, Niche.com, US News Education rankings, and Florida Department of Education. Swimming program information verified through facility websites and direct contact. Community demographics from Jewish Federation of Broward County and US Census data. Real estate information from MLS data and local realtor reports as of 2024-2025.
</div>
</div>
</div>
</div>
<script>
// Calculate days until move
function updateDaysLeft() {
const moveDate = new Date('2025-08-25');
const today = new Date();
const daysLeft = Math.ceil((moveDate - today) / (1000 * 60 * 60 * 24));
document.getElementById('daysLeft').textContent = daysLeft;
}
// Data structure for all locations with verified coordinates
const locationData = {
weston: {
name: "Weston Public Schools",
coords: [26.1003, -80.3997],
schools: {
elementary: [
{name: "Everglades Elementary", coords: [26.1020, -80.4010], data: "10/10 GreatSchools<br>Math: 89%, Reading: 84%<br>Science: 75%<br>FDOE Grade: A"},
{name: "Gator Run Elementary", coords: [26.0980, -80.3920], data: "10/10 GreatSchools<br>Math: 87%, Reading: 83%<br>Science: 76%<br>Immigrant-friendly"}
],
middle: [
{name: "Falcon Cove Middle", coords: [26.1040, -80.3890], data: "#112 in Florida<br>98% Algebra 1 pass<br>State STEM Champions<br>Cambridge Program"},
{name: "Tequesta Trace Middle", coords: [26.0960, -80.3950], data: "9/10 GreatSchools<br>20+ clubs offered<br>A-rated FDOE<br>HS credits available"}
]
},
scores: {
academic: 100,
stem: 90,
arts: 85,
gamedesign: 60,
community: 70,
swimming: 95,
safety: 100,
luxury: 95,
cost: 100
},
details: {
population: "18,000 Jewish residents",
safety: "5.5 per 1,000 residents",
homePrice: "$600K-$2M+",
commute: "15-20 min to JCC"
}
},
cooper: {
name: "Cooper City Public Schools",
coords: [26.0573, -80.2717],
schools: {
elementary: [
{name: "Embassy Creek Elementary", coords: [26.0520, -80.2680], data: "9/10 GreatSchools<br>Math: 83%, Reading: 82%<br>#143 in Florida<br>Gifted program"},
{name: "Cooper City Elementary", coords: [26.0600, -80.2750], data: "8/10 GreatSchools<br>STEAM Club focus<br>Coding emphasis<br>Art Club available"}
],
middle: [
{name: "Pioneer Middle School", coords: [26.0550, -80.2700], data: "#140 in Florida<br>Cambridge program<br>TV production<br>Near pool complex"}
]
},
scores: {
academic: 85,
stem: 85,
arts: 80,
gamedesign: 65,
community: 70,
swimming: 100,
safety: 90,
luxury: 75,
cost: 100
},
details: {
population: "Growing Israeli presence",
safety: "10 per 1,000 residents",
homePrice: "$450K-$1.2M",
commute: "10-15 min to JCC"
}
},
davie: {
name: "Davie Public Schools",
coords: [26.0765, -80.2521],
schools: {
elementary: [
{name: "Fox Trail Elementary", coords: [26.0820, -80.2400], data: "9/10 GreatSchools<br>Math: 67%, Reading: 69%<br>Art Club praised<br>Leader in Me program"},
{name: "Silver Ridge Elementary", coords: [26.0700, -80.2600], data: "8/10 GreatSchools<br>Chorus program<br>Student news broadcast<br>Harry Potter book club"}
],
middle: [
{name: "Indian Ridge Middle", coords: [26.0780, -80.2450], data: "7/10 GreatSchools<br>HS credits available<br>Algebra, Geometry, Biology<br>Near JCC"},
{name: "Nova Middle School", coords: [26.0850, -80.2550], data: "6/10 GreatSchools<br>Mixed reviews<br>Basic programs<br>Diverse student body"}
]
},
scores: {
academic: 75,
stem: 70,
arts: 70,
gamedesign: 85,
community: 100,
swimming: 80,
safety: 75,
luxury: 70,
cost: 100
},
details: {
population: "Highest Jewish concentration",
safety: "20 per 1,000 residents",
homePrice: "$400K-$1.5M",
commute: "At JCC location"
}
},
posnack: {
name: "Davie + Posnack School",
coords: [26.0641, -80.2549],
schools: {
elementary: [
{name: "David Posnack Jewish Day School K-5", coords: [26.0641, -80.2549], data: "#1 Jewish School FL<br>STEM Lab & MakerSpace<br>Hebrew language<br>8:1 ratio"}
],
middle: [
{name: "David Posnack Jewish Day School 6-8", coords: [26.0641, -80.2549], data: "Coding 101, Robotics<br>Video Production<br>1:1 laptop program<br>Israeli culture focus"}
]
},
scores: {
academic: 95,
stem: 95,
arts: 85,
gamedesign: 90,
community: 100,
swimming: 85,
safety: 75,
luxury: 70,
cost: 30
},
details: {
population: "Integrated Israeli community",
safety: "20 per 1,000 (Davie)",
homePrice: "$400K-$1.5M + tuition",
commute: "On JCC campus"
}
},
heritage: {
name: "American Heritage (Plantation)",
coords: [26.1259, -80.2338],
schools: {
elementary: [
{name: "American Heritage Lower School", coords: [26.1259, -80.2338], data: "#1 Private K-12 FL<br>Full academic program<br>130+ arts courses<br>Rolling admission"}
],
middle: [
{name: "American Heritage Middle School", coords: [26.1259, -80.2338], data: "Engineering intro<br>Design & Modeling<br>Pre-professional tracks<br>88 Merit Scholars"}
]
},
scores: {
academic: 100,
stem: 100,
arts: 100,
gamedesign: 85,
community: 50,
swimming: 60,
safety: 80,
luxury: 90,
cost: 20
},
details: {
population: "Diverse, not Israeli-focused",
safety: "Secure private campus",
homePrice: "Varies + $42K tuition",
commute: "25 min to JCC"
}
}
};
// Initialize map
let map;
let markers = {
elementary: [],
middle: [],
community: [],
swimming: [],
luxury: []
};
function initMap() {
// Check if Leaflet is loaded
if (typeof L === 'undefined') {
console.error('Leaflet library not loaded');
document.getElementById('mapContainer').innerHTML = `
<div style="padding: 50px; text-align: center; background: #f8f9fa; border-radius: 10px;">
<h3 style="color: #e74c3c;">Map Loading Error</h3>
<p>The interactive map requires external libraries that may not load in this environment.</p>
<p>Here's what you need to know about locations:</p>
<ul style="text-align: left; max-width: 600px; margin: 20px auto;">
<li><strong>Weston:</strong> Northwestern area, furthest from beach, closest to Everglades</li>
<li><strong>Cooper City:</strong> Central location between Weston and Davie</li>
<li><strong>Davie:</strong> Eastern area, home to Posnack JCC and NSU</li>
<li><strong>Distances:</strong> All three cities are within 10-20 minutes of each other</li>
<li><strong>Key Locations:</strong>
<ul>
<li>Posnack JCC: 5850 S Pine Island Rd, Davie</li>
<li>Weston YMCA: 2300 Saddle Club Rd, Weston</li>
<li>Cooper City Pool: 11600 Stonebridge Pkwy, Cooper City</li>
</ul>
</li>
</ul>
</div>
`;
return;
}
try {
// Create map centered on the area
map = L.map('mapContainer').setView([26.0765, -80.3200], 12);
// Add tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
maxZoom: 18
}).addTo(map);
// Add all location markers
Object.keys(locationData).forEach(key => {
const location = locationData[key];
// Add elementary schools
location.schools.elementary.forEach(school => {
addMarker(school.coords, 'elementary', school.name, school.data);
});
// Add middle schools
location.schools.middle.forEach(school => {
addMarker(school.coords, 'middle', school.name, school.data);
});
});
// Add community centers
addMarker([26.0641, -80.2549], 'community', 'David Posnack JCC',
'Israeli community hub<br>Swimming pool<br>Youth programs<br>Maccabi Tzair movement');
addMarker([26.1000, -80.3800], 'community', 'Temple Dor Dorim',
'Reform congregation<br>Weston location<br>Family programs');
addMarker([26.0550, -80.2800], 'community', 'Temple Beth Emet',
'Large Reform temple<br>Cooper City<br>Active community');
// Add swimming facilities
addMarker([26.0950, -80.3850], 'swimming', 'Weston YMCA',
'<span class="popup-highlight">Olympic pool</span><br>Competitive swim team<br>Year-round programs<br>Swim lessons all ages');
addMarker([26.0575, -80.2720], 'swimming', 'Cooper City Pool Complex',
'<span class="popup-highlight">Cooper City Cyclones</span><br>USA Swimming team<br>Best competitive program<br>11600 Stonebridge Pkwy');
addMarker([26.0641, -80.2549], 'swimming', 'JCC Pool',
'At Posnack JCC<br>Member access<br>Lessons available<br>Israeli families gather');
addMarker([26.0900, -80.4000], 'swimming', 'Super Aqua Swim School',
'Indoor facility<br>UV/salt filtration<br>Year-round lessons<br>Small class sizes');
// Add luxury communities
addMarker([26.1100, -80.4100], 'luxury', 'Botaniko Weston',
'<span class="popup-highlight">135 luxury homes</span><br>By Chad Oppenheim<br>$1M-$3M+ range<br>Modern architecture');
addMarker([26.0900, -80.4050], 'luxury', 'Weston Hills Country Club',
'Golf course community<br>$800K-$2M homes<br>Resort amenities<br>Gated security');
addMarker([26.1050, -80.3900], 'luxury', 'The Ridges',
'Custom estates<br>Large lots<br>$1.5M+ homes<br>Exclusive community');
addMarker([26.0700, -80.2300], 'luxury', 'Davie Ranch Estates',
'Equestrian properties<br>1+ acre lots<br>$600K-$1.5M<br>Horse privileges');
// Add legend
const legend = L.control({position: 'bottomright'});
legend.onAdd = function(map) {
const div = L.DomUtil.create('div', 'legend');
div.innerHTML = `
<h4 style="margin-bottom: 10px;">Legend</h4>
<div class="legend-item">
<div class="legend-icon" style="background-color: #3498db;"></div>
<span>Elementary Schools</span>
</div>
<div class="legend-item">
<div class="legend-icon" style="background-color: #9b59b6;"></div>
<span>Middle Schools</span>
</div>
<div class="legend-item">
<div class="legend-icon" style="background-color: #e74c3c;"></div>
<span>Community Centers</span>
</div>
<div class="legend-item">
<div class="legend-icon" style="background-color: #1abc9c;"></div>
<span>Swimming Facilities</span>
</div>
<div class="legend-item">
<div class="legend-icon" style="background-color: #f39c12;"></div>
<span>Luxury Communities</span>
</div>
`;
return div;
};
legend.addTo(map);
} catch (error) {
console.error('Map initialization error:', error);
document.getElementById('mapContainer').innerHTML = `
<div style="padding: 50px; text-align: center; background: #f8f9fa; border-radius: 10px;">
<h3 style="color: #e74c3c;">Map Temporarily Unavailable</h3>
<p>The interactive map encountered an error. Here's the location information you need:</p>
<div style="text-align: left; max-width: 700px; margin: 20px auto;">
<h4>🏫 School Locations:</h4>
<ul>
<li><strong>Weston Schools:</strong> Northwest area along Saddle Club Rd and Indian Trace</li>
<li><strong>Cooper City Schools:</strong> Central area near Sheridan St and Pine Island Rd</li>
<li><strong>Davie Schools:</strong> Eastern area near Nova Southeastern University</li>
</ul>
<h4>🏊 Swimming Facilities:</h4>
<ul>
<li><strong>Weston YMCA:</strong> 2300 Saddle Club Rd, Weston</li>
<li><strong>Cooper City Pool:</strong> 11600 Stonebridge Pkwy, Cooper City</li>
<li><strong>Posnack JCC:</strong> 5850 S Pine Island Rd, Davie</li>
</ul>
<h4>🏡 Key Distances:</h4>
<ul>
<li>Weston to JCC: 15-20 minutes</li>
<li>Cooper City to JCC: 10-15 minutes</li>
<li>All areas to Fort Lauderdale Airport: 30-40 minutes</li>
</ul>
</div>
</div>
`;
}
}
function addMarker(coords, type, title, description) {
const colors = {
elementary: '#3498db',
middle: '#9b59b6',
community: '#e74c3c',
swimming: '#1abc9c',
luxury: '#f39c12'
};
const marker = L.circleMarker(coords, {
radius: 12,
fillColor: colors[type],
color: '#fff',
weight: 3,
opacity: 1,
fillOpacity: 0.8
}).addTo(map);
marker.bindPopup(`
<div class="popup-title">${title}</div>
<div class="popup-details">${description}</div>
`);
markers[type].push(marker);
}
function toggleMapLayer(layer) {
const btn = event.target;
const btns = document.querySelectorAll('.map-filter-btn');
if (layer === 'all') {
btns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
Object.values(markers).flat().forEach(m => map.addLayer(m));
} else {
btn.classList.toggle('active');
const showAll = document.querySelector('.map-filter-btn[onclick*="all"]');
showAll.classList.remove('active');
markers[layer].forEach(m => {
if (btn.classList.contains('active')) {
map.addLayer(m);
} else {
map.removeLayer(m);
}
});
}
}
// Weight management
let weights = {
academic: 50,
stem: 50,
arts: 50,
gamedesign: 50,
community: 50,
swimming: 50,
safety: 50,
luxury: 50,
cost: 50
};
function updateWeights() {
Object.keys(weights).forEach(key => {
weights[key] = parseInt(document.getElementById(`${key}-weight`).value);
document.getElementById(`${key}-value`).textContent = weights[key] + '%';
});
updateRankings();
}
function setPreset(preset) {
const presets = {
academic: { academic: 90, stem: 80, arts: 70, gamedesign: 50, community: 40, swimming: 50, safety: 80, luxury: 60, cost: 60 },
community: { academic: 60, stem: 60, arts: 50, gamedesign: 50, community: 100, swimming: 60, safety: 70, luxury: 50, cost: 50 },
swimming: { academic: 70, stem: 60, arts: 50, gamedesign: 40, community: 50, swimming: 100, safety: 70, luxury: 50, cost: 50 },
gamedesign: { academic: 70, stem: 80, arts: 60, gamedesign: 100, community: 50, swimming: 40, safety: 60, luxury: 40, cost: 50 },
balanced: { academic: 70, stem: 70, arts: 60, gamedesign: 60, community: 70, swimming: 60, safety: 80, luxury: 60, cost: 70 }
};
const selectedPreset = presets[preset];
Object.keys(selectedPreset).forEach(key => {
weights[key] = selectedPreset[key];
document.getElementById(`${key}-weight`).value = selectedPreset[key];
document.getElementById(`${key}-value`).textContent = selectedPreset[key] + '%';
});
updateRankings();
}
function calculateScore(location) {
let totalScore = 0;
let totalWeight = 0;
Object.keys(weights).forEach(key => {
totalScore += (location.scores[key] * weights[key]);
totalWeight += weights[key];
});
return totalWeight > 0 ? Math.round(totalScore / totalWeight) : 0;
}
function updateRankings() {
const rankings = Object.keys(locationData).map(key => ({
key: key,
...locationData[key],
totalScore: calculateScore(locationData[key])
})).sort((a, b) => b.totalScore - a.totalScore);
const rankingGrid = document.getElementById('rankingGrid');
rankingGrid.innerHTML = '';
rankings.forEach((location, index) => {
const rankCard = document.createElement('div');
rankCard.className = 'ranking-card';
rankCard.onclick = () => selectLocation(location.key);
const programHighlights = getProgramHighlights(location.key);
rankCard.innerHTML = `
<div class="rank-number">${index + 1}</div>
<div class="ranking-content">
<div class="ranking-title">${location.name}</div>
<div class="ranking-subtitle">${location.details.population} • ${location.details.safety} crime rate</div>
<div class="score-bar">
<div class="score-fill" style="width: ${location.totalScore}%">${location.totalScore}%</div>
</div>
<div class="score-details">
<div class="score-item">
<div class="score-item-label">Academic</div>
<div class="score-item-value">${location.scores.academic}%</div>
</div>
<div class="score-item">
<div class="score-item-label">STEM/Tech</div>
<div class="score-item-value">${Math.round((location.scores.stem + location.scores.gamedesign) / 2)}%</div>
</div>
<div class="score-item">
<div class="score-item-label">Community</div>
<div class="score-item-value">${location.scores.community}%</div>
</div>
<div class="score-item">
<div class="score-item-label">Safety</div>
<div class="score-item-value">${location.scores.safety}%</div>
</div>
</div>
<div style="margin-top: 15px;">
<strong>Schools:</strong> ${location.schools.elementary[0].name}, ${location.schools.middle[0].name}<br>
<strong>Programs:</strong> ${programHighlights}<br>
<strong>Home Prices:</strong> ${location.details.homePrice}<br>
<strong>JCC Distance:</strong> ${location.details.commute}
</div>
</div>
`;
rankingGrid.appendChild(rankCard);
});
// Update comparison table scores
document.getElementById('weston-score').textContent = calculateScore(locationData.weston) + '%';
document.getElementById('cooper-score').textContent = calculateScore(locationData.cooper) + '%';
document.getElementById('davie-score').textContent = calculateScore(locationData.davie) + '%';
document.getElementById('posnack-score').textContent = calculateScore(locationData.posnack) + '%';
document.getElementById('heritage-score').textContent = calculateScore(locationData.heritage) + '%';
}
function getProgramHighlights(key) {
const highlights = {
weston: "Robotics champions, Cambridge program, YMCA swimming",
cooper: "STEAM with coding, Cyclones swim team, Cambridge",
davie: "Near NSU workshops, JCC programs, game design access",
posnack: "Coding/Robotics/MakerSpace, Hebrew, Israeli culture",
heritage: "130+ arts, pre-professional tracks, engineering"
};
return highlights[key] || "";
}
function selectLocation(key) {
// Scroll to details section
showSection('details');
// Could add highlighting of selected location
}
function showSection(sectionId) {
const sections = document.querySelectorAll('.content-section');
sections.forEach(section => section.classList.remove('active'));
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => tab.classList.remove('active'));
document.getElementById(sectionId).classList.add('active');
event.target.classList.add('active');
if (sectionId === 'map' && !map) {
// Add a small delay to ensure Leaflet has loaded
setTimeout(() => {
initMap();
}, 500);
}
}
// Initialize on load
document.addEventListener('DOMContentLoaded', function() {
updateDaysLeft();
updateRankings();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment