From 7f623c808565caa8f4e25edfb6621200aaffb633 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Wed, 25 Sep 2024 10:38:49 +0200 Subject: [PATCH 01/12] First commit - added URL and API key --- .DS_Store | Bin 0 -> 6148 bytes Code/index.html | 14 ++++++++++++++ Code/script.js | 12 ++++++++++++ Code/style.css | 0 4 files changed, 26 insertions(+) create mode 100644 .DS_Store create mode 100644 Code/index.html create mode 100644 Code/script.js create mode 100644 Code/style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..135244b077e0e94e4dfc129a1afce6208fb6fd4e GIT binary patch literal 6148 zcmeH~F$w}f3`G;&La^D=avBfd4F+9LuotjUY(zoOdXDZ-CJ2t!BJu;tpJXO1`-+{7 zi0JyZUy1Z0GJ~7S(n4d3ypxSwWG{#Ncs-vk=Ob!XpTt>P!+UA=W1B((BtQZrKmsK2 zLj>&JhRx4X|sK7L)2aQ(s zF~sWL4oz_`hnA|fT{MOdjVG&3F)*#|q6rC1vkL@un zGXmNT)z$?L_2URHKLJSWDqg_du%B!J&7q|#Dlq;CI0gn1_$q-1 DrpXeH literal 0 HcmV?d00001 diff --git a/Code/index.html b/Code/index.html new file mode 100644 index 000000000..748c6b5ff --- /dev/null +++ b/Code/index.html @@ -0,0 +1,14 @@ + + + + + + + Weather app + + + + + + + \ No newline at end of file diff --git a/Code/script.js b/Code/script.js new file mode 100644 index 000000000..0c07ed302 --- /dev/null +++ b/Code/script.js @@ -0,0 +1,12 @@ +//Stockholm current weather API +//URL current weather Stockholm + city + API key +// https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=959cb256f265cbbe5b4051e4a40be3af + +// True constants +const API_KEY = "959cb256f265cbbe5b4051e4a40be3af"; +const BASE_URL = "https://api.openweathermap.org/data/2.5/weather"; + +let city = "Stockholm"; + +const URL = `${BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`; +console.log(URL) diff --git a/Code/style.css b/Code/style.css new file mode 100644 index 000000000..e69de29bb From 83bfdda80197ec58692271928f9c60ac6dfec977 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Wed, 25 Sep 2024 11:05:09 +0200 Subject: [PATCH 02/12] Added fetch function to request current weather in Stockholm --- Code/index.html | 10 ++++++---- Code/script.js | 10 ++++++++++ 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/Code/index.html b/Code/index.html index 748c6b5ff..95c53acda 100644 --- a/Code/index.html +++ b/Code/index.html @@ -2,13 +2,15 @@ - - - Weather app + + + Weather app - +

+ + \ No newline at end of file diff --git a/Code/script.js b/Code/script.js index 0c07ed302..bc1dd32fe 100644 --- a/Code/script.js +++ b/Code/script.js @@ -10,3 +10,13 @@ let city = "Stockholm"; const URL = `${BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`; console.log(URL) + +fetch(URL) + .then(response => response.json()) + .then(data => { + console.log(data.weather) + }) + + + + From f2c771420e6ea4765000cca27e77b15332f65470 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Wed, 25 Sep 2024 12:31:17 +0200 Subject: [PATCH 03/12] City, temperature and what type of weather displayed on web app --- Code/index.html | 5 +++++ Code/script.js | 30 +++++++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/Code/index.html b/Code/index.html index 95c53acda..cfef57de9 100644 --- a/Code/index.html +++ b/Code/index.html @@ -8,7 +8,12 @@ +

Current Weather

+ +

+

+ diff --git a/Code/script.js b/Code/script.js index bc1dd32fe..cd56131f8 100644 --- a/Code/script.js +++ b/Code/script.js @@ -11,12 +11,40 @@ let city = "Stockholm"; const URL = `${BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`; console.log(URL) +// DOM selectors +// const place = document.getElementById("temperature"); + fetch(URL) .then(response => response.json()) .then(data => { - console.log(data.weather) + + cityName = data.name; + //Log to console - remove later + console.log(cityName) + + const temp = data.main.temp.toFixed(1); + //Log to console - remove later + console.log(temp) + + const typeOfWeather = data.weather[0].description; + //Log to console - remove later + console.log(typeOfWeather) + + const sunriseTime = data.sys.sunrise; + //Log to console - remove later + console.log(sunriseTime) + + const sunsetTime = data.sys.sunset; + //Log to console - remove later + console.log(sunsetTime) + + document.getElementById("location").innerText = `${cityName}`; + document.getElementById("temperature").innerText = `${temp}°C`; + document.getElementById("weather").innerText = `${typeOfWeather}`; }) +// - The app should have: city name, current temperature, weather description, +// sunrise/sunset time, 4-day forecast From 0b69b765842887a636f28ecb8e3feb5449e683cf Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Thu, 26 Sep 2024 10:52:54 +0200 Subject: [PATCH 04/12] Added sunrise, sunset and 4-day forecast --- Code/index.html | 7 ++++++ Code/script.js | 65 +++++++++++++++++++++++++++++++++++-------------- 2 files changed, 54 insertions(+), 18 deletions(-) diff --git a/Code/index.html b/Code/index.html index cfef57de9..39e7e2ed0 100644 --- a/Code/index.html +++ b/Code/index.html @@ -8,11 +8,18 @@ +

Current Weather

+

Sunrise

+

Sunset

+ + +

4-Day Forecast Weather

+
diff --git a/Code/script.js b/Code/script.js index cd56131f8..6cfd14291 100644 --- a/Code/script.js +++ b/Code/script.js @@ -5,6 +5,7 @@ // True constants const API_KEY = "959cb256f265cbbe5b4051e4a40be3af"; const BASE_URL = "https://api.openweathermap.org/data/2.5/weather"; +const FORECAST_BASE_URL = "https://api.openweathermap.org/data/2.5/forecast"; let city = "Stockholm"; @@ -12,39 +13,67 @@ const URL = `${BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`; console.log(URL) // DOM selectors -// const place = document.getElementById("temperature"); +// const place = document.getElementById("temperature"); REMOVE THIS fetch(URL) .then(response => response.json()) .then(data => { cityName = data.name; - //Log to console - remove later - console.log(cityName) - const temp = data.main.temp.toFixed(1); - //Log to console - remove later - console.log(temp) - const typeOfWeather = data.weather[0].description; - //Log to console - remove later - console.log(typeOfWeather) - - const sunriseTime = data.sys.sunrise; - //Log to console - remove later - console.log(sunriseTime) + const sunriseTime = new Date(data.sys.sunrise * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); + const sunsetTime = new Date(data.sys.sunset * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); - const sunsetTime = data.sys.sunset; - //Log to console - remove later - console.log(sunsetTime) + // Remove consol log later + console.log(cityName, temp, typeOfWeather, sunriseTime, sunsetTime); document.getElementById("location").innerText = `${cityName}`; document.getElementById("temperature").innerText = `${temp}°C`; document.getElementById("weather").innerText = `${typeOfWeather}`; + document.getElementById("sunrise").innerText = `${sunriseTime}`; + document.getElementById("sunset").innerText = `${sunsetTime}`; }) -// - The app should have: city name, current temperature, weather description, -// sunrise/sunset time, 4-day forecast +// 4 - day forecast +const forecastURL = `${FORECAST_BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`; +console.log(forecastURL); + +fetch(forecastURL) + .then(response => response.json()) + .then(data => { + const forecastList = document.getElementById("forecast-list"); + + //Grouping forecast date and calculate the average temp + const dailyTemps = {}; + + data.list.forEach(forecast => { + const dateObj = new Date(forecast.dt_txt); // Create Date object + const dayOfWeek = dateObj.toLocaleDateString('en-US', { weekday: 'long' }); // Get long full name of the day + const temp = forecast.main.temp; + + if (!dailyTemps[dayOfWeek]) { + dailyTemps[dayOfWeek] = { + totalTemp: temp, + count: 1 + }; + } else { + dailyTemps[dayOfWeek].totalTemp += temp; + dailyTemps[dayOfWeek].count += 1; + } + }) + + // clear any existing forecast data + forecastList.innerText = ""; + // Calculate the average and only take the first 4 days of forecast data + Object.keys(dailyTemps).slice(0, 4).forEach(dayOfWeek => { + const averageTemp = (dailyTemps[dayOfWeek].totalTemp / dailyTemps[dayOfWeek].count).toFixed(1); + const forecastItem = document.createElement("p"); + forecastItem.innerHTML = `${dayOfWeek} ${averageTemp}°C`; + // Append the forecast item to the UL + forecastList.appendChild(forecastItem); + }); + }); \ No newline at end of file From 640c5af5c1ac213f9a0f80bf71550659ef6638de Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Thu, 26 Sep 2024 13:30:42 +0200 Subject: [PATCH 05/12] Added image and styling in CSS --- Code/index.html | 41 ++++++++++++++++++++++++++++++++++++++++- Code/style.css | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+), 1 deletion(-) diff --git a/Code/index.html b/Code/index.html index 39e7e2ed0..b4c9f4c4f 100644 --- a/Code/index.html +++ b/Code/index.html @@ -5,12 +5,51 @@ Weather app + + +

Current Weather

+ + + + + + + + + + + + + + + + + + + + + + + + + +

@@ -19,7 +58,7 @@

Current Weather

4-Day Forecast Weather

-
+
diff --git a/Code/style.css b/Code/style.css index e69de29bb..dd98f8235 100644 --- a/Code/style.css +++ b/Code/style.css @@ -0,0 +1,32 @@ +body { + font-family: 'Arial', sans-serif; + background-color: #f7f0cf; + color: #3c3c3b; + margin: 0; + padding: 20px; +} + +h1 { + font-size: 24px; + margin-bottom: 10px; + color: #2e523a; + /* Dark green */ +} + +p { + font-size: 18px; + margin: 4px 0; +} + +h2 { + font-size: 24px; + margin-bottom: 10px; + color: #2e523a; + /* Dark green */ +} + +#forecast-list { + font-size: 20px; + color: #2e523a; + margin-bottom: 15px; +} \ No newline at end of file From 88e7e7671afb0656227049a036996ebf42484f99 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 29 Sep 2024 00:24:52 +0200 Subject: [PATCH 06/12] Added styling to CS and catch error to javascript file --- Code/index.html | 31 +++++++++++++++++++------------ Code/script.js | 25 +++++++++++++++++-------- Code/style.css | 40 +++++++++++++++++++++++++++++++--------- 3 files changed, 67 insertions(+), 29 deletions(-) diff --git a/Code/index.html b/Code/index.html index b4c9f4c4f..97d67ab37 100644 --- a/Code/index.html +++ b/Code/index.html @@ -12,11 +12,21 @@
-

Current Weather

- + +
+

+

+

+

Sunrise

+

Sunset

+
- - +
+
+
+ + + @@ -49,18 +59,15 @@

Current Weather

+ -

-

-

-

Sunrise

-

Sunset

+

Get your sunnies on. +
It's a beautiful day in Stockholm today. +

- -

4-Day Forecast Weather

+
- diff --git a/Code/script.js b/Code/script.js index 6cfd14291..a1322288c 100644 --- a/Code/script.js +++ b/Code/script.js @@ -12,9 +12,9 @@ let city = "Stockholm"; const URL = `${BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`; console.log(URL) -// DOM selectors -// const place = document.getElementById("temperature"); REMOVE THIS +// DOM selectors, take away this later +//Fetch current weather data fetch(URL) .then(response => response.json()) .then(data => { @@ -22,6 +22,9 @@ fetch(URL) cityName = data.name; const temp = data.main.temp.toFixed(1); const typeOfWeather = data.weather[0].description; + //Convert first letter of weather description to uppercase + const capitalizedWeather = typeOfWeather.charAt(0).toUpperCase() + typeOfWeather.slice(1); + const sunriseTime = new Date(data.sys.sunrise * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); const sunsetTime = new Date(data.sys.sunset * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); @@ -29,8 +32,8 @@ fetch(URL) console.log(cityName, temp, typeOfWeather, sunriseTime, sunsetTime); document.getElementById("location").innerText = `${cityName}`; - document.getElementById("temperature").innerText = `${temp}°C`; - document.getElementById("weather").innerText = `${typeOfWeather}`; + document.getElementById("temperature").innerText = `${temp}°`; + document.getElementById("weather").innerText = `${capitalizedWeather}`; // Use capitalized description document.getElementById("sunrise").innerText = `${sunriseTime}`; document.getElementById("sunset").innerText = `${sunsetTime}`; }) @@ -49,7 +52,7 @@ fetch(forecastURL) data.list.forEach(forecast => { const dateObj = new Date(forecast.dt_txt); // Create Date object - const dayOfWeek = dateObj.toLocaleDateString('en-US', { weekday: 'long' }); // Get long full name of the day + const dayOfWeek = dateObj.toLocaleDateString('en-US', { weekday: 'long' }); // Get long, full name of the day const temp = forecast.main.temp; if (!dailyTemps[dayOfWeek]) { @@ -63,17 +66,23 @@ fetch(forecastURL) } }) - // clear any existing forecast data + // Clear any existing forecast data forecastList.innerText = ""; - // Calculate the average and only take the first 4 days of forecast data + // Calculate the average temp and only take the first 4 days of forecast data Object.keys(dailyTemps).slice(0, 4).forEach(dayOfWeek => { const averageTemp = (dailyTemps[dayOfWeek].totalTemp / dailyTemps[dayOfWeek].count).toFixed(1); const forecastItem = document.createElement("p"); - forecastItem.innerHTML = `${dayOfWeek} ${averageTemp}°C`; + forecastItem.innerHTML = `${dayOfWeek} ${averageTemp}°`; // Append the forecast item to the UL forecastList.appendChild(forecastItem); }); + }) + + // Error message applied to both fetch functions + .catch(error => { + console.log("Error fetching forecast data:", error); + // Add innertext with id in html for error message shown on site }); \ No newline at end of file diff --git a/Code/style.css b/Code/style.css index dd98f8235..ead127512 100644 --- a/Code/style.css +++ b/Code/style.css @@ -1,16 +1,20 @@ body { font-family: 'Arial', sans-serif; background-color: #f7f0cf; - color: #3c3c3b; + color: #2e523a; margin: 0; - padding: 20px; + padding: 40px; +} + +.current-weather { + padding-left: 10px; + font-size: 18px; } h1 { font-size: 24px; margin-bottom: 10px; color: #2e523a; - /* Dark green */ } p { @@ -18,15 +22,33 @@ p { margin: 4px 0; } +#image { + padding-left: 10px; +} + h2 { - font-size: 24px; + font-size: 32px; margin-bottom: 10px; color: #2e523a; - /* Dark green */ + padding-left: 10px; + } -#forecast-list { - font-size: 20px; +.forecast-container p { + display: flex; + justify-content: space-between; + /* This makes the day and temperature sit at opposite ends */ + padding: 10px; + border-bottom: 1px dotted #2e523a; + /* Dotted line bottom */ + font-size: 18px; color: #2e523a; - margin-bottom: 15px; -} \ No newline at end of file +} + +/* Add media queries here */ + +/* Smartphone + +/* Tablet */ + +/* Desktop */ \ No newline at end of file From 73b2cefb70893b9c902d960106e154f3b085ece4 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 29 Sep 2024 01:10:40 +0200 Subject: [PATCH 07/12] Added media queries --- Code/script.js | 4 ---- Code/style.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 60 insertions(+), 9 deletions(-) diff --git a/Code/script.js b/Code/script.js index a1322288c..023860cdd 100644 --- a/Code/script.js +++ b/Code/script.js @@ -1,7 +1,3 @@ -//Stockholm current weather API -//URL current weather Stockholm + city + API key -// https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=959cb256f265cbbe5b4051e4a40be3af - // True constants const API_KEY = "959cb256f265cbbe5b4051e4a40be3af"; const BASE_URL = "https://api.openweathermap.org/data/2.5/weather"; diff --git a/Code/style.css b/Code/style.css index ead127512..9fd248c27 100644 --- a/Code/style.css +++ b/Code/style.css @@ -3,7 +3,7 @@ body { background-color: #f7f0cf; color: #2e523a; margin: 0; - padding: 40px; + padding: 60px; } .current-weather { @@ -31,7 +31,6 @@ h2 { margin-bottom: 10px; color: #2e523a; padding-left: 10px; - } .forecast-container p { @@ -45,10 +44,66 @@ h2 { color: #2e523a; } -/* Add media queries here */ +/* Media queries */ +/* LOOK THROUGH THIS TOMORROW AND CHANGE IT*/ +/* Smartphone*/ +@media only screen and (min-width: 320px) and (max-width: 767px) { + body { + padding: 40px; + } + + .current-weather { + font-size: 14px; + } + + h1 { + font-size: 20px; + } -/* Smartphone + h2 { + font-size: 24px; + } + + .forecast-container p { + font-size: 14px; + } +} /* Tablet */ +@media only screen and (min-width: 768px) and (max-width: 1023px) { + body { + padding: 50px; + } + + .current-weather { + font-size: 17px; + } + + h1 { + font-size: 26px; + } + + h2 { + font-size: 30px; + } +} + +/* Desktop */ +@media only screen and (min-width: 1024px) and (max-width: 1600px) { + body { + max-width: 1200px; + margin: 0 auto; + } + + .current-weather { + font-size: 18px; + } + + h1 { + font-size: 28px; + } -/* Desktop */ \ No newline at end of file + h2 { + font-size: 32px; + } +} \ No newline at end of file From 78488edd1adcfae8a3e63ae3ad6ef2a8fe21de7f Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 29 Sep 2024 16:49:33 +0200 Subject: [PATCH 08/12] Clean up, removed console log and edited styling elements --- Code/index.html | 12 ++++--- Code/script.js | 33 +++++++++--------- Code/style.css | 90 ++++++++++++------------------------------------- 3 files changed, 46 insertions(+), 89 deletions(-) diff --git a/Code/index.html b/Code/index.html index 97d67ab37..a0b7b54d1 100644 --- a/Code/index.html +++ b/Code/index.html @@ -11,10 +11,11 @@ -
+
+ +
-

Sunrise

@@ -61,9 +62,10 @@
-

Get your sunnies on. -
It's a beautiful day in Stockholm today. -

+

Get your sunnies on. +
+ It's a beautiful day in today. +

diff --git a/Code/script.js b/Code/script.js index 023860cdd..3484bd20f 100644 --- a/Code/script.js +++ b/Code/script.js @@ -3,19 +3,20 @@ const API_KEY = "959cb256f265cbbe5b4051e4a40be3af"; const BASE_URL = "https://api.openweathermap.org/data/2.5/weather"; const FORECAST_BASE_URL = "https://api.openweathermap.org/data/2.5/forecast"; -let city = "Stockholm"; +const city = "Stockholm"; +// Create URL for current weather const URL = `${BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`; console.log(URL) -// DOM selectors, take away this later +const errorDiv = document.getElementById("error"); //Fetch current weather data fetch(URL) .then(response => response.json()) .then(data => { - cityName = data.name; + const cityName = data.name; const temp = data.main.temp.toFixed(1); const typeOfWeather = data.weather[0].description; //Convert first letter of weather description to uppercase @@ -24,9 +25,7 @@ fetch(URL) const sunriseTime = new Date(data.sys.sunrise * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); const sunsetTime = new Date(data.sys.sunset * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); - // Remove consol log later - console.log(cityName, temp, typeOfWeather, sunriseTime, sunsetTime); - + // Display weather data on page document.getElementById("location").innerText = `${cityName}`; document.getElementById("temperature").innerText = `${temp}°`; document.getElementById("weather").innerText = `${capitalizedWeather}`; // Use capitalized description @@ -34,16 +33,20 @@ fetch(URL) document.getElementById("sunset").innerText = `${sunsetTime}`; }) -// 4 - day forecast + // Error message + .catch(error => { + errorDiv.innerText = "Something went wrong."; + }); + +// Fetch 4-day forecast data const forecastURL = `${FORECAST_BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`; -console.log(forecastURL); fetch(forecastURL) .then(response => response.json()) .then(data => { const forecastList = document.getElementById("forecast-list"); - //Grouping forecast date and calculate the average temp + //Group forecast date by days and calculate average temperature const dailyTemps = {}; data.list.forEach(forecast => { @@ -60,25 +63,23 @@ fetch(forecastURL) dailyTemps[dayOfWeek].totalTemp += temp; dailyTemps[dayOfWeek].count += 1; } - }) + }); // Clear any existing forecast data forecastList.innerText = ""; - // Calculate the average temp and only take the first 4 days of forecast data - Object.keys(dailyTemps).slice(0, 4).forEach(dayOfWeek => { + // Display 4-day forecast + Object.keys(dailyTemps).slice(1, 5).forEach(dayOfWeek => { const averageTemp = (dailyTemps[dayOfWeek].totalTemp / dailyTemps[dayOfWeek].count).toFixed(1); const forecastItem = document.createElement("p"); forecastItem.innerHTML = `${dayOfWeek} ${averageTemp}°`; - // Append the forecast item to the UL forecastList.appendChild(forecastItem); }); }) - // Error message applied to both fetch functions + // Error message .catch(error => { - console.log("Error fetching forecast data:", error); - // Add innertext with id in html for error message shown on site + errorDiv.innerText = "Something went wrong." }); \ No newline at end of file diff --git a/Code/style.css b/Code/style.css index 9fd248c27..8cee15bdc 100644 --- a/Code/style.css +++ b/Code/style.css @@ -1,24 +1,20 @@ body { font-family: 'Arial', sans-serif; - background-color: #f7f0cf; - color: #2e523a; + background-color: #F7E9B9; + color: #2A5510; margin: 0; - padding: 60px; + padding: 40px; } .current-weather { + font-weight: 400; padding-left: 10px; - font-size: 18px; -} - -h1 { - font-size: 24px; - margin-bottom: 10px; - color: #2e523a; + font-size: 21px; + line-height: 25.6px; } p { - font-size: 18px; + font-size: 21px; margin: 4px 0; } @@ -26,84 +22,42 @@ p { padding-left: 10px; } -h2 { - font-size: 32px; +h1, +#location { + font-size: 37px; margin-bottom: 10px; - color: #2e523a; + color: #2A5510; padding-left: 10px; + line-height: 45.1px; + font-weight: 700; +} + +h1 { + padding-bottom: 15px; } .forecast-container p { display: flex; - justify-content: space-between; - /* This makes the day and temperature sit at opposite ends */ + font-size: 21px; padding: 10px; border-bottom: 1px dotted #2e523a; /* Dotted line bottom */ - font-size: 18px; - color: #2e523a; + color: #2A5510; + line-height: 36px; } /* Media queries */ -/* LOOK THROUGH THIS TOMORROW AND CHANGE IT*/ -/* Smartphone*/ -@media only screen and (min-width: 320px) and (max-width: 767px) { - body { - padding: 40px; - } - - .current-weather { - font-size: 14px; - } - - h1 { - font-size: 20px; - } - - h2 { - font-size: 24px; - } - - .forecast-container p { - font-size: 14px; - } -} - /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 1023px) { body { padding: 50px; } - - .current-weather { - font-size: 17px; - } - - h1 { - font-size: 26px; - } - - h2 { - font-size: 30px; - } } /* Desktop */ @media only screen and (min-width: 1024px) and (max-width: 1600px) { body { - max-width: 1200px; - margin: 0 auto; - } - - .current-weather { - font-size: 18px; - } - - h1 { - font-size: 28px; - } - - h2 { - font-size: 32px; + /* margin: 0 auto; */ + padding: 60px; } } \ No newline at end of file From eabde6ff23da14d311e618bafd839a648bd85403 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 29 Sep 2024 17:02:47 +0200 Subject: [PATCH 09/12] Added content to readme file --- README.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index f8b15f4cb..476277a6f 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,7 @@ # Weather App - -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This weeks assignment was to create a weather app using external data from an API. We could chose between two different designs and I chose the second design option. I based my weather app on data of the current weather in Stockholm and a 4-day forecast. During this project we used the fetch functions to implement the data from the API. ## 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? +This week was better than the two previous ones for me. I tried to be extra attentive during the live sessions this week and took notes. I used different helpful tools such as google, chatgbt and the inspector. If I had more time I would look into how I could show the 4-day forecast data with the degrees on the right side and the days on the left. I tried this out but I didn't manage to make it work. When I tried it out something else in the code changed and I ended up having the days and the degrees next to each other instead. ## 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. From 6f3a18fb9baa0fa9a7786f8917ca159fbadc3197 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 29 Sep 2024 17:18:50 +0200 Subject: [PATCH 10/12] deleting code folder - problems with deploying site --- Code/index.html => index.html | 0 Code/script.js => script.js | 0 Code/style.css => style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename Code/index.html => index.html (100%) rename Code/script.js => script.js (100%) rename Code/style.css => style.css (100%) diff --git a/Code/index.html b/index.html similarity index 100% rename from Code/index.html rename to index.html diff --git a/Code/script.js b/script.js similarity index 100% rename from Code/script.js rename to script.js diff --git a/Code/style.css b/style.css similarity index 100% rename from Code/style.css rename to style.css From c6bfa0117eb76bf7c72db0ded998bb41f83db96c Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 29 Sep 2024 17:21:40 +0200 Subject: [PATCH 11/12] Added deployed link --- pull_request_template.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pull_request_template.md b/pull_request_template.md index 70fa177f7..52f3a5f06 100644 --- a/pull_request_template.md +++ b/pull_request_template.md @@ -1,3 +1,2 @@ ## Netlify link -Add your Netlify link here. -PS. Don't forget to add it in your readme as well. +https://elinasweatherapp2.netlify.app/ From 9249d318788e9f3a5429543326ef66139ec937f5 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Tue, 8 Oct 2024 12:47:23 +0200 Subject: [PATCH 12/12] Updated changes requested --- .DS_Store | Bin 6148 -> 6148 bytes README.md | 1 + index.html | 38 +------------------------------------- script.js | 1 - style.css | 35 +++++++++++++++++++++++------------ 5 files changed, 25 insertions(+), 50 deletions(-) diff --git a/.DS_Store b/.DS_Store index 135244b077e0e94e4dfc129a1afce6208fb6fd4e..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 100644 GIT binary patch delta 51 vcmZoMXfc?e&B4IH0LBvwMFg0D92j6^U=Y|?IE{T`gVbaL5thx|96$L1%DD*$ delta 77 zcmZoMXfc?eJ=s8n#gv7?nIWGcg(0;pxF|0tKQEnufq@Z-nSdAsKx`luU_h4Nn7Ei7 LqSunset

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - + sunglasses

Get your sunnies on. diff --git a/script.js b/script.js index 3484bd20f..d8dfb035d 100644 --- a/script.js +++ b/script.js @@ -7,7 +7,6 @@ const city = "Stockholm"; // Create URL for current weather const URL = `${BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`; -console.log(URL) const errorDiv = document.getElementById("error"); diff --git a/style.css b/style.css index 8cee15bdc..4a29f2900 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,8 @@ body { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; font-family: 'Arial', sans-serif; background-color: #F7E9B9; color: #2A5510; @@ -7,10 +11,12 @@ body { } .current-weather { - font-weight: 400; - padding-left: 10px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; font-size: 21px; - line-height: 25.6px; + padding-bottom: 40px; } p { @@ -19,21 +25,26 @@ p { } #image { - padding-left: 10px; + display: block; + margin: 30px auto; } -h1, -#location { +h1 { + margin-top: 20px; + text-align: left; font-size: 37px; - margin-bottom: 10px; + padding-top: 15px; + padding-bottom: 15px; color: #2A5510; - padding-left: 10px; - line-height: 45.1px; - font-weight: 700; } -h1 { - padding-bottom: 15px; +#location { + margin-top: 20px; + text-align: left; + font-size: 37px; + color: #2A5510; + padding-left: 5px; + } .forecast-container p {