diff --git a/README.md b/README.md index f8b15f4cb..0e980faf4 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 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 task involves building a weather app that fetches data from an API and presents it in a user-friendly format. The app should display the city name, current temperature (rounded to one decimal place), and a weather description. Additional features include showing the sunrise and sunset times in a readable format, and a four-day weather forecast, using data from the API filtered to display the same time each day (e.g., 12:00). The app must be styled to match a provided design and be responsive for different screen sizes ## 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? +Initially, I found it quite challenging to understand how to properly code for retrieving data from the API. Eventually, things started to click, especially when it came to fetching specific data, such as the current temperature. However, when the data was displayed in formats like milliseconds, I encountered a new issue. I had to solve that by writing additional code to convert the milliseconds into the correct time, date, temperature, etc. It was tricky, but after a lot of Googling, I managed to format the data correctly. + +Another challenge was styling the app, as it had been a while since I last worked on CSS. It took some time to get back into it. Getting the forecast for the next four days was also difficult, but I managed to resolve that issue as well, thanks to Google and ChatGPT. ## 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://jonas-weather-app.netlify.app/ diff --git a/img/Path 7.png b/img/Path 7.png new file mode 100644 index 000000000..52a4f3c8a Binary files /dev/null and b/img/Path 7.png differ diff --git a/img/clody.png b/img/clody.png new file mode 100644 index 000000000..5e11f5646 Binary files /dev/null and b/img/clody.png differ diff --git a/img/clouds.png b/img/clouds.png new file mode 100644 index 000000000..744e30e52 Binary files /dev/null and b/img/clouds.png differ diff --git a/img/deafult.png b/img/deafult.png new file mode 100644 index 000000000..38aa02ff1 Binary files /dev/null and b/img/deafult.png differ diff --git a/img/foggy.png b/img/foggy.png new file mode 100644 index 000000000..f2df357d0 Binary files /dev/null and b/img/foggy.png differ diff --git a/img/night.png b/img/night.png new file mode 100644 index 000000000..83a935cd5 Binary files /dev/null and b/img/night.png differ diff --git a/img/rain.png b/img/rain.png new file mode 100644 index 000000000..6bc677727 Binary files /dev/null and b/img/rain.png differ diff --git a/img/snow.png b/img/snow.png new file mode 100644 index 000000000..e25ad3cf8 Binary files /dev/null and b/img/snow.png differ diff --git a/img/sun.png b/img/sun.png new file mode 100644 index 000000000..38aa02ff1 Binary files /dev/null and b/img/sun.png differ diff --git a/img/thunderstorm.png b/img/thunderstorm.png new file mode 100644 index 000000000..f82335921 Binary files /dev/null and b/img/thunderstorm.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..ba8f5f3f6 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + + Weather forecast + + + + + + +
+
+
+ +
+
+
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 000000000..cba7fc217 --- /dev/null +++ b/script.js @@ -0,0 +1,60 @@ +const weatherRightNow = document.getElementById('weather-right-now'); +const sunsetSunrise = document.getElementById('sunset-sunrise'); +const forecast = document.getElementById('forecast'); +document.body.style.fontFamily = 'MyCustomFont, sans-serif'; + +// Fetch current weather data for Stockholm +fetch('https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=3492ebb354e19f61676ca7b4ced6d196') + .then((response) => response.json()) + .then((json) => { + const temperature = json.main.temp.toFixed(0); + const description = json.weather[0].description; + const icon = json.weather[0].icon; + const sunrise = new Date(json.sys.sunrise * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + const sunset = new Date(json.sys.sunset * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + const timestamp = new Date(json.dt * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + + weatherRightNow.innerHTML = `

${temperature}°C

`; + weatherRightNow.innerHTML += `

${json.name}

`; + weatherRightNow.innerHTML += `

Time: ${timestamp}

`; + weatherRightNow.innerHTML += `

${description} Weather icon

`; + + sunsetSunrise.innerHTML += `

Sunrise: ${sunrise} | Sunset: ${sunset}

`; + }) + .catch((error) => { + console.error('Error fetching weather data:', error); + }); + +// Fetch forecast for Stockholm +fetch('https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=3492ebb354e19f61676ca7b4ced6d196') + .then(response => response.json()) + .then(data => { + forecast.innerHTML = ''; // Clear previous content + + const today = new Date().getDate(); // Today's date + const dailyForecasts = []; + + data.list.forEach(item => { + const itemDate = new Date(item.dt_txt).getDate(); // Date for each forecast + + // Only get one forecast per day, ensuring it's a new day + if (!dailyForecasts.some(f => new Date(f.dt_txt).getDate() === itemDate)) { + dailyForecasts.push(item); + } + }); + + // Limit to today + four days ahead + const forecastDays = dailyForecasts.slice(1, 5); + + // Iterate over forecast days and create HTML content + forecastDays.forEach(item => { + forecast.innerHTML += ` +
+

${new Date(item.dt_txt).toLocaleDateString('ENG', { weekday: 'short' })}

+

Weather icon

+

${item.main.temp.toFixed(0)}°C

+

${item.wind.speed} m/s

+
`; + }); + }) + .catch(error => console.log('Error fetching data:', error)); diff --git a/style.css b/style.css new file mode 100644 index 000000000..66b9ac161 --- /dev/null +++ b/style.css @@ -0,0 +1,77 @@ +body { + margin: 0 auto; +} + +.background { + background-color: #15199e; + padding-bottom: 20px; + overflow-x: hidden; + clip-path: ellipse(110% 100% at 50% 0%); +} + +.weather-right-now { + overflow-x: hidden; + margin: 10px 0px 0px 0px; + text-align: center; + color: white; +} + +.degree { + font-size: 0.5em; + vertical-align: super; +} + +.sunset-sunrise { + font-size: 10px; + text-align: center; + color: white; +} + +.forecast { + margin-top: 2rem; + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 100%; + align-items: center; + font-size: 22px; +} + +.forecast-day { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 2rem; + text-align: center; + margin: 3px; + align-items: center; +} + +h1 { + font-family: "Roboto", sans-serif; + font-size: 100px; + font-weight: 300; + margin: 0; + color: white; +} + +h2 { + font-family: "Roboto", sans-serif; + font-size: 45px; + font-weight: 320; + margin: 0; + color: white; +} + +p { + font-family: "Roboto", sans-serif; + font-size: 22px; + font-weight: 300; +} + +img { + width: 70px; + height: 70px; + vertical-align: middle; + filter: none; +} \ No newline at end of file