From 0e6b4e3424867c4e11a82c1a111b2572c63e7030 Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 29 Sep 2024 19:54:01 +0200 Subject: [PATCH 1/8] layout fixed and icons and button added --- assets/design-1/button.svg | 18 +++ assets/design-1/iPhone XR/Group 1.svg | 7 + assets/design-1/menu-icon.svg | 24 +++ assets/design-1/sun.svg | 89 +++++++++++ code/index.html | 43 ++++++ code/script.js | 89 +++++++++++ code/styles.css | 203 ++++++++++++++++++++++++++ 7 files changed, 473 insertions(+) create mode 100644 assets/design-1/button.svg create mode 100644 assets/design-1/iPhone XR/Group 1.svg create mode 100644 assets/design-1/menu-icon.svg create mode 100644 assets/design-1/sun.svg create mode 100644 code/index.html create mode 100644 code/script.js create mode 100644 code/styles.css diff --git a/assets/design-1/button.svg b/assets/design-1/button.svg new file mode 100644 index 000000000..21d46b271 --- /dev/null +++ b/assets/design-1/button.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/design-1/iPhone XR/Group 1.svg b/assets/design-1/iPhone XR/Group 1.svg new file mode 100644 index 000000000..c65ca419a --- /dev/null +++ b/assets/design-1/iPhone XR/Group 1.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/design-1/menu-icon.svg b/assets/design-1/menu-icon.svg new file mode 100644 index 000000000..c7ac0bc92 --- /dev/null +++ b/assets/design-1/menu-icon.svg @@ -0,0 +1,24 @@ + + + + + \ No newline at end of file diff --git a/assets/design-1/sun.svg b/assets/design-1/sun.svg new file mode 100644 index 000000000..c90c08985 --- /dev/null +++ b/assets/design-1/sun.svg @@ -0,0 +1,89 @@ + \ No newline at end of file diff --git a/code/index.html b/code/index.html new file mode 100644 index 000000000..9ccd9b9db --- /dev/null +++ b/code/index.html @@ -0,0 +1,43 @@ + + + + + + Weather App + + + + + +
+ + + menu-icon + button + +
+
+
+ + +
+ + +
+
+
+
    +
    + + +
    + + + diff --git a/code/script.js b/code/script.js new file mode 100644 index 000000000..b49808792 --- /dev/null +++ b/code/script.js @@ -0,0 +1,89 @@ +const container = document.getElementById("container"); +const temperature = document.getElementById("temperature"); +const city = document.getElementById("city"); +const weatherCondition = document.getElementById("weather-condition"); +const sunrise = document.getElementById("sunrise"); +const sunset = document.getElementById("sunset"); +const list = document.getElementById("list"); +const time = document.getElementById("time"); +const changeCityButton = document.getElementById("changeCity"); + +// Array of cities with their lat and lon +const cities = [ + { name: "Paris", lat: 48.86, lon: 2.35 }, + { name: "New York", lat: 40.71, lon: -74.01 }, + { name: "Tokyo", lat: 35.69, lon: 139.69 }, + { name: "Sydney", lat: -33.87, lon: 151.21 }, + { name: "Cape Town", lat: -33.93, lon: 18.42 }, +]; + +let currentCityIndex = 0; + +function updateTime() { + const now = new Date(); + time.innerHTML = `Time: ${now.getHours()}:${now.getMinutes().toString().padStart(2, "0")}`; +} + +function formatTime(timestamp) { + const date = new Date(timestamp * 1000); + return `${date.getHours()}:${date.getMinutes().toString().padStart(2, "0")}`; +} + +function getWeatherIconUrl(iconCode) { + return `https://openweathermap.org/img/wn/${iconCode}@2x.png`; +} + +function fetchWeatherData(lat, lon) { + fetch( + `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=f2241eeae1b16c2b8bc74e61d2517ef6` + ) + .then((response) => response.json()) + .then((data) => { + temperature.innerHTML = `${Math.round(data.main.temp)}°C`; + city.innerHTML = `${data.name}`; + weatherCondition.innerHTML = `${data.weather[0].main}`; + sunrise.innerHTML = `sunrise ${formatTime(data.sys.sunrise)}`; + sunset.innerHTML = `sunset ${formatTime(data.sys.sunset)}`; + + document.querySelector(".weather-image").innerHTML = + `${data.weather[0].description}`; + + updateTime(); + setInterval(updateTime, 60000); // Update time every minute + }); + + fetch( + `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&units=metric&appid=f2241eeae1b16c2b8bc74e61d2517ef6` + ) + .then((response) => response.json()) + .then((data) => { + const forecastAtNoon = data.list + .filter((item) => item.dt_txt.endsWith("12:00:00")) + .slice(0, 4); + const forecastHTML = forecastAtNoon + .map((forecast) => { + const forecastDate = new Date(forecast.dt * 1000); + const dayName = forecastDate.toLocaleDateString("en-US", { + weekday: "short", + }); + return ` +
  • + ${dayName} + ${forecast.weather[0].description} + ${Math.round(forecast.main.temp)}°C + ${forecast.wind.speed.toFixed(2)}m/s +
    • `; + }) + .join(""); + list.innerHTML = forecastHTML; + }); +} + +// Initial weather fetch +fetchWeatherData(cities[currentCityIndex].lat, cities[currentCityIndex].lon); + +// Add click event listener to the button +changeCityButton.addEventListener("click", () => { + currentCityIndex = (currentCityIndex + 1) % cities.length; + fetchWeatherData(cities[currentCityIndex].lat, cities[currentCityIndex].lon); +}); diff --git a/code/styles.css b/code/styles.css new file mode 100644 index 000000000..d80a0f792 --- /dev/null +++ b/code/styles.css @@ -0,0 +1,203 @@ +html, +body { + height: 100%; + margin: 0; + font-family: "Roboto", Arial, sans-serif; + box-sizing: border-box; +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + align-items: center; + justify-content: center; + background-color: #b7b4b4; + padding: 20px; +} + +ul { + list-style-type: none; + padding: 20px; +} + +.container { + position: relative; + display: flex; + flex-direction: column; + width: 414px; + height: 800px; + overflow: hidden; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + color: white; + background-color: #ffffff; +} + +.menu-icon { + position: absolute; + top: 20px; + left: 20px; + z-index: 10; + cursor: pointer; + margin: 20px 0 0 10px; +} + +.current-weather { + flex: 1; + display: flex; + background-size: cover; + background-position: center; + color: white; + background-color: #ffffff; + text-align: center; + position: relative; + flex-wrap: wrap; + flex-direction: column; + align-items: flex-start; +} + +.weather-image { + height: 800px; + width: 800px; + background: linear-gradient(90deg, #8589ff 0%, #e8e9ff 100%); + border-radius: 50%; + bottom: -0%; + position: absolute; + right: 50%; + transform: translate(50%); +} + +#temperature { + position: relative; + z-index: 1; + justify-self: start; + font-size: 120px; + font-style: normal; + font-weight: 300; + line-height: normal; + top: 10px; + margin-left: 30px; +} + +#temperature sup { + font-size: 0.5em; + vertical-align: super; +} + +#city { + z-index: 1; + margin-left: 30px; + font-family: Roboto; + color: #fff; + font-family: Roboto; + font-size: 34px; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +#time, +#weather-condition, +#sun-info { + margin: 20px 0; + z-index: 1; + margin: 0px 30px; + color: #fff; + font-family: Roboto; + font-size: 22px; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +.sun-info { + display: flex; + justify-content: space-between; + width: 100%; + z-index: 1; + font-family: Roboto; + font-size: 22px; + font-weight: 300; + line-height: 25.78px; + text-align: left; + padding: 0 30px; + margin-top: 20px; +} + +.forecast, +#time { + background-color: rgb(255, 253, 253); + color: #707070; + font-family: Roboto; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 23.44px; + width: 394px; + flex-shrink: 0; +} + +#time { + margin-bottom: 20px; +} + +#list { + list-style-type: none; + padding: 0; + margin: 0 30px; +} + +#list li { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 0; +} + +.menu-icon { + position: absolute; + top: 20px; + left: 20px; + z-index: 10; + cursor: pointer; +} + +.forecast ul li img { + width: 30px; + height: 30px; +} + +.forecast ul li span:nth-child(3) { + font-size: 18px; +} + +.forecast ul li span:nth-child(3) sup { + font-size: 0.7em; + vertical-align: super; +} + +.logo { + position: absolute; + top: 64px; + left: 227px; + width: 160px; + height: auto; + z-index: 10; +} + +.button { + width: 101.136px; + height: 101.136px; + flex-shrink: 0; + width: 101px; + height: 101px; + top: 391px; + left: 282px; + gap: 0px; + opacity: 0px; + z-index: 10; + position: relative; +} From 487b21550c320361720fd33267f93c0d148d9f2c Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 29 Sep 2024 21:51:34 +0200 Subject: [PATCH 2/8] removed timestamp and added responsiveness --- code/index.html | 2 -- code/script.js | 12 ++---------- code/styles.css | 24 +++++++++++++++++------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/code/index.html b/code/index.html index 9ccd9b9db..c1bc02487 100644 --- a/code/index.html +++ b/code/index.html @@ -35,8 +35,6 @@
      - - diff --git a/code/script.js b/code/script.js index b49808792..baa4288b9 100644 --- a/code/script.js +++ b/code/script.js @@ -19,11 +19,6 @@ const cities = [ let currentCityIndex = 0; -function updateTime() { - const now = new Date(); - time.innerHTML = `Time: ${now.getHours()}:${now.getMinutes().toString().padStart(2, "0")}`; -} - function formatTime(timestamp) { const date = new Date(timestamp * 1000); return `${date.getHours()}:${date.getMinutes().toString().padStart(2, "0")}`; @@ -46,10 +41,7 @@ function fetchWeatherData(lat, lon) { sunset.innerHTML = `sunset ${formatTime(data.sys.sunset)}`; document.querySelector(".weather-image").innerHTML = - `${data.weather[0].description}`; - - updateTime(); - setInterval(updateTime, 60000); // Update time every minute + `${data.weather[0].description}`; // Update time every minute }); fetch( @@ -82,7 +74,7 @@ function fetchWeatherData(lat, lon) { // Initial weather fetch fetchWeatherData(cities[currentCityIndex].lat, cities[currentCityIndex].lon); -// Add click event listener to the button +// Event listeners on button changeCityButton.addEventListener("click", () => { currentCityIndex = (currentCityIndex + 1) % cities.length; fetchWeatherData(cities[currentCityIndex].lat, cities[currentCityIndex].lon); diff --git a/code/styles.css b/code/styles.css index d80a0f792..4c26c1a75 100644 --- a/code/styles.css +++ b/code/styles.css @@ -127,8 +127,7 @@ ul { margin-top: 20px; } -.forecast, -#time { +.forecast { background-color: rgb(255, 253, 253); color: #707070; font-family: Roboto; @@ -136,12 +135,9 @@ ul { font-style: normal; font-weight: 400; line-height: 23.44px; - width: 394px; + max-width: 394px; flex-shrink: 0; -} - -#time { - margin-bottom: 20px; + margin: 30px 0px; } #list { @@ -201,3 +197,17 @@ ul { z-index: 10; position: relative; } + +@media (max-width: 434px) { + .logo { + display: none; + } + + .current-weather { + align-items: center; + } +} + +.button { + left: 50%; +} From ec969d232fb1f5fd38b3c6f6e1891a3138eaf4a2 Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 29 Sep 2024 21:55:18 +0200 Subject: [PATCH 3/8] cleanup --- README.md | 10 ++------- assets/design-2/noun_Cloud_1188486.svg | 7 ------- assets/design-2/noun_Sunglasses_2055147.svg | 23 --------------------- assets/design-2/noun_Umbrella_2030530.svg | 16 -------------- pull_request_template.md | 3 +-- 5 files changed, 3 insertions(+), 56 deletions(-) delete mode 100644 assets/design-2/noun_Cloud_1188486.svg delete mode 100644 assets/design-2/noun_Sunglasses_2055147.svg delete mode 100644 assets/design-2/noun_Umbrella_2030530.svg diff --git a/README.md b/README.md index f8b15f4cb..1d94ef0d1 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,7 @@ # Weather App -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. - -## The problem - -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +A weather app that allows you to view the weather for multiple cities next coming 4 days, made with the Open Weather Map API. ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://mikasweather.netlify.app/ diff --git a/assets/design-2/noun_Cloud_1188486.svg b/assets/design-2/noun_Cloud_1188486.svg deleted file mode 100644 index c2375e901..000000000 --- a/assets/design-2/noun_Cloud_1188486.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/assets/design-2/noun_Sunglasses_2055147.svg b/assets/design-2/noun_Sunglasses_2055147.svg deleted file mode 100644 index a1fcd7e8b..000000000 --- a/assets/design-2/noun_Sunglasses_2055147.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/design-2/noun_Umbrella_2030530.svg b/assets/design-2/noun_Umbrella_2030530.svg deleted file mode 100644 index 8a414b15f..000000000 --- a/assets/design-2/noun_Umbrella_2030530.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/pull_request_template.md b/pull_request_template.md index 70fa177f7..58ca3e296 100644 --- a/pull_request_template.md +++ b/pull_request_template.md @@ -1,3 +1,2 @@ ## Netlify link -Add your Netlify link here. -PS. Don't forget to add it in your readme as well. +https://mikasweather.netlify.app/ From 60b3e2a10085b16077bff7a54896aa08a1375266 Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 29 Sep 2024 21:59:20 +0200 Subject: [PATCH 4/8] absolute paths for svgs to work in deployment --- code/index.html | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/code/index.html b/code/index.html index c1bc02487..6006e0154 100644 --- a/code/index.html +++ b/code/index.html @@ -14,13 +14,18 @@
      - + menu-icon - button + button
      From fd61b4375d4970264d6a86d4ac3425d45757a828 Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 29 Sep 2024 22:01:25 +0200 Subject: [PATCH 5/8] file structure refactor --- {assets => code/assets}/design-1/Group16.png | Bin {assets => code/assets}/design-1/Group34.png | Bin {assets => code/assets}/design-1/Group36.png | Bin {assets => code/assets}/design-1/Group37.png | Bin {assets => code/assets}/design-1/Group38.png | Bin {assets => code/assets}/design-1/button.svg | 0 .../assets}/design-1/iPhone XR/Group 1.svg | 0 {assets => code/assets}/design-1/menu-icon.svg | 0 {assets => code/assets}/design-1/sun.svg | 0 code/index.html | 6 +++--- 10 files changed, 3 insertions(+), 3 deletions(-) rename {assets => code/assets}/design-1/Group16.png (100%) rename {assets => code/assets}/design-1/Group34.png (100%) rename {assets => code/assets}/design-1/Group36.png (100%) rename {assets => code/assets}/design-1/Group37.png (100%) rename {assets => code/assets}/design-1/Group38.png (100%) rename {assets => code/assets}/design-1/button.svg (100%) rename {assets => code/assets}/design-1/iPhone XR/Group 1.svg (100%) rename {assets => code/assets}/design-1/menu-icon.svg (100%) rename {assets => code/assets}/design-1/sun.svg (100%) diff --git a/assets/design-1/Group16.png b/code/assets/design-1/Group16.png similarity index 100% rename from assets/design-1/Group16.png rename to code/assets/design-1/Group16.png diff --git a/assets/design-1/Group34.png b/code/assets/design-1/Group34.png similarity index 100% rename from assets/design-1/Group34.png rename to code/assets/design-1/Group34.png diff --git a/assets/design-1/Group36.png b/code/assets/design-1/Group36.png similarity index 100% rename from assets/design-1/Group36.png rename to code/assets/design-1/Group36.png diff --git a/assets/design-1/Group37.png b/code/assets/design-1/Group37.png similarity index 100% rename from assets/design-1/Group37.png rename to code/assets/design-1/Group37.png diff --git a/assets/design-1/Group38.png b/code/assets/design-1/Group38.png similarity index 100% rename from assets/design-1/Group38.png rename to code/assets/design-1/Group38.png diff --git a/assets/design-1/button.svg b/code/assets/design-1/button.svg similarity index 100% rename from assets/design-1/button.svg rename to code/assets/design-1/button.svg diff --git a/assets/design-1/iPhone XR/Group 1.svg b/code/assets/design-1/iPhone XR/Group 1.svg similarity index 100% rename from assets/design-1/iPhone XR/Group 1.svg rename to code/assets/design-1/iPhone XR/Group 1.svg diff --git a/assets/design-1/menu-icon.svg b/code/assets/design-1/menu-icon.svg similarity index 100% rename from assets/design-1/menu-icon.svg rename to code/assets/design-1/menu-icon.svg diff --git a/assets/design-1/sun.svg b/code/assets/design-1/sun.svg similarity index 100% rename from assets/design-1/sun.svg rename to code/assets/design-1/sun.svg diff --git a/code/index.html b/code/index.html index 6006e0154..0112a1645 100644 --- a/code/index.html +++ b/code/index.html @@ -14,14 +14,14 @@
      - + menu-icon button Date: Sun, 29 Sep 2024 22:13:14 +0200 Subject: [PATCH 6/8] responsivness tweaks --- code/styles.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/code/styles.css b/code/styles.css index 4c26c1a75..5df08ddb8 100644 --- a/code/styles.css +++ b/code/styles.css @@ -16,7 +16,6 @@ body { align-items: center; justify-content: center; background-color: #b7b4b4; - padding: 20px; } ul { @@ -28,8 +27,10 @@ ul { position: relative; display: flex; flex-direction: column; - width: 414px; - height: 800px; + width: 100%; + height: 100%; + max-width: 414px; + max-height: 844px; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); color: white; @@ -64,7 +65,7 @@ ul { width: 800px; background: linear-gradient(90deg, #8589ff 0%, #e8e9ff 100%); border-radius: 50%; - bottom: -0%; + bottom: 10%; position: absolute; right: 50%; transform: translate(50%); @@ -205,6 +206,13 @@ ul { .current-weather { align-items: center; + margin: 0; + } + + #temperature, + #city, + #weather-condition { + margin: 0; } } From 89b52dcc2366a6f94d9d8034c36ac318320b7c81 Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 29 Sep 2024 22:22:30 +0200 Subject: [PATCH 7/8] smaller mobiles --- code/styles.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/code/styles.css b/code/styles.css index 5df08ddb8..a144a73e8 100644 --- a/code/styles.css +++ b/code/styles.css @@ -217,5 +217,21 @@ ul { } .button { - left: 50%; + left: 70%; +} + +@media (max-height: 670px) { + .button { + top: 40%; + } + .menu-icon { + display: none; + } + .current-weather { + top: -90px; + } + + .weather-image { + bottom: -20%; + } } From eb1acfd5d7175df2ba6402ea8a0e6be1534804ba Mon Sep 17 00:00:00 2001 From: Mika Date: Thu, 10 Oct 2024 15:53:28 +0200 Subject: [PATCH 8/8] timezone functions added as per requested change --- code/script.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/code/script.js b/code/script.js index baa4288b9..b7a986af4 100644 --- a/code/script.js +++ b/code/script.js @@ -19,15 +19,21 @@ const cities = [ let currentCityIndex = 0; -function formatTime(timestamp) { - const date = new Date(timestamp * 1000); - return `${date.getHours()}:${date.getMinutes().toString().padStart(2, "0")}`; +// Update the formatTime function +function formatTime(timestamp, timezoneOffset) { + const date = new Date((timestamp + timezoneOffset) * 1000); + return date.toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + hour12: false, + }); } function getWeatherIconUrl(iconCode) { return `https://openweathermap.org/img/wn/${iconCode}@2x.png`; } +// Update the fetchWeatherData function function fetchWeatherData(lat, lon) { fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=f2241eeae1b16c2b8bc74e61d2517ef6` @@ -37,8 +43,8 @@ function fetchWeatherData(lat, lon) { temperature.innerHTML = `${Math.round(data.main.temp)}°C`; city.innerHTML = `${data.name}`; weatherCondition.innerHTML = `${data.weather[0].main}`; - sunrise.innerHTML = `sunrise ${formatTime(data.sys.sunrise)}`; - sunset.innerHTML = `sunset ${formatTime(data.sys.sunset)}`; + sunrise.innerHTML = `sunrise ${formatTime(data.sys.sunrise, data.timezone)}`; + sunset.innerHTML = `sunset ${formatTime(data.sys.sunset, data.timezone)}`; document.querySelector(".weather-image").innerHTML = `${data.weather[0].description}`; // Update time every minute