Optimized Weather stuff and More

index.html

@@ -116,7 +116,7 @@
                             transform="rotate(45 164.485 -51)" width="246.801" x="164.485" y="-51" />
                     </svg>
                     <div class="wInfo">
-                        <div id="temp">?°</div>
+                        <div id="temp">?</div>
                         <img alt="wq" id="wIcon" src="./svgs/defaultWeather.svg">
                     </div>
                 </div>

script.js

@@ -3,68 +3,64 @@ let clocktype;
 let hourformat;
 window.addEventListener('DOMContentLoaded', async () => {
     try {
-        // Load the API key, location and proxy from localStorage
-        const savedApiKey = localStorage.getItem("weatherApiKey");
+        // Cache DOM elements
         const userAPIInput = document.getElementById("userAPI");
-        const savedLocation = localStorage.getItem("weatherLocation");
         const userLocInput = document.getElementById("userLoc");
-        const savedProxy = localStorage.getItem("proxy");
         const userProxyInput = document.getElementById("userproxy");
-        if (savedApiKey) {
-            userAPIInput.value = savedApiKey;
-        }
-        if (savedLocation) {
-            userLocInput.value = savedLocation;
-        }
-        if (savedProxy) {
-            userProxyInput.value = savedProxy;
-        }
         const saveAPIButton = document.getElementById("saveAPI");
         const saveLocButton = document.getElementById("saveLoc");
         const resetbtn = document.getElementById("resetsettings");
         const saveProxyButton = document.getElementById("saveproxy");
 
-        // Function to simulate button click when Enter key is pressed
+        // Load saved data from localStorage
+        const savedApiKey = localStorage.getItem("weatherApiKey");
+        const savedLocation = localStorage.getItem("weatherLocation");
+        const savedProxy = localStorage.getItem("proxy");
+
+        // Pre-fill input fields with saved data
+        if (savedApiKey) userAPIInput.value = savedApiKey;
+        if (savedLocation) {
+            userLocInput.value = savedLocation;
+            //document.getElementById("location").textContent = savedLocation;
+        }
+        if (savedProxy) userProxyInput.value = savedProxy;
+
+        // Function to simulate button click on Enter key press
         function handleEnterPress(event, buttonId) {
             if (event.key === 'Enter') {
                 document.getElementById(buttonId).click();
             }
         }
 
-        // Add event listeners for each input field to handle Enter key
-        userAPIInput.addEventListener('keydown', function (event) {
-            handleEnterPress(event, 'saveAPI');
-        });
-        userLocInput.addEventListener('keydown', function (event) {
-            handleEnterPress(event, 'saveLoc');
-        });
-        userProxyInput.addEventListener('keydown', function (event) {
-            handleEnterPress(event, 'saveproxy');
-        });
+        // Add event listeners for handling Enter key presses
+        userAPIInput.addEventListener('keydown', (event) => handleEnterPress(event, 'saveAPI'));
+        userLocInput.addEventListener('keydown', (event) => handleEnterPress(event, 'saveLoc'));
+        userProxyInput.addEventListener('keydown', (event) => handleEnterPress(event, 'saveproxy'));
 
-        // Add an event listener to save the API key when the "Save" button is clicked
+        // Save API key to localStorage
         saveAPIButton.addEventListener("click", () => {
             const apiKey = userAPIInput.value;
-            // Save the API key to localStorage
             localStorage.setItem("weatherApiKey", apiKey);
-            document.getElementById("userAPI").value = "";
+            userAPIInput.value = "";
             location.reload();
         });
+
+        // Save location to localStorage
         saveLocButton.addEventListener("click", () => {
             const userLocation = userLocInput.value;
-            // Save the location to localStorage
             localStorage.setItem("weatherLocation", userLocation);
-            document.getElementById("userLoc").value = "";
+            userLocInput.value = "";
             location.reload();
         });
+
+        // Reset settings (clear localStorage)
         resetbtn.addEventListener("click", () => {
             if (confirm("Are you sure you want to reset your settings? This action cannot be undone.")) {
                 localStorage.clear();
                 location.reload();
-            } else {
-                return;
             }
         });
+
         saveProxyButton.addEventListener("click", () => {
             const proxyurl = userProxyInput.value;
 
@@ -73,7 +69,7 @@ window.addEventListener('DOMContentLoaded', async () => {
                 if (!proxyurl.endsWith("/")) {
                     // Save the proxy to localStorage
                     localStorage.setItem("proxy", proxyurl);
-                    document.getElementById("userproxy").value = "";
+                    userProxyInput.value = "";
                     location.reload();
                 }
                 else {
@@ -85,30 +81,36 @@ window.addEventListener('DOMContentLoaded', async () => {
             }
         });
 
-        // Set the default API key
+        // Use the saved or default API key and proxy
         const defaultApiKey = 'd36ce712613d4f21a6083436240910'; // Default Weather API key
         const defaultProxyURL = 'https://mynt-proxy.rhythmcorehq.com'; //Default proxy url
         // Check if the user has entered their own API key
         const userApiKey = userAPIInput.value.trim();
         const userproxyurl = userProxyInput.value.trim();
-
         // Use the user's API key if available, otherwise use the default API key
         const apiKey = userApiKey || defaultApiKey;
         proxyurl = userproxyurl || defaultProxyURL;
 
-        var currentUserLocation = savedLocation; // Get saved location
+        // Determine the location to use
+        let currentUserLocation = savedLocation;
+
+        // If no saved location, fetch the IP-based location
         if (!currentUserLocation) {
-            // Only fetch if there is no saved location
-            const geoLocation = 'https://ipinfo.io/json/';
-            const locationData = await fetch(geoLocation);
-            const parsedLocation = await locationData.json();
-            currentUserLocation = parsedLocation.ip; // Update to user's IP-based location
+            try {
+                const geoLocation = 'https://ipinfo.io/json/';
+                const locationData = await fetch(geoLocation);
+                const parsedLocation = await locationData.json();
+                currentUserLocation = parsedLocation.city; // Update to user's city from IP
+                localStorage.setItem("weatherLocation", currentUserLocation); // Save and show the fetched location
+            } catch (error) {
+                currentUserLocation = "auto:ip"; // Fallback if fetching location fails
+            }
         }
-        var currentLanguage = getLanguageStatus('selectedLanguage') || 'en';
-
-        // Weather API call using currentUserLocation, which is either user input or IP address
-        const weatherApi = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${currentUserLocation}&aqi=no&lang=${currentLanguage}`;
 
+        const currentLanguage = getLanguageStatus('selectedLanguage') || 'en';
+
+        // Fetch weather data using Weather API
+        const weatherApi = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${currentUserLocation}&aqi=no&lang=${currentLanguage}`;
         const data = await fetch(weatherApi);
         const parsedData = await data.json();
 
@@ -120,7 +122,7 @@ window.addEventListener('DOMContentLoaded', async () => {
         const feelsLikeCelsius = parsedData.current.feelslike_c;
         const feelsLikeFahrenheit = parsedData.current.feelslike_f;
 
-        // Update DOM elements
+        // Update DOM elements with the weather data
         document.getElementById("conditionText").textContent = conditionText;
 
         // Localize and display temperature and humidity
@@ -137,16 +139,13 @@ window.addEventListener('DOMContentLoaded', async () => {
         // Event Listener for the Fahrenheit toggle
         const fahrenheitCheckbox = document.getElementById("fahrenheitCheckbox");
         const updateTemperatureDisplay = () => {
+            const tempElement = document.getElementById("temp");
             if (fahrenheitCheckbox.checked) {
-                // Fahrenheit: temp with degree symbol only, feels like with degree symbol and unit
-                document.getElementById("temp").textContent = `${localizedTempFahrenheit}°`;  // Temp with degree symbol only (no unit)
-
+                tempElement.innerHTML = `${localizedTempFahrenheit}<span class="tempUnit">°F</span>`;
                 const feelsLikeFUnit = currentLanguage === 'cs' ? ' °F' : '°F';  // Add space for Czech in Fahrenheit
                 document.getElementById("feelsLike").textContent = `${translations[currentLanguage]?.feelsLike || translations['en'].feelsLike} ${localizedFeelsLikeFahrenheit}${feelsLikeFUnit}`;
             } else {
-                // Celsius: temp with degree symbol only, feels like with degree symbol and unit
-                document.getElementById("temp").textContent = `${localizedTempCelsius}°`;  // Temp with degree symbol only (no unit)
-
+                tempElement.innerHTML = `${localizedTempCelsius}<span class="tempUnit">°C</span>`;
                 const feelsLikeCUnit = currentLanguage === 'cs' ? ' °C' : '°C';  // Add space for Czech in Celsius
                 document.getElementById("feelsLike").textContent = `${translations[currentLanguage]?.feelsLike || translations['en'].feelsLike} ${localizedFeelsLikeCelsius}${feelsLikeCUnit}`;
             }
@@ -164,21 +163,16 @@ window.addEventListener('DOMContentLoaded', async () => {
         }
 
         // Update location
-        // document.getElementById("location").textContent = parsedLocation.city;
         var city = parsedData.location.name;
         // var city = "Thiruvananthapuram";
         var maxLength = 10;
         var limitedText = city.length > maxLength ? city.substring(0, maxLength) + "..." : city;
-        // Update the span's text content with the limited text
         document.getElementById("location").textContent = limitedText;
 
     } catch (error) {
         console.error("Error fetching weather data:", error);
-        // alert("Unable to fetch weather data. Please check your location or API key.");
-        // Handle errors here, e.g., display an error message to the user.
     }
 });
-
 // ---------------------------end of weather stuff--------------------
 
 // Retrieve current time and calculate initial angles

style.css

@@ -515,11 +515,19 @@ body {
     width: fit-content;
 }
 
+.tempUnit {
+    font-size: 0.4em;
+    vertical-align: super;
+    position: relative;
+    top: -0.2em;
+    color: var(--darkColor-blue);
+}
+
 #wIcon {
     width: 80px;
     height: 80px;
-    margin-top: -13px;
-    margin-left: -23px;
+    margin-top: -11px;
+    margin-left: -30px;
     /* background-color: olive; */
 }