diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..a2d72a24 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +config.js \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..3ae0b4fc --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + + Weather-App + + + + +
+ +
+
+

Weather Project

+
+
+ +
+
+ + +
+
+ + +
+ +
+ + +
+ +
+
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..6e3268c7 --- /dev/null +++ b/main.js @@ -0,0 +1,156 @@ +// API WEATHER APP +// Weather array to hold info from API +let cityWeather = []; +let forecastWeather = []; + +// Event Listener added to the Search Button +document.querySelector(".search").addEventListener("click", function (e) { + e.preventDefault(); + const searchLocation = document.querySelector("#search-location").value; + + // document.querySelector("#search-location").value = ""; + fetchGeoLocationData(searchLocation); +}); + +// Function that grabs the coordinates to be used later by fetchWeather to generate weather data +const fetchGeoLocationData = (searchLocation) => { + const geolocationURL = `https://api.openweathermap.org/geo/1.0/direct?q=${searchLocation}&appid=${apiKey}`; + + fetch(geolocationURL, { + method: "GET", + dataType: "json", + }) + .then((res) => res.json()) + .then((data) => { + let lat = data[0].lat; + let lon = data[0].lon; + fetchCurrentWeather(lat, lon); + fetchForecastWeather(lat, lon); + }); +}; + +// Func that takes lat and lon to plug into URL to fetch current weather data +const fetchCurrentWeather = (lat, lon) => { + const weatherURL = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}`; + fetch(weatherURL, { + method: "GET", + dataType: "json", + }) + .then((res) => res.json()) + .then((data) => addWeatherData(data)); + // .then((data) => console.log(data)); +}; + +// Func that fetches forecast weather data (directly in F) +const fetchForecastWeather = (lat, lon) => { + const forecastURL = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${apiKey}&units=imperial`; + fetch(forecastURL, { + method: "GET", + dataType: "json", + }) + .then((res) => res.json()) + // .then((data) => console.log(data.list)); + .then((forecastData) => addForecastData(forecastData)); +}; + +// Convert Kelvin to Fahrenheit +const convertKelvinToFahrenheit = (kelvin) => { + return Math.round(1.8 * (kelvin - 273) + 32); +}; + +// Func to create weather obj to update the global weather array +function addWeatherData(data) { + cityWeather = []; + + const weatherObj = { + temp: convertKelvinToFahrenheit(data.main.temp), + name: data.name, + condition: data.weather[0].main, + icon: data.weather[0].icon, + }; + cityWeather.push(weatherObj); + // console.log(cityWeather); + renderCurrentWeather(cityWeather); +} + +function renderCurrentWeather(arr) { + const weatherContainer = document.querySelector(".city-weather"); + document.querySelector(".city-weather").replaceChildren(); + + for (let i = 0; i < arr.length; i++) { + const cityWeatherData = arr[i]; + + const template = ` +
+
+
+
${cityWeatherData.temp}F°
+

${cityWeatherData.name}

+

${cityWeatherData.condition}

+
+
+ +
+
+
+ `; + + weatherContainer.insertAdjacentHTML("afterbegin", template); + } +} + +// Func to convert dt_txt into week days with the JS Intl Obj +const getWeekDay = (dateString) => { + const date = new Date(dateString); + + return new Intl.DateTimeFormat("en-US", { + weekday: "long", + }).format(date); +}; + +// Func to create forecast weather array +function addForecastData(forecastData) { + forecastWeather = []; + let usedDates = []; + + forecastData.list.forEach(function (item) { + // console.log(item.dt_txt); + let date = item.dt_txt.split(" ")[0]; + console.log(date); + if (forecastWeather.length === 5) return; + if (!usedDates.includes(date)) { + usedDates.push(date); + + const forecastObj = { + condition: item.weather[0].main, + temp: item.main.temp, + icon: item.weather[0].icon, + day: getWeekDay(date), + }; + forecastWeather.push(forecastObj); + // console.log(forecastWeather); + } + }); + renderForecastWeather(forecastWeather); +} + +function renderForecastWeather(arr) { + const forecastContainer = document.querySelector(".forecast-weather"); + document.querySelector(".forecast-weather").replaceChildren(); + + for (let i = 0; i < arr.length; i++) { + const forecastWeatherData = arr[i]; + + const template = ` +
+
${forecastWeatherData.condition}°
+

${Math.round(forecastWeatherData.temp)}

+
+
${forecastWeatherData.day}
`; + + forecastContainer.insertAdjacentHTML("beforeend", template); + } +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..e69de29b