Skip to content

added sunrise sunset api + displayed on page #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added sunrise sunset api + displayed on page #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
240 changes: 152 additions & 88 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 [email protected]" 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)/[email protected]"" alt="outlined icon with weather-appropriate accessories">
<h1>Don’t forget your umbrella. It’s wet in Stockholm today.</h1>`;
}
}
};
fetchData();
//----------------------------------
Expand All @@ -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>
Expand Down Expand Up @@ -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)
Expand Down
Loading