diff --git a/Source-Code/WeatherApp/images/Day/clear.jpg b/Source-Code/WeatherApp/images/Day/clear.jpg new file mode 100644 index 0000000..f4f06c0 Binary files /dev/null and b/Source-Code/WeatherApp/images/Day/clear.jpg differ diff --git a/Source-Code/WeatherApp/images/Day/cloudy.jpg b/Source-Code/WeatherApp/images/Day/cloudy.jpg new file mode 100644 index 0000000..194e2d9 Binary files /dev/null and b/Source-Code/WeatherApp/images/Day/cloudy.jpg differ diff --git a/Source-Code/WeatherApp/images/Day/rainy.jpg b/Source-Code/WeatherApp/images/Day/rainy.jpg new file mode 100644 index 0000000..28b1bac Binary files /dev/null and b/Source-Code/WeatherApp/images/Day/rainy.jpg differ diff --git a/Source-Code/WeatherApp/images/Day/snowy.jpg b/Source-Code/WeatherApp/images/Day/snowy.jpg new file mode 100644 index 0000000..b071a81 Binary files /dev/null and b/Source-Code/WeatherApp/images/Day/snowy.jpg differ diff --git a/Source-Code/WeatherApp/images/Night/clear.jpg b/Source-Code/WeatherApp/images/Night/clear.jpg new file mode 100644 index 0000000..ea69882 Binary files /dev/null and b/Source-Code/WeatherApp/images/Night/clear.jpg differ diff --git a/Source-Code/WeatherApp/images/Night/cloudy.jpg b/Source-Code/WeatherApp/images/Night/cloudy.jpg new file mode 100644 index 0000000..6181251 Binary files /dev/null and b/Source-Code/WeatherApp/images/Night/cloudy.jpg differ diff --git a/Source-Code/WeatherApp/images/Night/rainy.jpg b/Source-Code/WeatherApp/images/Night/rainy.jpg new file mode 100644 index 0000000..c783a34 Binary files /dev/null and b/Source-Code/WeatherApp/images/Night/rainy.jpg differ diff --git a/Source-Code/WeatherApp/images/Night/snowy.jpg b/Source-Code/WeatherApp/images/Night/snowy.jpg new file mode 100644 index 0000000..05d7443 Binary files /dev/null and b/Source-Code/WeatherApp/images/Night/snowy.jpg differ diff --git a/Source-Code/WeatherApp/index.html b/Source-Code/WeatherApp/index.html new file mode 100644 index 0000000..494c0da --- /dev/null +++ b/Source-Code/WeatherApp/index.html @@ -0,0 +1,67 @@ + + + + + + Weather App + + + + +
+
+ + + +
+ + + +
+ + \ No newline at end of file diff --git a/Source-Code/WeatherApp/script.js b/Source-Code/WeatherApp/script.js new file mode 100644 index 0000000..c7402be --- /dev/null +++ b/Source-Code/WeatherApp/script.js @@ -0,0 +1,136 @@ +const input = document.getElementById('input'); +const btn = document.getElementById('btn'); +const apiKey = 'e3a46268fdc2475cb63214712240202'; +const cityName = document.getElementById('city-name'); +const dateTime = document.getElementById('date-time'); +const condition2 = document.getElementById('condition2'); +const temp = document.getElementById('temp'); +const humidity = document.getElementById('humidity'); +const country = document.getElementById('country'); +const locat = document.getElementById('getlocation'); +const cities = document.getElementsByClassName('city'); +const icon = document.getElementById('icon'); +const body = document.querySelector('.weather-app'); +const fetchData = async (url) => { + try { + const data = await fetch(url); + if (!data.ok) { + throw new Error(data.statusText); + } + return data.json(); + } catch (error) { + console.log(error); + throw error; + } +}; + +const updateWeatherInfo = (result) => { + const { error, location, current } = result; + if (error) { + cityName.innerText = `Error: ${error.message}`; + [country, dateTime, temp, humidity, condition2, icon].forEach((elem) => { + elem.innerText = ''; + }); + icon.src = ''; + } else { + const { name, country, localtime } = location; + cityName.innerText = name; + country.innerText = country; + dateTime.innerText = localtime; + temp.innerText = `${current.temp_c} °C`; + humidity.innerText = `${current.humidity} %`; + condition2.innerText = current.condition.text; + icon.src = current.condition.icon; + + const isDay = current.is_day === 1 ? 'day' : 'night'; + const codes = [ + [1000, 10000, 10001, 1100, 11001, 11000, 51190, 60030], // clear + [ + 1101, 11011, 11010, 11021, 11020, 1102, 1001, 10010, 10011, 1003, 1150, + 1153, 1168, 1147, 1135, 1087, 1003, 1006, 1207, 1009, + ], // cloudy + [ + 1261, 1273, 1276, 1274, 1246, 1243, 1240, 1201, 1204, 1198, 1192, 1195, + 1189, 1186, 1183, 1180, 1186, + ], // rainy + [ + 1030, 1066, 1168, 1171, 1210, 1213, 1216, 1219, 1222, 1225, 1237, 1255, + 1258, 1279, 1282, + ], // snowy + ]; + const imageUrls = [ + `./images/${isDay}/clear.jpg`, + `./images/${isDay}/cloudy.jpg`, + `./images/${isDay}/rainy.jpg`, + `./images/${isDay}/snowy.jpg`, + ]; + + for (let i = 0; i < codes.length; i += 1) { + if (codes[i].includes(current.condition.code)) { + body.style.backgroundImage = `url('${imageUrls[i]}')`; + console.log(imageUrls[i]); + break; + } + } + } +}; +const getData = async (cityName) => { + try { + const result = await fetchData( + `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${cityName}&aqi=no`, + ); + return result; + } catch (error) { + return { + error: { message: 'Failed to fetch data. Please try again later.' }, + }; + } +}; +const getlocation = async (lat, long) => fetchData( + `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${lat},${long}&aqi=no`, +); + +const gotlocation = async (position) => { + try { + const result = await getlocation( + position.coords.latitude, + position.coords.longitude, + ); + console.log(result); + updateWeatherInfo(result); + } catch (error) { + cityName.innerText = 'Error fetching weather based on location'; + } +}; +const failedlocation = () => console.log('failed to locate location'); + +btn.addEventListener('click', async (e) => { + try { + if (input.value.length === 0) { + alert('Please type a city name'); + } else { + const { value } = input; + const result = await getData(value); + console.log(result); + updateWeatherInfo(result); + console.log(result); + } + } catch (error) { + cityName.innerText = 'Error to fetch weather'; + } + e.preventDefault(); +}); + +locat.addEventListener('click', () => navigator.geolocation.getCurrentPosition(gotlocation, failedlocation)); +const citiesArray = [...cities]; +citiesArray.forEach((element) => { + element.addEventListener('click', async () => { + const cityName = element.innerText; + const result = await getData(cityName); + updateWeatherInfo(result); + }); +}); + +window.addEventListener('load', async () => { + navigator.geolocation.getCurrentPosition(gotlocation, failedlocation); +}); diff --git a/Source-Code/WeatherApp/style.css b/Source-Code/WeatherApp/style.css new file mode 100644 index 0000000..836a5d4 --- /dev/null +++ b/Source-Code/WeatherApp/style.css @@ -0,0 +1,211 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +p, +span { + font-size: 18px; +} + +.weather-app { + min-height: 100vh; + min-width: 100vw; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + color: #fff; + transition: 500ms linear; + opacity: 1; +} + +.weather-app::before { + content: ""; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); + z-index: 0; +} + +.weather-container { + display: flex; + justify-content: space-between; +} + +.heading { + display: flex; + align-items: center; +} + +.temp { + font-size: 50px; + font-weight: 700; +} + +.city { + font-size: 48px; + font-weight: 700; +} + +li { + list-style: none; +} + +.weather-information { + display: flex; + flex-direction: row; + align-items: flex-end; + padding: 5% 5%; + gap: 5%; + justify-content: space-evenly; + width: 60%; +} + +.column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.row { + display: flex; + justify-content: space-between; + margin: 10px 30px; + gap: 30%; +} + +.weather-suggestions { + width: 40vw; + height: 100vh; + background: rgba(236, 236, 178, 0.104); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); + backdrop-filter: blur(5px); + + --webkit-backdrop-filter: blur(5px); + + border: 1px solid rgb(236, 236, 178, 0); + z-index: 1; + padding: 2em 2em; +} + +.input { + height: 40px; + width: 90%; + border-radius: 9px; + border: inherit; + padding: 15px; + background: none; + color: #fff; + border-bottom: 1px solid #ccc; +} + +.input:focus { + outline: none; + color: #fff; +} + +.input::placeholder { + color: #fff; +} + +.search { + height: 40px; + width: 40px; + border-radius: 9px; + border: inherit; + background-color: rgb(129, 180, 231); + margin-left: 3%; + position: absolute; +} + +.fa-search { + color: #fafafa; +} + +.weather-suggestions > ul { + display: flex; + flex-direction: column; + width: 90%; + justify-content: center; + margin: auto; +} + +.weather-suggestions > ul > li { + margin: 15px auto; + font-size: medium; + height: 30px; + padding: 5px; + display: flex; + justify-content: flex-start; +} + +.icon { + height: 90px; + width: 90px; + border-radius: 50%; +} + +span { + font-size: medium; +} + +.weather-de { + display: flex; + justify-content: center; + align-items: center; + margin: 5px; + padding-top: 25px; + border-top: 1px #fff solid; +} + +.weather-details { + display: flex; + flex-direction: column; + justify-items: center; + margin: 6%; +} + +.weather-suggestions .city, +.location { + display: block; + cursor: pointer; +} + +.weather-suggestions .city:hover, +.location:hover { + color: #ffffffc8; + transform: scale(1.2); + transition: 0.5s; +} + +@media (max-width: 768px) { + .weather-container { + display: flex; + flex-direction: column; + width: 100%; + } + + .weather-suggestions, + .weather-information { + width: 100%; + } + + .temp { + font-size: 30px; + font-weight: 700; + } + + .city { + font-size: 28px; + font-weight: 700; + } + + .weather-information { + gap: 1%; + } +} diff --git a/WeatherApp/index.html b/WeatherApp/index.html deleted file mode 100644 index d01f779..0000000 --- a/WeatherApp/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - Document - - - - - \ No newline at end of file diff --git a/WeatherApp/script.js b/WeatherApp/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/WeatherApp/style.css b/WeatherApp/style.css deleted file mode 100644 index c2a1c25..0000000 --- a/WeatherApp/style.css +++ /dev/null @@ -1,6 +0,0 @@ -body { - font-family: Georgia, 'Times New Roman', Times, serif; - margin: 0; - overflow-x: hidden; - height: 100vh; - } \ No newline at end of file