diff --git a/README.md b/README.md
index f8b15f4cb..0f647b99f 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,11 @@
# 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.
+My first API project. It shows the weather in Malmö, sunrise+sunset and a 4 day forecast.
## 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'm using two different API:s, one for the weather and one for the forecast. I'm filtering the data and using innerHTML to display the information. I would like to add a search bar so that you could get the weather for other cities as well. But I spent my time making it look cute and colorful instead! :D
## 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://grayslay.netlify.app/ - my colorful weather app!
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
new file mode 100644
index 000000000..de2067e14
--- /dev/null
+++ b/code/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+ Gray slay
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/code/script.js b/code/script.js
new file mode 100644
index 000000000..04e06d041
--- /dev/null
+++ b/code/script.js
@@ -0,0 +1,104 @@
+console.log('Vamos a la playa')
+
+// https://api.openweathermap.org/data/2.5/weather?q=Malmo,Sweden&units=metric&APPID=f6ea1936f0499b177ea24494f76ba447
+
+// https://api.openweathermap.org/data/2.5/forecast?q=Malmo,Sweden&units=metric&APPID=f6ea1936f0499b177ea24494f76ba447
+
+const myCity = document.getElementById('cityWeather')
+const theSun = document.getElementById('sunRiseSet')
+const futureWeatherContainer = document.getElementById('futureWeather');
+
+const weatherIcons = {
+ '01d': 'https://openweathermap.org/img/wn/01d@2x.png', // clear sky, day
+ '01n': 'https://openweathermap.org/img/wn/01n@2x.png', // clear sky, night
+ '02d': 'https://openweathermap.org/img/wn/02d@2x.png', // few clouds, day
+ '02n': 'https://openweathermap.org/img/wn/02n@2x.png', // few clouds, night
+ '03d': 'https://openweathermap.org/img/wn/03d@2x.png', // scattered clouds, day
+ '03n': 'https://openweathermap.org/img/wn/03n@2x.png', // scattered clouds, night
+ '04d': 'https://openweathermap.org/img/wn/04d@2x.png', // broken clouds, day
+ '04n': 'https://openweathermap.org/img/wn/04n@2x.png', // broken clouds, night
+ '09d': 'https://openweathermap.org/img/wn/09d@2x.png', // shower rain, day
+ '09n': 'https://openweathermap.org/img/wn/09n@2x.png', // shower rain, night
+ '10d': 'https://openweathermap.org/img/wn/10d@2x.png', // rain, day
+ '10n': 'https://openweathermap.org/img/wn/10n@2x.png', // rain, night
+ '11d': 'https://openweathermap.org/img/wn/11d@2x.png', // thunderstorm, day
+ '11n': 'https://openweathermap.org/img/wn/11n@2x.png', // thunderstorm, night
+ '13d': 'https://openweathermap.org/img/wn/13d@2x.png', // snow, day
+ '13n': 'https://openweathermap.org/img/wn/13n@2x.png', // snow, night
+ '50d': 'https://openweathermap.org/img/wn/50d@2x.png', // mist, day
+ '50n': 'https://openweathermap.org/img/wn/50n@2x.png', // mist, night
+};
+
+fetch('https://api.openweathermap.org/data/2.5/weather?q=Malmo,Sweden&units=metric&APPID=f6ea1936f0499b177ea24494f76ba447')
+ .then((response) => {
+ return response.json()
+ })
+ .then((json) => {
+ const temperature = json.main.temp; // Get the actual temperature
+ const cityName = json.name;
+ const weatherDescription = json.weather[0].description;
+ const sunriseTimestamp = json.sys.sunrise;
+ const sunsetTimestamp = json.sys.sunset;
+
+ console.log(json)
+
+ // Convert timestamps to date objects and format
+ const sunriseDate = new Date(sunriseTimestamp * 1000);
+ const sunsetDate = new Date(sunsetTimestamp * 1000);
+ const sunriseTime = sunriseDate.toLocaleTimeString('en-US',
+ { timeStyle: 'short', hour12: false });
+ const sunsetTime = sunsetDate.toLocaleTimeString('en-US', { timeStyle: 'short', hour12: false });
+
+
+
+ const weatherIconCode = json.weather[0].icon;
+ const iconUrl = weatherIcons[weatherIconCode] || 'https://openweathermap.org/img/wn/unknown.png'; // Default icon for unknown code
+
+ cityWeather.innerHTML = `
The temperature in ${cityName}, Sweden is ${temperature.toFixed(1)}°C.️
The weather is giving: ${weatherDescription}.
`;
+
+ // Update the sunrise/sunset element
+ theSun.innerHTML = `
Sunrise: ${sunriseTime}
Sunset: ${sunsetTime}
`;
+ })
+
+fetch('https://api.openweathermap.org/data/2.5/forecast?q=Malmo,Sweden&units=metric&APPID=f6ea1936f0499b177ea24494f76ba447')
+ .then((response) => {
+ return response.json();
+
+ })
+ .then((data) => {
+ const today = new Date();
+
+ // Find the closest noon forecast after the current time
+ const noonForecasts = data.list.filter(forecast => {
+ const forecastTime = new Date(forecast.dt_txt);
+ return forecastTime.getHours() === 12 && forecastTime.getMinutes() === 0 && forecastTime > today;
+ });
+
+ if (noonForecasts.length > 0) {
+ const futureWeatherDiv = document.getElementById('futureWeather');
+ let htmlContent = '';
+
+ // Show the next 4 noon forecasts
+ for (let i = 0; i < Math.min(noonForecasts.length, 4); i++) {
+ const forecast = noonForecasts[i];
+ const forecastDate = new Date(forecast.dt_txt);
+ const formattedDate = forecastDate.toLocaleDateString('en-US', { weekday: 'short' });
+
+ // Get weather icon code
+ const weatherIconCode = forecast.weather[0].icon;
+
+ // Get icon URL based on code or default
+ const iconUrl = weatherIcons[weatherIconCode] || 'https://openweathermap.org/img/wn/unknown.png';
+
+ htmlContent += `