<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Walk Score Calculator</title>
<style>
/* Your existing CSS */
</style>
</head>
<body>
<div class="container">
<h1>Walk Score Calculator</h1>
<input type="text" id="address" placeholder="Enter address" size="50" />
<button id="calculate">Calculate Walk Score</button>
<div id="result"></div>
</div>

<script>
document.getElementById('calculate').addEventListener('click', () => {
const address = document.getElementById('address').value.trim();
const resultDiv = document.getElementById('result');

if (!address) {
resultDiv.innerHTML = '<p class="error">Please enter a valid address.</p>';
return;
}

resultDiv.innerHTML = '<p class="loading">Calculating Walk Score...</p>';

geocodeAddress(address)
.then(coords => {
if (coords) {
fetchAmenities(coords.lat, coords.lon)
.then(amenities => {
const score = calculateWalkScore(amenities);
displayResult(score, amenities, coords);
})
.catch(err => {
console.error(err);
resultDiv.innerHTML = '<p class="error">Error fetching amenities.</p>';
});
} else {
resultDiv.innerHTML = '<p class="error">Address not found.</p>';
}
})
.catch(err => {
console.error(err);
resultDiv.innerHTML = '<p class="error">Error during geocoding.</p>';
});
});

/
         * Geocode the address to get latitude and longitude using Nominatim.
         * @param {string} address - The address to geocode.
         * @returns {Promise<Object|null>} - An object with lat and lon or null if not found.
         */
        async function geocodeAddress(address) {
            const url = https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)};

            try {
                const response = await fetch(url, { headers: { 'Accept-Language': 'en' } });
                const data = await response.json();

                if (data && data.length > 0) {
                    return { lat: data[0].lat, lon: data[0].lon };
                } else {
                    return null;
                }
            } catch (error) {
                console.error('Geocoding Error:', error);
                return null;
            }
        }

        /
         * Fetch nearby amenities using Overpass API.
         * @param {string} lat - Latitude of the location.
         * @param {string} lon - Longitude of the location.
         * @param {number} radius - Search radius in meters.
         * @returns {Promise<Array>} - An array of amenities.
         */
        async function fetchAmenities(lat, lon, radius = 1000) {
            // Define the amenities to search for
            const amenities = [
                'school',
                'park',
                'hospital',
                'supermarket',
                'bank',
                'cafe',
                'restaurant',
                'library',
                'pharmacy',
                'post_office'
            ];

            // Construct Overpass QL query using template literals
            const query = <br/>[out:json];<br/>(<br/> node["amenity"~"${amenities.join('|')}"](around:${radius},${lat},${lon});<br/> way["amenity"~"${amenities.join('|')}"](around:${radius},${lat},${lon});<br/> relation["amenity"~"${amenities.join('|')}"](around:${radius},${lat},${lon});<br/>);<br/>out center;<br/> ;

            const url = https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)};