From fb40baec01ef87d8cd2ee5839f00643b034a990c Mon Sep 17 00:00:00 2001 From: hobbyist <82273354+ronynn@users.noreply.github.com> Date: Wed, 29 May 2024 21:06:47 +0530 Subject: [PATCH] graphs --- github-mark-white.svg | 1 + github-mark.svg | 1 + index.html | 208 ++++++++++++- manifest.webmanifest | 2 +- script.js | 702 ++++++++++++++++++++++++++++++++++++++---- tsconfig.json | 38 +++ weather.nim | 332 ++++++++++++++++++++ weather.ts | 391 +++++++++++++++++++++++ 8 files changed, 1606 insertions(+), 69 deletions(-) create mode 100644 github-mark-white.svg create mode 100644 github-mark.svg create mode 100644 tsconfig.json create mode 100644 weather.nim create mode 100644 weather.ts diff --git a/github-mark-white.svg b/github-mark-white.svg new file mode 100644 index 0000000..d5e6491 --- /dev/null +++ b/github-mark-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/github-mark.svg b/github-mark.svg new file mode 100644 index 0000000..37fa923 --- /dev/null +++ b/github-mark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index d936c79..6f2e08c 100644 --- a/index.html +++ b/index.html @@ -23,11 +23,11 @@ - Weather by Ronynn + Ronynn Weather + + + - + + +
+
+ +
@@ -168,11 +275,11 @@

-
-

+
+

-
+
@@ -182,17 +289,92 @@

+ +
+ + + + +
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ Made by Ronynn
+
+ Blog Post
+
+ Please give some stars 🌟 at the + github repository. +
+
+ +
+
+ + diff --git a/manifest.webmanifest b/manifest.webmanifest index 8e3cae9..3975574 100644 --- a/manifest.webmanifest +++ b/manifest.webmanifest @@ -14,7 +14,7 @@ }], "theme_color": "#ffffff", "background_color": "#ffffff", - "display": "fullscreen", + "display": "minimal-ui", "scope": "/weather/", "start_url": "/weather/" } diff --git a/script.js b/script.js index a8684fb..9d79016 100644 --- a/script.js +++ b/script.js @@ -18,24 +18,22 @@ async function getWeather() { const response = await fetch(api_url); const data = await response.json(); - const weath = data.current_condition[0]; let loc = data.nearest_area[0].areaName[0].value; let region = data.nearest_area[0].region[0].value; - let temp = weath.temp_C; + let temp = data.current_condition[0].temp_C; let maxtemp = data.weather[0].maxtempC; let mintemp = data.weather[0].mintempC; - let humidity = weath.humidity; - let feel = weath.FeelsLikeC; - let time = weath.localObsDateTime; - let desc = weath.weatherDesc[0].value; - let wCode = weath.weatherCode; - let wind = weath.windspeedKmph; - - let dir = weath.winddir16Point; - let uv = weath.uvIndex; + let humidity = data.current_condition[0].humidity; + let feel = data.current_condition[0].FeelsLikeC; + let time = data.current_condition[0].localObsDateTime; + let desc = data.current_condition[0].weatherDesc[0].value; + let wCode = data.current_condition[0].weatherCode; + let wind = data.current_condition[0].windspeedKmph; + let dir = data.current_condition[0].winddir16Point; + let uv = data.current_condition[0].uvIndex; let nextdaymax = data.weather[1].maxtempC; let nextdaymin = data.weather[1].mintempC; @@ -43,6 +41,193 @@ async function getWeather() { let nextnextdaymax = data.weather[2].maxtempC; let nextnextdaymin = data.weather[2].mintempC; + // ------------------------- today + + // 0am + let today0temp = data.weather[0].hourly[0].tempC; + let today0winddir = data.weather[0].hourly[0].winddir16Point; + let today0windspeed = data.weather[0].hourly[0].windspeedKmph; + let today0weatherdesc = data.weather[0].hourly[0].weatherDesc[0].value; + + // 3am + let today1temp = data.weather[0].hourly[1].tempC; + let today1winddir = data.weather[0].hourly[1].winddir16Point; + let today1windspeed = data.weather[0].hourly[1].windspeedKmph; + let today1weatherdesc = data.weather[0].hourly[1].weatherDesc[0].value; + + // 6am + let today2temp = data.weather[0].hourly[2].tempC; + let today2winddir = data.weather[0].hourly[2].winddir16Point; + let today2windspeed = data.weather[0].hourly[2].windspeedKmph; + let today2weatherdesc = data.weather[0].hourly[2].weatherDesc[0].value; + + // 9am + let today3temp = data.weather[0].hourly[3].tempC; + let today3winddir = data.weather[0].hourly[3].winddir16Point; + let today3windspeed = data.weather[0].hourly[3].windspeedKmph; + let today3weatherdesc = data.weather[0].hourly[3].weatherDesc[0].value; + + // 12pm + let today4temp = data.weather[0].hourly[4].tempC; + let today4winddir = data.weather[0].hourly[4].winddir16Point; + let today4windspeed = data.weather[0].hourly[4].windspeedKmph; + let today4weatherdesc = data.weather[0].hourly[4].weatherDesc[0].value; + + // 3pm + let today5temp = data.weather[0].hourly[5].tempC; + let today5winddir = data.weather[0].hourly[5].winddir16Point; + let today5windspeed = data.weather[0].hourly[5].windspeedKmph; + let today5weatherdesc = data.weather[0].hourly[5].weatherDesc[0].value; + + // 6pm + let today6temp = data.weather[0].hourly[6].tempC; + let today6winddir = data.weather[0].hourly[6].winddir16Point; + let today6windspeed = data.weather[0].hourly[6].windspeedKmph; + let today6weatherdesc = data.weather[0].hourly[6].weatherDesc[0].value; + + // 9pm + let today7temp = data.weather[0].hourly[7].tempC; + let today7winddir = data.weather[0].hourly[7].winddir16Point; + let today7windspeed = data.weather[0].hourly[7].windspeedKmph; + let today7weatherdesc = data.weather[0].hourly[7].weatherDesc[0].value; + + // ----------------------- nextday + // 0am + let nextday0temp = data.weather[1].hourly[0].tempC; + let nextday0winddir = data.weather[1].hourly[0].winddir16Point; + let nextday0windspeed = data.weather[1].hourly[0].windspeedKmph; + let nextday0weatherdesc = data.weather[1].hourly[0].weatherDesc[0].value; + + // 3am + let nextday1temp = data.weather[1].hourly[1].tempC; + let nextday1winddir = data.weather[1].hourly[1].winddir16Point; + let nextday1windspeed = data.weather[1].hourly[1].windspeedKmph; + let nextday1weatherdesc = data.weather[1].hourly[1].weatherDesc[0].value; + + // 6am + let nextday2temp = data.weather[1].hourly[2].tempC; + let nextday2winddir = data.weather[1].hourly[2].winddir16Point; + let nextday2windspeed = data.weather[1].hourly[2].windspeedKmph; + let nextday2weatherdesc = data.weather[1].hourly[2].weatherDesc[0].value; + + // 9am + let nextday3temp = data.weather[1].hourly[3].tempC; + let nextday3winddir = data.weather[1].hourly[3].winddir16Point; + let nextday3windspeed = data.weather[1].hourly[3].windspeedKmph; + let nextday3weatherdesc = data.weather[1].hourly[3].weatherDesc[0].value; + + // 12pm + let nextday4temp = data.weather[1].hourly[4].tempC; + let nextday4winddir = data.weather[1].hourly[4].winddir16Point; + let nextday4windspeed = data.weather[1].hourly[4].windspeedKmph; + let nextday4weatherdesc = data.weather[1].hourly[4].weatherDesc[0].value; + + // 3pm + let nextday5temp = data.weather[1].hourly[5].tempC; + let nextday5winddir = data.weather[1].hourly[5].winddir16Point; + let nextday5windspeed = data.weather[1].hourly[5].windspeedKmph; + let nextday5weatherdesc = data.weather[1].hourly[5].weatherDesc[0].value; + + // 6pm + let nextday6temp = data.weather[1].hourly[6].tempC; + let nextday6winddir = data.weather[1].hourly[6].winddir16Point; + let nextday6windspeed = data.weather[1].hourly[6].windspeedKmph; + let nextday6weatherdesc = data.weather[1].hourly[6].weatherDesc[0].value; + + // 9pm + let nextday7temp = data.weather[1].hourly[7].tempC; + let nextday7winddir = data.weather[1].hourly[7].winddir16Point; + let nextday7windspeed = data.weather[1].hourly[7].windspeedKmph; + let nextday7weatherdesc = data.weather[1].hourly[7].weatherDesc[0].value; + + // ----------------------- nextnextday + + // 0am + let nextnextday0temp = data.weather[2].hourly[0].tempC; + let nextnextday0winddir = data.weather[2].hourly[0].winddir16Point; + let nextnextday0windspeed = data.weather[2].hourly[0].windspeedKmph; + let nextnextday0weatherdesc = + data.weather[2].hourly[0].weatherDesc[0].value; + + // 3am + let nextnextday1temp = data.weather[2].hourly[1].tempC; + let nextnextday1winddir = data.weather[2].hourly[1].winddir16Point; + let nextnextday1windspeed = data.weather[2].hourly[1].windspeedKmph; + let nextnextday1weatherdesc = + data.weather[2].hourly[1].weatherDesc[0].value; + + // 6am + let nextnextday2temp = data.weather[2].hourly[2].tempC; + let nextnextday2winddir = data.weather[2].hourly[2].winddir16Point; + let nextnextday2windspeed = data.weather[2].hourly[2].windspeedKmph; + let nextnextday2weatherdesc = + data.weather[2].hourly[2].weatherDesc[0].value; + + // 9am + let nextnextday3temp = data.weather[2].hourly[3].tempC; + let nextnextday3winddir = data.weather[2].hourly[3].winddir16Point; + let nextnextday3windspeed = data.weather[2].hourly[3].windspeedKmph; + let nextnextday3weatherdesc = + data.weather[2].hourly[3].weatherDesc[0].value; + + // 12pm + let nextnextday4temp = data.weather[2].hourly[4].tempC; + let nextnextday4winddir = data.weather[2].hourly[4].winddir16Point; + let nextnextday4windspeed = data.weather[2].hourly[4].windspeedKmph; + let nextnextday4weatherdesc = + data.weather[2].hourly[4].weatherDesc[0].value; + + // 3pm + let nextnextday5temp = data.weather[2].hourly[5].tempC; + let nextnextday5winddir = data.weather[2].hourly[5].winddir16Point; + let nextnextday5windspeed = data.weather[2].hourly[5].windspeedKmph; + let nextnextday5weatherdesc = + data.weather[2].hourly[5].weatherDesc[0].value; + + // 6pm + let nextnextday6temp = data.weather[2].hourly[6].tempC; + let nextnextday6winddir = data.weather[2].hourly[6].winddir16Point; + let nextnextday6windspeed = data.weather[2].hourly[6].windspeedKmph; + let nextnextday6weatherdesc = + data.weather[2].hourly[6].weatherDesc[0].value; + + // 9pm + let nextnextday7temp = data.weather[2].hourly[7].tempC; + let nextnextday7winddir = data.weather[2].hourly[7].winddir16Point; + let nextnextday7windspeed = data.weather[2].hourly[7].windspeedKmph; + let nextnextday7weatherdesc = + data.weather[2].hourly[7].weatherDesc[0].value; + + //----------------------- later addition + + let today0feelsc = data.weather[0].hourly[0].FeelsLikeC; + let today1feelsc = data.weather[0].hourly[1].FeelsLikeC; + let today2feelsc = data.weather[0].hourly[2].FeelsLikeC; + let today3feelsc = data.weather[0].hourly[3].FeelsLikeC; + let today4feelsc = data.weather[0].hourly[4].FeelsLikeC; + let today5feelsc = data.weather[0].hourly[5].FeelsLikeC; + let today6feelsc = data.weather[0].hourly[6].FeelsLikeC; + let today7feelsc = data.weather[0].hourly[7].FeelsLikeC; + + let nextday0feelsc = data.weather[1].hourly[0].FeelsLikeC; + let nextday1feelsc = data.weather[1].hourly[1].FeelsLikeC; + let nextday2feelsc = data.weather[1].hourly[2].FeelsLikeC; + let nextday3feelsc = data.weather[1].hourly[3].FeelsLikeC; + let nextday4feelsc = data.weather[1].hourly[4].FeelsLikeC; + let nextday5feelsc = data.weather[1].hourly[5].FeelsLikeC; + let nextday6feelsc = data.weather[1].hourly[6].FeelsLikeC; + let nextday7feelsc = data.weather[1].hourly[7].FeelsLikeC; + + let nextnextday0feelsc = data.weather[2].hourly[0].FeelsLikeC; + let nextnextday1feelsc = data.weather[2].hourly[1].FeelsLikeC; + let nextnextday2feelsc = data.weather[2].hourly[2].FeelsLikeC; + let nextnextday3feelsc = data.weather[2].hourly[3].FeelsLikeC; + let nextnextday4feelsc = data.weather[2].hourly[4].FeelsLikeC; + let nextnextday5feelsc = data.weather[2].hourly[5].FeelsLikeC; + let nextnextday6feelsc = data.weather[2].hourly[6].FeelsLikeC; + let nextnextday7feelsc = data.weather[2].hourly[7].FeelsLikeC; + + // --------------- function getCurrentDate() { const months = [ "Jan", @@ -83,7 +268,7 @@ async function getWeather() { document.getElementById("minmax").innerHTML = maxtemp + "°C" + "
" + mintemp + "°C"; - document.getElementById("other").innerHTML = + document.getElementById("detailsnow").innerHTML = "Feels like: " + feel + "°C
Ultraviolet Index: " + @@ -93,9 +278,7 @@ async function getWeather() { "%
Wind: " + wind + "kmph from " + - dir + - "
Last Satellite Data Fetch: " + - time; + dir; document.getElementById("tomorrow").innerHTML = "Tomorrow" + @@ -117,37 +300,209 @@ async function getWeather() { "Min: " + nextnextdaymin; - if ( - wCode === "119" || - wCode === "122" || - wCode === "176" || - wCode === "179" || - wCode === "200" || - wCode === "263" || - wCode === "266" || - wCode === "296" || - wCode === "299" || - wCode === "302" || - wCode === "306" || - wCode === "308" || - wCode === "353" || - wCode === "356" || - wCode === "359" || - wCode === "386" || - wCode === "389" - ) { - document.documentElement.style.setProperty( - "--bg-image", - "url(blue.png)" - ); - } + // For Today +document.getElementById("today").innerHTML += ` +Today in ${loc}, ${region}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TimeTemperatureWind (km/h)Condition
0 AM${today0temp}(${today0feelsc})°C${today0windspeed} km/h, ${today0winddir}${today0weatherdesc}
3 AM${today1temp}(${today1feelsc})°C${today1windspeed} km/h, ${today1winddir}${today1weatherdesc}
6 AM${today2temp}(${today2feelsc})°C${today2windspeed} km/h, ${today2winddir}${today2weatherdesc}
9 AM${today3temp}(${today3feelsc})°C${today3windspeed} km/h, ${today3winddir}${today3weatherdesc}
12 PM${today4temp}(${today4feelsc})°C${today4windspeed} km/h, ${today4winddir}${today4weatherdesc}
3 PM${today5temp}(${today5feelsc})°C${today5windspeed} km/h, ${today5winddir}${today5weatherdesc}
6 PM${today6temp}(${today6feelsc})°C${today6windspeed} km/h, ${today6winddir}${today6weatherdesc}
9 PM${today7temp}(${today7feelsc})°C${today7windspeed} km/h, ${today7winddir}${today7weatherdesc}
+
+`; - if (20 < formattedHours < 23) { - document.documentElement.style.setProperty( - "--bg-image", - "linear-gradient(to top, #ffd89b 0%, #19547b 100%)" - ); - } + + // For Tomorrow + document.getElementById("nextday").innerHTML += ` + Tommorow in ${loc}, ${region}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TimeTemperatureWind (km/h)Condition
0 AM${nextday0temp}(${nextday0feelsc})°C${nextday0windspeed} km/h, ${nextday0winddir}${nextday0weatherdesc}
3 AM${nextday1temp}(${nextday1feelsc})°C${nextday1windspeed} km/h, ${nextday1winddir}${nextday1weatherdesc}
6 AM${nextday2temp}(${nextday2feelsc})°C${nextday2windspeed} km/h, ${nextday2winddir}${nextday2weatherdesc}
9 AM${nextday3temp}(${nextday3feelsc})°C${nextday3windspeed} km/h, ${nextday3winddir}${nextday3weatherdesc}
12 PM${nextday4temp}(${nextday4feelsc})°C${nextday4windspeed} km/h, ${nextday4winddir}${nextday4weatherdesc}
3 PM${nextday5temp}(${nextday5feelsc})°C${nextday5windspeed} km/h, ${nextday5winddir}${nextday5weatherdesc}
6 PM${nextday6temp}(${nextday6feelsc})°C${nextday6windspeed} km/h, ${nextday6winddir}${nextday6weatherdesc}
9 PM${nextday7temp}(${nextday7feelsc})°C${nextday7windspeed} km/h, ${nextday7winddir}${nextday7weatherdesc}
+
+`; + + + +/* document.getElementById("nextday").innerHTML += ` +

0 AM:
${nextday0temp}(${nextday0feelsc})°C, Wind Speed - ${nextday0windspeed} km/h, ${nextday0winddir}
Condition - ${nextday0weatherdesc}

+

3 AM:
${nextday1temp}(${nextday1feelsc})°C, Wind Speed - ${nextday1windspeed} km/h, ${nextday1winddir}
Condition - ${nextday1weatherdesc}

+

6 AM:
${nextday2temp}(${nextday2feelsc})°C, Wind Speed - ${nextday2windspeed} km/h, ${nextday2winddir}
Condition - ${nextday2weatherdesc}

+

9 AM:
${nextday3temp}(${nextday3feelsc})°C, Wind Speed - ${nextday3windspeed} km/h, ${nextday3winddir}
Condition - ${nextday3weatherdesc}

+

12 PM:
${nextday4temp}(${nextday4feelsc})°C, Wind Speed - ${nextday4windspeed} km/h, ${nextday4winddir}
Condition - ${nextday4weatherdesc}

+

3 PM:
${nextday5temp}(${nextday5feelsc})°C, Wind Speed - ${nextday5windspeed} km/h, ${nextday5winddir}
Condition - ${nextday5weatherdesc}

+

6 PM:
${nextday6temp}(${nextday6feelsc})°C, Wind Speed - ${nextday6windspeed} km/h, ${nextday6winddir}
Condition - ${nextday6weatherdesc}

+

9 PM:
${nextday7temp}(${nextday7feelsc})°C, Wind Speed - ${nextday7windspeed} km/h, ${nextday7winddir}
Condition - ${nextday7weatherdesc}

+`; +*/ + // For Overmorrow + +document.getElementById("nextnextday").innerHTML += ` +Day after tommorow in ${loc}, ${region}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TimeTemperatureWind (km/h)Condition
0 AM${nextnextday0temp}(${nextnextday0feelsc})°C${nextnextday0windspeed} km/h, ${nextnextday0winddir}${nextnextday0weatherdesc}
3 AM${nextnextday1temp}(${nextnextday1feelsc})°C${nextnextday1windspeed} km/h, ${nextnextday1winddir}${nextnextday1weatherdesc}
6 AM${nextnextday2temp}(${nextnextday2feelsc})°C${nextnextday2windspeed} km/h, ${nextnextday2winddir}${nextnextday2weatherdesc}
9 AM${nextnextday3temp}(${nextnextday3feelsc})°C${nextnextday3windspeed} km/h, ${nextnextday3winddir}${nextnextday3weatherdesc}
12 PM${nextnextday4temp}(${nextnextday4feelsc})°C${nextnextday4windspeed} km/h, ${nextnextday4winddir}${nextnextday4weatherdesc}
3 PM${nextnextday5temp}(${nextnextday5feelsc})°C${nextnextday5windspeed} km/h, ${nextnextday5winddir}${nextnextday5weatherdesc}
6 PM${nextnextday6temp}(${nextnextday6feelsc})°C${nextnextday6windspeed} km/h, ${nextnextday6winddir}${nextnextday6weatherdesc}
9 PM${nextnextday7temp}(${nextnextday7feelsc})°C${nextnextday7windspeed} km/h, ${nextnextday7winddir}${nextnextday7weatherdesc}
+
+`; + + +/* if (4 < formattedHours < 7) { document.documentElement.style.setProperty( "--bg-image", @@ -166,25 +521,262 @@ async function getWeather() { "linear-gradient(to top, saddlebrown 0%, #19547b 100%)" ); } - +*/ if (temp > 40) { document.documentElement.style.setProperty( "--bg-image", "linear-gradient(to top, #C02425 0%, #F0CB35 100%)" ); } + + + + //------------------ graphs + + + var todayTemps = { + today0temp, + today1temp, + today2temp, + today3temp, + today4temp, + today5temp, + today6temp, + today7temp + }; + + var todayFeels = { + today0feelsc, + today1feelsc, + today2feelsc, + today3feelsc, + today4feelsc, + today5feelsc, + today6feelsc, + today7feelsc + }; - if (uv >= 8) { - document.getElementById("sunalert").innerHTML = - "Avoid being outside during midday hours. Make sure you seek shade. Shirt, sunscreen and hat are a must!
"; + var ctx = document.getElementById("weatherCharttoday").getContext("2d"); + + var tempValues = []; + var feelsLikeValues = []; + var labels = ["12AM", "3AM", "6AM", "9AM", "12PM", "3PM", "6PM", "9PM"]; + + for (var i = 0; i <= 7; i++) { + tempValues.push(todayTemps[`today${i}temp`]); + feelsLikeValues.push(todayFeels[`today${i}feelsc`]); } - if (wind >= 15) { - document.getElementById("sunalert").innerHTML += - "It's quite windy.
"; + + var chart = new Chart(ctx, { + type: "line", + data: { + labels: labels, + datasets: [ + { + label: "Temperature in °C", + data: tempValues, + borderColor: "#4CAF50", // Material Design Green + backgroundColor: "rgba(76, 175, 80, 0.2)", // Material Design Green with opacity + fill: true + }, + { + label: "Feels-Like Temperature", + data: feelsLikeValues, + borderColor: "#2196F3", // Material Design Blue + backgroundColor: "rgba(33, 150, 243, 0.2)", // Material Design Blue with opacity + fill: true + } + ] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + }); + +//------------------ + +var nextdayTemps = { + nextday0temp, + nextday1temp, + nextday2temp, + nextday3temp, + nextday4temp, + nextday5temp, + nextday6temp, + nextday7temp +}; + +var nextdayFeels = { + nextday0feelsc, + nextday1feelsc, + nextday2feelsc, + nextday3feelsc, + nextday4feelsc, + nextday5feelsc, + nextday6feelsc, + nextday7feelsc +}; + +var ctx = document.getElementById("weatherChartnextday").getContext("2d"); + +var tempValues = []; +var feelsLikeValues = []; +var labels = ["12AM", "3AM", "6AM", "9AM", "12PM", "3PM", "6PM", "9PM"]; + +for (var i = 0; i <= 7; i++) { + tempValues.push(nextdayTemps[`nextday${i}temp`]); + feelsLikeValues.push(nextdayFeels[`nextday${i}feelsc`]); +} + +var chart = new Chart(ctx, { + type: "line", + data: { + labels: labels, + datasets: [ + { + label: "Temperature in °C", + data: tempValues, + borderColor: "#4CAF50", // Material Design Green + backgroundColor: "rgba(76, 175, 80, 0.2)", // Material Design Green with opacity + fill: true + }, + { + label: "Feels-Like Temperature", + data: feelsLikeValues, + borderColor: "#2196F3", // Material Design Blue + backgroundColor: "rgba(33, 150, 243, 0.2)", // Material Design Blue with opacity + fill: true + } + ] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } } - if (temp > 42) { - document.getElementById("sunalert").innerHTML += - "Weather very hot right now!"; +}); + + + + + +//------------------ + +var nextnextdayTemps = { + nextnextday0temp, + nextnextday1temp, + nextnextday2temp, + nextnextday3temp, + nextnextday4temp, + nextnextday5temp, + nextnextday6temp, + nextnextday7temp +}; + +var nextnextdayFeels = { + nextnextday0feelsc, + nextnextday1feelsc, + nextnextday2feelsc, + nextnextday3feelsc, + nextnextday4feelsc, + nextnextday5feelsc, + nextnextday6feelsc, + nextnextday7feelsc +}; + +var ctx = document.getElementById("weatherChartnextnextday").getContext("2d"); + +var tempValues = []; +var feelsLikeValues = []; +var labels = ["12AM", "3AM", "6AM", "9AM", "12PM", "3PM", "6PM", "9PM"]; + +for (var i = 0; i <= 7; i++) { + tempValues.push(nextnextdayTemps[`nextnextday${i}temp`]); + feelsLikeValues.push(nextnextdayFeels[`nextnextday${i}feelsc`]); +} + +var chart = new Chart(ctx, { + type: "line", + data: { + labels: labels, + datasets: [ + { + label: "Temperature in °C", + data: tempValues, + borderColor: "#4CAF50", // Material Design Green + backgroundColor: "rgba(76, 175, 80, 0.2)", // Material Design Green with opacity + fill: true + }, + { + label: "Feels-Like Temperature", + data: feelsLikeValues, + borderColor: "#2196F3", // Material Design Blue + backgroundColor: "rgba(33, 150, 243, 0.2)", // Material Design Blue with opacity + fill: true + } + ] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } +}); + + + + + + + + + + /* var ctx = document.getElementById('weatherChart').getContext('2d'); + +var tempValues = []; +var feelsLikeValues = []; +var labels = ['12AM', '3AM', '6AM', '9AM', '12PM', '3PM', '6PM', '9PM', '12AM']; + +// Assuming you have fetched the temperature and feels like temperature values from the API +for (var i = 0; i <= 7; i++) { + tempValues.push(window[`today${i}temp`]); + feelsLikeValues.push(window[`today${i}feelsc`]); +} + +var chart = new Chart(ctx, { + type: 'line', + data: { + labels: labels, + datasets: [{ + label: 'Temperature', + data: tempValues, + borderColor: '#4CAF50', // Material Design Green + backgroundColor: 'rgba(76, 175, 80, 0.2)', // Material Design Green with opacity + fill: true + }, { + label: 'Feels Like Temperature', + data: feelsLikeValues, + borderColor: '#2196F3', // Material Design Blue + backgroundColor: 'rgba(33, 150, 243, 0.2)', // Material Design Blue with opacity + fill: true + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } } +}); +*/ } getWeather(); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..dfd98a7 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,38 @@ +{ + "compilerOptions": { + // project options + "lib": [ + "ESNext", + "dom" + ], // specifies which default set of type definitions to use ("DOM", "ES6", etc) + "outDir": "/", // .js (as well as .d.ts, .js.map, etc.) files will be emitted into this directory., + "removeComments": true, // Strips all comments from TypeScript files when converting into JavaScript- you rarely read compiled code so this saves space + "target": "ES6", // Target environment. Most modern browsers support ES6, but you may want to set it to newer or older. (defaults to ES3) + + // Module resolution + "baseUrl": "./", // Lets you set a base directory to resolve non-absolute module names. + "esModuleInterop": true, // fixes some issues TS originally had with the ES6 spec where TypeScript treats CommonJS/AMD/UMD modules similar to ES6 module + "moduleResolution": "node", // Pretty much always node for modern JS. Other option is "classic" + "paths": {}, // A series of entries which re-map imports to lookup locations relative to the baseUrl + + // Source Map + "sourceMap": true, // enables the use of source maps for debuggers and error reporting etc + "sourceRoot": "/", // Specify the location where a debugger should locate TypeScript files instead of relative source locations. + + // Strict Checks + "alwaysStrict": true, // Ensures that your files are parsed in the ECMAScript strict mode, and emit “use strict” for each source file. + "allowUnreachableCode": false, // pick up dead code paths + "noImplicitAny": true, // In some cases where no type annotations are present, TypeScript will fall back to a type of any for a variable when it cannot infer the type. + "strictNullChecks": true, // When strictNullChecks is true, null and undefined have their own distinct types and you’ll get a type error if you try to use them where a concrete value is expected. + + // Linter Checks + "noImplicitReturns": true, + "noUncheckedIndexedAccess": true, // accessing index must always check for undefined + "noUnusedLocals": true, // Report errors on unused local variables. + "noUnusedParameters": true // Report errors on unused parameters in functions + }, + "include": ["./**/*.ts"], + "exclude": [ + "node_modules/**/*" + ] +} \ No newline at end of file diff --git a/weather.nim b/weather.nim new file mode 100644 index 0000000..a8c90b0 --- /dev/null +++ b/weather.nim @@ -0,0 +1,332 @@ +import httpclient, json, jsdom + +var city = "" +var formattedHours = "" + +proc getWeather() {.async.} = +let api_url = "https://wttr.in/" & city & "?format=j1" +echo "API URL: ", api_url + +let response = await newHttpClient().get(api_url) +let data = await response.body.readJson + +let loc = data["nearest_area"][0]["areaName"][0]["value"].getStr +let region = data["nearest_area"][0]["region"][0]["value"].getStr + +let temp = data["current_condition"][0]["temp_C"].getInt +let maxtemp = data["weather"][0]["maxtempC"].getInt +let mintemp = data["weather"][0]["mintempC"].getInt + +let humidity = data["current_condition"][0]["humidity"].getInt +let feel = data["current_condition"][0]["FeelsLikeC"].getInt +let time = data["current_condition"][0]["localObsDateTime"].getStr +let desc = data["current_condition"][0]["weatherDesc"][0]["value"].getStr +let wCode = data["current_condition"][0]["weatherCode"].getInt +let wind = data["current_condition"][0]["windspeedKmph"].getInt +let dir = data["current_condition"][0]["winddir16Point"].getStr +let uv = data["current_condition"][0]["uvIndex"].getInt + +let nextdaymax = data["weather"][1]["maxtempC"].getInt +let nextdaymin = data["weather"][1]["mintempC"].getInt + +let nextnextdaymax = data["weather"][2]["maxtempC"].getInt +let nextnextdaymin = data["weather"][2]["mintempC"].getInt + +# ------------------------- today + +# 0am +let today0temp = data.weather[0].hourly[0].tempC +let today0winddir = data.weather[0].hourly[0].winddir16Point +let today0windspeed = data.weather[0].hourly[0].windspeedKmph +let today0weatherdesc = data.weather[0].hourly[0].weatherDesc[0].value + +# 3am +let today1temp = data.weather[0].hourly[1].tempC +let today1winddir = data.weather[0].hourly[1].winddir16Point +let today1windspeed = data.weather[0].hourly[1].windspeedKmph +let today1weatherdesc = data.weather[0].hourly[1].weatherDesc[0].value + +# 6am +let today2temp = data.weather[0].hourly[2].tempC +let today2winddir = data.weather[0].hourly[2].winddir16Point +let today2windspeed = data.weather[0].hourly[2].windspeedKmph +let today2weatherdesc = data.weather[0].hourly[2].weatherDesc[0].value + +# 9am +let today3temp = data.weather[0].hourly[3].tempC +let today3winddir = data.weather[0].hourly[3].winddir16Point +let today3windspeed = data.weather[0].hourly[3].windspeedKmph +let today3weatherdesc = data.weather[0].hourly[3].weatherDesc[0].value + +# 12pm +let today4temp = data.weather[0].hourly[4].tempC +let today4winddir = data.weather[0].hourly[4].winddir16Point +let today4windspeed = data.weather[0].hourly[4].windspeedKmph +let today4weatherdesc = data.weather[0].hourly[4].weatherDesc[0].value + +# 3pm +let today5temp = data.weather[0].hourly[5].tempC +let today5winddir = data.weather[0].hourly[5].winddir16Point +let today5windspeed = data.weather[0].hourly[5].windspeedKmph +let today5weatherdesc = data.weather[0].hourly[5].weatherDesc[0].value + +# 6pm +let today6temp = data.weather[0].hourly[6].tempC +let today6winddir = data.weather[0].hourly[6].winddir16Point +let today6windspeed = data.weather[0].hourly[6].windspeedKmph +let today6weatherdesc = data.weather[0].hourly[6].weatherDesc[0].value + +# 9pm +let today7temp = data.weather[0].hourly[7].tempC +let today7winddir = data.weather[0].hourly[7].winddir16Point +let today7windspeed = data.weather[0].hourly[7].windspeedKmph +let today7weatherdesc = data.weather[0].hourly[7].weatherDesc[0].value + +# ----------------------- nextday +# 0am +let nextday0temp = data.weather[1].hourly[0].tempC +let nextday0winddir = data.weather[1].hourly[0].winddir16Point +let nextday0windspeed = data.weather[1].hourly[0].windspeedKmph +let nextday0weatherdesc = data.weather[1].hourly[0].weatherDesc[0].value + +# 3am +let nextday1temp = data.weather[1].hourly[1].tempC +let nextday1winddir = data.weather[1].hourly[1].winddir16Point +let nextday1windspeed = data.weather[1].hourly[1].windspeedKmph +let nextday1weatherdesc = data.weather[1].hourly[1].weatherDesc[0].value + +# 6am +let nextday2temp = data.weather[1].hourly[2].tempC +let nextday2winddir = data.weather[1].hourly[2].winddir16Point +let nextday2windspeed = data.weather[1].hourly[2].windspeedKmph +let nextday2weatherdesc = data.weather[1].hourly[2].weatherDesc[0].value + +# 9am +let nextday3temp = data.weather[1].hourly[3].tempC +let nextday3winddir = data.weather[1].hourly[3].winddir16Point +let nextday3windspeed = data.weather[1].hourly[3].windspeedKmph +let nextday3weatherdesc = data.weather[1].hourly[3].weatherDesc[0].value + +# 12pm +let nextday4temp = data.weather[1].hourly[4].tempC +let nextday4winddir = data.weather[1].hourly[4].winddir16Point +let nextday4windspeed = data.weather[1].hourly[4].windspeedKmph +let nextday4weatherdesc = data.weather[1].hourly[4].weatherDesc[0].value + +# 3pm +let nextday5temp = data.weather[1].hourly[5].tempC +let nextday5winddir = data.weather[1].hourly[5].winddir16Point +let nextday5windspeed = data.weather[1].hourly[5].windspeedKmph +let nextday5weatherdesc = data.weather[1].hourly[5].weatherDesc[0].value + +# 6pm +let nextday6temp = data.weather[1].hourly[6].tempC +let nextday6winddir = data.weather[1].hourly[6].winddir16Point +let nextday6windspeed = data.weather[1].hourly[6].windspeedKmph +let nextday6weatherdesc = data.weather[1].hourly[6].weatherDesc[0].value + +# 9pm +let nextday7temp = data.weather[1].hourly[7].tempC +let nextday7winddir = data.weather[1].hourly[7].winddir16Point +let nextday7windspeed = data.weather[1].hourly[7].windspeedKmph +let nextday7weatherdesc = data.weather[1].hourly[7].weatherDesc[0].value + +# ----------------------- nextnextday + +# 0am +let nextnextday0temp = data.weather[2].hourly[0].tempC +let nextnextday0winddir = data.weather[2].hourly[0].winddir16Point +let nextnextday0windspeed = data.weather[2].hourly[0].windspeedKmph +let nextnextday0weatherdesc = data.weather[2].hourly[0].weatherDesc[0].value + +# 3am +let nextnextday1temp = data.weather[2].hourly[1].tempC +let nextnextday1winddir = data.weather[2].hourly[1].winddir16Point +let nextnextday1windspeed = data.weather[2].hourly[1].windspeedKmph +let nextnextday1weatherdesc = data.weather[2].hourly[1].weatherDesc[0].value + +# 6am +let nextnextday2temp = data.weather[2].hourly[2].tempC +let nextnextday2winddir = data.weather[2].hourly[2].winddir16Point +let nextnextday2windspeed = data.weather[2].hourly[2].windspeedKmph +let nextnextday2weatherdesc = data.weather[2].hourly[2].weatherDesc[0].value + +# 9am +let nextnextday3temp = data.weather[2].hourly[3].tempC +let nextnextday3winddir = data.weather[2].hourly[3].winddir16Point +let nextnextday3windspeed = data.weather[2].hourly[3].windspeedKmph +let nextnextday3weatherdesc = data.weather[2].hourly[3].weatherDesc[0].value + +# 12pm +let nextnextday4temp = data.weather[2].hourly[4].tempC +let nextnextday4winddir = data.weather[2].hourly[4].winddir16Point +let nextnextday4windspeed = data.weather[2].hourly[4].windspeedKmph +let nextnextday4weatherdesc = data.weather[2].hourly[4].weatherDesc[0].value + +# 3pm +let nextnextday5temp = data.weather[2].hourly[5].tempC +let nextnextday5winddir = data.weather[2].hourly[5].winddir16Point +let nextnextday5windspeed = data.weather[2].hourly[5].windspeedKmph +let nextnextday5weatherdesc = data.weather[2].hourly[5].weatherDesc[0].value + +# 6pm +let nextnextday6temp = data.weather[2].hourly[6].tempC +let nextnextday6winddir = data.weather[2].hourly[6].winddir16Point +let nextnextday6windspeed = data.weather[2].hourly[6].windspeedKmph +let nextnextday6weatherdesc = data.weather[2].hourly[6].weatherDesc[0].value + +# 9pm +let nextnextday7temp = data.weather[2].hourly[7].tempC +let nextnextday7winddir = data.weather[2].hourly[7].winddir16Point +let nextnextday7windspeed = data.weather[2].hourly[7].windspeedKmph +let nextnextday7weatherdesc = data.weather[2].hourly[7].weatherDesc[0].value + +#----------------------- later addition + +let today0feelsc = data.weather[0].hourly[0].FeelsLikeC +let today1feelsc = data.weather[0].hourly[1].FeelsLikeC +let today2feelsc = data.weather[0].hourly[2].FeelsLikeC +let today3feelsc = data.weather[0].hourly[3].FeelsLikeC +let today4feelsc = data.weather[0].hourly[4].FeelsLikeC +let today5feelsc = data.weather[0].hourly[5].FeelsLikeC +let today6feelsc = data.weather[0].hourly[6].FeelsLikeC +let today7feelsc = data.weather[0].hourly[7].FeelsLikeC + +let nextday0feelsc = data.weather[1].hourly[0].FeelsLikeC +let nextday1feelsc = data.weather[1].hourly[1].FeelsLikeC +let nextday2feelsc = data.weather[1].hourly[2].FeelsLikeC +let nextday3feelsc = data.weather[1].hourly[3].FeelsLikeC +let nextday4feelsc = data.weather[1].hourly[4].FeelsLikeC +let nextday5feelsc = data.weather[1].hourly[5].FeelsLikeC +let nextday6feelsc = data.weather[1].hourly[6].FeelsLikeC +let nextday7feelsc = data.weather[1].hourly[7].FeelsLikeC + +let nextnextday0feelsc = data.weather[2].hourly[0].FeelsLikeC +let nextnextday1feelsc = data.weather[2].hourly[1].FeelsLikeC +let nextnextday2feelsc = data.weather[2].hourly[2].FeelsLikeC +let nextnextday3feelsc = data.weather[2].hourly[3].FeelsLikeC +let nextnextday4feelsc = data.weather[2].hourly[4].FeelsLikeC +let nextnextday5feelsc = data.weather[2].hourly[5].FeelsLikeC +let nextnextday6feelsc = data.weather[2].hourly[6].FeelsLikeC +let nextnextday7feelsc = data.weather[2].hourly[7].FeelsLikeC + +# --------------- +# find the nim way +proc getCurrentDate(): string = +const months = @["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] +const days = @["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] + +let now = new Date() +let day = days[now.getDay()] +let date = now.getDate() +let month = months[now.getMonth()] +let year = now.getFullYear() +var hours = now.getHours() +let minutes = now.getMinutes() + +let formattedHours = if hours < 10: "0" & $hours else : $hours +let formattedMinutes = if minutes < 10: "0" & $minutes else : $minutes + +result = $day & ", " & $date & " " & $month & " " & $year & ", " & $formattedHours & ":" & $formattedMinutes + + +var locElem = document.getElementById("loc") +locElem.innerHTML = loc & ", " & region & "
" + +var dateElem = document.getElementById("date") +dateElem.innerHTML = getCurrentDate() + +var descElem = document.getElementById("desc") +descElem.innerHTML = desc + +var tempElem = document.getElementById("temp") +tempElem.innerHTML = temp & "°C" + +var minmaxElem = document.getElementById("minmax") +minmaxElem.innerHTML = maxtemp & "°C" & "
" & mintemp & "°C" + +var detailsNowElem = document.getElementById("detailsnow") +detailsNowElem.innerHTML = "Feels like: " & feel & "°C
Ultraviolet Index: " & uv & "
Humidity: " & humidity & "%
Wind: " & wind & "kmph from " & dir + +var tomorrowElem = document.getElementById("tomorrow") +tomorrowElem.innerHTML = "Tomorrow" & "
" & "Max: " & nextdaymax & "°C" & "
" & "Min: " & nextdaymin + +var overmorrowElem = document.getElementById("overmorrow") +overmorrowElem.innerHTML = "Overmorrow" & "
" & "Max: " & nextnextdaymax & "°C" & "
" & "Min: " & nextnextdaymin + +# For Today +var todayElem = document.getElementById("today") +todayElem.innerHTML = """ +

0 AM:
$(today0temp)($(today0feelsc))°C, Wind Speed - $(today0windspeed) km/h, $(today0winddir)
Condition - $(today0weatherdesc)

+

3 AM:
$(today1temp)($(today1feelsc))°C, Wind Speed - $(today1windspeed) km/h, $(today1winddir)
Condition - $(today1weatherdesc)

+

6 AM:
$(today2temp)($(today2feelsc))°C, Wind Speed - $(today2windspeed) km/h, $(today2winddir)
Condition - $(today2weatherdesc)

+

9 AM:
$(today3temp)($(today3feelsc))°C, Wind Speed - $(today3windspeed) km/h, $(today3winddir)
Condition - $(today3weatherdesc)

+

12 PM:
$(today4temp)($(today4feelsc))°C, Wind Speed - $(today4windspeed) km/h, $(today4winddir)
Condition - $(today4weatherdesc)

+

3 PM:
$(today5temp)($(today5feelsc))°C, Wind Speed - $(today5windspeed) km/h, $(today5winddir)
Condition - $(today5weatherdesc)

+

6 PM:
$(today6temp)($(today6feelsc))°C, Wind Speed - $(today6windspeed) km/h, $(today6winddir)
Condition - $(today6weatherdesc)

+

9 PM:
$(today7temp)($(today7feelsc))°C, Wind Speed - $(today7windspeed) km/h, $(today7winddir)
Condition - $(today7weatherdesc)

+""" +# For Tomorrow +var nextdayElem = document.getElementById("nextday") +nextdayElem.innerHTML = """ +

0 AM:
$(nextday0temp)($(nextday0feelsc))°C, Wind Speed - $(nextday0windspeed) km/h, $(nextday0winddir)
Condition - $(nextday0weatherdesc)

+

3 AM:
$(nextday1temp)($(nextday1feelsc))°C, Wind Speed - $(nextday1windspeed) km/h, $(nextday1winddir)
Condition - $(nextday1weatherdesc)

+

6 AM:
$(nextday2temp)($(nextday2feelsc))°C, Wind Speed - $(nextday2windspeed) km/h, $(nextday2winddir)
Condition - $(nextday2weatherdesc)

+

9 AM:
$(nextday3temp)($(nextday3feelsc))°C, Wind Speed - $(nextday3windspeed) km/h, $(nextday3winddir)
Condition - $(nextday3weatherdesc)

+

12 PM:
$(nextday4temp)($(nextday4feelsc))°C, Wind Speed - $(nextday4windspeed) km/h, $(nextday4winddir)
Condition - $(nextday4weatherdesc)

+

3 PM:
$(nextday5temp)($(nextday5feelsc))°C, Wind Speed - $(nextday5windspeed) km/h, $(nextday5winddir)
Condition - $(nextday5weatherdesc)

+

6 PM:
$(nextday6temp)($(nextday6feelsc))°C, Wind Speed - $(nextday6windspeed) km/h, $(nextday6winddir)
Condition - $(nextday6weatherdesc)

+

9 PM:
$(nextday7temp)($(nextday7feelsc))°C, Wind Speed - $(nextday7windspeed) km/h, $(nextday7winddir)
Condition - $(nextday7weatherdesc)

+""" + +# For Overmorrow +var nextnextdayElem = document.getElementById("nextnextday") +nextnextdayElem.innerHTML = """ +

0 AM:
$(nextnextday0temp)($(nextnextday0feelsc))°C, Wind Speed - $(nextnextday0windspeed) km/h, $(nextnextday0winddir)
Condition - $(nextnextday0weatherdesc)

+

3 AM:
$(nextnextday1temp)($(nextnextday1feelsc))°C, Wind Speed - $(nextnextday1windspeed) km/h, $(nextnextday1winddir)
Condition - $(nextnextday1weatherdesc)

+

6 AM:
$(nextnextday2temp)($(nextnextday2feelsc))°C, Wind Speed - $(nextnextday2windspeed) km/h, $(nextnextday2winddir)
Condition - $(nextnextday2weatherdesc)

+

9 AM:
$(nextnextday3temp)($(nextnextday3feelsc))°C, Wind Speed - $(nextnextday3windspeed) km/h, $(nextnextday3winddir)
Condition - $(nextnextday3weatherdesc)

+

12 PM:
$(nextnextday4temp)($(nextnextday4feelsc))°C, Wind Speed - $(nextnextday4windspeed) km/h, $(nextnextday4winddir)
Condition - $(nextnextday4weatherdesc)

+

3 PM:
$(nextnextday5temp)($(nextnextday5feelsc))°C, Wind Speed - $(nextnextday5windspeed) km/h, $(nextnextday5winddir)
Condition - $(nextnextday5weatherdesc)

+

6 PM:
$(nextnextday6temp)($(nextnextday6feelsc))°C, Wind Speed - $(nextnextday6windspeed) km/h, $(nextnextday6winddir)
Condition - $(nextnextday6weatherdesc)

+

9 PM:
$(nextnextday7temp)($(nextnextday7feelsc))°C, Wind Speed - $(nextnextday7windspeed) km/h, $(nextnextday7winddir)
Condition - $(nextnextday7weatherdesc)

+""" + +if 4 < formattedHours < 7: +document.documentElement.style.setProperty( + "--bg-image", + "linear-gradient(to top, #00223E 0%, #FFA17F 100%)" +) + +if 18 < formattedHours < 20: +document.documentElement.style.setProperty( + "--bg-image", + "linear-gradient(to top, #0B486B 0%, #F56217 100%)" +) + +if 20 < formattedHours < 23: +document.documentElement.style.setProperty( + "--bg-image", + "linear-gradient(to top, saddlebrown 0%, #19547b 100%)" +) + +if temp > 40: +document.documentElement.style.setProperty( + "--bg-image", + "linear-gradient(to top, #C02425 0%, #F0CB35 100%)" +) + + +#[ + proc getWeather(city: string): Future[JsonNode] {.async.} = + let api_url = "https://wttr.in/" & city & "?format=j1" + echo "API URL: ", api_url + + try: + let response = await newHttpClient().get(api_url) + let data = await response.body.readJson + return data + except: + echo "Error fetching weather data" + # Handle the error appropriately, e.g., return a default value or raise an exception +]# \ No newline at end of file diff --git a/weather.ts b/weather.ts new file mode 100644 index 0000000..01b6d6a --- /dev/null +++ b/weather.ts @@ -0,0 +1,391 @@ +let city: string = ""; +let formattedHours: string = ""; + +document + .getElementById("myInput") + .addEventListener("keypress", function (event: KeyboardEvent) { + if (event.key === "Enter") { + event.preventDefault(); + city = (event.target as HTMLInputElement).value; + console.log(city + " is the city name."); + getWeather(); + } + }); + +async function getWeather() { + let api_url: string = `https://wttr.in/${city}?format=j1`; + console.log("API URL: " + api_url); + + const response = await fetch(api_url); + const data = await response.json(); + + let loc: string = data.nearest_area[0].areaName[0].value; + let region: string = data.nearest_area[0].region[0].value; + + let temp: string = data.current_condition[0].temp_C; + let maxtemp: string = data.weather[0].maxtempC; + let mintemp: string = data.weather[0].mintempC; + + let humidity: string = data.current_condition[0].humidity; + let feel: string = data.current_condition[0].FeelsLikeC; + let time: string = data.current_condition[0].localObsDateTime; + let desc: string = data.current_condition[0].weatherDesc[0].value; + let wCode: string = data.current_condition[0].weatherCode; + let wind: string = data.current_condition[0].windspeedKmph; + let dir: string = data.current_condition[0].winddir16Point; + let uv: string = data.current_condition[0].uvIndex; + + let nextdaymax: string = data.weather[1].maxtempC; + let nextdaymin: string = data.weather[1].mintempC; + + let nextnextdaymax: string = data.weather[2].maxtempC; + let nextnextdaymin: string = data.weather[2].mintempC; + + // ------------------------- today + + // 0am + let today0temp: string = data.weather[0].hourly[0].tempC; + let today0winddir: string = data.weather[0].hourly[0].winddir16Point; + let today0windspeed: string = data.weather[0].hourly[0].windspeedKmph; + let today0weatherdesc: string = + data.weather[0].hourly[0].weatherDesc[0].value; + + // 3am + let today1temp: string = data.weather[0].hourly[1].tempC; + let today1winddir: string = data.weather[0].hourly[1].winddir16Point; + let today1windspeed: string = data.weather[0].hourly[1].windspeedKmph; + let today1weatherdesc: string = + data.weather[0].hourly[1].weatherDesc[0].value; + + // 6am + let today2temp: string = data.weather[0].hourly[2].tempC; + let today2winddir: string = data.weather[0].hourly[2].winddir16Point; + let today2windspeed: string = data.weather[0].hourly[2].windspeedKmph; + let today2weatherdesc: string = + data.weather[0].hourly[2].weatherDesc[0].value; + + // 9am + let today3temp: string = data.weather[0].hourly[3].tempC; + let today3winddir: string = data.weather[0].hourly[3].winddir16Point; + let today3windspeed: string = data.weather[0].hourly[3].windspeedKmph; + let today3weatherdesc: string = + data.weather[0].hourly[3].weatherDesc[0].value; + + // 12pm + let today4temp: string = data.weather[0].hourly[4].tempC; + let today4winddir: string = data.weather[0].hourly[4].winddir16Point; + let today4windspeed: string = data.weather[0].hourly[4].windspeedKmph; + let today4weatherdesc: string = + data.weather[0].hourly[4].weatherDesc[0].value; + + // 3pm + let today5temp: string = data.weather[0].hourly[5].tempC; + let today5winddir: string = data.weather[0].hourly[5].winddir16Point; + let today5windspeed: string = data.weather[0].hourly[5].windspeedKmph; + let today5weatherdesc: string = + data.weather[0].hourly[5].weatherDesc[0].value; + + // 6pm + let today6temp: string = data.weather[0].hourly[6].tempC; + let today6winddir: string = data.weather[0].hourly[6].winddir16Point; + let today6windspeed: string = data.weather[0].hourly[6].windspeedKmph; + let today6weatherdesc: string = + data.weather[0].hourly[6].weatherDesc[0].value; + + // 9pm + let today7temp: string = data.weather[0].hourly[7].tempC; + let today7winddir: string = data.weather[0].hourly[7].winddir16Point; + let today7windspeed: string = data.weather[0].hourly[7].windspeedKmph; + let today7weatherdesc: string = + data.weather[0].hourly[7].weatherDesc[0].value; + + // ----------------------- nextday + // 0am + let nextday0temp: string = data.weather[1].hourly[0].tempC; + let nextday0winddir: string = data.weather[1].hourly[0].winddir16Point; + let nextday0windspeed: string = data.weather[1].hourly[0].windspeedKmph; + let nextday0weatherdesc: string = + data.weather[1].hourly[0].weatherDesc[0].value; + + // 3am + let nextday1temp: string = data.weather[1].hourly[1].tempC; + let nextday1winddir: string = data.weather[1].hourly[1].winddir16Point; + let nextday1windspeed: string = data.weather[1].hourly[1].windspeedKmph; + let nextday1weatherdesc: string = + data.weather[1].hourly[1].weatherDesc[0].value; + + // 6am + let nextday2temp: string = data.weather[1].hourly[2].tempC; + let nextday2winddir: string = data.weather[1].hourly[2].winddir16Point; + let nextday2windspeed: string = data.weather[1].hourly[2].windspeedKmph; + let nextday2weatherdesc: string = + data.weather[1].hourly[2].weatherDesc[0].value; + + // 9am + let nextday3temp: string = data.weather[1].hourly[3].tempC; + let nextday3winddir: string = data.weather[1].hourly[3].winddir16Point; + let nextday3windspeed: string = data.weather[1].hourly[3].windspeedKmph; + let nextday3weatherdesc: string = + data.weather[1].hourly[3].weatherDesc[0].value; + + // 12pm + let nextday4temp: string = data.weather[1].hourly[4].tempC; + let nextday4winddir: string = data.weather[1].hourly[4].winddir16Point; + let nextday4windspeed: string = data.weather[1].hourly[4].windspeedKmph; + let nextday4weatherdesc: string = + data.weather[1].hourly[4].weatherDesc[0].value; + + // 3pm + let nextday5temp: string = data.weather[1].hourly[5].tempC; + let nextday5winddir: string = data.weather[1].hourly[5].winddir16Point; + let nextday5windspeed: string = data.weather[1].hourly[5].windspeedKmph; + let nextday5weatherdesc: string = + data.weather[1].hourly[5].weatherDesc[0].value; + + // 6pm + let nextday6temp: string = data.weather[1].hourly[6].tempC; + let nextday6winddir: string = data.weather[1].hourly[6].winddir16Point; + let nextday6windspeed: string = data.weather[1].hourly[6].windspeedKmph; + let nextday6weatherdesc: string = + data.weather[1].hourly[6].weatherDesc[0].value; + + // 9pm + let nextday7temp: string = data.weather[1].hourly[7].tempC; + let nextday7winddir: string = data.weather[1].hourly[7].winddir16Point; + let nextday7windspeed: string = data.weather[1].hourly[7].windspeedKmph; + let nextday7weatherdesc: string = + data.weather[1].hourly[7].weatherDesc[0].value; + + // ----------------------- nextnextday + + // 0am + let nextnextday0temp: string = data.weather[2].hourly[0].tempC; + let nextnextday0winddir: string = data.weather[2].hourly[0].winddir16Point; + let nextnextday0windspeed: string = data.weather[2].hourly[0].windspeedKmph; + let nextnextday0weatherdesc: string = + data.weather[2].hourly[0].weatherDesc[0].value; + + // 3am + let nextnextday1temp: string = data.weather[2].hourly[1].tempC; + let nextnextday1winddir: string = data.weather[2].hourly[1].winddir16Point; + let nextnextday1windspeed: string = data.weather[2].hourly[1].windspeedKmph; + let nextnextday1weatherdesc: string = + data.weather[2].hourly[1].weatherDesc[0].value; + + // 6am + let nextnextday2temp: string = data.weather[2].hourly[2].tempC; + let nextnextday2winddir: string = data.weather[2].hourly[2].winddir16Point; + let nextnextday2windspeed: string = data.weather[2].hourly[2].windspeedKmph; + let nextnextday2weatherdesc: string = + data.weather[2].hourly[2].weatherDesc[0].value; + + // 9am + let nextnextday3temp: string = data.weather[2].hourly[3].tempC; + let nextnextday3winddir: string = data.weather[2].hourly[3].winddir16Point; + let nextnextday3windspeed: string = data.weather[2].hourly[3].windspeedKmph; + let nextnextday3weatherdesc: string = + data.weather[2].hourly[3].weatherDesc[0].value; + + // 12pm + let nextnextday4temp: string = data.weather[2].hourly[4].tempC; + let nextnextday4winddir: string = data.weather[2].hourly[4].winddir16Point; + let nextnextday4windspeed: string = data.weather[2].hourly[4].windspeedKmph; + let nextnextday4weatherdesc: string = + data.weather[2].hourly[4].weatherDesc[0].value; + + // 3pm + let nextnextday5temp: string = data.weather[2].hourly[5].tempC; + let nextnextday5winddir: string = data.weather[2].hourly[5].winddir16Point; + let nextnextday5windspeed: string = data.weather[2].hourly[5].windspeedKmph; + let nextnextday5weatherdesc: string = + data.weather[2].hourly[5].weatherDesc[0].value; + + // 6pm + let nextnextday6temp: string = data.weather[2].hourly[6].tempC; + let nextnextday6winddir: string = data.weather[2].hourly[6].winddir16Point; + let nextnextday6windspeed: string = data.weather[2].hourly[6].windspeedKmph; + let nextnextday6weatherdesc: string = + data.weather[2].hourly[6].weatherDesc[0].value; + + // 9pm + let nextnextday7temp: string = data.weather[2].hourly[7].tempC; + let nextnextday7winddir: string = data.weather[2].hourly[7].winddir16Point; + let nextnextday7windspeed: string = data.weather[2].hourly[7].windspeedKmph; + let nextnextday7weatherdesc: string = + data.weather[2].hourly[7].weatherDesc[0].value; + + //----------------------- later addition + + let today0feelsc: string = data.weather[0].hourly[0].FeelsLikeC; + let today1feelsc: string = data.weather[0].hourly[1].FeelsLikeC; + let today2feelsc: string = data.weather[0].hourly[2].FeelsLikeC; + let today3feelsc: string = data.weather[0].hourly[3].FeelsLikeC; + let today4feelsc: string = data.weather[0].hourly[4].FeelsLikeC; + let today5feelsc: string = data.weather[0].hourly[5].FeelsLikeC; + let today6feelsc: string = data.weather[0].hourly[6].FeelsLikeC; + let today7feelsc: string = data.weather[0].hourly[7].FeelsLikeC; + + let nextday0feelsc: string = data.weather[1].hourly[0].FeelsLikeC; + let nextday1feelsc: string = data.weather[1].hourly[1].FeelsLikeC; + let nextday2feelsc: string = data.weather[1].hourly[2].FeelsLikeC; + let nextday3feelsc: string = data.weather[1].hourly[3].FeelsLikeC; + let nextday4feelsc: string = data.weather[1].hourly[4].FeelsLikeC; + let nextday5feelsc: string = data.weather[1].hourly[5].FeelsLikeC; + let nextday6feelsc: string = data.weather[1].hourly[6].FeelsLikeC; + let nextday7feelsc: string = data.weather[1].hourly[7].FeelsLikeC; + + let nextnextday0feelsc: string = data.weather[2].hourly[0].FeelsLikeC; + let nextnextday1feelsc: string = data.weather[2].hourly[1].FeelsLikeC; + let nextnextday2feelsc: string = data.weather[2].hourly[2].FeelsLikeC; + let nextnextday3feelsc: string = data.weather[2].hourly[3].FeelsLikeC; + let nextnextday4feelsc: string = data.weather[2].hourly[4].FeelsLikeC; + let nextnextday5feelsc: string = data.weather[2].hourly[5].FeelsLikeC; + let nextnextday6feelsc: string = data.weather[2].hourly[6].FeelsLikeC; + let nextnextday7feelsc: string = data.weather[2].hourly[7].FeelsLikeC; + + // --------------- + function getCurrentDate(): string { + const months: string[] = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec" + ]; + const days: string[] = [ + "Sun", + "Mon", + "Tue", + "Wed", + "Thu", + "Fri", + "Sat" + ]; + + const now: Date = new Date(); + const day: string = days[now.getDay()]; + const date: number = now.getDate(); + const month: string = months[now.getMonth()]; + const year: number = now.getFullYear(); + let hours: number = now.getHours(); + const minutes: number = now.getMinutes(); + + const formattedHours: string = + hours < 10 ? `0${hours}` : hours.toString(); + const formattedMinutes: string = + minutes < 10 ? `0${minutes}` : minutes.toString(); + + const formattedDate: string = `${day}, ${date} ${month} ${year}, ${formattedHours}:${formattedMinutes}`; + + return formattedDate; + } + + document.getElementById("loc").innerHTML = loc + ", " + region + "
"; + document.getElementById("date").innerHTML = getCurrentDate(); + document.getElementById("desc").innerHTML = desc; + document.getElementById("temp").innerHTML = temp + "°C"; + document.getElementById("minmax").innerHTML = + maxtemp + "°C" + "
" + mintemp + "°C"; + + document.getElementById("detailsnow").innerHTML = + "Feels like: " + + feel + + "°C
Ultraviolet Index: " + + uv + + "
Humidity: " + + humidity + + "%
Wind: " + + wind + + "kmph from " + + dir; + + document.getElementById("tomorrow").innerHTML = + "Tomorrow" + + "
" + + "Max: " + + nextdaymax + + "°C" + + "
" + + "Min: " + + nextdaymin; + + document.getElementById("overmorrow").innerHTML = + "Overmorrow" + + "
" + + "Max: " + + nextnextdaymax + + "°C" + + "
" + + "Min: " + + nextnextdaymin; + + // For Today + document.getElementById("today").innerHTML = ` +

0 AM:
${today0temp}(${today0feelsc})°C, Wind Speed - ${today0windspeed} km/h, ${today0winddir}
Condition - ${today0weatherdesc}

+

3 AM:
${today1temp}(${today1feelsc})°C, Wind Speed - ${today1windspeed} km/h, ${today1winddir}
Condition - ${today1weatherdesc}

+

6 AM:
${today2temp}(${today2feelsc})°C, Wind Speed - ${today2windspeed} km/h, ${today2winddir}
Condition - ${today2weatherdesc}

+

9 AM:
${today3temp}(${today3feelsc})°C, Wind Speed - ${today3windspeed} km/h, ${today3winddir}
Condition - ${today3weatherdesc}

+

12 PM:
${today4temp}(${today4feelsc})°C, Wind Speed - ${today4windspeed} km/h, ${today4winddir}
Condition - ${today4weatherdesc}

+

3 PM:
${today5temp}(${today5feelsc})°C, Wind Speed - ${today5windspeed} km/h, ${today5winddir}
Condition - ${today5weatherdesc}

+

6 PM:
${today6temp}(${today6feelsc})°C, Wind Speed - ${today6windspeed} km/h, ${today6winddir}
Condition - ${today6weatherdesc}

+

9 PM:
${today7temp}(${today7feelsc})°C, Wind Speed - ${today7windspeed} km/h, ${today7winddir}
Condition - ${today7weatherdesc}

+`; + + // For Tomorrow + document.getElementById("nextday").innerHTML = ` +

0 AM:
${nextday0temp}(${nextday0feelsc})°C, Wind Speed - ${nextday0windspeed} km/h, ${nextday0winddir}
Condition - ${nextday0weatherdesc}

+

3 AM:
${nextday1temp}(${nextday1feelsc})°C, Wind Speed - ${nextday1windspeed} km/h, ${nextday1winddir}
Condition - ${nextday1weatherdesc}

+

6 AM:
${nextday2temp}(${nextday2feelsc})°C, Wind Speed - ${nextday2windspeed} km/h, ${nextday2winddir}
Condition - ${nextday2weatherdesc}

+

9 AM:
${nextday3temp}(${nextday3feelsc})°C, Wind Speed - ${nextday3windspeed} km/h, ${nextday3winddir}
Condition - ${nextday3weatherdesc}

+

12 PM:
${nextday4temp}(${nextday4feelsc})°C, Wind Speed - ${nextday4windspeed} km/h, ${nextday4winddir}
Condition - ${nextday4weatherdesc}

+

3 PM:
${nextday5temp}(${nextday5feelsc})°C, Wind Speed - ${nextday5windspeed} km/h, ${nextday5winddir}
Condition - ${nextday5weatherdesc}

+

6 PM:
${nextday6temp}(${nextday6feelsc})°C, Wind Speed - ${nextday6windspeed} km/h, ${nextday6winddir}
Condition - ${nextday6weatherdesc}

+

9 PM:
${nextday7temp}(${nextday7feelsc})°C, Wind Speed - ${nextday7windspeed} km/h, ${nextday7winddir}
Condition - ${nextday7weatherdesc}

+`; + + // For Overmorrow + document.getElementById("nextnextday").innerHTML = ` +

0 AM:
${nextnextday0temp}(${nextnextday0feelsc})°C, Wind Speed - ${nextnextday0windspeed} km/h, ${nextnextday0winddir}
Condition - ${nextnextday0weatherdesc}

+

3 AM:
${nextnextday1temp}(${nextnextday1feelsc})°C, Wind Speed - ${nextnextday1windspeed} km/h, ${nextnextday1winddir}
Condition - ${nextnextday1weatherdesc}

+

6 AM:
${nextnextday2temp}(${nextnextday2feelsc})°C, Wind Speed - ${nextnextday2windspeed} km/h, ${nextnextday2winddir}
Condition - ${nextnextday2weatherdesc}

+

9 AM:
${nextnextday3temp}(${nextnextday3feelsc})°C, Wind Speed - ${nextnextday3windspeed} km/h, ${nextnextday3winddir}
Condition - ${nextnextday3weatherdesc}

+

12 PM:
${nextnextday4temp}(${nextnextday4feelsc})°C, Wind Speed - ${nextnextday4windspeed} km/h, ${nextnextday4winddir}
Condition - ${nextnextday4weatherdesc}

+

3 PM:
${nextnextday5temp}(${nextnextday5feelsc})°C, Wind Speed - ${nextnextday5windspeed} km/h, ${nextnextday5winddir}
Condition - ${nextnextday5weatherdesc}

+

6 PM:
${nextnextday6temp}(${nextnextday6feelsc})°C, Wind Speed - ${nextnextday6windspeed} km/h, ${nextnextday6winddir}
Condition - ${nextnextday6weatherdesc}

+

9 PM:
${nextnextday7temp}(${nextnextday7feelsc})°C, Wind Speed - ${nextnextday7windspeed} km/h, ${nextnextday7winddir}
Condition - ${nextnextday7weatherdesc}

+`; + + if (4 < formattedHours < 7) { + document.documentElement.style.setProperty( + "--bg-image", + "linear-gradient(to top, #00223E 0%, #FFA17F 100%)" + ); + } + if (18 < formattedHours < 20) { + document.documentElement.style.setProperty( + "--bg-image", + "linear-gradient(to top, #0B486B 0%, #F56217 100%)" + ); + } + if (20 < formattedHours < 23) { + document.documentElement.style.setProperty( + "--bg-image", + "linear-gradient(to top, saddlebrown 0%, #19547b 100%)" + ); + } + + if (temp > 40) { + document.documentElement.style.setProperty( + "--bg-image", + "linear-gradient(to top, #C02425 0%, #F0CB35 100%)" + ); + } +} +getWeather();