diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..5008ddfcf Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index f8b15f4cb..091306f60 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,8 @@ # 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. +https://elinasweatherapp2.netlify.app/ diff --git a/index.html b/index.html new file mode 100644 index 000000000..df80511ff --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + + Weather app + + + + + + +
+ +
+ +
+

+

+

Sunrise

+

Sunset

+
+ + + sunglasses + + +

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

+ + +
+ + + + + \ No newline at end of file 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/ diff --git a/script.js b/script.js new file mode 100644 index 000000000..d8dfb035d --- /dev/null +++ b/script.js @@ -0,0 +1,84 @@ +// 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"; + +const city = "Stockholm"; + +// Create URL for current weather +const URL = `${BASE_URL}?q=${city}&units=metric&APPID=${API_KEY}`; + +const errorDiv = document.getElementById("error"); + +//Fetch current weather data +fetch(URL) + .then(response => response.json()) + .then(data => { + + 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 + 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" }); + + // Display weather data on page + document.getElementById("location").innerText = `${cityName}`; + document.getElementById("temperature").innerText = `${temp}°`; + document.getElementById("weather").innerText = `${capitalizedWeather}`; // Use capitalized description + document.getElementById("sunrise").innerText = `${sunriseTime}`; + document.getElementById("sunset").innerText = `${sunsetTime}`; + }) + + // 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}`; + +fetch(forecastURL) + .then(response => response.json()) + .then(data => { + const forecastList = document.getElementById("forecast-list"); + + //Group forecast date by days and calculate average temperature + 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 = ""; + + // 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}°`; + + forecastList.appendChild(forecastItem); + }); + }) + + // Error message + .catch(error => { + errorDiv.innerText = "Something went wrong." + }); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..4a29f2900 --- /dev/null +++ b/style.css @@ -0,0 +1,74 @@ +body { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + font-family: 'Arial', sans-serif; + background-color: #F7E9B9; + color: #2A5510; + margin: 0; + padding: 40px; +} + +.current-weather { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; + font-size: 21px; + padding-bottom: 40px; +} + +p { + font-size: 21px; + margin: 4px 0; +} + +#image { + display: block; + margin: 30px auto; +} + +h1 { + margin-top: 20px; + text-align: left; + font-size: 37px; + padding-top: 15px; + padding-bottom: 15px; + color: #2A5510; +} + +#location { + margin-top: 20px; + text-align: left; + font-size: 37px; + color: #2A5510; + padding-left: 5px; + +} + +.forecast-container p { + display: flex; + font-size: 21px; + padding: 10px; + border-bottom: 1px dotted #2e523a; + /* Dotted line bottom */ + color: #2A5510; + line-height: 36px; +} + +/* Media queries */ +/* Tablet */ +@media only screen and (min-width: 768px) and (max-width: 1023px) { + body { + padding: 50px; + } +} + +/* Desktop */ +@media only screen and (min-width: 1024px) and (max-width: 1600px) { + body { + /* margin: 0 auto; */ + padding: 60px; + } +} \ No newline at end of file