+
+
+
+
diff --git a/main.js b/main.js
new file mode 100644
index 00000000..3ec7ea76
--- /dev/null
+++ b/main.js
@@ -0,0 +1,214 @@
+const submitBtn = document.querySelector(".search");
+const current = document.querySelector(".current");
+const fiveDay = document.querySelector(".five-day");
+const searchInput = document.querySelector(".city-name");
+const clear = '
+
+
+
+ 
+
+
+
+ Weather Project
++
+
+
+ +
+
+
+
+
+
+
+
+ 
';
+const clouds = '
';
+const drizzle = '
';
+const thunderStorm = '
';
+const snow = '
';
+let currentResults = [];
+let fiveDayResults = [];
+let conditionImg;
+
+submitBtn.addEventListener("click", () => {
+ document.querySelector(".current").replaceChildren();
+ document.querySelector(".five-day").replaceChildren();
+ currentResults = [];
+ fiveDayResults = [];
+ conditionImg = "";
+ let city = searchInput.value;
+
+ if (!city) {
+ alert("Please enter valid city name.");
+ } else {
+ fetchWeather(city);
+ }
+
+ searchInput.value = "";
+});
+
+async function fetchWeather(city) {
+ try {
+ const currentWeather = await fetch(
+ `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=8ecfabbc5fb6be8c3ec37ba3114514e4&units=imperial`
+ );
+ const currentWeatherData = await currentWeather.json();
+ getCurrentWeather(currentWeatherData);
+
+ const fiveDayForecast = await fetch(
+ `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=8ecfabbc5fb6be8c3ec37ba3114514e4&units=imperial`
+ );
+ const fDFData = await fiveDayForecast.json();
+ getFiveDayForcast(fDFData);
+ } catch (error) {
+ console.error("Error fetching data");
+ alert("Weather inquiry failed.");
+ }
+}
+
+function getCurrentWeather(currentWeatherData) {
+ currentResults.push({
+ city: currentWeatherData.name,
+ temp: Math.floor(currentWeatherData.main.temp),
+ conditions: currentWeatherData.weather[0].main,
+ });
+ renderCurrentWeather(currentResults);
+}
+
+function getFiveDayForcast(fDFData) {
+ const fiveDayHourly = fDFData.list;
+ for (let i = 0; i < fiveDayHourly.length; i = i + 8) {
+ fiveDayResults.push(fiveDayHourly[i]);
+ }
+ renderFiveDayForecast(fiveDayResults);
+}
+
+function renderCurrentWeather(currentResults) {
+ const temp = currentResults[0].city;
+ const city = currentResults[0].temp;
+ let conditions = currentResults[0].conditions;
+
+ for (let i = 0; i < currentResults.length; i++) {
+ if (conditions === "Clouds") {
+ conditionImg = clouds;
+ } else if (conditions === "Rain") {
+ conditionImg = rain;
+ } else if (conditions === "Clear") {
+ conditionImg = clear;
+ } else if (conditions === "Drizzle") {
+ conditionImg = drizzle;
+ } else if (conditions === "Thunderstorm") {
+ conditions = thunderStorm;
+ } else if (conditions === "Snow") {
+ conditionImg = snow;
+ } else {
+ conditionImg = mist;
+ }
+ const template = `
+
+
`;
+
+ document
+ .querySelector(".current")
+ .insertAdjacentHTML("beforeend", template);
+ }
+}
+
+function renderFiveDayForecast(fiveDayResults) {
+ const dailyForecasts = [];
+ for (let i = 0; i < fiveDayResults.length; i++) {
+ const dailyConditions = [];
+ const temp = Math.floor(fiveDayResults[i].main.temp);
+ const conditions = fiveDayResults[i].weather[0].main;
+ const date = new Date(fiveDayResults[i].dt_txt).getDay();
+ const daysOfWeek = [
+ "Sunday",
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday",
+ ];
+ const day = daysOfWeek[date];
+ dailyConditions.push(fiveDayResults[i].weather[0].main);
+
+ if (conditions === "Clouds") {
+ conditionImg = clouds;
+ } else if (conditions === "Rain") {
+ conditionImg = rain;
+ } else if (conditions === "Clear") {
+ conditionImg = clear;
+ } else if (conditions === "Drizzle") {
+ conditionImg = drizzle;
+ } else if (conditions === "Thunderstorm") {
+ conditions = thunderStorm;
+ } else if (conditions === "Snow") {
+ conditionImg = snow;
+ } else {
+ conditionImg = mist;
+ }
+
+ dailyForecasts.push({
+ temp: temp,
+ conditions: conditions,
+ day: day,
+ conditionsImg: conditionImg,
+ });
+ }
+
+ const template = `
+
+
+
+
+ ${temp}°
+
+ ${temp}°
+ ${city}
+
${conditions}
+
+
+
+
+
+ ${conditionImg}
+
+
+
+
`;
+
+ document.querySelector(".five-day").insertAdjacentHTML("beforeend", template);
+}
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..b3bc2a4b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,12 @@
+.day {
+ border: 1px solid black;
+}
+
+.five-day {
+ width: 100%;
+ flex-wrap: nowrap;
+}
+
+.weatherImg {
+ padding-top: 15px;
+}
diff --git a/weather.svg b/weather.svg
new file mode 100644
index 00000000..97166fa2
--- /dev/null
+++ b/weather.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
+
+
+
+
+
+ ${dailyForecasts[0].day}
+${dailyForecasts[0].temp}°
+ ${dailyForecasts[0].conditionsImg} +${dailyForecasts[0].conditions}
+
+
+
+
+
+
+ ${dailyForecasts[1].day}
+${dailyForecasts[1].temp}°
+ ${dailyForecasts[1].conditionsImg} +${dailyForecasts[1].conditions}
+
+
+
+
+
+
+ ${dailyForecasts[2].day}
+${dailyForecasts[2].temp}°
+ ${dailyForecasts[2].conditionsImg} +${dailyForecasts[2].conditions}
+
+
+
+
+
+
+ ${dailyForecasts[3].day}
+${dailyForecasts[3].temp}°
+ ${dailyForecasts[3].conditionsImg} +${dailyForecasts[3].conditions}
+
+
+
+
+
+
+ ${dailyForecasts[4].day}
+${dailyForecasts[3].temp}°
+ ${dailyForecasts[3].conditionsImg} +${dailyForecasts[3].conditions}
+