Clean the code.

src/components/MapComponent.js

@@ -10,12 +10,11 @@ const MapComponent = ({ weatherData }) => {
     <MapContainer center={[7.8731, 80.7718]} zoom={8} style={{ height: "700px", width: "700px" }}>
       <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
       {weatherData.map(({ id, city, lat, lng, temperature, humidity, airPressure, wind_speed, weatherDescriptions, observationTime, weatherIcons, isDay }) => {
-        // Define a custom icon for each marker using its weatherIcons
         const dynamicIcon = new L.Icon({
-          iconUrl: weatherIcons, // This dynamically sets the icon based on weatherIcons
-          iconSize: [30, 30], // Size of the icon
-          iconAnchor: [12, 41], // Point of the icon which will correspond to marker's location
-          popupAnchor: [1, -34], // Point from which the popup should open relative to the iconAnchor
+          iconUrl: weatherIcons, 
+          iconSize: [30, 30],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
         });
 
         return (

src/pages/WeatherPage.css

@@ -127,12 +127,11 @@
     border: none;
     border-radius: 5px;
     cursor: pointer;}
-
-
+
     .weather-stats2 h5 {
         margin-top: 10px;
         margin-bottom: 20px;
-        color: #666; /* Lighter text color for subtext */
-        font-size: 13px; /* Smaller font size for subtext */
-        line-height: 1.4; /* Adequate line spacing for readability */
+        color: #666; 
+        font-size: 13px;
+        line-height: 1.4;
     }

src/pages/WeatherPage.js

@@ -14,13 +14,13 @@ const WeatherPage = () => {
     const [email, setEmail] = useState('');
     const [city, setCity] = useState('');
 
-    const cities = ['Colombo', 'Kandy', 'Galle', 'Jaffna']; // Add more cities as needed
+    const cities = ['Colombo', 'Kandy', 'Galle', 'Jaffna', 'Jaffna', 'Jaffna', 'Trincomalee', 'Vavuniya', 'Anuradhapura', 'Puttalam', 'Polonnaruwa', 'Batticaloa', 'Kurunegala', 'Ratnapura', 'Nuwara Eliya', 'Badulla', 'Pottuvil'];
 
     const handleSubmit = async (e) => {
       e.preventDefault();
 
       try {
-        const response = await fetch('https://www.geo360live.tech/api/subscribe', { // Ensure this is the correct endpoint
+        const response = await fetch('https://www.geo360live.tech/api/subscribe', { 
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ email, city }),