+
+
+
Sunrise
6:37 AM
+
+
+
Sunset
6:21 PM
+
+
+
Wind Speed
14km/h
+
+
+
Humidity
21%
+
+
+
Precipitation
0%
+
@@ -171,6 +253,22 @@
+
+
Cloudy
69%
More Information
Version 1.1
+
diff --git a/js/main.js b/js/main.js
index 2a1c39d..ac479c2 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,13 +1,53 @@
+
+import { dayOfTheWeek, getMonth } from "./utils.js";
+
import { dayOfTheWeek, getMonth, getCitiesList } from './utils.js';
import {
fetchWeatherData,
fetchAstronomyData,
fetchForecastData,
-} from './weatherApi.js';
+} from "./weatherApi.js";
import {
saveToLocalStorage,
clearLastVisited,
getLastVisitedCity,
+
+} from "./localStorage.js";
+import { updateUI } from "./uiController.js";
+
+document.addEventListener("DOMContentLoaded", function () {
+ const app = document.querySelector(".whtrlive");
+ const temp = document.querySelector(".today-temperature");
+ const dateOutput = document.querySelector(".date");
+ const timeOutput = document.querySelector(".time");
+ const nameOutput = document.querySelector(".place");
+ const icon = document.querySelector(".weather-icon");
+ const cloudOutput = document.querySelector(".cloudy");
+ const humidityOutput = document.querySelector(".humidity");
+ const windOutput = document.querySelector(".windspeed");
+ const PrecipitationOutput = document.querySelector(".precipitation");
+ const form = document.getElementById("locationInput");
+ const search = document.querySelector(".search");
+ const clrHistory = document.getElementById("clearHistory");
+ /*const cities = document.querySelectorAll(".city");*/
+ const dayOutput = document.querySelector(".day");
+ const sunriseOutput = document.querySelector(".sunrise");
+ const sunsetOutput = document.querySelector(".sunset");
+ const tomorrowOutput = document.querySelector(".tomorrow-temperature");
+ const lastVisitedList = document.getElementById("lastVisitedList");
+ const exploreBtn = document.getElementById("exploreBtn");
+
+ let cityInput = getLastVisitedCity() || "London";
+
+ const exploreCities = [
+ "New York",
+ "California",
+ "Paris",
+ "Tokyo",
+ "Bali",
+ "Sydney",
+ "Dubai",
+
} from './localStorage.js';
import { updateUI } from './uiController.js';
import { autocomplete } from './searchAutocomplete.js';
@@ -43,6 +83,7 @@ document.addEventListener( 'DOMContentLoaded', function () {
const exploreCities = [
'New York', 'California', 'Paris', 'Tokyo', 'Bali', 'Sydney', 'Dubai',
+
];
async function updateWeatherDisplay( city = cityInput ) {
@@ -57,6 +98,24 @@ document.addEventListener( 'DOMContentLoaded', function () {
const time = date.substr( 11 );
const theDate = `${y}-${m}-${d}`;
+
+ // Update UI elements
+ temp.innerHTML = `${weatherData.current.temp_c}°C / ${weatherData.current.temp_f}°F`;
+ dateOutput.innerHTML = `${getMonth(d, m, y)} ${d}, ${y}`;
+ timeOutput.innerHTML = time;
+ dayOutput.innerHTML = dayOfTheWeek(d, m, y);
+ nameOutput.innerHTML = ` ${weatherData.location.name}, ${weatherData.location.country}`;
+
+ const iconID = weatherData.current.condition.icon.substr(
+ "//cdn.weatherapi.com/weather/64x64/".length
+ );
+ icon.src = "./img/icons/" + iconID;
+
+ const [astronomyData, forecastData] = await Promise.all([
+ fetchAstronomyData(city, theDate),
+ fetchForecastData(city),
+ ]);
+
setInterval( () => displayTime( timeZone ), 1000 );
temp.innerHTML = `${weatherData.current.temp_c}°C / ${weatherData.current.temp_f}°F`;
@@ -74,10 +133,92 @@ document.addEventListener( 'DOMContentLoaded', function () {
fetchForecastData( city ),
] );
+
sunriseOutput.innerHTML = astronomyData.astronomy.astro.sunrise;
sunsetOutput.innerHTML = astronomyData.astronomy.astro.sunset;
tomorrowOutput.innerHTML = `Tomorrow's Temperature: ${forecastData.current.temp_c}°C / ${forecastData.current.temp_f}°F`;
+ cloudOutput.innerHTML = weatherData.current.cloud + "%";
+ humidityOutput.innerHTML = weatherData.current.humidity + "%";
+ windOutput.innerHTML = weatherData.current.wind_kph + "km/h";
+ PrecipitationOutput.innerHTML = weatherData.current.precip_mm + "mm";
+
+ const timeOfDay = weatherData.current.is_day ? "day" : "night";
+ updateUI(app, weatherData, timeOfDay, exploreBtn);
+
+ saveToLocalStorage(weatherData.location.name);
+ displayLastVisited();
+ app.style.opacity = "1";
+ } catch (error) {
+ console.error("Error updating weather display:", error);
+ app.style.opacity = "1";
+ }
+ }
+
+ function displayLastVisited() {
+ const storedData = localStorage.getItem("lastVisited");
+ lastVisitedList.innerHTML = "";
+
+ if (storedData) {
+ try {
+ const data = JSON.parse(storedData);
+ const fragment = document.createDocumentFragment();
+ data.forEach((item) => {
+ const li = document.createElement("li");
+ li.classList.add("city");
+ li.textContent = item.city;
+ li.addEventListener("click", handleCityClick);
+ fragment.appendChild(li);
+ });
+ lastVisitedList.appendChild(fragment);
+ } catch (error) {
+ console.error("Error parsing stored data:", error);
+ lastVisitedList.innerHTML = "Error loading data.";
+ }
+ } else {
+ lastVisitedList.innerHTML = "Empty..";
+ }
+ }
+
+ function handleCityClick(e) {
+ cityInput = e.target.innerHTML;
+ updateWeatherDisplay(cityInput);
+ }
+
+ // Event Listeners
+ exploreBtn.addEventListener("click", () => {
+ cityInput = exploreCities[Math.floor(Math.random() * exploreCities.length)];
+ updateWeatherDisplay();
+ });
+
+ clrHistory.addEventListener("click", () => {
+ clearLastVisited();
+ displayLastVisited();
+ });
+
+ /*
+ cities.forEach((city) => {
+ city.addEventListener('click', (e) => {
+ cityInput = e.target.innerHTML;
+ updateWeatherDisplay();
+ });
+ });
+ */
+ form.addEventListener("submit", (e) => {
+ e.preventDefault();
+ if (search.value.length === 0) {
+ alert("Please type a proper City name");
+ } else {
+ cityInput = search.value;
+ updateWeatherDisplay();
+ search.value = "";
+ }
+ });
+
+ // Initial load
+ updateWeatherDisplay();
+ displayLastVisited();
+});
cloudOutput.innerHTML = weatherData.current.cloud + '%';
humidityOutput.innerHTML = weatherData.current.humidity + '%';
windOutput.innerHTML = weatherData.current.wind_kph + 'km/h';
@@ -213,3 +354,4 @@ document.addEventListener( 'DOMContentLoaded', function () {
}, 60 * 60 * 1000);
} );
+
diff --git a/js/weatherApi.js b/js/weatherApi.js
index 54791b3..1064cd0 100644
--- a/js/weatherApi.js
+++ b/js/weatherApi.js
@@ -1,40 +1,40 @@
-const API_KEY = '7c742b695b3243f3864123423232302';
+const API_KEY = "7c742b695b3243f3864123423232302";
export async function fetchWeatherData(city) {
- try {
- const response = await fetch(
- `http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}&aqi=yes`
- );
- const data = await response.json();
- return data;
- } catch (error) {
- console.error('Error fetching weather data:', error);
- throw error;
- }
+ try {
+ const response = await fetch(
+ `http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}&aqi=yes`
+ );
+ const data = await response.json();
+ return data;
+ } catch (error) {
+ console.error("Error fetching weather data:", error);
+ throw error;
+ }
}
export async function fetchAstronomyData(city, date) {
- try {
- const response = await fetch(
- `http://api.weatherapi.com/v1/astronomy.json?key=${API_KEY}&q=${city}&dt=${date}`
- );
- const data = await response.json();
- return data;
- } catch (error) {
- console.error('Error fetching astronomy data:', error);
- throw error;
- }
+ try {
+ const response = await fetch(
+ `http://api.weatherapi.com/v1/astronomy.json?key=${API_KEY}&q=${city}&dt=${date}`
+ );
+ const data = await response.json();
+ return data;
+ } catch (error) {
+ console.error("Error fetching astronomy data:", error);
+ throw error;
+ }
}
export async function fetchForecastData(city) {
- try {
- const response = await fetch(
- `http://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${city}&days=1&aqi=yes&alerts=no`
- );
- const data = await response.json();
- return data;
- } catch (error) {
- console.error('Error fetching forecast data:', error);
- throw error;
- }
+ try {
+ const response = await fetch(
+ `http://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${city}&days=1&aqi=yes&alerts=no`
+ );
+ const data = await response.json();
+ return data;
+ } catch (error) {
+ console.error("Error fetching forecast data:", error);
+ throw error;
+ }
}
diff --git a/js/main.js b/js/main.js
index 2a1c39d..ac479c2 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,13 +1,53 @@
+
+import { dayOfTheWeek, getMonth } from "./utils.js";
+
import { dayOfTheWeek, getMonth, getCitiesList } from './utils.js';
import {
fetchWeatherData,
fetchAstronomyData,
fetchForecastData,
-} from './weatherApi.js';
+} from "./weatherApi.js";
import {
saveToLocalStorage,
clearLastVisited,
getLastVisitedCity,
+
+} from "./localStorage.js";
+import { updateUI } from "./uiController.js";
+
+document.addEventListener("DOMContentLoaded", function () {
+ const app = document.querySelector(".whtrlive");
+ const temp = document.querySelector(".today-temperature");
+ const dateOutput = document.querySelector(".date");
+ const timeOutput = document.querySelector(".time");
+ const nameOutput = document.querySelector(".place");
+ const icon = document.querySelector(".weather-icon");
+ const cloudOutput = document.querySelector(".cloudy");
+ const humidityOutput = document.querySelector(".humidity");
+ const windOutput = document.querySelector(".windspeed");
+ const PrecipitationOutput = document.querySelector(".precipitation");
+ const form = document.getElementById("locationInput");
+ const search = document.querySelector(".search");
+ const clrHistory = document.getElementById("clearHistory");
+ /*const cities = document.querySelectorAll(".city");*/
+ const dayOutput = document.querySelector(".day");
+ const sunriseOutput = document.querySelector(".sunrise");
+ const sunsetOutput = document.querySelector(".sunset");
+ const tomorrowOutput = document.querySelector(".tomorrow-temperature");
+ const lastVisitedList = document.getElementById("lastVisitedList");
+ const exploreBtn = document.getElementById("exploreBtn");
+
+ let cityInput = getLastVisitedCity() || "London";
+
+ const exploreCities = [
+ "New York",
+ "California",
+ "Paris",
+ "Tokyo",
+ "Bali",
+ "Sydney",
+ "Dubai",
+
} from './localStorage.js';
import { updateUI } from './uiController.js';
import { autocomplete } from './searchAutocomplete.js';
@@ -43,6 +83,7 @@ document.addEventListener( 'DOMContentLoaded', function () {
const exploreCities = [
'New York', 'California', 'Paris', 'Tokyo', 'Bali', 'Sydney', 'Dubai',
+
];
async function updateWeatherDisplay( city = cityInput ) {
@@ -57,6 +98,24 @@ document.addEventListener( 'DOMContentLoaded', function () {
const time = date.substr( 11 );
const theDate = `${y}-${m}-${d}`;
+
+ // Update UI elements
+ temp.innerHTML = `${weatherData.current.temp_c}°C / ${weatherData.current.temp_f}°F`;
+ dateOutput.innerHTML = `${getMonth(d, m, y)} ${d}, ${y}`;
+ timeOutput.innerHTML = time;
+ dayOutput.innerHTML = dayOfTheWeek(d, m, y);
+ nameOutput.innerHTML = ` ${weatherData.location.name}, ${weatherData.location.country}`;
+
+ const iconID = weatherData.current.condition.icon.substr(
+ "//cdn.weatherapi.com/weather/64x64/".length
+ );
+ icon.src = "./img/icons/" + iconID;
+
+ const [astronomyData, forecastData] = await Promise.all([
+ fetchAstronomyData(city, theDate),
+ fetchForecastData(city),
+ ]);
+
setInterval( () => displayTime( timeZone ), 1000 );
temp.innerHTML = `${weatherData.current.temp_c}°C / ${weatherData.current.temp_f}°F`;
@@ -74,10 +133,92 @@ document.addEventListener( 'DOMContentLoaded', function () {
fetchForecastData( city ),
] );
+
sunriseOutput.innerHTML = astronomyData.astronomy.astro.sunrise;
sunsetOutput.innerHTML = astronomyData.astronomy.astro.sunset;
tomorrowOutput.innerHTML = `Tomorrow's Temperature: ${forecastData.current.temp_c}°C / ${forecastData.current.temp_f}°F`;
+ cloudOutput.innerHTML = weatherData.current.cloud + "%";
+ humidityOutput.innerHTML = weatherData.current.humidity + "%";
+ windOutput.innerHTML = weatherData.current.wind_kph + "km/h";
+ PrecipitationOutput.innerHTML = weatherData.current.precip_mm + "mm";
+
+ const timeOfDay = weatherData.current.is_day ? "day" : "night";
+ updateUI(app, weatherData, timeOfDay, exploreBtn);
+
+ saveToLocalStorage(weatherData.location.name);
+ displayLastVisited();
+ app.style.opacity = "1";
+ } catch (error) {
+ console.error("Error updating weather display:", error);
+ app.style.opacity = "1";
+ }
+ }
+
+ function displayLastVisited() {
+ const storedData = localStorage.getItem("lastVisited");
+ lastVisitedList.innerHTML = "";
+
+ if (storedData) {
+ try {
+ const data = JSON.parse(storedData);
+ const fragment = document.createDocumentFragment();
+ data.forEach((item) => {
+ const li = document.createElement("li");
+ li.classList.add("city");
+ li.textContent = item.city;
+ li.addEventListener("click", handleCityClick);
+ fragment.appendChild(li);
+ });
+ lastVisitedList.appendChild(fragment);
+ } catch (error) {
+ console.error("Error parsing stored data:", error);
+ lastVisitedList.innerHTML = "Error loading data.";
+ }
+ } else {
+ lastVisitedList.innerHTML = "Empty..";
+ }
+ }
+
+ function handleCityClick(e) {
+ cityInput = e.target.innerHTML;
+ updateWeatherDisplay(cityInput);
+ }
+
+ // Event Listeners
+ exploreBtn.addEventListener("click", () => {
+ cityInput = exploreCities[Math.floor(Math.random() * exploreCities.length)];
+ updateWeatherDisplay();
+ });
+
+ clrHistory.addEventListener("click", () => {
+ clearLastVisited();
+ displayLastVisited();
+ });
+
+ /*
+ cities.forEach((city) => {
+ city.addEventListener('click', (e) => {
+ cityInput = e.target.innerHTML;
+ updateWeatherDisplay();
+ });
+ });
+ */
+ form.addEventListener("submit", (e) => {
+ e.preventDefault();
+ if (search.value.length === 0) {
+ alert("Please type a proper City name");
+ } else {
+ cityInput = search.value;
+ updateWeatherDisplay();
+ search.value = "";
+ }
+ });
+
+ // Initial load
+ updateWeatherDisplay();
+ displayLastVisited();
+});
cloudOutput.innerHTML = weatherData.current.cloud + '%';
humidityOutput.innerHTML = weatherData.current.humidity + '%';
windOutput.innerHTML = weatherData.current.wind_kph + 'km/h';
@@ -213,3 +354,4 @@ document.addEventListener( 'DOMContentLoaded', function () {
}, 60 * 60 * 1000);
} );
+
diff --git a/js/weatherApi.js b/js/weatherApi.js
index 54791b3..1064cd0 100644
--- a/js/weatherApi.js
+++ b/js/weatherApi.js
@@ -1,40 +1,40 @@
-const API_KEY = '7c742b695b3243f3864123423232302';
+const API_KEY = "7c742b695b3243f3864123423232302";
export async function fetchWeatherData(city) {
- try {
- const response = await fetch(
- `http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}&aqi=yes`
- );
- const data = await response.json();
- return data;
- } catch (error) {
- console.error('Error fetching weather data:', error);
- throw error;
- }
+ try {
+ const response = await fetch(
+ `http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}&aqi=yes`
+ );
+ const data = await response.json();
+ return data;
+ } catch (error) {
+ console.error("Error fetching weather data:", error);
+ throw error;
+ }
}
export async function fetchAstronomyData(city, date) {
- try {
- const response = await fetch(
- `http://api.weatherapi.com/v1/astronomy.json?key=${API_KEY}&q=${city}&dt=${date}`
- );
- const data = await response.json();
- return data;
- } catch (error) {
- console.error('Error fetching astronomy data:', error);
- throw error;
- }
+ try {
+ const response = await fetch(
+ `http://api.weatherapi.com/v1/astronomy.json?key=${API_KEY}&q=${city}&dt=${date}`
+ );
+ const data = await response.json();
+ return data;
+ } catch (error) {
+ console.error("Error fetching astronomy data:", error);
+ throw error;
+ }
}
export async function fetchForecastData(city) {
- try {
- const response = await fetch(
- `http://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${city}&days=1&aqi=yes&alerts=no`
- );
- const data = await response.json();
- return data;
- } catch (error) {
- console.error('Error fetching forecast data:', error);
- throw error;
- }
+ try {
+ const response = await fetch(
+ `http://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${city}&days=1&aqi=yes&alerts=no`
+ );
+ const data = await response.json();
+ return data;
+ } catch (error) {
+ console.error("Error fetching forecast data:", error);
+ throw error;
+ }
}