diff --git a/index.html b/index.html
index 804d2ea..e996574 100644
--- a/index.html
+++ b/index.html
@@ -39,14 +39,16 @@
         <p id="topTemp">23&deg;</p> -->
       </div>
 
-      <div class="top-info">
-        <p id="topSunrise">sunrise</p>
-        <p id="sunriseTime">06.00</p>
-      </div>
+      <div id="sunTimesContainer">
+        <!-- <div class="top-info">
+          <p id="topSunrise">sunrise</p>
+          <p id="sunriseTime">06.00</p>
+        </div>
 
-      <div class="top-info">
-        <p id="topSunset">sunset</p>
-        <p id="sunsetTime">22.00</p>
+        <div class="top-info">
+          <p id="topSunset">sunset</p>
+          <p id="sunsetTime">22.00</p>
+        </div> -->
       </div>
     </section>
 
diff --git a/index.js b/index.js
index 657a142..5749ea1 100644
--- a/index.js
+++ b/index.js
@@ -1,88 +1,169 @@
 "use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-    function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-    function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 };
 //----------------------------------
 // Dom selectors
 //----------------------------------
 const topInfoContainer = document.getElementById("topInfoContainer");
-const weeklyTempContainer = document.getElementById("weeklyTemp"); /*  added this: dom selector for bottom section */
+const weeklyTempContainer = document.getElementById("weeklyTemp");
 const adviceContainer = document.getElementById("adviceSection");
+const sunTimesContainer = document.getElementById("sunTimesContainer");
 //----------------------------------
 // API link
 //----------------------------------
 const weatherURL = `https://opendata-download-metfcst.smhi.se/api/category/snow1g/version/1/geotype/point/lon/16.158/lat/58.5812/data.json?parameters=air_temperature,symbol_code`;
+const sunriseSunset = `https://api.sunrisesunset.io/json?lat=58.5812&lng=16.158`; /* Look into adjusting coordinates */
 //----------------------------------
-// Fetch API function
+// Fetch weather API function
 //----------------------------------
 let data; /*Look into this */
 let todayWeather;
 const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
-  try {
-    const response = yield fetch(weatherURL);
-    if (!response.ok) {
-      throw new Error(`HTTP error: ${response.status}`);
+    try {
+        const response = yield fetch(weatherURL);
+        if (!response.ok) {
+            throw new Error(`HTTP error: ${response.status}`);
+        }
+        data = yield response.json();
+        console.log(data);
+        displayWeeklyTemps(); /*  added this. Calling function for weekly forecast */
+        todayForecast();
+    }
+    catch (error) {
+        console.log("catch and error"); /* What do we mean here? */
+    }
+});
+//----------------------------------
+// Fetch sunrise/sunset API function
+//----------------------------------
+let sunData;
+const fetchSunriseSunsetData = () => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const response = yield fetch(sunriseSunset);
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        sunData = yield response.json();
+        console.log(sunData);
+        displaySunTimes(sunData);
+    }
+    catch (error) {
+        console.error("An error occured:", error);
     }
-    data = yield response.json();
-    console.log(data);
-    displayWeeklyTemps(); /*  added this. Calling function for weekly forecast */
-    todayForecast();
-  }
-  catch (error) {
-    console.log("catch and error");
-  }
 });
 //----------------------------------
+// Sunrise/sunset function
+//----------------------------------
+// interface SunriseSunsetData { /* This not needed? */
+//   sunrise: number
+//   sunset: number
+// }
+// let sunriseSunsetTimes: SunriseSunsetData 
+const displaySunTimes = (sunData) => {
+    const sunrise = sunData.results.sunrise;
+    const sunset = sunData.results.sunset;
+    sunTimesContainer.innerHTML = `
+        <div class="top-info">
+          <p id="topSunrise">Sunrise</p>
+          <p id="sunriseTime">${sunrise}</p>
+        </div>
+
+        <div class="top-info">
+          <p id="topSunset">sunset</p>
+          <p id="sunsetTime">${sunset}</p>
+        </div>
+  `;
+};
+fetchSunriseSunsetData();
+//Mapping codes and conditions:
+const weatherSymbol = (code) => {
+    const mapping = {
+        1: "Clear sky",
+        2: "Nearly clear",
+        3: "Variable clouds",
+        4: "Halfclear sky",
+        5: "Cloudy",
+        6: "Overcast",
+        7: "Fog",
+        8: "Light rain",
+        9: "Moderate rain",
+        10: "Heavy showers",
+        11: "Thunderstorm",
+        12: "Light sleet",
+        13: "Moderate sleet",
+        14: "Heavy sleet",
+        15: "Light snow",
+        16: "Moderate snow",
+        17: "Heavy snow",
+        18: "Light rain",
+        19: "Moderate rain",
+        20: "Heavy rain",
+        21: "Thunder",
+        22: "Light sleet",
+        23: "Moderate sleet",
+        24: "Heavy sleet",
+        25: "Light snow",
+        26: "Moderate snow",
+        27: "Heavy snow"
+    };
+    return mapping[Math.round(code)] || "Unknown";
+};
+//----------------------------------
 // Show todays forecast function
 //----------------------------------
-const todayForecast = () => {
-  // const timeNow = new Date() /* <-- gets current time. Next step: show data from the timeSeries closest to current time instead of always showing timeSeries[0]. Very hard..... */
-  todayWeather = {
-    condition: data.timeSeries[0].data.symbol_code,
-    airTemp: data.timeSeries[0].data.air_temperature
-  };
-  topInfoContainer.innerHTML = `
+const todayForecast = ( /*data: any*/) => {
+    // const timeNow = new Date() /* <-- gets current time. Next step: show data from the timeSeries closest to current time instead of always showing timeSeries[0]. Very hard..... */
+    const current = data.timeSeries[0].data;
+    const airTemp = current.air_temperature;
+    const conditionCode = current.symbol_code;
+    const conditionLabel = weatherSymbol(conditionCode);
+    todayWeather = {
+        condition: weatherSymbol(data.timeSeries[0].data.symbol_code),
+        airTemp
+    };
+    topInfoContainer.innerHTML = `
         <div class="top-info">
           <p id="topCondition">${todayWeather.condition}</p>
           <hr>
           <p id="topTemp">${todayWeather.airTemp}&deg;</p>
         </div>
   `;
-  if (data.symbol_code === 6) {
-  }
-  showMessage(todayWeather, adviceContainer, weeklyTempContainer);
+    if (data.symbol_code === 6) {
+    }
+    showMessage(todayWeather, adviceContainer, weeklyTempContainer);
 };
 const showMessage = (data, adviceContainer, weeklyTempContainer) => {
-  if (!weeklyTempContainer || !adviceContainer)
-    return;
-  adviceContainer.innerHTML = ``;
-  if ((data.condition >= 1 && data.condition <= 2) && data.airTemp >= 20) {
-    document.body.style.backgroundColor = "#F7E9B9";
-    document.body.style.color = "#2A5510";
-    adviceContainer.innerHTML = `
+    if (!weeklyTempContainer || !adviceContainer)
+        return;
+    adviceContainer.innerHTML = ``;
+    if ((data.condition >= 1 && data.condition <= 2) && data.airTemp >= 20) {
+        document.body.style.backgroundColor = "#F7E9B9";
+        document.body.style.color = "#2A5510";
+        adviceContainer.innerHTML = `
      <img class="advice-img" src="Group 7.png" alt="outlined icon with weather-appropriate accessories">
     <h1>get your sunglasses on. Stockholm is amazing</h1>`;
-  }
-  else if ((data.condition >= 3 && data.condition <= 6) && data.airTemp < 20) {
-    document.body.style.backgroundColor = "#FFFFFF";
-    document.body.style.color = "#F47775";
-    adviceContainer.innerHTML = `
+    }
+    else if ((data.condition >= 3 && data.condition <= 6) && data.airTemp < 20) {
+        document.body.style.backgroundColor = "#FFFFFF";
+        document.body.style.color = "#F47775";
+        adviceContainer.innerHTML = `
     <img class="advice-img" src="./Figma designs for students (2)/Group 8@2x.png" alt="outlined icon with weather-appropriate accessories">
     <h1>Light a fire and get cosy. Stockholm is looking grey today. </h1>`;
-  }
-  else if (data.condition >= 8 && data.condition <= 20) {
-    document.body.style.backgroundColor = "#BDE8FA";
-    document.body.style.color = "#164A68";
-    adviceContainer.innerHTML = `
+    }
+    else if (data.condition >= 8 && data.condition <= 20) {
+        document.body.style.backgroundColor = "#BDE8FA";
+        document.body.style.color = "#164A68";
+        adviceContainer.innerHTML = `
     <img class="advice-img" src="./Figma designs for students (1)/noun_Umbrella_2030530@2x.png"" alt="outlined icon with weather-appropriate accessories">
     <h1>Don’t forget your umbrella. It’s wet in Stockholm today.</h1>`;
-  }
+    }
 };
 fetchData();
 //----------------------------------
@@ -91,28 +172,28 @@ fetchData();
 const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; /* Array of weekdays. To be used for displaying weekdays dynamically */
 let weatherForecast; /* Defining weatherForecast object */
 const displayWeeklyTemps = () => {
-  const rotateWeekdays = () => {
-    const today = new Date(); /* Gets today */
-    const todayIndex = today.getDay(); /* Gets index of today. 0 = sunday */
-    const rotated = weekDays.slice(todayIndex).concat(weekDays.slice(0, todayIndex));
-    return rotated;
-  };
-  const rotatedWeekdays = rotateWeekdays();
-  weatherForecast = {
-    firstDay: data.timeSeries[0].data.air_temperature,
-    secondDay: data.timeSeries[25].data.air_temperature,
-    thirdDay: data.timeSeries[49].data.air_temperature,
-    fourthDay: data.timeSeries[59].data.air_temperature,
-    fifthDay: data.timeSeries[63].data.air_temperature,
-    sixthDay: data.timeSeries[67].data.air_temperature,
-    seventhDay: data.timeSeries[71].data.air_temperature
-  };
-  const labels = rotatedWeekdays.map((day, i) => {
-    if (i === 0)
-      return "Today";
-    return day;
-  });
-  weeklyTempContainer.innerHTML = `
+    const rotateWeekdays = () => {
+        const today = new Date(); /* Gets today */
+        const todayIndex = today.getDay(); /* Gets index of today. 0 = sunday */
+        const rotated = weekDays.slice(todayIndex).concat(weekDays.slice(0, todayIndex));
+        return rotated;
+    };
+    const rotatedWeekdays = rotateWeekdays();
+    weatherForecast = {
+        firstDay: data.timeSeries[0].data.air_temperature,
+        secondDay: data.timeSeries[25].data.air_temperature,
+        thirdDay: data.timeSeries[49].data.air_temperature,
+        fourthDay: data.timeSeries[59].data.air_temperature,
+        fifthDay: data.timeSeries[63].data.air_temperature,
+        sixthDay: data.timeSeries[67].data.air_temperature,
+        seventhDay: data.timeSeries[71].data.air_temperature
+    };
+    const labels = rotatedWeekdays.map((day, i) => {
+        if (i === 0)
+            return "Today";
+        return day;
+    });
+    weeklyTempContainer.innerHTML = `
       <div id="mondayTemp">
         <p>${labels[0]}</p>
         <p>${weatherForecast.firstDay}°</p>
@@ -149,23 +230,6 @@ const displayWeeklyTemps = () => {
       </div>
   `;
 };
-//test to get swedish local time 
-const todaySwedishForecast = (data) => {
-  var _a;
-  const now = new Date();
-  const currentHour = now.getHours();
-  const entry = (_a = data.timeSeries.find((item) => {
-    const forecastDate = new Date(item.validTime);
-    return forecastDate.getHours() === currentHour;
-  })) !== null && _a !== void 0 ? _a : data.timeSeries[0];
-  const forecastDate = new Date(entry.validTime);
-  console.log("forecast time (swedish local", forecastDate.toString);
-};
-/* Next step figure out:
-- which timeSeries to use for each day?
-- Average temp or lowest and highest? How find?
-- How to loop through days and show current day on top?
-*/
 /*
 const symbolMeanings: string[] = [
   "", // index 0 (unused, just a placeholder)
diff --git a/index.ts b/index.ts
index c8db353..69f7c29 100644
--- a/index.ts
+++ b/index.ts
@@ -2,8 +2,9 @@
 // Dom selectors
 //----------------------------------
 const topInfoContainer = document.getElementById("topInfoContainer") as HTMLElement
-const weeklyTempContainer = document.getElementById("weeklyTemp") as HTMLElement /*  added this: dom selector for bottom section */
+const weeklyTempContainer = document.getElementById("weeklyTemp") as HTMLElement
 const adviceContainer = document.getElementById("adviceSection") as HTMLElement
+const sunTimesContainer = document.getElementById("sunTimesContainer") as HTMLElement
 
 
 //----------------------------------
@@ -11,6 +12,8 @@ const adviceContainer = document.getElementById("adviceSection") as HTMLElement
 //----------------------------------
 const weatherURL = `https://opendata-download-metfcst.smhi.se/api/category/snow1g/version/1/geotype/point/lon/16.158/lat/58.5812/data.json?parameters=air_temperature,symbol_code`
 
+const sunriseSunset = `https://api.sunrisesunset.io/json?lat=58.5812&lng=16.158` /* Look into adjusting coordinates */
+
 
 //----------------------------------
 // Suggestions of interfaces:
@@ -27,7 +30,7 @@ interface TodayWeatherData {
 }
 
 //----------------------------------
-// Fetch API function
+// Fetch weather API function
 //----------------------------------
 let data: any /*Look into this */
 let todayWeather: TodayWeatherData
@@ -45,11 +48,63 @@ const fetchData = async () => {
     todayForecast()
 
   } catch (error) {
-    console.log("catch and error")
+    console.log("catch and error") /* What do we mean here? */
+  }
+}
+
+
+//----------------------------------
+// Fetch sunrise/sunset API function
+//----------------------------------
+let sunData: any
+
+const fetchSunriseSunsetData = async () => {
+  try {
+    const response = await fetch(sunriseSunset)
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`)
+    }
+
+    sunData = await response.json()
+    console.log(sunData)
+    displaySunTimes(sunData)
+
+  } catch (error) {
+    console.error("An error occured:", error)
   }
 }
 
 
+//----------------------------------
+// Sunrise/sunset function
+//----------------------------------
+
+// interface SunriseSunsetData { /* This not needed? */
+//   sunrise: number
+//   sunset: number
+// }
+
+// let sunriseSunsetTimes: SunriseSunsetData 
+
+const displaySunTimes = (sunData: any) => {
+
+  const sunrise = sunData.results.sunrise
+  const sunset = sunData.results.sunset
+
+  sunTimesContainer.innerHTML = `
+        <div class="top-info">
+          <p id="topSunrise">Sunrise</p>
+          <p id="sunriseTime">${sunrise}</p>
+        </div>
+
+        <div class="top-info">
+          <p id="topSunset">sunset</p>
+          <p id="sunsetTime">${sunset}</p>
+        </div>
+  `
+}
+
+fetchSunriseSunsetData()
 
 //Mapping codes and conditions:
 
@@ -148,7 +203,6 @@ const showMessage = (data: TodayWeatherData, adviceContainer: HTMLElement, weekl
 fetchData()
 
 
-
 //----------------------------------
 // Display weekly temps bottom part function
 //----------------------------------