From 752bb61806dbe8a1dd451f820ec579ce3ec4bf9c Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Thu, 26 Sep 2024 08:53:28 +0200 Subject: [PATCH 01/18] added HTML, CSS and API key + URL to JS --- .vscode/settings.json | 3 +++ index.html | 40 ++++++++++++++++++++++++++++++++++++++++ instructions.md | 2 +- script.js | 13 +++++++++++++ style.css | 41 +++++++++++++++++++++++++++++++++++++++++ 5 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 .vscode/settings.json create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..c0e4049fc --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + Document + + Weather or Not + + +
+

Weather or Not

+

+
+
+ +
+

Clear

|

20°C

+
+ + +
+

sunrise

+

sunset

+
+
+
+ + + + + + + + + + + + + diff --git a/instructions.md b/instructions.md index 42fc411ce..c8abf96ca 100644 --- a/instructions.md +++ b/instructions.md @@ -1,5 +1,5 @@ # Instructions -Start out with signing up for a [free Open Weather Map](https://home.openweathermap.org/users/sign_up "free Open Weather Map") account, as it can take up to a few hours for the API key to be activated. +Start out with signing up for a [free Open Weather Map]( "free Open Weather Map") account, as it can take up to a few hours for the API key to be activated. ## Step by step instructions ### Step 1 - Get started with the weather API diff --git a/script.js b/script.js new file mode 100644 index 000000000..d4f15b214 --- /dev/null +++ b/script.js @@ -0,0 +1,13 @@ +console.log("🌻 Script connected") +//ea9a90c62aeaaa3811505087d195520e +//https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e +// base URL + api key + + +//True constants (SNAKECASE) +const API_KEY = "ea9a90c62aeaaa3811505087d195520e" +const BASE_URL = "https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=" + +const URL = (`${BASE_URL}${API_KEY}`) + +console.log (URL) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..52bff1de7 --- /dev/null +++ b/style.css @@ -0,0 +1,41 @@ + +body { + font-family: Montserrat; +} + +header { + margin-left: 15px; +} + +/* Container for condition and temperature */ +.temperature-info { + display: flex; + justify-content: left; + align-items: center; + font-size: 21px; + font-weight: 400; + margin-bottom: 10px; + margin-left: 15px; +} + + .temperature-info p { + margin: 0 5px; +} + + /* Container for sunrise and sunset */ + .sun-times { + align-items: center; /* Center-align sunrise and sunset */ + justify-content: left; + font-size: 21px; + font-weight: 400; + margin-bottom: 20px; /* Space before other weather details */ + margin-left: 20px; +} + + .sun-times p { + margin: 5px 0; /* Adjust spacing between sunrise and sunset */ +} + + + + \ No newline at end of file From 77dea67ef0d6fa11834908458edf50392fdddeec Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Thu, 26 Sep 2024 22:44:16 +0200 Subject: [PATCH 02/18] fetch and converted sunset/sunrise time and updated CSS --- assets/cloud.png | Bin 0 -> 1961 bytes assets/sunglasses.png | Bin 0 -> 2301 bytes assets/umbrella.png | Bin 0 -> 2768 bytes index.html | 17 +++-- script.js | 131 +++++++++++++++++++++++++++++++++++- style.css | 152 +++++++++++++++++++++++++++++++++++++----- 6 files changed, 271 insertions(+), 29 deletions(-) create mode 100644 assets/cloud.png create mode 100644 assets/sunglasses.png create mode 100644 assets/umbrella.png diff --git a/assets/cloud.png b/assets/cloud.png new file mode 100644 index 0000000000000000000000000000000000000000..562dd199693b161a156bbb0a978a4eaf8caaeb17 GIT binary patch literal 1961 zcmV;a2UhrrP)m-;=4YCxdikT z2;I&T&@zHZVh`#KY^=mp0wX2vY$um;$UfrBWW;4Y0fc(>=#SjZu087)Q_w|xZK%EwW!79L#DHerR09$ z4a5kM5Z6r_t6rTfdY$~MSc5U~eP=t*()O;i5-;);M1XG66sna;NE0mW74n3%0;1{$ zloQ(tF~P*dU2JcPRHWqCCv9PGuMQDlY44z_Nv{VBh#$_kw$cy-OhlZhDBH1oaIpwU z^YL@xeT4uHg9Qa2AO@I-I7{1k|5zMB)TH@X+Arorn!VG^_Z<$X?-@3X36VBMxF*N) zOIe`GFhyw8>qvNP?nfx*p(;VPZQE(BAgw|%qh`CPG}M+34yrIEjO|swZT+5A$~y8c zQeNCIuEUgZ{&wpO0)nX86)*M$5>&LN!>CCdTUC`(YyPoD`Uo=s+q%$whLdK#gRqJg z9y94*L`xtdOkm@%?cE4m@qRD^5b0{ylFN%9`Spgq?`sKPObEm0vL3RF0*N)hcu~N_ z7)w>p^0{T_(h;@c=Yx}_LNNm~0>^S?kla?mVREln9{Te;TUoJ*oFk|FwJ6fKv51p0 zk%+$>lcvv0#e-FdIl42ENy(cy09FdmU=AReh*4n=5`TW%{$uPv_*ld#3x4sB*<(F} zIYF{;PzsZ$Kpja)17l#MI8H9E5_Z-?ctz|KC=@fbtGe?8A&))mE0F37!m^#PCI8LC z9dWC~31Q-e>?h6_i}OSY0eXs)1S6M>;sOh;Am(JxyD^T`4J1w+fb+yT6dZ+G*gBGf$bfL z$^!rKrRrS1+t<6$O`61Mwz9I*O5pDc;aF76jRwwzHM*mwW;cjC`*SPpwBXb~mx_mR z;|~jU$1Pe_mi07{GEU$hMeH^XJlk)$ zl2}h&J-rHu<4|O-YHRm^y7!(^&+;W#6MZ$OtiP8Lw$L6PJRiV3wZjp_K!2Os&cY82 zMcX-q4BxmF(Z_+Hms~T%d4{jr{){8!Cy7X!whsyCTR9=k2$WP+f^dX8;GrHP<>D|A z6eno3gP}%3IJr^Cym-6)i7Nu_ytPk7;IYCR)s^Z|P;$Ew0ADX$uLtuMQV~#a8mIBm z`+}pLpunrKok8^U9AxTSlRmyVYXKGRJ?xGmebOD{3}mB4tA&k2GDY8acBCJ92JB5tTTMfiLm1a;G~AZsENiKpf=+XJO1ehDcVu!XF4Y!)2yxVA zOy4~l7QFC>!UqoBNY%u?bfl-c0pp{Z+%K-cJwr&a$vJKJ6R1ip*d0XRz^zmW>*49B zq0>rc!-j6=*$1z|Xprc-b3<-go0*M>U{r@7ZCO}a_`5K)=qf}=V;#a9@4)Y7QH@{q zV2xCo8R?#Ccaik^V&Q!yyg2fhmmv^Z8Lk9m2rxyV2SFqkHC45xYD-s*%6Y=hu_||B zLCqo_fp-o!l+1mHjB0t~Xkw#MFa~bxDMzxirXN@`WPUEwegcs~+MPu5&fji-kodCC zNA(ubp$tpg&1PK|8jiybiq^vRNesIgz&88EdOBHQ1bfeJv(MApcF8s}ahW*ndcg9q zMsGLTQUmXLHrCx?D`&rrE9cyNCvFLf_Lv2&T}QQQ3nM<;)QA&!8`>lW>b4tYR^P)x z>g#*JK7<90a+$DH1Z%fQj=;>k+;t<~D3~g7K6*E_wK2#*b4ruy9w+lvEv!ENc1_>z z%HCJ=vt&B-wZ-dZIcmZ>&od*8;hlX2=%!u=02y8WSgeu*=sW$|drSXI%uOePL vPK5cGIdR?ajkFx2;%r1W+=V&#hX(%xnGb5&WSN;v00000NkvXXu0mjfmsp_F literal 0 HcmV?d00001 diff --git a/assets/sunglasses.png b/assets/sunglasses.png new file mode 100644 index 0000000000000000000000000000000000000000..8d56e488691fd5d88879dba668d63b55b043b5c6 GIT binary patch literal 2301 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 - Document + Weather or Not Weather or Not -
-

Weather or Not

-

-
-
- +
+
-

Clear

|

20°C

+

|

-

sunrise

sunset

+ Weather Image +

    +
    +
    diff --git a/script.js b/script.js index d4f15b214..5ca7ac3f5 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,3 @@ -console.log("🌻 Script connected") //ea9a90c62aeaaa3811505087d195520e //https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e // base URL + api key @@ -10,4 +9,132 @@ const BASE_URL = "https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sw const URL = (`${BASE_URL}${API_KEY}`) -console.log (URL) \ No newline at end of file +console.log (URL) + + +// DOM Selectors +const temperatureDisplay = document.getElementById("temperature") +const conditionDisplay = document.getElementById("condition") +const sunriseDisplay = document.getElementById ("sunriseTime") +const sunsetDisplay = document.getElementById ("sunsetTime") +const weatherImg = document.getElementById ("weatherImage") +const weatherMsg = document.getElementById ("weatherMessage") + + +// Fetch weather data +fetch(URL) + .then(response => response.json()) + .then(data => { + const stockholmTemp = data.main.temp + const weatherCondition = data.weather[0].description // Get the weather condition + const roundedTemp = Math.round(stockholmTemp) + const sunrise = data.sys.sunrise + const sunset = data.sys.sunset + + console.log (sunrise) + + temperatureDisplay.innerText = `${roundedTemp}°C` // Display the temperature + conditionDisplay.innerText = `${weatherCondition}` // Display the weather condition + + // Function to convert UNIX timestamp to readable time format (24-hour clock) + const convertUnixToTime = (unixTimestamp) => { + const date = new Date(unixTimestamp * 1000); // Multiply by 1000 to convert to milliseconds + const hours = date.getHours(); + const minutes = String(date.getMinutes()).padStart(2, '0'); // Pad single-digit minutes with a zero + return `${hours}:${minutes}`; // Return time in HH:MM format + }; + + // Convert and display sunrise and sunset times + const sunriseTime = convertUnixToTime(sunrise); + const sunsetTime = convertUnixToTime(sunset); + + sunriseDisplay.innerText = `${sunriseTime}`; + sunsetDisplay.innerText = `${sunsetTime}`; + + // Log the temperature and data for debugging + console.log(data); // Log inside the promise chain + }) + + .catch(error => console.error('Error fetching weather data:', error)); // Handle errors + + + + + + + + + // sunriseDisplay.innerText = `${sunrise}` + // sunsetDisplay.innerText = `${sunset}` + + // // Function to convert UNIX timestamp to readable time format + // const convertUnixToTime = (unixTimestamp) => { + // const date = new Date(unixTimestamp * 1000); // Multiply by 1000 to convert to milliseconds + // return date.toLocaleTimeString(); // Converts to local time string + // }; + + // // Extracting sunrise and sunset times + // const sunriseTime = convertUnixToTime(sunriseDisplay.sys.sunrise); + // const sunsetTime = convertUnixToTime(sunsetDisplay.sys.sunset); + + // console.log(`Sunrise Time: ${sunriseTime}`); + // console.log(`Sunset Time: ${sunsetTime}`); + + + // Log the temperature for debugging + // console.log(data); // Log inside the promise chain + // }) + // .catch(error => console.error('Error fetching weather data:', error)); // Handle errors + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +//DOM Selectors +// const temperature = document.getElementById ("temperature") +// const condition = document.getElementById ("condition") + + +// fetch(URL) +// .then(response => response.json()) +// .then(data => { +// console.log(data.main.temp) +// const temperature = data.main.temp; +// const stockholmTemp = data.list[0].main.temp +// }); + + + + + +// temperature.innerText = stockholmTemperature + + diff --git a/style.css b/style.css index 52bff1de7..55386f7ef 100644 --- a/style.css +++ b/style.css @@ -1,41 +1,157 @@ +body { + font-family: Montserrat; + background: #F7E9B9; +} + +.weather-container { +display: flex; +flex-direction: column; /* Stack items vertically */ +justify-content: flex-start; +padding-top: 50px; +align-items: center; +height: 100vh; /* Ensure it takes up the full height of the viewport */ +} + +/* Container for condition and temperature */ +.temperature-info { + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + font-weight: 400; + margin-left: 45px; + color: #2A5510; + line-height: 25.6px; +} + + .temperature-info p { + margin: 0 5px; +} + +/* Container for sunrise and sunset */ +.sun-times { + display: flex; + flex-direction: column; + align-items: center; /* Center-align sunrise and sunset */ + font-size: 24px; + font-weight: 400; + margin-bottom: 20px; /* Space before other weather details */ + color: #2A5510; + line-height: 25.6px; +} + +.sun-times p { + margin: 0 5px; /* Adjust spacing between sunrise and sunset */ +} + +.weather-img { +margin-top: 30px; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +/* body { font-family: Montserrat; + background: #F7E9B9; } -header { - margin-left: 15px; +.weather-container { + display: flex; + justify-content: center; + align-items: center; } + /* Container for condition and temperature */ -.temperature-info { - display: flex; - justify-content: left; - align-items: center; +/* .temperature-info { + display: flex; + /* justify-content: center; */ + /* align-items: center; font-size: 21px; font-weight: 400; margin-bottom: 10px; - margin-left: 15px; -} - + margin-left: 40px; + margin-top: 50px; + color: #2A5510; + line-height: 25.6px; + +} */ +/* .temperature-info p { margin: 0 5px; -} +} */ /* Container for sunrise and sunset */ - .sun-times { + /* .sun-times { align-items: center; /* Center-align sunrise and sunset */ - justify-content: left; - font-size: 21px; + /* justify-content: center; */ + /* font-size: 21px; font-weight: 400; margin-bottom: 20px; /* Space before other weather details */ - margin-left: 20px; -} - + /* margin-left: 47px; + color: #2A5510; + line-height: 25.6px; +} */ +/* .sun-times p { margin: 5px 0; /* Adjust spacing between sunrise and sunset */ -} - +/* } + +/* .weather-img { + display: flex; + /* justify-content: center; */ + /* align-items: center; + margin-top: 150px; + margin-left: 47px; +} */ + \ No newline at end of file From d26b6f19d86d82370968852475eb30ca07dbcdec Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Thu, 26 Sep 2024 23:27:20 +0200 Subject: [PATCH 03/18] added function with if/else statements to change background color --- script.js | 36 ++++++++++++++++++++++++++++++++---- style.css | 2 ++ 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index 5ca7ac3f5..8fa252669 100644 --- a/script.js +++ b/script.js @@ -22,7 +22,7 @@ const weatherMsg = document.getElementById ("weatherMessage") // Fetch weather data -fetch(URL) +fetch(URL) .then(response => response.json()) .then(data => { const stockholmTemp = data.main.temp @@ -51,15 +51,43 @@ fetch(URL) sunriseDisplay.innerText = `${sunriseTime}`; sunsetDisplay.innerText = `${sunsetTime}`; + // Call the updateUI function to change background color and message + updateUI(roundedTemp, weatherCondition); + + // Log the temperature and data for debugging console.log(data); // Log inside the promise chain }) .catch(error => console.error('Error fetching weather data:', error)); // Handle errors - - - + // Function to update UI based on weather condition +function updateUI(temperature, weatherDescription) { + let weatherMessage; // Declare a variable for the weather message + + // Update background and image based on the weather description + if (weatherDescription.includes("rain")) { + document.body.style.backgroundColor = "#BDE8FA"; // blue for rain + weatherImg.src = "assets/umbrella.png"; // Update image for rain + weatherMessage = "Don’t forget your umbrella. It’s wet in Stockholm today."; // Custom message for rain + } else if (weatherDescription.includes("clear")) { + document.body.style.backgroundColor = "#ffd700"; // yellow for sun + weatherImg.src = "assets/sunglasses.png"; // Update image for sunny weather + weatherMessage = `Get your sunnies on. Stockholm is looking rather great today.`; // Default message for clear + } else if (weatherDescription.includes("clouds")) { + document.body.style.backgroundColor = "#c0c0c0"; // gray for cloudy + weatherImg.src = "assets/cloud.png"; // Update image for cloudy weather + weatherMessage = "Light a fire and get cosy. Stockholm is looking grey today."; // Custom message for clouds + } else { + document.body.style.backgroundColor = "#ff4500"; // fallback color + weatherImg.src = "assets/fallback_image_url.jpg"; // Fallback image + weatherMessage = `Put your sunnies on - the weather in Stockholm looks ${weatherDescription} today.`; // Default message + } + + weatherMsg.textContent = weatherMessage; // Update the weather message display +} + +console.log (backgroundColor) diff --git a/style.css b/style.css index 55386f7ef..cbff1b53c 100644 --- a/style.css +++ b/style.css @@ -93,6 +93,8 @@ margin-top: 30px; + + From 13730e42a0a1f3ade61258b8a5634248c4cc85ce Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Fri, 27 Sep 2024 17:09:40 +0200 Subject: [PATCH 04/18] added function to change color of background and fonts depending on weather description --- index.html | 26 +++++--- script.js | 188 ++++++++++++++++------------------------------------- style.css | 13 ++-- 3 files changed, 83 insertions(+), 144 deletions(-) diff --git a/index.html b/index.html index bd26a50b2..e0b53adc0 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,18 @@ Weather or Not + + + Weather or Not
    -
    +
    -

    |

    +

    +

    |

    +

    @@ -19,13 +24,18 @@

    sunset

    Weather Image -

    -
    -
    -
      +

      +
      +
      + + + + + +
      -
      - +
      + diff --git a/script.js b/script.js index 8fa252669..eb6ff48c7 100644 --- a/script.js +++ b/script.js @@ -2,6 +2,9 @@ //https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e // base URL + api key +// //Forecast API +// https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e + //True constants (SNAKECASE) const API_KEY = "ea9a90c62aeaaa3811505087d195520e" @@ -11,158 +14,79 @@ const URL = (`${BASE_URL}${API_KEY}`) console.log (URL) - // DOM Selectors -const temperatureDisplay = document.getElementById("temperature") -const conditionDisplay = document.getElementById("condition") -const sunriseDisplay = document.getElementById ("sunriseTime") -const sunsetDisplay = document.getElementById ("sunsetTime") -const weatherImg = document.getElementById ("weatherImage") -const weatherMsg = document.getElementById ("weatherMessage") - +const temperatureDisplay = document.getElementById("temperature"); +const conditionDisplay = document.getElementById("condition"); +const sunriseDisplay = document.getElementById("sunriseTime"); +const sunsetDisplay = document.getElementById("sunsetTime"); +const weatherImg = document.getElementById("weatherImage"); +const weatherMsg = document.getElementById("weatherMessage"); +const forecast = document.getElementById("forecastContainer"); // Fetch weather data -fetch(URL) +fetch(URL) .then(response => response.json()) .then(data => { - const stockholmTemp = data.main.temp - const weatherCondition = data.weather[0].description // Get the weather condition - const roundedTemp = Math.round(stockholmTemp) - const sunrise = data.sys.sunrise - const sunset = data.sys.sunset + const stockholmTemp = data.main.temp; + const weatherCondition = data.weather[0].description; // Get the weather condition + const roundedTemp = Math.round(stockholmTemp); + const sunrise = data.sys.sunrise; + const sunset = data.sys.sunset; - console.log (sunrise) - - temperatureDisplay.innerText = `${roundedTemp}°C` // Display the temperature - conditionDisplay.innerText = `${weatherCondition}` // Display the weather condition + // Display the temperature and condition + temperatureDisplay.innerText = `${roundedTemp}°C`; + conditionDisplay.innerText = `${weatherCondition}`; - // Function to convert UNIX timestamp to readable time format (24-hour clock) + // Convert and display sunrise and sunset times const convertUnixToTime = (unixTimestamp) => { - const date = new Date(unixTimestamp * 1000); // Multiply by 1000 to convert to milliseconds - const hours = date.getHours(); - const minutes = String(date.getMinutes()).padStart(2, '0'); // Pad single-digit minutes with a zero - return `${hours}:${minutes}`; // Return time in HH:MM format - }; + const date = new Date(unixTimestamp * 1000); // Multiply by 1000 to convert to milliseconds + const hours = date.getHours(); + const minutes = String(date.getMinutes()).padStart(2, '0'); // Pad single-digit minutes with a zero + return `${hours}:${minutes}`; // Return time in HH:MM format + } - // Convert and display sunrise and sunset times const sunriseTime = convertUnixToTime(sunrise); const sunsetTime = convertUnixToTime(sunset); - sunriseDisplay.innerText = `${sunriseTime}`; sunsetDisplay.innerText = `${sunsetTime}`; // Call the updateUI function to change background color and message updateUI(roundedTemp, weatherCondition); - // Log the temperature and data for debugging console.log(data); // Log inside the promise chain }) - .catch(error => console.error('Error fetching weather data:', error)); // Handle errors - // Function to update UI based on weather condition -function updateUI(temperature, weatherDescription) { - let weatherMessage; // Declare a variable for the weather message - - // Update background and image based on the weather description - if (weatherDescription.includes("rain")) { - document.body.style.backgroundColor = "#BDE8FA"; // blue for rain - weatherImg.src = "assets/umbrella.png"; // Update image for rain - weatherMessage = "Don’t forget your umbrella. It’s wet in Stockholm today."; // Custom message for rain - } else if (weatherDescription.includes("clear")) { - document.body.style.backgroundColor = "#ffd700"; // yellow for sun - weatherImg.src = "assets/sunglasses.png"; // Update image for sunny weather - weatherMessage = `Get your sunnies on. Stockholm is looking rather great today.`; // Default message for clear - } else if (weatherDescription.includes("clouds")) { - document.body.style.backgroundColor = "#c0c0c0"; // gray for cloudy - weatherImg.src = "assets/cloud.png"; // Update image for cloudy weather - weatherMessage = "Light a fire and get cosy. Stockholm is looking grey today."; // Custom message for clouds - } else { - document.body.style.backgroundColor = "#ff4500"; // fallback color - weatherImg.src = "assets/fallback_image_url.jpg"; // Fallback image - weatherMessage = `Put your sunnies on - the weather in Stockholm looks ${weatherDescription} today.`; // Default message - } - - weatherMsg.textContent = weatherMessage; // Update the weather message display -} - -console.log (backgroundColor) + function updateUI(temperature, weatherDescription) { + const weatherContainer = document.getElementById("weatherContainer"); + let weatherMessage; - - - - // sunriseDisplay.innerText = `${sunrise}` - // sunsetDisplay.innerText = `${sunset}` - - // // Function to convert UNIX timestamp to readable time format - // const convertUnixToTime = (unixTimestamp) => { - // const date = new Date(unixTimestamp * 1000); // Multiply by 1000 to convert to milliseconds - // return date.toLocaleTimeString(); // Converts to local time string - // }; - - // // Extracting sunrise and sunset times - // const sunriseTime = convertUnixToTime(sunriseDisplay.sys.sunrise); - // const sunsetTime = convertUnixToTime(sunsetDisplay.sys.sunset); - - // console.log(`Sunrise Time: ${sunriseTime}`); - // console.log(`Sunset Time: ${sunsetTime}`); - - - // Log the temperature for debugging - // console.log(data); // Log inside the promise chain - // }) - // .catch(error => console.error('Error fetching weather data:', error)); // Handle errors - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -//DOM Selectors -// const temperature = document.getElementById ("temperature") -// const condition = document.getElementById ("condition") - - -// fetch(URL) -// .then(response => response.json()) -// .then(data => { -// console.log(data.main.temp) -// const temperature = data.main.temp; -// const stockholmTemp = data.list[0].main.temp -// }); - - - - - -// temperature.innerText = stockholmTemperature - - + // Log weather description for debugging + console.log("Weather Description:", weatherDescription.toLowerCase()); + + // Update background and text color based on weather condition + if (weatherDescription.toLowerCase().includes("rain") || weatherDescription.toLowerCase().includes("drizzle")) { + weatherContainer.style.backgroundColor = "#BDE8FA" // Blue for rain + weatherContainer.style.color = "#164A68" // Rainy font color + weatherImg.src = "assets/umbrella.png" + weatherMessage = "Don’t forget your umbrella. It’s wet in Stockholm today." + } else if (weatherDescription.toLowerCase().includes("clear")) { + weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for clear sky + weatherContainer.style.color = "#2A5510" // Sunny font color + weatherImg.src = "assets/sunglasses.png" + weatherMessage = `Get your sunnies on. Stockholm is looking rather great today.` + } else if (weatherDescription.toLowerCase().includes("clouds")) { + weatherContainer.style.backgroundColor = "#FFFFFF"; // Gray for cloudy + weatherContainer.style.color = "#F47775" // Cloudy font color + weatherImg.src = "assets/cloud.png" + weatherMessage = "Light a fire and get cosy. Stockholm is looking grey today." + } else { + weatherContainer.style.backgroundColor = "white"; // Default background + weatherContainer.style.color = "black"; // Default font color + weatherImg.src = "assets/fallback_image_url.jpg"; + weatherMessage = `The weather cannot be picked up at the moment`; + } + + weatherMsg.textContent = weatherMessage; // Update the weather message display + } \ No newline at end of file diff --git a/style.css b/style.css index cbff1b53c..ed1d94328 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,5 @@ body { font-family: Montserrat; - background: #F7E9B9; } .weather-container { @@ -12,6 +11,7 @@ align-items: center; height: 100vh; /* Ensure it takes up the full height of the viewport */ } + /* Container for condition and temperature */ .temperature-info { display: flex; @@ -20,7 +20,6 @@ height: 100vh; /* Ensure it takes up the full height of the viewport */ font-size: 24px; font-weight: 400; margin-left: 45px; - color: #2A5510; line-height: 25.6px; } @@ -36,7 +35,6 @@ height: 100vh; /* Ensure it takes up the full height of the viewport */ font-size: 24px; font-weight: 400; margin-bottom: 20px; /* Space before other weather details */ - color: #2A5510; line-height: 25.6px; } @@ -48,7 +46,14 @@ height: 100vh; /* Ensure it takes up the full height of the viewport */ margin-top: 30px; } - +.weather-message { + font-family: Montserrat; + font-size: 37px; + font-weight: 700; + line-height: 45.1px; + text-align: left; +} + From 87fb4f4cb2414a3e11df4fa7f2a0fabc3690362d Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sat, 28 Sep 2024 21:43:28 +0200 Subject: [PATCH 05/18] fetched forecast data and created a loop for the first 5 days weather forecast --- assets/cloud.png | Bin 1961 -> 0 bytes assets/design-1/Group16.png | Bin 1101 -> 0 bytes assets/design-1/Group34.png | Bin 1159 -> 0 bytes assets/design-1/Group36.png | Bin 1074 -> 0 bytes assets/design-1/Group37.png | Bin 1074 -> 0 bytes assets/design-1/Group38.png | Bin 1074 -> 0 bytes ...{noun_Cloud_1188486.svg => noun_Cloud.svg} | 0 ...lasses_2055147.svg => noun_Sunglasses.svg} | 0 ...Umbrella_2030530.svg => noun_Umbrella.svg} | 0 assets/design-2/sad-face-3.svg | 65 ++++++++ assets/sunglasses.png | Bin 2301 -> 0 bytes assets/umbrella.png | Bin 2768 -> 0 bytes index.html | 12 +- script.js | 115 ++++++++++--- style.css | 157 ++++++++++++++++-- 15 files changed, 301 insertions(+), 48 deletions(-) delete mode 100644 assets/cloud.png delete mode 100644 assets/design-1/Group16.png delete mode 100644 assets/design-1/Group34.png delete mode 100644 assets/design-1/Group36.png delete mode 100644 assets/design-1/Group37.png delete mode 100644 assets/design-1/Group38.png rename assets/design-2/{noun_Cloud_1188486.svg => noun_Cloud.svg} (100%) rename assets/design-2/{noun_Sunglasses_2055147.svg => noun_Sunglasses.svg} (100%) rename assets/design-2/{noun_Umbrella_2030530.svg => noun_Umbrella.svg} (100%) create mode 100644 assets/design-2/sad-face-3.svg delete mode 100644 assets/sunglasses.png delete mode 100644 assets/umbrella.png diff --git a/assets/cloud.png b/assets/cloud.png deleted file mode 100644 index 562dd199693b161a156bbb0a978a4eaf8caaeb17..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1961 zcmV;a2UhrrP)m-;=4YCxdikT z2;I&T&@zHZVh`#KY^=mp0wX2vY$um;$UfrBWW;4Y0fc(>=#SjZu087)Q_w|xZK%EwW!79L#DHerR09$ z4a5kM5Z6r_t6rTfdY$~MSc5U~eP=t*()O;i5-;);M1XG66sna;NE0mW74n3%0;1{$ zloQ(tF~P*dU2JcPRHWqCCv9PGuMQDlY44z_Nv{VBh#$_kw$cy-OhlZhDBH1oaIpwU z^YL@xeT4uHg9Qa2AO@I-I7{1k|5zMB)TH@X+Arorn!VG^_Z<$X?-@3X36VBMxF*N) zOIe`GFhyw8>qvNP?nfx*p(;VPZQE(BAgw|%qh`CPG}M+34yrIEjO|swZT+5A$~y8c zQeNCIuEUgZ{&wpO0)nX86)*M$5>&LN!>CCdTUC`(YyPoD`Uo=s+q%$whLdK#gRqJg z9y94*L`xtdOkm@%?cE4m@qRD^5b0{ylFN%9`Spgq?`sKPObEm0vL3RF0*N)hcu~N_ z7)w>p^0{T_(h;@c=Yx}_LNNm~0>^S?kla?mVREln9{Te;TUoJ*oFk|FwJ6fKv51p0 zk%+$>lcvv0#e-FdIl42ENy(cy09FdmU=AReh*4n=5`TW%{$uPv_*ld#3x4sB*<(F} zIYF{;PzsZ$Kpja)17l#MI8H9E5_Z-?ctz|KC=@fbtGe?8A&))mE0F37!m^#PCI8LC z9dWC~31Q-e>?h6_i}OSY0eXs)1S6M>;sOh;Am(JxyD^T`4J1w+fb+yT6dZ+G*gBGf$bfL z$^!rKrRrS1+t<6$O`61Mwz9I*O5pDc;aF76jRwwzHM*mwW;cjC`*SPpwBXb~mx_mR z;|~jU$1Pe_mi07{GEU$hMeH^XJlk)$ zl2}h&J-rHu<4|O-YHRm^y7!(^&+;W#6MZ$OtiP8Lw$L6PJRiV3wZjp_K!2Os&cY82 zMcX-q4BxmF(Z_+Hms~T%d4{jr{){8!Cy7X!whsyCTR9=k2$WP+f^dX8;GrHP<>D|A z6eno3gP}%3IJr^Cym-6)i7Nu_ytPk7;IYCR)s^Z|P;$Ew0ADX$uLtuMQV~#a8mIBm z`+}pLpunrKok8^U9AxTSlRmyVYXKGRJ?xGmebOD{3}mB4tA&k2GDY8acBCJ92JB5tTTMfiLm1a;G~AZsENiKpf=+XJO1ehDcVu!XF4Y!)2yxVA zOy4~l7QFC>!UqoBNY%u?bfl-c0pp{Z+%K-cJwr&a$vJKJ6R1ip*d0XRz^zmW>*49B zq0>rc!-j6=*$1z|Xprc-b3<-go0*M>U{r@7ZCO}a_`5K)=qf}=V;#a9@4)Y7QH@{q zV2xCo8R?#Ccaik^V&Q!yyg2fhmmv^Z8Lk9m2rxyV2SFqkHC45xYD-s*%6Y=hu_||B zLCqo_fp-o!l+1mHjB0t~Xkw#MFa~bxDMzxirXN@`WPUEwegcs~+MPu5&fji-kodCC zNA(ubp$tpg&1PK|8jiybiq^vRNesIgz&88EdOBHQ1bfeJv(MApcF8s}ahW*ndcg9q zMsGLTQUmXLHrCx?D`&rrE9cyNCvFLf_Lv2&T}QQQ3nM<;)QA&!8`>lW>b4tYR^P)x z>g#*JK7<90a+$DH1Z%fQj=;>k+;t<~D3~g7K6*E_wK2#*b4ruy9w+lvEv!ENc1_>z z%HCJ=vt&B-wZ-dZIcmZ>&od*8;hlX2=%!u=02y8WSgeu*=sW$|drSXI%uOePL vPK5cGIdR?ajkFx2;%r1W+=V&#hX(%xnGb5&WSN;v00000NkvXXu0mjfmsp_F diff --git a/assets/design-1/Group16.png b/assets/design-1/Group16.png deleted file mode 100644 index c2d0e3f5a573364a03e0fd8e208af5cfffb72ceb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1101 zcmV-T1hV^yP)pORlz0?V7J6`4{8w1>62tk6;xMj&Uhk^s0 z;9Q7e@EYtNWO3Pb6?K0=I)Y@9Xc{($gUB*;vP_thqL95v6da?}m6u_%49d08YfF1q zb4|bzdKAp=pS%2i-{<>ze)oLyLm!sSa%&eNwqk6I0U30SMu=5ADJ+6s@960X@9 zShIG0SU;zeh6{~fPH?P0o}#F^umu3H2uzaX27-v{mq#d+UXKT&W7IHoZvYav?SS}% zXCdXebU{z6We~3Z*n0bvo(hU8Dk{|cyQZdQeAyXO6eVK0z{BL!^tFlGli{hSql5YY z$HA0+5_-))1H-tWpzx?5{D-z?=kUF|Hzg8rtl#ffa)AJbVVFI@1+LA^I1IJ5wPW+e z!4v1_=VRNGlJ6fmTBac)BL$7=X*;xDY=n|y<$$7CNZsGoAxPM~bzzU=Sm4*pH-55; zFwr|Yowl3b41)D~gSp_XceB^6SB4$Wuw@W#^>o4OZxqA$*a&bO2Qe{fh`@=kwdYOs z&aqM3UZc_2gODUyl#!KF|MK1gD^6wK%^om!b%0tE2O^Oucq0CL|Eq^VB9ScHK%KGb zfyd2kLngY3s{x~3|suGM{HK;Xm5izi{AseTp{Sycc&LRuU#=9 zI-QOw|L9}6ToJKiu#k|?z&EC|@Bw*T&}-U03C&Gk-$p3?snPezN)3VtUSg|i=+|F5 zK_-*KuJo*sbw1x5)Svn65f8Q$A1i+*0>@Vc5EA$QaR+Qx3miC97*gV9Tu^8Hl;LOG z`pUk8hmuluJ`wQvs11I<)dL6fibDELjE};1&5hlBsxvmKH0>p&AFg>46?S#;{8x~Zy9c6UR7)zH4jRsx>U;In z$;^dBeNt8R#m@8>O42ei|2O>mOW#6tvu zlV@;($lH>bq|$7P2b>^);{w13J`h;!HNWPY^TNb~F&G*gfY`XrkhJ5!ta!a1py_EC zxo>d{TL%088u&A}rKN>kxH2ENBuR3sR31hItu=NtDavKCj24L@^XNmKF1Q zxdNYaGqVzjRLWtP*yVA%Fa$+eg#w>qnAvqGim@!~r==2k-^>hs!DuwLKF;|UPMC>g TTmc{V00000NkvXXu0mjf?e`Gl diff --git a/assets/design-1/Group34.png b/assets/design-1/Group34.png deleted file mode 100644 index f7e90e552c1375d85f1654594bb8d042479df958..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1159 zcmV;21bF+2P)X1^@s6%>pGE00004b3#c}2nYxW zdZg;K_kO@w7GI*Hj2WJ9Ckl4;0>PF?0g zoVu~N1VVfH(X>FOZ!8fgiSJe#Q4&Ioc#e2wO*C<^J>X?)!ev=iT$pJNF`3rhzg39soWhgj@_35(N`1_PJWE?)7@Tg|)S{ zKLztF8x&*Acs!mjj7H;?WreEM>g@oq(_k>D=LW_YZ$Jpi`8kGRIs!rS^73RH$BF9d z>L!=GQjGC70LUVQXfVdRghFVNM+)8H62$Sa>tpUHkq8}gySaQq$P_=PR;yJAp*4gM z%-;uvVvG}9E?1Pt;~A>2uXp=bq0tmJ$z{}Q@9&P4t%?)PF3#cfLQDG;+jq%fak;%) z03ZPX6oil;{GxzRK8;eTOeYqLlANqFJ|Qt_=GxW47^yU393iU3W}EI(MhiYG%8i$W zOQ?XKu%piktsT=BDyu(v_I|+w(29zq-$h0#($mtOTeRHLU0PcH<&Ny#`_?^`x@e$Zc)aOz*tXdMNr_^(dYuK<#X*FWg0+u_!LOGcaQfWT zH+IL}3XbE}-}6kNf`WpL$ti13?c1N1yksH(uq+Fwzy1_%j$0rlISCX>B{=Lh82W1% zBEz}6qhm8Agb*?>y;`l-_(J9@`RQ97cH_11h`Zm+4)M*;wcN=wT|a}O1+ULlVPY79kiqS-Vt zaHW5b!C>e_TCMI(*3P%G*Qag>C1y}>%bAlSzg+0y_uEqlWBlgk^yeF2&Dymhs51mX zb5jGq(j24Fc;43>bh^?T?;glcRL0I0SP0<*TdR)hJZAHqNR!Fr^g;PeI6h%j>wypO z;(Oo{UaSAoMQA(w?eWUW%Duko^?Pe-$QA%^+j|EK_zGLr!RS9ShlPn_X`1%VgYq{j zmFngA#MKR3GhRwbeP&b0;J=3l;Y4$zGa@2FPSdn&wmIA%xwyDkDHclz%R1iPl$K!^ z3Ptj0MGUxHEQrNnzUzO3Pm=G1;u}Jt7(5=APh*?5ItK>&Z8q!l@XU-olVKRgT+Ty} zD>O}u&1UlsilUz2I8MkPIVg&n@_N1gADU0q?6HC4I2%Gp1^~A?j=Lie2znWY`7=3FwcS=X(wLyJGm4nG#KaE@lPDUq528_l zU?iF;+ph0*Ev*~tM9r8E+k0=FR%${74G=Zz1T`uyi^hG>K>{&gNEjCCkd?M89ow$G z?KLHKnM-@zT}X`azP``z`906`d;a7g(D`{hp7Km4Gm0^;)9C_0y+E(mYmy`>f-$~P zuaEyGd2@5Kv8=3Yk0^@IT(`_Qj;l8q4CnoR|0TUn)#3`49U=53gm3_3{Pj{t4u|75 znx^XsAq~|Q+CCANe}xbpl_cpzC=?n~B5rMMt)wU_8w>_7=j@7Vju0B8C@Lrj!jZhg z?H$hVSp$7{O*KQ^dNXUb)f&L>Q3;$qCrwVK=VsDZ=7)QF0~-qkfDj5o2!F#EznyQp3EB-B38^i5A5yT_DDHP9c+Ep zYEq-+m6q4 z#?H-x{a+*w`*!%75JDjc;X?BeLe4;h(9;mYvW3BiFewPaU}s1B@P;PK>Xr6|C(S|p z_)8ib9!iD#b_p-?JiiG5usD;LQp3Ia=xS5cMHqdY77=zO$n&AmVomYvLO0r2E-EC_~|hzo=RsL2L=Ylb2y&o z-Gq>cD2gAeDtlX7+j53se#RKv3IPy8PXGY!saVFWr5OU}=Rr1=p8J*%a=gF4e{d&<=x?MG%^g62m}Jh7vofEUWka}IF_bqH^#U}OCZ;U s{QvvY@ULc`YgVVzX%++_p;z<20G0-ok{TUnlmGw#07*qoM6N<$f@n7UssI20 diff --git a/assets/design-1/Group37.png b/assets/design-1/Group37.png deleted file mode 100644 index ce9c147cfbcf523c7422d6d0fe743be6dfcd14d4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1074 zcmV-21kL-2P)3FwcS=X(wLyJGm4nG#KaE@lPDUq528_l zU?iF;+ph0*Ev*~tM9r8E+k0=FR%${74G=Zz1T`uyi^hG>K>{&gNEjCCkd?M89ow$G z?KLHKnM-@zT}X`azP``z`906`d;a7g(D`{hp7Km4Gm0^;)9C_0y+E(mYmy`>f-$~P zuaEyGd2@5Kv8=3Yk0^@IT(`_Qj;l8q4CnoR|0TUn)#3`49U=53gm3_3{Pj{t4u|75 znx^XsAq~|Q+CCANe}xbpl_cpzC=?n~B5rMMt)wU_8w>_7=j@7Vju0B8C@Lrj!jZhg z?H$hVSp$7{O*KQ^dNXUb)f&L>Q3;$qCrwVK=VsDZ=7)QF0~-qkfDj5o2!F#EznyQp3EB-B38^i5A5yT_DDHP9c+Ep zYEq-+m6q4 z#?H-x{a+*w`*!%75JDjc;X?BeLe4;h(9;mYvW3BiFewPaU}s1B@P;PK>Xr6|C(S|p z_)8ib9!iD#b_p-?JiiG5usD;LQp3Ia=xS5cMHqdY77=zO$n&AmVomYvLO0r2E-EC_~|hzo=RsL2L=Ylb2y&o z-Gq>cD2gAeDtlX7+j53se#RKv3IPy8PXGY!saVFWr5OU}=Rr1=p8J*%a=gF4e{d&<=x?MG%^g62m}Jh7vofEUWka}IF_bqH^#U}OCZ;U s{QvvY@ULc`YgVVzX%++_p;z<20G0-ok{TUnlmGw#07*qoM6N<$f@n7UssI20 diff --git a/assets/design-1/Group38.png b/assets/design-1/Group38.png deleted file mode 100644 index ce9c147cfbcf523c7422d6d0fe743be6dfcd14d4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1074 zcmV-21kL-2P)3FwcS=X(wLyJGm4nG#KaE@lPDUq528_l zU?iF;+ph0*Ev*~tM9r8E+k0=FR%${74G=Zz1T`uyi^hG>K>{&gNEjCCkd?M89ow$G z?KLHKnM-@zT}X`azP``z`906`d;a7g(D`{hp7Km4Gm0^;)9C_0y+E(mYmy`>f-$~P zuaEyGd2@5Kv8=3Yk0^@IT(`_Qj;l8q4CnoR|0TUn)#3`49U=53gm3_3{Pj{t4u|75 znx^XsAq~|Q+CCANe}xbpl_cpzC=?n~B5rMMt)wU_8w>_7=j@7Vju0B8C@Lrj!jZhg z?H$hVSp$7{O*KQ^dNXUb)f&L>Q3;$qCrwVK=VsDZ=7)QF0~-qkfDj5o2!F#EznyQp3EB-B38^i5A5yT_DDHP9c+Ep zYEq-+m6q4 z#?H-x{a+*w`*!%75JDjc;X?BeLe4;h(9;mYvW3BiFewPaU}s1B@P;PK>Xr6|C(S|p z_)8ib9!iD#b_p-?JiiG5usD;LQp3Ia=xS5cMHqdY77=zO$n&AmVomYvLO0r2E-EC_~|hzo=RsL2L=Ylb2y&o z-Gq>cD2gAeDtlX7+j53se#RKv3IPy8PXGY!saVFWr5OU}=Rr1=p8J*%a=gF4e{d&<=x?MG%^g62m}Jh7vofEUWka}IF_bqH^#U}OCZ;U s{QvvY@ULc`YgVVzX%++_p;z<20G0-ok{TUnlmGw#07*qoM6N<$f@n7UssI20 diff --git a/assets/design-2/noun_Cloud_1188486.svg b/assets/design-2/noun_Cloud.svg similarity index 100% rename from assets/design-2/noun_Cloud_1188486.svg rename to assets/design-2/noun_Cloud.svg diff --git a/assets/design-2/noun_Sunglasses_2055147.svg b/assets/design-2/noun_Sunglasses.svg similarity index 100% rename from assets/design-2/noun_Sunglasses_2055147.svg rename to assets/design-2/noun_Sunglasses.svg diff --git a/assets/design-2/noun_Umbrella_2030530.svg b/assets/design-2/noun_Umbrella.svg similarity index 100% rename from assets/design-2/noun_Umbrella_2030530.svg rename to assets/design-2/noun_Umbrella.svg diff --git a/assets/design-2/sad-face-3.svg b/assets/design-2/sad-face-3.svg new file mode 100644 index 000000000..d2580c2b6 --- /dev/null +++ b/assets/design-2/sad-face-3.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/sunglasses.png b/assets/sunglasses.png deleted file mode 100644 index 8d56e488691fd5d88879dba668d63b55b043b5c6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2301 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
      -
      +

      |

      @@ -25,14 +25,8 @@
      Weather Image

      -
      -
      - - - - - -
      +
      +
        diff --git a/script.js b/script.js index eb6ff48c7..890563dd3 100644 --- a/script.js +++ b/script.js @@ -1,11 +1,15 @@ + + //Current weather API //ea9a90c62aeaaa3811505087d195520e //https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e + // base URL + api key // //Forecast API // https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e +//Current Weather API //True constants (SNAKECASE) const API_KEY = "ea9a90c62aeaaa3811505087d195520e" const BASE_URL = "https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=" @@ -14,6 +18,15 @@ const URL = (`${BASE_URL}${API_KEY}`) console.log (URL) + //Forecast Weather API +//True constants (SNAKECASE) +const FORECAST_API_KEY = "ea9a90c62aeaaa3811505087d195520e" +const FORECAST_BASE_URL = "https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=" + +const FORECAST_URL = (`${FORECAST_BASE_URL}${API_KEY}`) + +console.log (FORECAST_URL) + // DOM Selectors const temperatureDisplay = document.getElementById("temperature"); const conditionDisplay = document.getElementById("condition"); @@ -21,7 +34,7 @@ const sunriseDisplay = document.getElementById("sunriseTime"); const sunsetDisplay = document.getElementById("sunsetTime"); const weatherImg = document.getElementById("weatherImage"); const weatherMsg = document.getElementById("weatherMessage"); -const forecast = document.getElementById("forecastContainer"); +const forecast = document.getElementById("forecastList"); // Fetch weather data fetch(URL) @@ -53,40 +66,88 @@ fetch(URL) // Call the updateUI function to change background color and message updateUI(roundedTemp, weatherCondition); - // Log the temperature and data for debugging - console.log(data); // Log inside the promise chain }) .catch(error => console.error('Error fetching weather data:', error)); // Handle errors + // Fetch Forecast weather data + + fetch(FORECAST_URL) + .then (response=> response.json()) + .then(forecastData => { + + // Clear previous forecast list if necessary + forecastList.innerHTML = '' + + + // Loop through the first 7 days of the forecast + for (let i = 0; i < 5; i++) { + const forecast = forecastData.list[i * 8 + 6]; // Get the forecast for 12 PM each day + + // Check if the forecast exists + if (forecast) { + // Get the week day and temperature + const weekDay = new Date(forecast.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' }); + const temperature = Math.round(forecast.main.temp); + + // Create a new list item + const listItem = document.createElement('li'); + listItem.textContent = `${weekDay}: ${temperature}°C`; + + // Append the list item to the forecast list + forecastList.appendChild(listItem); + + console.log(forecast) + } + } + }) + + + + + +.catch(error => console.error('Error fetching forecast data:', error)); + + function updateUI(temperature, weatherDescription) { const weatherContainer = document.getElementById("weatherContainer"); - let weatherMessage; - - // Log weather description for debugging - console.log("Weather Description:", weatherDescription.toLowerCase()); - + let weatherMessage //Use let since the variable weatherMessage will change depending on weather + // Update background and text color based on weather condition - if (weatherDescription.toLowerCase().includes("rain") || weatherDescription.toLowerCase().includes("drizzle")) { + if (weatherDescription.toLowerCase().includes("rain") || + weatherDescription.toLowerCase().includes("drizzle")|| + weatherDescription.toLowerCase().includes("mist")) { weatherContainer.style.backgroundColor = "#BDE8FA" // Blue for rain weatherContainer.style.color = "#164A68" // Rainy font color - weatherImg.src = "assets/umbrella.png" - weatherMessage = "Don’t forget your umbrella. It’s wet in Stockholm today." - } else if (weatherDescription.toLowerCase().includes("clear")) { - weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for clear sky - weatherContainer.style.color = "#2A5510" // Sunny font color - weatherImg.src = "assets/sunglasses.png" - weatherMessage = `Get your sunnies on. Stockholm is looking rather great today.` - } else if (weatherDescription.toLowerCase().includes("clouds")) { - weatherContainer.style.backgroundColor = "#FFFFFF"; // Gray for cloudy - weatherContainer.style.color = "#F47775" // Cloudy font color - weatherImg.src = "assets/cloud.png" - weatherMessage = "Light a fire and get cosy. Stockholm is looking grey today." + weatherImg.src = "assets/design-2/noun_Umbrella.svg" + weatherMessage = "Don’t forget your umbrella.
        It’s wet in Stockholm today." + } else if (weatherDescription.toLowerCase().includes("few clouds")) { + weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for clear sky + weatherContainer.style.color = "#2A5510" // Green font color + weatherImg.src = "assets/design-2/noun_Sunglasses.svg" + weatherMessage = `Get your sunnies on. There are a few clouds, but it's still a lovely day in Stockholm.` + } else if (weatherDescription.toLowerCase().includes("scattered clouds")) { + weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for clear sky + weatherContainer.style.color = "#2A5510" // Green font color + weatherImg.src = "assets/design-2/noun_Sunglasses.svg" + weatherMessage = `There are some scattered clouds, but it's still a lovely day in Stockholm.` + } else if (weatherDescription.toLowerCase().includes("clear")) { + weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for clear sky + weatherContainer.style.color = "#2A5510" // Green font color + weatherImg.src = "assets/design-2/noun_Sunglasses.svg" + weatherMessage = `Get your sunnies on.
        Stockholm is looking rather great today.` + } else if (weatherDescription.toLowerCase().includes("clouds"|| weatherDescription.toLowerCase().includes("fog") + || weatherDescription.toLowerCase().includes("haze")|| weatherDescription.toLowerCase().includes("snow"))) { + weatherContainer.style.backgroundColor = "#FFFFFF"; // White background + weatherContainer.style.color = "#F47775" // Orange font color + weatherImg.src = "assets/design-2/noun_Cloud.svg" + weatherMessage = "Light a fire and get cosy.
        Stockholm is looking grey today." } else { - weatherContainer.style.backgroundColor = "white"; // Default background - weatherContainer.style.color = "black"; // Default font color - weatherImg.src = "assets/fallback_image_url.jpg"; - weatherMessage = `The weather cannot be picked up at the moment`; + weatherContainer.style.backgroundColor = "white"; // Fallback background + weatherContainer.style.color = "black"; // Fallback font color + weatherImg.src = "assets/design-2/sad-face-3.svg" + weatherMessage = `The weather description cannot be picked up at the moment` + } - - weatherMsg.textContent = weatherMessage; // Update the weather message display + + weatherMsg.innerHTML = weatherMessage; // Update the weather message display } \ No newline at end of file diff --git a/style.css b/style.css index ed1d94328..4727b52de 100644 --- a/style.css +++ b/style.css @@ -1,29 +1,31 @@ + body { font-family: Montserrat; + height: 100%; } .weather-container { -display: flex; -flex-direction: column; /* Stack items vertically */ -justify-content: flex-start; -padding-top: 50px; -align-items: center; -height: 100vh; /* Ensure it takes up the full height of the viewport */ + display: flex; + flex-direction: column; /* Stack items vertically */ + justify-content: flex-start; + align-items: flex-start; /* Align items to the left */ + padding-top: 50px; + min-height: 100vh; /* Ensure it takes up the full height of the viewport */ + padding-left: 20px; /* Optional: padding to the left for overall container */ } - /* Container for condition and temperature */ .temperature-info { display: flex; - justify-content: center; + justify-content: flex-start; /* Align temperature info to the left */ align-items: center; font-size: 24px; font-weight: 400; - margin-left: 45px; line-height: 25.6px; + margin-bottom: 10px; /* Optional spacing */ } - .temperature-info p { +.temperature-info p { margin: 0 5px; } @@ -31,7 +33,7 @@ height: 100vh; /* Ensure it takes up the full height of the viewport */ .sun-times { display: flex; flex-direction: column; - align-items: center; /* Center-align sunrise and sunset */ + align-items: flex-start; /* Align sunrise/sunset to the left */ font-size: 24px; font-weight: 400; margin-bottom: 20px; /* Space before other weather details */ @@ -43,7 +45,9 @@ height: 100vh; /* Ensure it takes up the full height of the viewport */ } .weather-img { -margin-top: 30px; + margin-top: 30px; + max-width: 100%; /* Ensure image doesn't exceed container width */ + height: auto; /* Maintain aspect ratio */ } .weather-message { @@ -52,8 +56,78 @@ margin-top: 30px; font-weight: 700; line-height: 45.1px; text-align: left; + padding-right: 20px; } + +.forecast-wrapper { + display: flex; + flex-direction: column; /* Stack items vertically */ + justify-content: flex-start; + align-items: flex-start; /* Align items to the left */ + padding: 10px; /* Optional: Add some padding */ + min-height: 200px; /* Optional: Set a minimum height */ + position: relative; /* Optional: Positioning context for child elements */ +} +#forecastList { + list-style-type: none; /* Remove default list styling */ + padding: 0; /* Remove default padding */ + margin: 0; /* Remove default margin */ + font-size: 21px; + line-height: 36px; +} + + +/* Media Queries */ + +/* Apply centering only on desktop screens */ +@media (min-width: 768px) { + .weather-container { + align-items: center; /* Center horizontally */ + } + + .temperature-info, .sun-times, .weather-message,.forecast-wrapper { + text-align: left; /* Keep content left-aligned */ + width: 100%; + max-width: 600px; /* Limit width on large screens */ + } +} + +@media (min-width: 768px) { + .weather-img { + max-width: 300px; /* Limit max width for desktop */ + height: auto; /* Maintain aspect ratio */ + margin-top: 30px; + margin-left: 0; /* Center alignment in container */ + } +} + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -69,6 +143,65 @@ margin-top: 30px; +/* body { + font-family: Montserrat; +} + +.weather-container { +display: flex; +flex-direction: column; /* Stack items vertically */ +/* justify-content: flex-start; +padding-top: 50px; +align-items: center; +height: 100vh; /* Ensure it takes up the full height of the viewport */ +/* } + + +/* Container for condition and temperature */ +/* .temperature-info { + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + font-weight: 400; + margin-left: 45px; + line-height: 25.6px; +} + + .temperature-info p { + margin: 0 5px; +} + +/* Container for sunrise and sunset */ +/* .sun-times { + display: flex; + flex-direction: column; + align-items: center; /* Center-align sunrise and sunset */ + /* font-size: 24px; + font-weight: 400; + margin-bottom: 20px; /* Space before other weather details */ + /* line-height: 25.6px; +} */ + +/* .sun-times p { + margin: 0 5px; /* Adjust spacing between sunrise and sunset */ +/* } + +.weather-img { +margin-top: 30px; +} + +.weather-message { + font-family: Montserrat; + font-size: 37px; + font-weight: 700; + line-height: 45.1px; + text-align: left; + padding-left: 20px; + padding-right: 20px; +} */ + + From a104759e2cbd5daa879e8278697de02db585059f Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 29 Sep 2024 14:38:40 +0200 Subject: [PATCH 06/18] added search bar and added event listeners to search on click also changed the city variable from const to let since you now can search on other cities than Stockholm --- assets/design-2/scattered.svg | 5 + assets/design-2/snow.png | Bin 0 -> 2578 bytes assets/design-2/sunset.png | Bin 0 -> 3150 bytes assets/design-2/sunset.svg | 10 + assets/design-2/thunderstorm.png | Bin 0 -> 1616 bytes index.html | 5 + script.js | 308 +++++++++++++++++-------------- style.css | 44 ++++- 8 files changed, 227 insertions(+), 145 deletions(-) create mode 100644 assets/design-2/scattered.svg create mode 100644 assets/design-2/snow.png create mode 100644 assets/design-2/sunset.png create mode 100644 assets/design-2/sunset.svg create mode 100644 assets/design-2/thunderstorm.png diff --git a/assets/design-2/scattered.svg b/assets/design-2/scattered.svg new file mode 100644 index 000000000..6adaa8f7d --- /dev/null +++ b/assets/design-2/scattered.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/design-2/snow.png b/assets/design-2/snow.png new file mode 100644 index 0000000000000000000000000000000000000000..0fe0e7fe8f5e4ab0de774a67c19a90092633824c GIT binary patch literal 2578 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 literal 0 HcmV?d00001 diff --git a/assets/design-2/sunset.svg b/assets/design-2/sunset.svg new file mode 100644 index 000000000..b26b0e006 --- /dev/null +++ b/assets/design-2/sunset.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/assets/design-2/thunderstorm.png b/assets/design-2/thunderstorm.png new file mode 100644 index 0000000000000000000000000000000000000000..39f26f149b1ab3f3367a007fe6c52df837d47e80 GIT binary patch literal 1616 zcmV-W2Cw;vP)M}(LK_4=U?4bpjQK^l2v)r-de{6f2`#$^5 zxo6HFHZ%9!d;aUJeb?T5t+m&_kRwNq96562$Z-sCCGafpG4L(W2kZg10ULp3zW@GI~zFt&#K#{r9h-QxHOIEO)k8-ahM_?j9!E{^fQ8{#snypD|Hb`3l0z*`gK zwW0mD+SOzf=d0t)QsxEVpC|smfZ1dWV>M6NP`e|boJErHH87eC;YBHC^VN{Rvfh%c z$H@q$X>RJ%q#qh4W0!oz31k2-$s!(XqRhu6^9x{$qM1MRx(Dcz1D|@d13NXjoA1^v zjMHjgDWcg7bT(mHsT&vRK{pJ5>;kYJm_}yeP1tP-ai(E`SsJ40ALA$`?N}Zro@2L5J}Vgl@z9Wp0sE2`Ko0*fxL*UD5Y3N37rlcfJwwcgmF z+?n0HvPw(KA};Z!C`-vz-Rs-Eba;}XOmB+~=SRHhYlnPZbKOe9I_o3P@+>Y)5``8U z&c`Ylvcik=zfe+*wI^Jx>=;8iCN@%{u^g_ zu1YKG58M;9)jd1Y-y$xIV>wVuKxW!?8m z9$!kJrQe%@dp#E+P29D33d<$Kilq+L*jY9+E~$z3ts)zu_7W~ti|E|mD(J}npx zod}(wLYoabDiCFGoLYZrplFk7VVz2DDYKA;;EpL|I8A+;es9b6TV*$JL?a zdR@CE0C!J3d(!G~F(prum%m5zT$0?=G-vKs?l2Q@F(sGi^>YEZpVaH8$q<~UWV;u8 z&q|nkxPDf}$$!iYoTucqWx}#Xxfk?P44(-&Psu20u^<5VM*V*c8G}hJUb+h<^b`)U+2>#8lD% O0000=m`q| literal 0 HcmV?d00001 diff --git a/index.html b/index.html index bdc5652fc..3f0417ff8 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,11 @@

          +
          + + + +
          diff --git a/script.js b/script.js index 890563dd3..8f1f1e037 100644 --- a/script.js +++ b/script.js @@ -1,31 +1,13 @@ +// Current weather API +// ea9a90c62aeaaa3811505087d195520e +// Base URL + API key - //Current weather API -//ea9a90c62aeaaa3811505087d195520e -//https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e +// True constants (SNAKECASE) +const API_KEY = "ea9a90c62aeaaa3811505087d195520e"; +const BASE_URL = "https://api.openweathermap.org/data/2.5/weather?q="; +const FORECAST_BASE_URL = "https://api.openweathermap.org/data/2.5/forecast?q="; -// base URL + api key - -// //Forecast API -// https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e - - -//Current Weather API -//True constants (SNAKECASE) -const API_KEY = "ea9a90c62aeaaa3811505087d195520e" -const BASE_URL = "https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=" - -const URL = (`${BASE_URL}${API_KEY}`) - -console.log (URL) - - //Forecast Weather API -//True constants (SNAKECASE) -const FORECAST_API_KEY = "ea9a90c62aeaaa3811505087d195520e" -const FORECAST_BASE_URL = "https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=" - -const FORECAST_URL = (`${FORECAST_BASE_URL}${API_KEY}`) - -console.log (FORECAST_URL) +let CITY = "Stockholm"; // Dynamic city variable // DOM Selectors const temperatureDisplay = document.getElementById("temperature"); @@ -34,120 +16,164 @@ const sunriseDisplay = document.getElementById("sunriseTime"); const sunsetDisplay = document.getElementById("sunsetTime"); const weatherImg = document.getElementById("weatherImage"); const weatherMsg = document.getElementById("weatherMessage"); -const forecast = document.getElementById("forecastList"); - -// Fetch weather data -fetch(URL) - .then(response => response.json()) - .then(data => { - const stockholmTemp = data.main.temp; - const weatherCondition = data.weather[0].description; // Get the weather condition - const roundedTemp = Math.round(stockholmTemp); - const sunrise = data.sys.sunrise; - const sunset = data.sys.sunset; - - // Display the temperature and condition - temperatureDisplay.innerText = `${roundedTemp}°C`; - conditionDisplay.innerText = `${weatherCondition}`; - - // Convert and display sunrise and sunset times - const convertUnixToTime = (unixTimestamp) => { - const date = new Date(unixTimestamp * 1000); // Multiply by 1000 to convert to milliseconds - const hours = date.getHours(); - const minutes = String(date.getMinutes()).padStart(2, '0'); // Pad single-digit minutes with a zero - return `${hours}:${minutes}`; // Return time in HH:MM format - } - - const sunriseTime = convertUnixToTime(sunrise); - const sunsetTime = convertUnixToTime(sunset); - sunriseDisplay.innerText = `${sunriseTime}`; - sunsetDisplay.innerText = `${sunsetTime}`; - - // Call the updateUI function to change background color and message - updateUI(roundedTemp, weatherCondition); - - }) - .catch(error => console.error('Error fetching weather data:', error)); // Handle errors - - // Fetch Forecast weather data - - fetch(FORECAST_URL) - .then (response=> response.json()) - .then(forecastData => { - - // Clear previous forecast list if necessary - forecastList.innerHTML = '' - - - // Loop through the first 7 days of the forecast - for (let i = 0; i < 5; i++) { - const forecast = forecastData.list[i * 8 + 6]; // Get the forecast for 12 PM each day - - // Check if the forecast exists - if (forecast) { - // Get the week day and temperature - const weekDay = new Date(forecast.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' }); - const temperature = Math.round(forecast.main.temp); - - // Create a new list item - const listItem = document.createElement('li'); - listItem.textContent = `${weekDay}: ${temperature}°C`; - - // Append the list item to the forecast list - forecastList.appendChild(listItem); - - console.log(forecast) - } - } - }) - - - - - -.catch(error => console.error('Error fetching forecast data:', error)); - - - function updateUI(temperature, weatherDescription) { - const weatherContainer = document.getElementById("weatherContainer"); - let weatherMessage //Use let since the variable weatherMessage will change depending on weather - - // Update background and text color based on weather condition - if (weatherDescription.toLowerCase().includes("rain") || - weatherDescription.toLowerCase().includes("drizzle")|| - weatherDescription.toLowerCase().includes("mist")) { - weatherContainer.style.backgroundColor = "#BDE8FA" // Blue for rain - weatherContainer.style.color = "#164A68" // Rainy font color - weatherImg.src = "assets/design-2/noun_Umbrella.svg" - weatherMessage = "Don’t forget your umbrella.
          It’s wet in Stockholm today." - } else if (weatherDescription.toLowerCase().includes("few clouds")) { - weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for clear sky - weatherContainer.style.color = "#2A5510" // Green font color - weatherImg.src = "assets/design-2/noun_Sunglasses.svg" - weatherMessage = `Get your sunnies on. There are a few clouds, but it's still a lovely day in Stockholm.` - } else if (weatherDescription.toLowerCase().includes("scattered clouds")) { - weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for clear sky - weatherContainer.style.color = "#2A5510" // Green font color - weatherImg.src = "assets/design-2/noun_Sunglasses.svg" - weatherMessage = `There are some scattered clouds, but it's still a lovely day in Stockholm.` - } else if (weatherDescription.toLowerCase().includes("clear")) { - weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for clear sky - weatherContainer.style.color = "#2A5510" // Green font color - weatherImg.src = "assets/design-2/noun_Sunglasses.svg" - weatherMessage = `Get your sunnies on.
          Stockholm is looking rather great today.` - } else if (weatherDescription.toLowerCase().includes("clouds"|| weatherDescription.toLowerCase().includes("fog") - || weatherDescription.toLowerCase().includes("haze")|| weatherDescription.toLowerCase().includes("snow"))) { - weatherContainer.style.backgroundColor = "#FFFFFF"; // White background - weatherContainer.style.color = "#F47775" // Orange font color - weatherImg.src = "assets/design-2/noun_Cloud.svg" - weatherMessage = "Light a fire and get cosy.
          Stockholm is looking grey today." - } else { - weatherContainer.style.backgroundColor = "white"; // Fallback background - weatherContainer.style.color = "black"; // Fallback font color - weatherImg.src = "assets/design-2/sad-face-3.svg" - weatherMessage = `The weather description cannot be picked up at the moment` +const forecastList = document.getElementById("forecastList"); +const searchButton = document.getElementById("searchButton"); +const cityInput = document.getElementById("cityInput"); + +// Function to fetch weather data +function fetchWeatherData() { + const URL = `${BASE_URL}${CITY}&units=metric&APPID=${API_KEY}`; + const FORECAST_URL = `${FORECAST_BASE_URL}${CITY}&units=metric&APPID=${API_KEY}`; + + // Fetch weather data + fetch(URL) + .then(response => response.json()) + .then(data => { + if (!data || data.cod !== 200) { + throw new Error('City not found'); + } + const stockholmTemp = data.main.temp; + const weatherCondition = data.weather[0].description; + const roundedTemp = Math.round(stockholmTemp); + const sunrise = data.sys.sunrise; + const sunset = data.sys.sunset; + + temperatureDisplay.innerText = `${roundedTemp}°C`; + conditionDisplay.innerText = `${weatherCondition}`; + + const convertUnixToTime = (unixTimestamp) => { + const date = new Date(unixTimestamp * 1000); + const hours = date.getHours(); + const minutes = String(date.getMinutes()).padStart(2, '0'); + return `${hours}:${minutes}`; + } + + const sunriseTime = convertUnixToTime(sunrise); + const sunsetTime = convertUnixToTime(sunset); + sunriseDisplay.innerText = `${sunriseTime}`; + sunsetDisplay.innerText = `${sunsetTime}`; + + updateUI(roundedTemp, weatherCondition); + }) + .catch(error => console.error('Error fetching weather data:', error)); + + // Fetch Forecast weather data + fetch(FORECAST_URL) + .then(response => response.json()) + .then(forecastData => { + forecastList.innerHTML = ''; + + for (let i = 1; i <= 5; i++) { + const indexForNoon = (i * 8) + 1; + const forecast = forecastData.list[indexForNoon]; + + if (forecast) { + const weekDay = new Date(forecast.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' }); + const temperature = Math.round(forecast.main.temp); + + const listItem = document.createElement('li'); + listItem.textContent = `${weekDay}: ${temperature}°C`; + forecastList.appendChild(listItem); + } + } + }) + .catch(error => console.error('Error fetching forecast data:', error)); +} + +// Initial fetch for the default city +fetchWeatherData(); + +// Event listener for the search button +searchButton.addEventListener("click", () => { + CITY = cityInput.value.trim(); // Update city variable with input value + if (CITY) { + fetchWeatherData(); // Fetch new weather data for the entered city + } +}); + +// Event listener for the Enter key in the input field +cityInput.addEventListener("keypress", (event) => { + if (event.key === "Enter") { // Check if the pressed key is Enter + searchButton.click(); // Trigger the click event of the search button + } +}); + +function updateUI(temperature, weatherDescription) { + const weatherContainer = document.getElementById("weatherContainer"); + const searchButton = document.getElementById ("searchButton") + const currentTime = new Date(); // Get the current time + const sunset = new Date(sunsetTime * 1000); // Convert sunset time (already fetched) to Date object + let weatherMessage; // Use let since the variable weatherMessage will change depending on weather + + // Update background and text color based on weather condition + if (weatherDescription.toLowerCase().includes("rain") || + weatherDescription.toLowerCase().includes("drizzle") || + weatherDescription.toLowerCase().includes("mist")) { + weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for rain + weatherContainer.style.color = "#164A68"; // Rainy font color + searchButton.style.backgroundColor ="#164A68" + weatherImg.src = "assets/design-2/noun_Umbrella.svg"; + weatherMessage = `Don’t forget your umbrella.
          It’s wet in ${CITY} today.`; + + } else if (weatherDescription.toLowerCase().includes("few clouds")) { + weatherContainer.style.backgroundColor = "#F7E9B9"; // Yellow for clear sky + weatherContainer.style.color = "#2A5510"; // Green font color + weatherImg.src = "assets/design-2/noun_Sunglasses.svg"; + weatherMessage = `Get your sunnies on. There are a few clouds, but it's still a lovely day in ${CITY}.`; + + } else if (weatherDescription.toLowerCase().includes("scattered clouds")) { + weatherContainer.style.backgroundColor = "#F7E9B9"; // Yellow for clear sky + weatherContainer.style.color = "#2A5510"; // Green font color + searchButton.style.backgroundColor ="#2A5510" + weatherImg.src = "assets/design-2/noun_cloud.svg"; + weatherMessage = `There are some scattered clouds, but it's still a lovely day in ${CITY}.`; + } else if (weatherDescription.toLowerCase().includes("clear")) { + // Daytime clear sky + weatherContainer.style.backgroundColor = "#F7E9B9"; // Yellow for clear sky + weatherContainer.style.color = "#2A5510"; // Green font color + searchButton.style.backgroundColor ="#2A5510" + weatherImg.src = "assets/design-2/noun_Sunglasses.svg"; + weatherMessage = `Get your sunnies on.
          ${CITY} is looking rather great today.`; + + // Check if it's after sunset for clear skies + if (currentTime > sunset) { + // Sunset condition + weatherContainer.style.backgroundColor = "#F7E9B9"; // Keep the yellow for sunset + weatherContainer.style.color = "#F47775"; // Orange font color + searchButton.style.backgroundColor ="#F47775" + weatherImg.src = "assets/design-2/sunset.png"; // Change to sunset image + weatherMessage = `The sun has set.
          Enjoy the evening and night in ${CITY}!`; } - - weatherMsg.innerHTML = weatherMessage; // Update the weather message display - } \ No newline at end of file + } else if (weatherDescription.toLowerCase().includes("clouds") || + weatherDescription.toLowerCase().includes("fog") || + weatherDescription.toLowerCase().includes("haze")) { + weatherContainer.style.backgroundColor = "#FFFFFF"; // White background + weatherContainer.style.color = "#F47775"; // Orange font color + searchButton.style.backgroundColor ="#F47775" + weatherImg.src = "assets/design-2/noun_Cloud.svg"; + weatherMessage = `Light a fire and get cosy.
          ${CITY} is looking grey today.`; + + } else if (weatherDescription.toLowerCase().includes("snow")) { + // Daytime clear sky + weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for cold weather + weatherContainer.style.color = "#FFFFFF"; // White font color + searchButton.style.backgroundColor ="#164A68" //Blue font color + weatherImg.src = "assets/design-2/snow.png"; + weatherMessage = `It is snowing today in ${CITY}!
          Put on your winter clothes and get ready to play in the snow.`; + + } else if (weatherDescription.toLowerCase().includes("thunderstorm")) { + // Daytime clear sky + weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for storm + weatherContainer.style.color = "#164A68"; // Blue font color + weatherImg.src = "assets/design-2/thunderstorm.png"; + weatherMessage = `Stormy weather ahead in ${CITY} today!
          Seek shelter and avoid outdoor activities.`; + } else { + weatherContainer.style.backgroundColor = "white"; // Fallback background + weatherContainer.style.color = "black"; // Fallback font color + weatherImg.src = "assets/design-2/sad-face-3.svg"; + weatherMessage = `The weather description cannot be picked up at the moment.`; + } + + weatherMsg.innerHTML = weatherMessage; // Update the weather message display +} diff --git a/style.css b/style.css index 4727b52de..72b849daf 100644 --- a/style.css +++ b/style.css @@ -12,6 +12,8 @@ body { padding-top: 50px; min-height: 100vh; /* Ensure it takes up the full height of the viewport */ padding-left: 20px; /* Optional: padding to the left for overall container */ + overflow: hidden; + } /* Container for condition and temperature */ @@ -48,6 +50,7 @@ body { margin-top: 30px; max-width: 100%; /* Ensure image doesn't exceed container width */ height: auto; /* Maintain aspect ratio */ + } .weather-message { @@ -56,7 +59,7 @@ body { font-weight: 700; line-height: 45.1px; text-align: left; - padding-right: 20px; + padding-right: 10px; } .forecast-wrapper { @@ -64,9 +67,8 @@ body { flex-direction: column; /* Stack items vertically */ justify-content: flex-start; align-items: flex-start; /* Align items to the left */ - padding: 10px; /* Optional: Add some padding */ - min-height: 200px; /* Optional: Set a minimum height */ position: relative; /* Optional: Positioning context for child elements */ + padding-right: 10px; } #forecastList { @@ -75,8 +77,43 @@ body { margin: 0; /* Remove default margin */ font-size: 21px; line-height: 36px; + gap:20px +} + +li { + display: flex; + justify-content: space-between; + position: relative; +} + +#searchContainer { + display: flex; /* Align items horizontally */ + justify-content: flex-start; /* Align items to the left */ + align-items: center; /* Vertically center the items */ + padding-top: 20px; } +label { + font-size: 18px; + margin-right: 15px; /* Space between the label and input */ +} + +#cityInput { + padding: 10px; /* Padding for the input field */ + border: 1px solid #ccc; /* Border around the input field */ + border-radius: 4px; /* Rounded corners */ + margin-right: 10px; /* Space between the input and search button */ + font-family: Montserrat; +} + +#searchButton { + padding: 10px; /* Padding for the search button */ + color: white; + border: none; + border-radius: 4px; /* Rounded corners for the button */ + cursor: pointer; /* Pointer cursor on hover */ + font-family: Montserrat; +} /* Media Queries */ @@ -98,7 +135,6 @@ body { max-width: 300px; /* Limit max width for desktop */ height: auto; /* Maintain aspect ratio */ margin-top: 30px; - margin-left: 0; /* Center alignment in container */ } } From 16a0a790454dd7e89751bbc722a87941550a100c Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 29 Sep 2024 14:50:11 +0200 Subject: [PATCH 07/18] added more weather pictures and changed some texts in JS --- script.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 8f1f1e037..d7473a74f 100644 --- a/script.js +++ b/script.js @@ -157,15 +157,16 @@ function updateUI(temperature, weatherDescription) { } else if (weatherDescription.toLowerCase().includes("snow")) { // Daytime clear sky weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for cold weather - weatherContainer.style.color = "#FFFFFF"; // White font color + weatherContainer.style.color = "#164A68"; // Blue font color searchButton.style.backgroundColor ="#164A68" //Blue font color weatherImg.src = "assets/design-2/snow.png"; - weatherMessage = `It is snowing today in ${CITY}!
          Put on your winter clothes and get ready to play in the snow.`; + weatherMessage = `It is snowing today in ${CITY}.
          Put on your winter clothes and get ready to play in the snow!`; } else if (weatherDescription.toLowerCase().includes("thunderstorm")) { // Daytime clear sky weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for storm weatherContainer.style.color = "#164A68"; // Blue font color + searchButton.style.backgroundColor ="#164A68" //Blue font color weatherImg.src = "assets/design-2/thunderstorm.png"; weatherMessage = `Stormy weather ahead in ${CITY} today!
          Seek shelter and avoid outdoor activities.`; } else { From 960089ad12baa68a9758c2c34ac33c677f514c3a Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 29 Sep 2024 15:05:54 +0200 Subject: [PATCH 08/18] small adjustments --- index.html | 2 +- script.js | 9 ++++++--- style.css | 3 ++- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 3f0417ff8..d91469c18 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@
            - +
            diff --git a/script.js b/script.js index d7473a74f..c4b2f19ae 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,8 @@ // Current weather API // ea9a90c62aeaaa3811505087d195520e // Base URL + API key +//https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e +//https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e // True constants (SNAKECASE) const API_KEY = "ea9a90c62aeaaa3811505087d195520e"; @@ -25,7 +27,7 @@ function fetchWeatherData() { const URL = `${BASE_URL}${CITY}&units=metric&APPID=${API_KEY}`; const FORECAST_URL = `${FORECAST_BASE_URL}${CITY}&units=metric&APPID=${API_KEY}`; - // Fetch weather data + // Fetch current weather data fetch(URL) .then(response => response.json()) .then(data => { @@ -40,14 +42,15 @@ function fetchWeatherData() { temperatureDisplay.innerText = `${roundedTemp}°C`; conditionDisplay.innerText = `${weatherCondition}`; - + + // Function to convert UNIX timestamp to readable time format (24-hour clock) const convertUnixToTime = (unixTimestamp) => { const date = new Date(unixTimestamp * 1000); const hours = date.getHours(); const minutes = String(date.getMinutes()).padStart(2, '0'); return `${hours}:${minutes}`; } - + // Convert and display sunrise and sunset times const sunriseTime = convertUnixToTime(sunrise); const sunsetTime = convertUnixToTime(sunset); sunriseDisplay.innerText = `${sunriseTime}`; diff --git a/style.css b/style.css index 72b849daf..6919b06a6 100644 --- a/style.css +++ b/style.css @@ -12,7 +12,7 @@ body { padding-top: 50px; min-height: 100vh; /* Ensure it takes up the full height of the viewport */ padding-left: 20px; /* Optional: padding to the left for overall container */ - overflow: hidden; + overflow-x: hidden; } @@ -104,6 +104,7 @@ label { border-radius: 4px; /* Rounded corners */ margin-right: 10px; /* Space between the input and search button */ font-family: Montserrat; + font-weight: 600; } #searchButton { From fb67fcae9a9a5789faf4e92c2e7573c97944c1c4 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 29 Sep 2024 15:16:04 +0200 Subject: [PATCH 09/18] small fix --- script.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/script.js b/script.js index c4b2f19ae..ba7b43051 100644 --- a/script.js +++ b/script.js @@ -158,7 +158,6 @@ function updateUI(temperature, weatherDescription) { weatherMessage = `Light a fire and get cosy.
            ${CITY} is looking grey today.`; } else if (weatherDescription.toLowerCase().includes("snow")) { - // Daytime clear sky weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for cold weather weatherContainer.style.color = "#164A68"; // Blue font color searchButton.style.backgroundColor ="#164A68" //Blue font color @@ -166,7 +165,6 @@ function updateUI(temperature, weatherDescription) { weatherMessage = `It is snowing today in ${CITY}.
            Put on your winter clothes and get ready to play in the snow!`; } else if (weatherDescription.toLowerCase().includes("thunderstorm")) { - // Daytime clear sky weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for storm weatherContainer.style.color = "#164A68"; // Blue font color searchButton.style.backgroundColor ="#164A68" //Blue font color From 245d0f1f4222a761da242babed9fc61525e8b9cd Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 29 Sep 2024 15:43:37 +0200 Subject: [PATCH 10/18] updated title and readme file --- README.md | 12 +++++++----- index.html | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index f8b15f4cb..a7bfeb019 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ # 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. +This week the project was to create a weather app by using APIs and using different functions to retrieve and convert the data, such as fetch and convert unix time. ## 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? +I started with adding the HTML and CSS code. Then I moved on to JS where I added the API and console.logged it. Then I moved on to adding the DOM selectors and created the first function to fetch the current weather data and sunset/sunrise time. After this was achived I moved on to converting the sunset/sunrise time. I needed help from chatGPT to achieve this and also how to get the forecast data which was not as straight forward as the current weather data. + +Then I also managed to change the background color, color (fonts) and images depending on weather description, for this I used if/if else statements. + +If I had more time I would also look into the geolocation 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://checkthe-weather.netlify.app/ diff --git a/index.html b/index.html index d91469c18..692e4c17d 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - Weather or Not + Check the Weather
            From a2089a54ec053bae4cf3bbe2dbcaafb6244d5e18 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 29 Sep 2024 15:48:42 +0200 Subject: [PATCH 11/18] updated color button in JS --- script.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/script.js b/script.js index ba7b43051..ddb85cf41 100644 --- a/script.js +++ b/script.js @@ -121,6 +121,7 @@ function updateUI(temperature, weatherDescription) { } else if (weatherDescription.toLowerCase().includes("few clouds")) { weatherContainer.style.backgroundColor = "#F7E9B9"; // Yellow for clear sky weatherContainer.style.color = "#2A5510"; // Green font color + searchButton.style.backgroundColor ="#2A5510" weatherImg.src = "assets/design-2/noun_Sunglasses.svg"; weatherMessage = `Get your sunnies on. There are a few clouds, but it's still a lovely day in ${CITY}.`; @@ -173,6 +174,7 @@ function updateUI(temperature, weatherDescription) { } else { weatherContainer.style.backgroundColor = "white"; // Fallback background weatherContainer.style.color = "black"; // Fallback font color + searchButton.style.backgroundColor ="black" //Blue font color weatherImg.src = "assets/design-2/sad-face-3.svg"; weatherMessage = `The weather description cannot be picked up at the moment.`; } From 40a91b8990d3a8d6aa1ba4e0a633294f0e9f80ac Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 29 Sep 2024 15:59:43 +0200 Subject: [PATCH 12/18] small fix button font --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 6919b06a6..26ef66686 100644 --- a/style.css +++ b/style.css @@ -104,7 +104,7 @@ label { border-radius: 4px; /* Rounded corners */ margin-right: 10px; /* Space between the input and search button */ font-family: Montserrat; - font-weight: 600; + font-weight: 700; } #searchButton { From 9ccfec67f483fb032dc3552940f97bed5e1f9b29 Mon Sep 17 00:00:00 2001 From: Anna Hansen <157376951+Anna2024WebDev@users.noreply.github.com> Date: Sun, 29 Sep 2024 20:24:12 +0200 Subject: [PATCH 13/18] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a7bfeb019..1872594b3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Weather App -This week the project was to create a weather app by using APIs and using different functions to retrieve and convert the data, such as fetch and convert unix time. +This week the project was to create a weather app by using APIs and using different methods to retrieve and convert the data, such as fetch and convert unix time. ## The problem From 7998b890bfefce9e6f3ed2ee75deba7258678046 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Mon, 30 Sep 2024 14:24:59 +0200 Subject: [PATCH 14/18] css fix --- style.css | 208 +++--------------------------------------------------- 1 file changed, 8 insertions(+), 200 deletions(-) diff --git a/style.css b/style.css index 26ef66686..b42b8809d 100644 --- a/style.css +++ b/style.css @@ -11,7 +11,7 @@ body { align-items: flex-start; /* Align items to the left */ padding-top: 50px; min-height: 100vh; /* Ensure it takes up the full height of the viewport */ - padding-left: 20px; /* Optional: padding to the left for overall container */ + padding-left: 10px; /* Optional: padding to the left for overall container */ overflow-x: hidden; } @@ -68,7 +68,6 @@ body { justify-content: flex-start; align-items: flex-start; /* Align items to the left */ position: relative; /* Optional: Positioning context for child elements */ - padding-right: 10px; } #forecastList { @@ -91,6 +90,7 @@ li { justify-content: flex-start; /* Align items to the left */ align-items: center; /* Vertically center the items */ padding-top: 20px; + padding-bottom: 20px; } label { @@ -99,21 +99,23 @@ label { } #cityInput { - padding: 10px; /* Padding for the input field */ + padding: 8px; /* Padding for the input field */ border: 1px solid #ccc; /* Border around the input field */ border-radius: 4px; /* Rounded corners */ - margin-right: 10px; /* Space between the input and search button */ + margin-right: 5px; /* Space between the input and search button */ font-family: Montserrat; - font-weight: 700; + font-weight: 500; + font-size: 16px; } #searchButton { - padding: 10px; /* Padding for the search button */ + padding: 8px 12px; /* Padding for the search button */ color: white; border: none; border-radius: 4px; /* Rounded corners for the button */ cursor: pointer; /* Pointer cursor on hover */ font-family: Montserrat; + flex-shrink: 0; } /* Media Queries */ @@ -138,197 +140,3 @@ label { margin-top: 30px; } } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -/* body { - font-family: Montserrat; -} - -.weather-container { -display: flex; -flex-direction: column; /* Stack items vertically */ -/* justify-content: flex-start; -padding-top: 50px; -align-items: center; -height: 100vh; /* Ensure it takes up the full height of the viewport */ -/* } - - -/* Container for condition and temperature */ -/* .temperature-info { - display: flex; - justify-content: center; - align-items: center; - font-size: 24px; - font-weight: 400; - margin-left: 45px; - line-height: 25.6px; -} - - .temperature-info p { - margin: 0 5px; -} - -/* Container for sunrise and sunset */ -/* .sun-times { - display: flex; - flex-direction: column; - align-items: center; /* Center-align sunrise and sunset */ - /* font-size: 24px; - font-weight: 400; - margin-bottom: 20px; /* Space before other weather details */ - /* line-height: 25.6px; -} */ - -/* .sun-times p { - margin: 0 5px; /* Adjust spacing between sunrise and sunset */ -/* } - -.weather-img { -margin-top: 30px; -} - -.weather-message { - font-family: Montserrat; - font-size: 37px; - font-weight: 700; - line-height: 45.1px; - text-align: left; - padding-left: 20px; - padding-right: 20px; -} */ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -/* -body { - font-family: Montserrat; - background: #F7E9B9; -} - -.weather-container { - display: flex; - justify-content: center; - align-items: center; -} - - -/* Container for condition and temperature */ -/* .temperature-info { - display: flex; - /* justify-content: center; */ - /* align-items: center; - font-size: 21px; - font-weight: 400; - margin-bottom: 10px; - margin-left: 40px; - margin-top: 50px; - color: #2A5510; - line-height: 25.6px; - -} */ -/* - .temperature-info p { - margin: 0 5px; -} */ - - /* Container for sunrise and sunset */ - /* .sun-times { - align-items: center; /* Center-align sunrise and sunset */ - /* justify-content: center; */ - /* font-size: 21px; - font-weight: 400; - margin-bottom: 20px; /* Space before other weather details */ - /* margin-left: 47px; - color: #2A5510; - line-height: 25.6px; -} */ -/* - .sun-times p { - margin: 5px 0; /* Adjust spacing between sunrise and sunset */ -/* } - -/* .weather-img { - display: flex; - /* justify-content: center; */ - /* align-items: center; - margin-top: 150px; - margin-left: 47px; -} */ - - - - \ No newline at end of file From 39c41317107c3168941a204a0a950616db1894e6 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Mon, 30 Sep 2024 15:22:08 +0200 Subject: [PATCH 15/18] fixed sunset/sunrise timezone offset --- script.js | 17 +++++++++-------- style.css | 2 +- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/script.js b/script.js index ddb85cf41..3598bceb6 100644 --- a/script.js +++ b/script.js @@ -32,27 +32,28 @@ function fetchWeatherData() { .then(response => response.json()) .then(data => { if (!data || data.cod !== 200) { - throw new Error('City not found'); + throw new Error('City not found') } const stockholmTemp = data.main.temp; const weatherCondition = data.weather[0].description; const roundedTemp = Math.round(stockholmTemp); const sunrise = data.sys.sunrise; const sunset = data.sys.sunset; + const timezoneOffset = data.timezone; // Timezone offset in seconds temperatureDisplay.innerText = `${roundedTemp}°C`; conditionDisplay.innerText = `${weatherCondition}`; // Function to convert UNIX timestamp to readable time format (24-hour clock) - const convertUnixToTime = (unixTimestamp) => { - const date = new Date(unixTimestamp * 1000); - const hours = date.getHours(); - const minutes = String(date.getMinutes()).padStart(2, '0'); + const convertUnixToTime = (unixTimestamp, timezoneOffset) => { + const date = new Date((unixTimestamp + timezoneOffset)* 1000); + const hours = date.getUTCHours(); + const minutes = String(date.getUTCMinutes()).padStart(2, '0'); return `${hours}:${minutes}`; } - // Convert and display sunrise and sunset times - const sunriseTime = convertUnixToTime(sunrise); - const sunsetTime = convertUnixToTime(sunset); + // Convert and display sunrise and sunset times with timezone offset (so it is local time showing for the selected city) + const sunriseTime = convertUnixToTime(sunrise, timezoneOffset); + const sunsetTime = convertUnixToTime(sunset, timezoneOffset); sunriseDisplay.innerText = `${sunriseTime}`; sunsetDisplay.innerText = `${sunsetTime}`; diff --git a/style.css b/style.css index b42b8809d..c7d498759 100644 --- a/style.css +++ b/style.css @@ -109,7 +109,7 @@ label { } #searchButton { - padding: 8px 12px; /* Padding for the search button */ + padding: 10px 12px; /* Padding for the search button */ color: white; border: none; border-radius: 4px; /* Rounded corners for the button */ From 7eb361ba8dfa1f62d426c10ee743a467f3a76045 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Mon, 30 Sep 2024 17:31:29 +0200 Subject: [PATCH 16/18] added min/max temp --- script.js | 47 ++++++++++++++++++++++++++++++++++++----------- style.css | 16 +++++++++++++++- 2 files changed, 51 insertions(+), 12 deletions(-) diff --git a/script.js b/script.js index 3598bceb6..40463cdcb 100644 --- a/script.js +++ b/script.js @@ -61,26 +61,51 @@ function fetchWeatherData() { }) .catch(error => console.error('Error fetching weather data:', error)); - // Fetch Forecast weather data - fetch(FORECAST_URL) + fetch(FORECAST_URL) .then(response => response.json()) .then(forecastData => { forecastList.innerHTML = ''; - + + const today = new Date(); + + // Loop through the next 5 days for (let i = 1; i <= 5; i++) { - const indexForNoon = (i * 8) + 1; - const forecast = forecastData.list[indexForNoon]; - - if (forecast) { - const weekDay = new Date(forecast.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' }); - const temperature = Math.round(forecast.main.temp); - + const forecastDate = new Date(today); + forecastDate.setDate(today.getDate() + i); + const forecastDateString = forecastDate.toISOString().split('T')[0]; + + // Filter forecasts for this specific date + const dailyForecasts = forecastData.list.filter(item => { + const itemDate = new Date(item.dt * 1000).toISOString().split('T')[0]; + return itemDate === forecastDateString; + }); + + if (dailyForecasts.length > 0) { + // Initialize min and max temperature variables + let minTemp = Infinity; + let maxTemp = -Infinity; + + // Calculate min and max temperatures for the day + dailyForecasts.forEach(item => { + const temp = Math.round(item.main.temp); + + if (temp < minTemp) { + minTemp = temp; + } + if (temp > maxTemp) { + maxTemp = temp; + } + }); + + const weekDay = forecastDate.toLocaleDateString('en-US', { weekday: 'long' }); + const listItem = document.createElement('li'); - listItem.textContent = `${weekDay}: ${temperature}°C`; + listItem.innerHTML = `${weekDay}: ${minTemp} / ${maxTemp}°C`; forecastList.appendChild(listItem); } } }) + .catch(error => console.error('Error fetching forecast data:', error)); } diff --git a/style.css b/style.css index c7d498759..542b5528a 100644 --- a/style.css +++ b/style.css @@ -82,7 +82,21 @@ body { li { display: flex; justify-content: space-between; - position: relative; + /* margin-bottom: 15px; Space between days */ + font-size: 20px; + line-height: 1.6; +} + +.weekday { + width: 100px; /* Set a fixed width for all weekday names */ +} + +.min-max { + display: flex; +} + +.min-temp { + margin-left: 10px; } #searchContainer { From 03877ea023860b670972479317e3feab15357570 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Thu, 3 Oct 2024 22:53:08 +0200 Subject: [PATCH 17/18] updated HTML and JS indentation, added new date object to be able to set if statement for night styling and changed variable from CITY to city (camelCase) --- .vscode/settings.json | 2 +- assets/design-2/moonlight.png | Bin 0 -> 2562 bytes assets/design-2/sunset.svg | 10 - index.html | 76 ++++---- script.js | 343 +++++++++++++++++----------------- style.css | 146 +++++++++------ 6 files changed, 302 insertions(+), 275 deletions(-) create mode 100644 assets/design-2/moonlight.png delete mode 100644 assets/design-2/sunset.svg diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f3a2913e..f673a71b7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/assets/design-2/moonlight.png b/assets/design-2/moonlight.png new file mode 100644 index 0000000000000000000000000000000000000000..f2a534b40f5174409a8472e3033730a546c36931 GIT binary patch literal 2562 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 Y0cPMn;;Gm-w*UYD07*qoM6N<$g4mGiRsaA1 literal 0 HcmV?d00001 diff --git a/assets/design-2/sunset.svg b/assets/design-2/sunset.svg deleted file mode 100644 index b26b0e006..000000000 --- a/assets/design-2/sunset.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/index.html b/index.html index 692e4c17d..3298e4135 100644 --- a/index.html +++ b/index.html @@ -1,48 +1,44 @@ + - - - Weather or Not - - - - + + + Weather or Not + + + + Check the Weather - -
            -
            -
            -

            -

            |

            -

            -
            - -
            -

            sunrise

            -

            sunset

            -
            - Weather Image -

            -
            -
              -
              - - - -
              -
              -
              - - - - - - + +
              +
              +
              +

              +

              |

              +

              +
              + +
              +

              sunrise

              +

              sunset

              +
              + Weather Image +

              +
              +
                +
                + + + +
                +
                +
                + - - - + + \ No newline at end of file diff --git a/script.js b/script.js index 40463cdcb..22eca3c25 100644 --- a/script.js +++ b/script.js @@ -5,205 +5,206 @@ //https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e // True constants (SNAKECASE) -const API_KEY = "ea9a90c62aeaaa3811505087d195520e"; -const BASE_URL = "https://api.openweathermap.org/data/2.5/weather?q="; -const FORECAST_BASE_URL = "https://api.openweathermap.org/data/2.5/forecast?q="; +const API_KEY = "ea9a90c62aeaaa3811505087d195520e" +const BASE_URL = "https://api.openweathermap.org/data/2.5/weather?q=" +const FORECAST_BASE_URL = "https://api.openweathermap.org/data/2.5/forecast?q=" -let CITY = "Stockholm"; // Dynamic city variable +let city = "Stockholm" // Dynamic city variable // DOM Selectors -const temperatureDisplay = document.getElementById("temperature"); -const conditionDisplay = document.getElementById("condition"); -const sunriseDisplay = document.getElementById("sunriseTime"); -const sunsetDisplay = document.getElementById("sunsetTime"); -const weatherImg = document.getElementById("weatherImage"); -const weatherMsg = document.getElementById("weatherMessage"); -const forecastList = document.getElementById("forecastList"); -const searchButton = document.getElementById("searchButton"); -const cityInput = document.getElementById("cityInput"); +const temperatureDisplay = document.getElementById("temperature") +const conditionDisplay = document.getElementById("condition") +const sunriseDisplay = document.getElementById("sunriseTime") +const sunsetDisplay = document.getElementById("sunsetTime") +const weatherImg = document.getElementById("weatherImage") +const weatherMsg = document.getElementById("weatherMessage") +const forecastList = document.getElementById("forecastList") +const searchButton = document.getElementById("searchButton") +const cityInput = document.getElementById("cityInput") // Function to fetch weather data function fetchWeatherData() { - const URL = `${BASE_URL}${CITY}&units=metric&APPID=${API_KEY}`; - const FORECAST_URL = `${FORECAST_BASE_URL}${CITY}&units=metric&APPID=${API_KEY}`; - - // Fetch current weather data - fetch(URL) - .then(response => response.json()) - .then(data => { - if (!data || data.cod !== 200) { - throw new Error('City not found') + const URL = `${BASE_URL}${city}&units=metric&APPID=${API_KEY}` + const FORECAST_URL = `${FORECAST_BASE_URL}${city}&units=metric&APPID=${API_KEY}` + + // Fetch current weather data + fetch(URL) + .then(response => response.json()) + .then(data => { + if (!data || data.cod !== 200) { + throw new Error('City not found') + } + const stockholmTemp = data.main.temp + const weatherCondition = data.weather[0].description + const roundedTemp = Math.round(stockholmTemp) + const sunrise = data.sys.sunrise + const sunset = data.sys.sunset + const timezoneOffset = data.timezone // Timezone offset in seconds + + temperatureDisplay.innerText = `${roundedTemp}°C` + conditionDisplay.innerText = `${weatherCondition}` + + // Function to convert UNIX timestamp to readable time format (24-hour clock) + const convertUnixToTime = (unixTimestamp, timezoneOffset) => { + const date = new Date((unixTimestamp + timezoneOffset) * 1000) + const hours = date.getUTCHours() + const minutes = String(date.getUTCMinutes()).padStart(2, '0') + return `${hours}:${minutes}` + } + + // Convert and display sunrise and sunset times with timezone offset (so it is local time showing for the selected city) + const sunriseTime = convertUnixToTime(sunrise, timezoneOffset) + const sunsetTime = convertUnixToTime(sunset, timezoneOffset) + sunriseDisplay.innerText = `${sunriseTime}` + sunsetDisplay.innerText = `${sunsetTime}` + + updateUI(roundedTemp, weatherCondition, sunset) + }) + .catch(error => console.error('Error fetching weather data:', error)) + + // Fetch 5-day forecast data + fetch(FORECAST_URL) + .then(response => response.json()) + .then(forecastData => { + forecastList.innerHTML = '' + + const today = new Date() + + // Loop through the next 5 days + for (let i = 1; i <= 5; i++) { + const forecastDate = new Date(today) + forecastDate.setDate(today.getDate() + i) + const forecastDateString = forecastDate.toISOString().split('T')[0] + + // Filter forecasts for this specific date + const dailyForecasts = forecastData.list.filter(item => { + const itemDate = new Date(item.dt * 1000).toISOString().split('T')[0] + return itemDate === forecastDateString; + }); + + if (dailyForecasts.length > 0) { + // Initialize min and max temperature variables + let minTemp = Infinity + let maxTemp = -Infinity + + // Calculate min and max temperatures for the day + dailyForecasts.forEach(item => { + const temp = Math.round(item.main.temp) + if (temp < minTemp) { + minTemp = temp } - const stockholmTemp = data.main.temp; - const weatherCondition = data.weather[0].description; - const roundedTemp = Math.round(stockholmTemp); - const sunrise = data.sys.sunrise; - const sunset = data.sys.sunset; - const timezoneOffset = data.timezone; // Timezone offset in seconds - - temperatureDisplay.innerText = `${roundedTemp}°C`; - conditionDisplay.innerText = `${weatherCondition}`; - - // Function to convert UNIX timestamp to readable time format (24-hour clock) - const convertUnixToTime = (unixTimestamp, timezoneOffset) => { - const date = new Date((unixTimestamp + timezoneOffset)* 1000); - const hours = date.getUTCHours(); - const minutes = String(date.getUTCMinutes()).padStart(2, '0'); - return `${hours}:${minutes}`; + if (temp > maxTemp) { + maxTemp = temp } - // Convert and display sunrise and sunset times with timezone offset (so it is local time showing for the selected city) - const sunriseTime = convertUnixToTime(sunrise, timezoneOffset); - const sunsetTime = convertUnixToTime(sunset, timezoneOffset); - sunriseDisplay.innerText = `${sunriseTime}`; - sunsetDisplay.innerText = `${sunsetTime}`; - - updateUI(roundedTemp, weatherCondition); - }) - .catch(error => console.error('Error fetching weather data:', error)); - - fetch(FORECAST_URL) - .then(response => response.json()) - .then(forecastData => { - forecastList.innerHTML = ''; - - const today = new Date(); - - // Loop through the next 5 days - for (let i = 1; i <= 5; i++) { - const forecastDate = new Date(today); - forecastDate.setDate(today.getDate() + i); - const forecastDateString = forecastDate.toISOString().split('T')[0]; - - // Filter forecasts for this specific date - const dailyForecasts = forecastData.list.filter(item => { - const itemDate = new Date(item.dt * 1000).toISOString().split('T')[0]; - return itemDate === forecastDateString; - }); - - if (dailyForecasts.length > 0) { - // Initialize min and max temperature variables - let minTemp = Infinity; - let maxTemp = -Infinity; - - // Calculate min and max temperatures for the day - dailyForecasts.forEach(item => { - const temp = Math.round(item.main.temp); - - if (temp < minTemp) { - minTemp = temp; - } - if (temp > maxTemp) { - maxTemp = temp; - } - }); - - const weekDay = forecastDate.toLocaleDateString('en-US', { weekday: 'long' }); - - const listItem = document.createElement('li'); - listItem.innerHTML = `${weekDay}: ${minTemp} / ${maxTemp}°C`; - forecastList.appendChild(listItem); - } - } - }) - - .catch(error => console.error('Error fetching forecast data:', error)); + }); + + const weekDay = forecastDate.toLocaleDateString('en-US', { weekday: 'long' }) + const listItem = document.createElement('li') + listItem.innerHTML = `${weekDay}: ${minTemp} / ${maxTemp}°C` + forecastList.appendChild(listItem) + } + } + }) + .catch(error => console.error('Error fetching forecast data:', error)) } // Initial fetch for the default city -fetchWeatherData(); +fetchWeatherData() // Event listener for the search button searchButton.addEventListener("click", () => { - CITY = cityInput.value.trim(); // Update city variable with input value - if (CITY) { - fetchWeatherData(); // Fetch new weather data for the entered city - } -}); + city = cityInput.value.trim() // Update city variable with input value + if (city) { + fetchWeatherData() // Fetch new weather data for the entered city + } +}) // Event listener for the Enter key in the input field cityInput.addEventListener("keypress", (event) => { - if (event.key === "Enter") { // Check if the pressed key is Enter - searchButton.click(); // Trigger the click event of the search button - } + if (event.key === "Enter") { // Check if the pressed key is Enter + searchButton.click() // Trigger the click event of the search button + } }); -function updateUI(temperature, weatherDescription) { - const weatherContainer = document.getElementById("weatherContainer"); - const searchButton = document.getElementById ("searchButton") - const currentTime = new Date(); // Get the current time - const sunset = new Date(sunsetTime * 1000); // Convert sunset time (already fetched) to Date object - let weatherMessage; // Use let since the variable weatherMessage will change depending on weather - +function updateUI(temperature, weatherDescription, sunsetTime) { + const weatherContainer = document.getElementById("weatherContainer") + const searchButton = document.getElementById("searchButton") + const currentTime = new Date() // Get the current time + const sunset = new Date(sunsetTime * 1000) // Convert sunset time to Date object + let weatherMessage; // Variable to store the weather message + + // Check if it's after sunset + if (currentTime > sunset) { + // Night styling + weatherContainer.style.backgroundColor = "#001f3f"; // Dark blue for night + weatherContainer.style.color = "#ffffff" // White text + searchButton.style.backgroundColor = "#164A68" // Light blue button color + weatherImg.src = "assets/design-2/moonlight.png" // Moon image for night + weatherMessage = `It's ${weatherDescription} in ${city}. Enjoy the evening and have a good night!` + } else { // Update background and text color based on weather condition - if (weatherDescription.toLowerCase().includes("rain") || - weatherDescription.toLowerCase().includes("drizzle") || - weatherDescription.toLowerCase().includes("mist")) { - weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for rain - weatherContainer.style.color = "#164A68"; // Rainy font color - searchButton.style.backgroundColor ="#164A68" - weatherImg.src = "assets/design-2/noun_Umbrella.svg"; - weatherMessage = `Don’t forget your umbrella.
                It’s wet in ${CITY} today.`; + if (weatherDescription.toLowerCase().includes("rain") || + weatherDescription.toLowerCase().includes("drizzle") || + weatherDescription.toLowerCase().includes("mist")) { + weatherContainer.style.backgroundColor = "#BDE8FA" // Blue for rain + weatherContainer.style.color = "#164A68" // Rainy font color + searchButton.style.backgroundColor = "#164A68" + weatherImg.src = "assets/design-2/noun_Umbrella.svg" + weatherMessage = `Don’t forget your umbrella.
                It’s wet in ${city} today.` } else if (weatherDescription.toLowerCase().includes("few clouds")) { - weatherContainer.style.backgroundColor = "#F7E9B9"; // Yellow for clear sky - weatherContainer.style.color = "#2A5510"; // Green font color - searchButton.style.backgroundColor ="#2A5510" - weatherImg.src = "assets/design-2/noun_Sunglasses.svg"; - weatherMessage = `Get your sunnies on. There are a few clouds, but it's still a lovely day in ${CITY}.`; + weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for few clouds + weatherContainer.style.color = "#2A5510" // Green font color + searchButton.style.backgroundColor = "#2A5510" + weatherImg.src = "assets/design-2/noun_Sunglasses.svg" + weatherMessage = `Get your sunnies on. There are a few clouds, but it's still a lovely day in ${city}.` } else if (weatherDescription.toLowerCase().includes("scattered clouds")) { - weatherContainer.style.backgroundColor = "#F7E9B9"; // Yellow for clear sky - weatherContainer.style.color = "#2A5510"; // Green font color - searchButton.style.backgroundColor ="#2A5510" - weatherImg.src = "assets/design-2/noun_cloud.svg"; - weatherMessage = `There are some scattered clouds, but it's still a lovely day in ${CITY}.`; - + weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for scattered clouds + weatherContainer.style.color = "#2A5510" // Green font color + searchButton.style.backgroundColor = "#2A5510" + weatherImg.src = "assets/design-2/noun_cloud.svg" + weatherMessage = `There are some scattered clouds, but it's still a lovely day in ${city}.` + } else if (weatherDescription.toLowerCase().includes("clear")) { - // Daytime clear sky - weatherContainer.style.backgroundColor = "#F7E9B9"; // Yellow for clear sky - weatherContainer.style.color = "#2A5510"; // Green font color - searchButton.style.backgroundColor ="#2A5510" - weatherImg.src = "assets/design-2/noun_Sunglasses.svg"; - weatherMessage = `Get your sunnies on.
                ${CITY} is looking rather great today.`; - - // Check if it's after sunset for clear skies - if (currentTime > sunset) { - // Sunset condition - weatherContainer.style.backgroundColor = "#F7E9B9"; // Keep the yellow for sunset - weatherContainer.style.color = "#F47775"; // Orange font color - searchButton.style.backgroundColor ="#F47775" - weatherImg.src = "assets/design-2/sunset.png"; // Change to sunset image - weatherMessage = `The sun has set.
                Enjoy the evening and night in ${CITY}!`; - } - } else if (weatherDescription.toLowerCase().includes("clouds") || - weatherDescription.toLowerCase().includes("fog") || - weatherDescription.toLowerCase().includes("haze")) { - weatherContainer.style.backgroundColor = "#FFFFFF"; // White background - weatherContainer.style.color = "#F47775"; // Orange font color - searchButton.style.backgroundColor ="#F47775" - weatherImg.src = "assets/design-2/noun_Cloud.svg"; - weatherMessage = `Light a fire and get cosy.
                ${CITY} is looking grey today.`; - + weatherContainer.style.backgroundColor = "#F7E9B9" // Yellow for clear sky + weatherContainer.style.color = "#2A5510" // Green font color + searchButton.style.backgroundColor = "#2A5510" + weatherImg.src = "assets/design-2/noun_Sunglasses.svg" + weatherMessage = `Get your sunnies on.
                ${city} is looking rather great today.` + + } else if (weatherDescription.toLowerCase().includes("clouds") || + weatherDescription.toLowerCase().includes("fog") || + weatherDescription.toLowerCase().includes("haze")) { + weatherContainer.style.backgroundColor = "#FFFFFF" // White for cloudy + weatherContainer.style.color = "#F47775" // Orange font color + searchButton.style.backgroundColor = "#F47775" + weatherImg.src = "assets/design-2/noun_Cloud.svg" + weatherMessage = `Light a fire and get cosy.
                ${city} is looking grey today.` + } else if (weatherDescription.toLowerCase().includes("snow")) { - weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for cold weather - weatherContainer.style.color = "#164A68"; // Blue font color - searchButton.style.backgroundColor ="#164A68" //Blue font color - weatherImg.src = "assets/design-2/snow.png"; - weatherMessage = `It is snowing today in ${CITY}.
                Put on your winter clothes and get ready to play in the snow!`; + weatherContainer.style.backgroundColor = "#BDE8FA" // Blue for snow + weatherContainer.style.color = "#164A68" // Blue font color + searchButton.style.backgroundColor = "#164A68" + weatherImg.src = "assets/design-2/snow.png" + weatherMessage = `It is snowing today in ${city}.
                Put on your winter clothes and get ready to play in the snow!` } else if (weatherDescription.toLowerCase().includes("thunderstorm")) { - weatherContainer.style.backgroundColor = "#BDE8FA"; // Blue for storm - weatherContainer.style.color = "#164A68"; // Blue font color - searchButton.style.backgroundColor ="#164A68" //Blue font color - weatherImg.src = "assets/design-2/thunderstorm.png"; - weatherMessage = `Stormy weather ahead in ${CITY} today!
                Seek shelter and avoid outdoor activities.`; + weatherContainer.style.backgroundColor = "#BDE8FA" // Blue for storm + weatherContainer.style.color = "#164A68" // Blue font color + searchButton.style.backgroundColor = "#164A68" + weatherImg.src = "assets/design-2/thunderstorm.png" + weatherMessage = `Stormy weather ahead in ${city} today!
                Seek shelter and avoid outdoor activities.` + } else { - weatherContainer.style.backgroundColor = "white"; // Fallback background - weatherContainer.style.color = "black"; // Fallback font color - searchButton.style.backgroundColor ="black" //Blue font color - weatherImg.src = "assets/design-2/sad-face-3.svg"; - weatherMessage = `The weather description cannot be picked up at the moment.`; + // Fallback styling + weatherContainer.style.backgroundColor = "white" // Fallback background + weatherContainer.style.color = "black" // Fallback font color + searchButton.style.backgroundColor = "black" + weatherImg.src = "assets/design-2/sad-face-3.svg" + weatherMessage = `The weather description cannot be picked up at the moment.` } + } - weatherMsg.innerHTML = weatherMessage; // Update the weather message display -} + weatherMsg.innerHTML = weatherMessage // Update the weather +} \ No newline at end of file diff --git a/style.css b/style.css index 542b5528a..c3ab6043d 100644 --- a/style.css +++ b/style.css @@ -1,55 +1,65 @@ - body { font-family: Montserrat; - height: 100%; + height: 100%; } .weather-container { display: flex; - flex-direction: column; /* Stack items vertically */ - justify-content: flex-start; - align-items: flex-start; /* Align items to the left */ + flex-direction: column; + /* Stack items vertically */ + justify-content: flex-start; + align-items: flex-start; + /* Align items to the left */ padding-top: 50px; - min-height: 100vh; /* Ensure it takes up the full height of the viewport */ - padding-left: 10px; /* Optional: padding to the left for overall container */ + min-height: 100vh; + /* Ensure it takes up the full height of the viewport */ + padding-left: 10px; + /* Optional: padding to the left for overall container */ overflow-x: hidden; - + } /* Container for condition and temperature */ .temperature-info { - display: flex; - justify-content: flex-start; /* Align temperature info to the left */ + display: flex; + justify-content: flex-start; + /* Align temperature info to the left */ align-items: center; - font-size: 24px; + font-size: 24px; font-weight: 400; - line-height: 25.6px; - margin-bottom: 10px; /* Optional spacing */ + line-height: 25.6px; + margin-bottom: 10px; + /* Optional spacing */ } .temperature-info p { - margin: 0 5px; -} + margin: 0 5px; +} /* Container for sunrise and sunset */ .sun-times { display: flex; flex-direction: column; - align-items: flex-start; /* Align sunrise/sunset to the left */ + align-items: flex-start; + /* Align sunrise/sunset to the left */ font-size: 24px; font-weight: 400; - margin-bottom: 20px; /* Space before other weather details */ + margin-bottom: 20px; + /* Space before other weather details */ line-height: 25.6px; } .sun-times p { - margin: 0 5px; /* Adjust spacing between sunrise and sunset */ + margin: 0 5px; + /* Adjust spacing between sunrise and sunset */ } .weather-img { - margin-top: 30px; - max-width: 100%; /* Ensure image doesn't exceed container width */ - height: auto; /* Maintain aspect ratio */ + margin-top: 30px; + max-width: 100%; + /* Ensure image doesn't exceed container width */ + height: auto; + /* Maintain aspect ratio */ } @@ -60,35 +70,42 @@ body { line-height: 45.1px; text-align: left; padding-right: 10px; -} +} .forecast-wrapper { display: flex; - flex-direction: column; /* Stack items vertically */ - justify-content: flex-start; - align-items: flex-start; /* Align items to the left */ - position: relative; /* Optional: Positioning context for child elements */ + flex-direction: column; + /* Stack items vertically */ + justify-content: flex-start; + align-items: flex-start; + /* Align items to the left */ + position: relative; + /* Optional: Positioning context for child elements */ } - + #forecastList { - list-style-type: none; /* Remove default list styling */ - padding: 0; /* Remove default padding */ - margin: 0; /* Remove default margin */ + list-style-type: none; + /* Remove default list styling */ + padding: 0; + /* Remove default padding */ + margin: 0; + /* Remove default margin */ font-size: 21px; line-height: 36px; - gap:20px + gap: 20px } li { display: flex; + width: 290px; justify-content: space-between; - /* margin-bottom: 15px; Space between days */ font-size: 20px; line-height: 1.6; } .weekday { - width: 100px; /* Set a fixed width for all weekday names */ + width: 100px; + /* Set a fixed width for all weekday names */ } .min-max { @@ -99,37 +116,52 @@ li { margin-left: 10px; } +.max-temp { + margin-right: 5px; +} + #searchContainer { - display: flex; /* Align items horizontally */ - justify-content: flex-start; /* Align items to the left */ - align-items: center; /* Vertically center the items */ + display: flex; + /* Align items horizontally */ + justify-content: flex-start; + /* Align items to the left */ + align-items: center; + /* Vertically center the items */ padding-top: 20px; padding-bottom: 20px; } label { font-size: 18px; - margin-right: 15px; /* Space between the label and input */ + margin-right: 15px; + /* Space between the label and input */ } #cityInput { - padding: 8px; /* Padding for the input field */ - border: 1px solid #ccc; /* Border around the input field */ - border-radius: 4px; /* Rounded corners */ - margin-right: 5px; /* Space between the input and search button */ + padding: 8px; + /* Padding for the input field */ + border: 1px solid #ccc; + /* Border around the input field */ + border-radius: 4px; + /* Rounded corners */ + margin-right: 5px; + /* Space between the input and search button */ font-family: Montserrat; font-weight: 500; font-size: 16px; } #searchButton { - padding: 10px 12px; /* Padding for the search button */ + padding: 10px 12px; + /* Padding for the search button */ color: white; border: none; - border-radius: 4px; /* Rounded corners for the button */ - cursor: pointer; /* Pointer cursor on hover */ + border-radius: 4px; + /* Rounded corners for the button */ + cursor: pointer; + /* Pointer cursor on hover */ font-family: Montserrat; - flex-shrink: 0; + flex-shrink: 0; } /* Media Queries */ @@ -137,20 +169,28 @@ label { /* Apply centering only on desktop screens */ @media (min-width: 768px) { .weather-container { - align-items: center; /* Center horizontally */ + align-items: center; + /* Center horizontally */ } - - .temperature-info, .sun-times, .weather-message,.forecast-wrapper { - text-align: left; /* Keep content left-aligned */ + + .temperature-info, + .sun-times, + .weather-message, + .forecast-wrapper { + text-align: left; + /* Keep content left-aligned */ width: 100%; - max-width: 600px; /* Limit width on large screens */ + max-width: 600px; + /* Limit width on large screens */ } } @media (min-width: 768px) { .weather-img { - max-width: 300px; /* Limit max width for desktop */ - height: auto; /* Maintain aspect ratio */ + max-width: 300px; + /* Limit max width for desktop */ + height: auto; + /* Maintain aspect ratio */ margin-top: 30px; } -} +} \ No newline at end of file From 2e24140a3b034b9faf75d4e34bff0573860f6fdb Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Fri, 4 Oct 2024 20:18:05 +0200 Subject: [PATCH 18/18] added function to capitalize letters in cities when fetching data --- script.js | 123 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 64 insertions(+), 59 deletions(-) diff --git a/script.js b/script.js index 22eca3c25..51df740d7 100644 --- a/script.js +++ b/script.js @@ -1,9 +1,3 @@ -// Current weather API -// ea9a90c62aeaaa3811505087d195520e -// Base URL + API key -//https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e -//https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=ea9a90c62aeaaa3811505087d195520e - // True constants (SNAKECASE) const API_KEY = "ea9a90c62aeaaa3811505087d195520e" const BASE_URL = "https://api.openweathermap.org/data/2.5/weather?q=" @@ -23,7 +17,7 @@ const searchButton = document.getElementById("searchButton") const cityInput = document.getElementById("cityInput") // Function to fetch weather data -function fetchWeatherData() { +const fetchWeatherData = () => { const URL = `${BASE_URL}${city}&units=metric&APPID=${API_KEY}` const FORECAST_URL = `${FORECAST_BASE_URL}${city}&units=metric&APPID=${API_KEY}` @@ -32,7 +26,7 @@ function fetchWeatherData() { .then(response => response.json()) .then(data => { if (!data || data.cod !== 200) { - throw new Error('City not found') + throw new Error("City not found") } const stockholmTemp = data.main.temp const weatherCondition = data.weather[0].description @@ -44,15 +38,7 @@ function fetchWeatherData() { temperatureDisplay.innerText = `${roundedTemp}°C` conditionDisplay.innerText = `${weatherCondition}` - // Function to convert UNIX timestamp to readable time format (24-hour clock) - const convertUnixToTime = (unixTimestamp, timezoneOffset) => { - const date = new Date((unixTimestamp + timezoneOffset) * 1000) - const hours = date.getUTCHours() - const minutes = String(date.getUTCMinutes()).padStart(2, '0') - return `${hours}:${minutes}` - } - - // Convert and display sunrise and sunset times with timezone offset (so it is local time showing for the selected city) + // Convert and display sunrise and sunset times with timezone offset const sunriseTime = convertUnixToTime(sunrise, timezoneOffset) const sunsetTime = convertUnixToTime(sunset, timezoneOffset) sunriseDisplay.innerText = `${sunriseTime}` @@ -60,27 +46,28 @@ function fetchWeatherData() { updateUI(roundedTemp, weatherCondition, sunset) }) - .catch(error => console.error('Error fetching weather data:', error)) + .catch(error => { + console.error("Error fetching weather data:", error) + }) // Fetch 5-day forecast data fetch(FORECAST_URL) .then(response => response.json()) .then(forecastData => { - forecastList.innerHTML = '' - + forecastList.innerHTML = "" const today = new Date() // Loop through the next 5 days for (let i = 1; i <= 5; i++) { const forecastDate = new Date(today) forecastDate.setDate(today.getDate() + i) - const forecastDateString = forecastDate.toISOString().split('T')[0] + const forecastDateString = forecastDate.toISOString().split("T")[0] // Filter forecasts for this specific date const dailyForecasts = forecastData.list.filter(item => { - const itemDate = new Date(item.dt * 1000).toISOString().split('T')[0] - return itemDate === forecastDateString; - }); + const itemDate = new Date(item.dt * 1000).toISOString().split("T")[0] + return itemDate === forecastDateString + }) if (dailyForecasts.length > 0) { // Initialize min and max temperature variables @@ -96,16 +83,28 @@ function fetchWeatherData() { if (temp > maxTemp) { maxTemp = temp } - }); + }) - const weekDay = forecastDate.toLocaleDateString('en-US', { weekday: 'long' }) - const listItem = document.createElement('li') - listItem.innerHTML = `${weekDay}: ${minTemp} / ${maxTemp}°C` + const weekDay = forecastDate.toLocaleDateString("en-US", { + weekday: "long", + }) + const listItem = document.createElement("li") + listItem.innerHTML = `${weekDay} ${minTemp} / ${maxTemp}°C` forecastList.appendChild(listItem) } } }) - .catch(error => console.error('Error fetching forecast data:', error)) + .catch(error => { + console.error("Error fetching forecast data:", error) + }) +} + +// Function to convert UNIX timestamp to readable time format (24-hour clock) +const convertUnixToTime = (unixTimestamp, timezoneOffset) => { + const date = new Date((unixTimestamp + timezoneOffset) * 1000) + const hours = date.getUTCHours() + const minutes = String(date.getUTCMinutes()).padStart(2, "0") + return `${hours}:${minutes}` } // Initial fetch for the default city @@ -115,37 +114,55 @@ fetchWeatherData() searchButton.addEventListener("click", () => { city = cityInput.value.trim() // Update city variable with input value if (city) { + city = capitalizeCityName(city) // Capitalize the first letter of each word fetchWeatherData() // Fetch new weather data for the entered city } }) // Event listener for the Enter key in the input field cityInput.addEventListener("keypress", (event) => { - if (event.key === "Enter") { // Check if the pressed key is Enter - searchButton.click() // Trigger the click event of the search button + if (event.key === "Enter") { + // Check if the pressed key is Enter + city = cityInput.value.trim() + if (city) { + city = capitalizeCityName(city) // Capitalize the first letter of each word + searchButton.click() // Trigger the click event of the search button + searchButton.click() // Trigger the click event of the search button + } } -}); +}) + +// Arrow function to capitalize the first letter of each word in the city name +const capitalizeCityName = (city) => { + return city + .split(" ") // Split the city name into an array of words + .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize the first letter of each word + .join(" ") // Join the words back into a single string +} -function updateUI(temperature, weatherDescription, sunsetTime) { +const updateUI = (temperature, weatherDescription, sunsetTime) => { const weatherContainer = document.getElementById("weatherContainer") const searchButton = document.getElementById("searchButton") const currentTime = new Date() // Get the current time const sunset = new Date(sunsetTime * 1000) // Convert sunset time to Date object - let weatherMessage; // Variable to store the weather message + let weatherMessage // Variable to store the weather message // Check if it's after sunset if (currentTime > sunset) { // Night styling - weatherContainer.style.backgroundColor = "#001f3f"; // Dark blue for night + weatherContainer.style.backgroundColor = "#001f3f" // Dark blue for night weatherContainer.style.color = "#ffffff" // White text - searchButton.style.backgroundColor = "#164A68" // Light blue button color + searchButton.style.backgroundColor = "#164A68" // Light blue button color weatherImg.src = "assets/design-2/moonlight.png" // Moon image for night weatherMessage = `It's ${weatherDescription} in ${city}. Enjoy the evening and have a good night!` + } else { // Update background and text color based on weather condition - if (weatherDescription.toLowerCase().includes("rain") || + if ( + weatherDescription.toLowerCase().includes("rain") || weatherDescription.toLowerCase().includes("drizzle") || - weatherDescription.toLowerCase().includes("mist")) { + weatherDescription.toLowerCase().includes("mist") + ) { weatherContainer.style.backgroundColor = "#BDE8FA" // Blue for rain weatherContainer.style.color = "#164A68" // Rainy font color searchButton.style.backgroundColor = "#164A68" @@ -173,9 +190,11 @@ function updateUI(temperature, weatherDescription, sunsetTime) { weatherImg.src = "assets/design-2/noun_Sunglasses.svg" weatherMessage = `Get your sunnies on.
                ${city} is looking rather great today.` - } else if (weatherDescription.toLowerCase().includes("clouds") || + } else if ( + weatherDescription.toLowerCase().includes("clouds") || weatherDescription.toLowerCase().includes("fog") || - weatherDescription.toLowerCase().includes("haze")) { + weatherDescription.toLowerCase().includes("haze") + ) { weatherContainer.style.backgroundColor = "#FFFFFF" // White for cloudy weatherContainer.style.color = "#F47775" // Orange font color searchButton.style.backgroundColor = "#F47775" @@ -186,25 +205,11 @@ function updateUI(temperature, weatherDescription, sunsetTime) { weatherContainer.style.backgroundColor = "#BDE8FA" // Blue for snow weatherContainer.style.color = "#164A68" // Blue font color searchButton.style.backgroundColor = "#164A68" - weatherImg.src = "assets/design-2/snow.png" - weatherMessage = `It is snowing today in ${city}.
                Put on your winter clothes and get ready to play in the snow!` - - } else if (weatherDescription.toLowerCase().includes("thunderstorm")) { - weatherContainer.style.backgroundColor = "#BDE8FA" // Blue for storm - weatherContainer.style.color = "#164A68" // Blue font color - searchButton.style.backgroundColor = "#164A68" - weatherImg.src = "assets/design-2/thunderstorm.png" - weatherMessage = `Stormy weather ahead in ${city} today!
                Seek shelter and avoid outdoor activities.` - - } else { - // Fallback styling - weatherContainer.style.backgroundColor = "white" // Fallback background - weatherContainer.style.color = "black" // Fallback font color - searchButton.style.backgroundColor = "black" - weatherImg.src = "assets/design-2/sad-face-3.svg" - weatherMessage = `The weather description cannot be picked up at the moment.` + weatherImg.src = "assets/design-2/snowflake.png" + weatherMessage = `Wrap up warm! It's snowy in ${city}.` } } - weatherMsg.innerHTML = weatherMessage // Update the weather -} \ No newline at end of file + // Update the DOM elements with weather message and image + weatherMsg.innerHTML = weatherMessage +}