I’m trying to add a website with a webbrowser. Everything loads great in the designer but the scrollbar disappears when I load it with my android device. Does anyone know how to be able to scroll a webbrowser in this situation?
Hi Greg,
mobile devices have a touch screen, can’t you just swipe up or down?
Kalle
It doesn’t do anything when I swipe.
Mhh,
I did a test on my Android and I can swipe to scroll the page. I tried with the forum page.
Now I tried with other pages and swiping works too.
Here is my test file - just to make sure it’s not your Anfroid device
Ok thanks, yeah that worked. It must be the webpage itself and the way it loads. Would you mind trying it to confirm?
Hi Greg,
I have tested the page on my Android tablet and I can scroll your page normally with a swipe. The problem must be something else.
Interesting. I am just putting the website name in the ‘URL’ box. Is that what you are doing or are you using it in the ‘html’?
I have used the complete address
Yes that’s how I’m doing it. It must be the device. Do you have any knowledge of using the html code box to try different options of forcing certain views or pixel sizes? I wonder if that could help.
No, I haven’t played with it yet - but I might have a look at it. What data do you actually need from the site? Maybe we can write a small script or plugin to process this data.
I considered that but it might be a lot of data. I have a portion of my dashboard where it shows me first light, last light, sunrise, and sunset for the current day. I wanted a quick way to compare it to days in the past and days in the future. The part of the webpage I was interested in was the grid of days and months toward the bottom, see attached. I have the ability to grab a couple pieces of data and maybe put a date a week ago and a date a week in the future, but I don’t know that I could rebuild the entire grid of days and months.
I also tried to load it on a different device and it gave me the ability to scroll a little but but still wouldn’t scroll to the grid I’m referring to.
Hi Greg,
very nice solution of a dashboard, I like the frame.
Is this what you looking for?
Version01:
Version02:
I have set the preview and retrospective to ± 6 days for now, but everything is customizable.
Kalle
here is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sun in Oklahoma City</title>
<style>
/* Style for the table to make it full width and collapse borders */
table {
width: 100%;
border-collapse: collapse;
}
/* Style for table headers and cells to add borders and padding */
th, td {
border: 1px solid #ddd;
padding: 8px;
}
/* Style for table headers to add background color and center text */
th {
background-color: #f2f2f2;
text-align: center;
}
/* Style for table cells to center text */
td {
text-align: center;
}
/* Style for the highlighted row to change background color */
.highlight {
background-color: #add8e6; /* Light blue color */
}
/* Style for small text */
.small {
font-size: 0.8em;
}
/* Style for soft-colored text */
.soft {
color: #888;
}
/* Media query for screens with a max width of 600px */
@media screen and (max-width: 600px) {
/* Make table elements block-level for better mobile display */
table, thead, tbody, th, td, tr {
display: block;
}
/* Add padding and right-align text for table headers and cells */
th, td {
padding: 10px;
text-align: right;
}
/* Left-align text for table headers */
th {
background-color: #f2f2f2;
text-align: left;
}
/* Add margin to table rows */
tr {
margin-bottom: 10px;
}
/* Adjust padding and position for table cells */
td {
text-align: right;
position: relative;
padding-left: 50%;
}
/* Add labels to table cells for better mobile display */
td:before {
content: attr(data-label);
position: absolute;
left: 10px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
}
</style>
</head>
<body>
<h1 id="title">Sun in Oklahoma City</h1>
<label for="year-select">Year:</label>
<select id="year-select">
<!-- Add years -->
<option value="2023">2023</option>
<option value="2024" selected>2024</option>
<option value="2025">2025</option>
</select>
<label for="month-select">Month:</label>
<select id="month-select">
<!-- Add months -->
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9" selected>September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<button onclick="fetchSunData()">Show</button>
<table>
<thead>
<tr class="bg-wt">
<th id="year" colspan="3">2024</th>
</tr>
<tr>
<th id="month">Month</th>
<th class="c">Sunrise</th>
<th class="c">Sunset</th>
</tr>
</thead>
<tbody id="sun-data">
<!-- Data will be inserted here -->
</tbody>
<tfoot>
<tr>
<td colspan="3" style="width: 100%;"> * All times are local time for Oklahoma City. Time is adjusted for <a href="/time/dst/">DST</a> when applicable. They take into account <a href="/astronomy/refraction.html">refraction</a>. Dates are based on the <a href="/calendar/gregorian-calendar.html">Gregorian calendar</a>. Today is <span class="hl">highlighted</span>. </td>
</tr>
</tfoot>
</table>
<script>
async function fetchSunData() {
// Get references to the table body, title, year, and month elements
const tbody = document.getElementById('sun-data');
const title = document.getElementById('title');
const yearElement = document.getElementById('year');
const monthElement = document.getElementById('month');
// Get the selected year and month from the dropdowns
const year = document.getElementById('year-select').value;
const monthNumber = document.getElementById('month-select').value;
const month = new Date(year, monthNumber - 1).toLocaleString('default', { month: 'long' });
// Update the title and table headers with the selected year and month
title.textContent = `Sun in Oklahoma City - ${month} ${year}`;
yearElement.textContent = year;
monthElement.textContent = month;
// Latitude and longitude for Oklahoma City
const lat = 35.4676;
const lng = -97.5164;
// Get the current date and calculate the start and end dates for the 6-day range
const now = new Date();
const day = now.getDate();
const startDate = new Date(year, monthNumber - 1, day - 6);
const endDate = new Date(year, monthNumber - 1, day + 6);
// Clear previous data from the table body
tbody.innerHTML = '';
// Loop through each day in the range and fetch sunrise and sunset data
for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
const date = d.toISOString().split('T')[0];
const response = await fetch(`https://api.sunrise-sunset.org/json?lat=${lat}&lng=${lng}&date=${date}&formatted=0`);
const data = await response.json();
const sunrise = new Date(data.results.sunrise).toLocaleTimeString('en-US', { timeZone: 'America/Chicago' });
const sunset = new Date(data.results.sunset).toLocaleTimeString('en-US', { timeZone: 'America/Chicago' });
// Create a new table row and add the data
const row = document.createElement('tr');
row.className = d.getDate() === day ? 'highlight' : '';
row.innerHTML = `
<th>${d.getDate()}</th>
<td class="c sep" data-label="Sunrise">${sunrise}</td>
<td class="sep c" data-label="Sunset">${sunset}</td>
`;
tbody.appendChild(row);
}
}
// Initial load of data when the page is first loaded
fetchSunData();
</script>
</body>
</html>
Oh wow this is fantastic! This is even better than the website. Thank you so much. I added a few things for customization and have a couple things to work out if you can help. I changed the retrospective for the entire current month. It starts on day 1 and ends on day 31 (it shows the 1st day of the next month if the current month has only 30 days, which is fine IMO).
-
It was showing the month as September and showing the time values for September. I corrected that to show for the current month of August (you had “month - 1” in a couple places so I changed it to “month -2” (lines 136, 150). However, the drop down menu is still set for September which looks like it’s not done programmatically, it just has the word “selected” next to it (line 99), as well as next to the year 2024 (line 85). Is there a way for it to show the drop down menus as the current year and the current month?
-
I added columns for “First Light” (which is nautical twilight start plus 12 minutes) and “Last Light” (which is nautical twilight end minus 12 minutes). I have the values for nautical twilight start and end in the chart but I was not able to find a way to add or subtract 12 minutes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sun in Oklahoma City</title>
<style>
/* Style for the table to make it full width and collapse borders */
table {
width: 100%;
border-collapse: collapse;
}
/* Style for table headers and cells to add borders and padding */
th, td {
border: 1px solid #ddd;
padding: 8px;
}
/* Style for table headers to add background color and center text */
th {
background-color: #f2f2f2;
text-align: center;
}
/* Style for table cells to center text */
td {
text-align: center;
}
/* Style for the highlighted row to change background color */
.highlight {
background-color: #add8e6; /* Light blue color */
}
/* Style for small text */
.small {
font-size: 0.8em;
}
/* Style for soft-colored text */
.soft {
color: #888;
}
/* Media query for screens with a max width of 600px */
@media screen and (max-width: 600px) {
/* Make table elements block-level for better mobile display */
table, thead, tbody, th, td, tr {
display: block;
}
/* Add padding and right-align text for table headers and cells */
th, td {
padding: 10px;
text-align: right;
}
/* Left-align text for table headers */
th {
background-color: #f2f2f2;
text-align: left;
}
/* Add margin to table rows */
tr {
margin-bottom: 10px;
}
/* Adjust padding and position for table cells */
td {
text-align: right;
position: relative;
padding-left: 50%;
}
/* Add labels to table cells for better mobile display */
td:before {
content: attr(data-label);
position: absolute;
left: 10px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
}
</style>
</head>
<body>
<h1 id="title">Sun in Aracadia</h1>
<label for="year-select">Year:</label>
<select id="year-select">
<!-- Add years -->
<option value="2023">2023</option>
<option value="2024" selected>2024</option>
<option value="2025">2025</option>
</select>
<label for="month-select">Month:</label>
<select id="month-select">
<!-- Add months -->
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9" selected>September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<button onclick="fetchSunData()">Show</button>
<table>
<thead>
<tr class="bg-wt">
<th id="year" colspan="5">2024</th>
</tr>
<tr>
<th id="month">Month</th>
<th class="c">Sunrise</th>
<th class="c">Sunset</th>
<th class="c">First Light</th>
<th class="c">Last Light</th>
</tr>
</thead>
<tbody id="sun-data">
<!-- Data will be inserted here -->
</tbody>
<tfoot>
</tfoot>
</table>
<script>
async function fetchSunData() {
// Get references to the table body, title, year, and month elements
const tbody = document.getElementById('sun-data');
const title = document.getElementById('title');
const yearElement = document.getElementById('year');
const monthElement = document.getElementById('month');
// Get the selected year and month from the dropdowns
const year = document.getElementById('year-select').value;
const monthNumber = document.getElementById('month-select').value;
const month = new Date(year, monthNumber - 2).toLocaleString('default', { month: 'long' });
// Update the title and table headers with the selected year and month
title.textContent = `Sun in Arcadia - ${month} ${year}`;
yearElement.textContent = year;
monthElement.textContent = month;
// Latitude and longitude for Oklahoma City
const lat = 35.4676;
const lng = -97.5164;
// Get the current date and calculate the start and end dates for the 6-day range
const now = new Date();
const day = now.getDate();
const startDate = new Date(year, monthNumber - 2, 1);
const endDate = new Date(year, monthNumber - 2, 31);
// Clear previous data from the table body
tbody.innerHTML = '';
// Loop through each day in the range and fetch sunrise and sunset data
for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
const date = d.toISOString().split('T')[0];
const response = await fetch(`https://api.sunrise-sunset.org/json?lat=${lat}&lng=${lng}&date=${date}&formatted=0`);
const data = await response.json();
console.log(data);
const sunrise = new Date(data.results.sunrise).toLocaleTimeString('en-US', { timeZone: 'America/Chicago' });
const sunset = new Date(data.results.sunset).toLocaleTimeString('en-US', { timeZone: 'America/Chicago' });
const firstlight = new Date(data.results.nautical_twilight_begin).toLocaleTimeString('en-US', { timeZone: 'America/Chicago' });
const lastlight = new Date(data.results.nautical_twilight_end).toLocaleTimeString('en-US', { timeZone: 'America/Chicago' });
// Create a new table row and add the data
const row = document.createElement('tr');
row.className = d.getDate() === day ? 'highlight' : '';
row.innerHTML = `
<th>${d.getDate()}</th>
<td class="c sep" data-label="Sunrise">${sunrise}</td>
<td class="sep c" data-label="Sunset">${sunset}</td>
<td class="c sep" data-label="First Light">${firstlight}</td>
<td class="sep c" data-label="Last Light">${lastlight}</td>
`;
tbody.appendChild(row);
}
}
// Initial load of data when the page is first loaded
fetchSunData();
</script>
</body>
</html>
Hi Greg,
first of all, this is not only my work with this HTML Code - I use the Microsoft Pilot KI - you have only to know how you ask the KI
here the corrected code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sun in Arcadia</title>
<style>
/* Style for the table to make it full width and collapse borders */
table {
width: 100%;
border-collapse: collapse;
}
/* Style for table headers and cells to add borders and padding */
th, td {
border: 1px solid #ddd;
padding: 8px;
}
/* Style for table headers to add background color and center text */
th {
background-color: #f2f2f2;
text-align: center;
}
/* Style for table cells to center text */
td {
text-align: center;
}
/* Style for the highlighted row to change background color */
.highlight {
background-color: #add8e6; /* Light blue color */
}
/* Style for small text */
.small {
font-size: 0.8em;
}
/* Style for soft-colored text */
.soft {
color: #888;
}
/* Media query for screens with a max width of 600px */
@media screen and (max-width: 600px) {
/* Make table elements block-level for better mobile display */
table, thead, tbody, th, td, tr {
display: block;
}
/* Add padding and right-align text for table headers and cells */
th, td {
padding: 10px;
text-align: right;
}
/* Left-align text for table headers */
th {
background-color: #f2f2f2;
text-align: left;
}
/* Add margin to table rows */
tr {
margin-bottom: 10px;
}
/* Adjust padding and position for table cells */
td {
text-align: right;
position: relative;
padding-left: 50%;
}
/* Add labels to table cells for better mobile display */
td:before {
content: attr(data-label);
position: absolute;
left: 10px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
}
</style>
</head>
<body>
<h1 id="title">Sun in Arcadia</h1>
<label for="year-select">Year:</label>
<select id="year-select">
<!-- Add years -->
<option value="2023">2023</option>
<option value="2024" selected>2024</option>
<option value="2025">2025</option>
</select>
<label for="month-select">Month:</label>
<select id="month-select">
<!-- Add months -->
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8" selected>August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<button onclick="fetchSunData()">Show</button>
<table>
<thead>
<tr class="bg-wt">
<th id="year" colspan="5">2024</th>
</tr>
<tr>
<th id="month">Month</th>
<th class="c">Sunrise</th>
<th class="c">Sunset</th>
<th class="c">First Light</th>
<th class="c">Last Light</th>
</tr>
</thead>
<tbody id="sun-data">
<!-- Data will be inserted here -->
</tbody>
<tfoot>
</tfoot>
</table>
<script>
async function fetchSunData() {
// Get references to the table body, title, year, and month elements
const tbody = document.getElementById('sun-data');
const title = document.getElementById('title');
const yearElement = document.getElementById('year');
const monthElement = document.getElementById('month');
// Get the selected year and month from the dropdowns
const year = document.getElementById('year-select').value;
const monthNumber = document.getElementById('month-select').value;
const month = new Date(year, monthNumber - 1).toLocaleString('default', { month: 'long' });
// Update the title and table headers with the selected year and month
title.textContent = `Sun in Arcadia - ${month} ${year}`;
yearElement.textContent = year;
monthElement.textContent = month;
// Latitude and longitude for Oklahoma City
const lat = 35.4676;
const lng = -97.5164;
// Get the current date and calculate the start and end dates for the 6-day range
const now = new Date();
const day = now.getDate();
const startDate = new Date(year, monthNumber - 1, 1);
const endDate = new Date(year, monthNumber - 1, 31);
// Clear previous data from the table body
tbody.innerHTML = '';
// Loop through each day in the range and fetch sunrise and sunset data
for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
const date = d.toISOString().split('T')[0];
const response = await fetch(`https://api.sunrise-sunset.org/json?lat=${lat}&lng=${lng}&date=${date}&formatted=0`);
const data = await response.json();
console.log(data);
const sunrise = new Date(data.results.sunrise).toLocaleTimeString('en-US', { timeZone: 'America/Chicago' });
const sunset = new Date(data.results.sunset).toLocaleTimeString('en-US', { timeZone: 'America/Chicago' });
const nauticalTwilightBegin = new Date(data.results.nautical_twilight_begin);
const nauticalTwilightEnd = new Date(data.results.nautical_twilight_end);
// Add 12 minutes to nautical twilight begin for first light
const firstLight = new Date(nauticalTwilightBegin.getTime() + 12 * 60000).toLocaleTimeString('en-US', { timeZone: 'America/Chicago' });
// Subtract 12 minutes from nautical twilight end for last light
const lastLight = new Date(nauticalTwilightEnd.getTime() - 12 * 60000).toLocaleTimeString('en-US', { timeZone: 'America/Chicago' });
// Create a new table row and add the data
const row = document.createElement('tr');
row.className = d.getDate() === day ? 'highlight' : '';
row.innerHTML = `
<th>${d.getDate()}</th>
<td class="c sep" data-label="Sunrise">${sunrise}</td>
<td class="sep c" data-label="Sunset">${sunset}</td>
<td class="c sep" data-label="First Light">${firstLight}</td>
<td class="sep c" data-label="Last Light">${lastLight}</td>
`;
tbody.appendChild(row);
}
}
// Initial load of data when the page is first loaded
fetchSunData();
</script>
</body>
</html>
Wow, it works perfectly! Thanks again so much. I would like to learn Pilot. Do you mind telling me some of the questions you asked so I can learn faster?
Of course, no problem.
Pilot is free to use and it is an advantage to be logged in with a Microsoft account, but this is not a requirement.
The advantage of having an account is the amount of characters you can enter per question and how many times in a row.
I think without an account there are 10 questions with a maximum of 2000 characters per question (which is not very much for program code). With an account there are 30 questions and 4000 characters per question.
Even 4000 characters is not a lot, but you can easily bypass the whole thing with both options. Shall we use this thread on how to create a website like this? Maybe others will like it too.
Kalle
I think that’s a great idea. Or it can inspire them to use pieces of it to do other things they want. Just scraping webpages in general. But it’s all about the questions. Can you consider doing a little tutorial on how to achieved this current project with AI? What questions did you ask?
You can also create relatively complex plugins for THR in just a few minutes if you have a “start code” with the basic structure (which is the case with THR thanks to many examples). I am not a programmer and was able to create some of my plugins myself and above all my native language is German which makes this a bit more difficult. The only luck I have is that a very good Canadian friend is a programmer and developed a software for a voice assistant for Windows long before “Alexa and Co.” (2009), which can also be used with Android devices and also on Android Watch OS (a wireless microphone on the wrist).
Okay, let us start:
This was my first question to Pilot:
I would like to display only the table “Sun in Oklahoma City” from the following page in my web browser, is that possible? Sunrise and sunset times in Oklahoma City
answer:
Unfortunately, I can’t show you the table from the website directly, as I’m not allowed to copy complete content from other websites. But I can help you find the table.
When you open the page, just scroll down until you see the table with the heading “Sun in Oklahoma City”. There you will find all the information you are looking for.
If you have any further questions or need help, please let me know.
question:
I have the HTML code, but it is very long. How can I show it to you?
From here the important part to use the AI
answer:
No problem! You can paste the HTML code here, and I will help you extract the “Sun in Oklahoma City” table from it. If the code is too long, you can also send it in several parts.
Let’s get started!
I then inserted the HTML I had found in several parts.
question:
here part 1 (followed by so many code as possible to insert, You have to check where the code was cut off and from there continue with the next question)
answer:
Thanks for the first part of the HTML code! Here is the extracted table “Sun in Oklahoma City” from the code:
— a lot of HTML code —
If you have the next part of the code, you can paste it here and I’ll help you out!
question:
Part 2 (followed by the second part of the code and so on until the complete code is inserted / in my case 6 Parts of Code)
answer after Part 6 of the code (which he knows by it self):
Thanks for the last part of the HTML code! Here is the complete table “Sun in Oklahoma City”:
followed by a lot of HTML code which was not complete, so my next question was always:
Please repeat from “the last piece of code that was visible”
After the complete code was displayed in many parts, I simply wrote: Can you create a simple HTML code containing the table?
answer:
Of course! Here is a simple HTML code that contains the table “Sun in Oklahoma City”:
followed by HTML code
question:
which part of the code do I have to change and how, so that the table for september is displayed?
answer:
To display the table for September, you need to change the month information in the HTML code. Here are the steps you can follow:
Change the title of the table from “August 2024” to “September 2024”.
Change the month in the tag from “Aug” to “Sep”
Adjust the dates in the tags to show the correct sunrise and sunset times for September.
*Here is an example of how you can change the HTML code (followed by a lot of HTML code) and You must insert the data for September into the tag. You can get this data from a reliable source for sunrise and sunset times.
If you need further help, let me know!
question:
Can this be changed so that the data is inserted automatically?
From this point on, the entire code changed
answer:
Yes, it is possible to automatically insert the data by using a programming language like JavaScript to dynamically load the sunrise and sunset times and insert them into the table. Here is an example of how you can do this using JavaScript and an API like the Sunrise-Sunset API:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sun in Oklahoma City</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-align: center;
}
td {
text-align: center;
}
.small {
font-size: 0.8em;
}
.soft {
color: #888;
}
</style>
</head>
<body>
<h1>Sun in Oklahoma City - September 2024</h1>
<table>
<thead>
<tr class="bg-wt">
<th>2024</th>
<th colspan="2" class="c">Sunrise/Sunset</th>
<th colspan="2" class="c sep-l">Daylength</th>
<th colspan="2" class="sep-l c">Astronomical Twilight</th>
<th colspan="2" class="c">Nautical Twilight</th>
<th colspan="2" class="c">Civil Twilight</th>
<th colspan="2" class="c sep-l">Solar Noon</th>
</tr>
<tr>
<th>Sep</th>
<th class="c">Sunrise</th>
<th class="c">Sunset</th>
<th class="c sep-l tr">Length</th>
<th class="c tr">Diff.</th>
<th class="sep-l c">Start</th>
<th class="c">End</th>
<th class="c">Start</th>
<th class="c">End</th>
<th class="c">Start</th>
<th class="c">End</th>
<th class="c sep-l">Time</th>
<th class="c tr"><span title="Million kilometers">Mil. km</span></th>
</tr>
</thead>
<tbody id="sun-data">
<!-- Daten werden hier eingefügt -->
</tbody>
<tfoot>
<tr>
<td colspan="13" style="width: 1193px;"> * All times are local time for Oklahoma City. Time is adjusted for <a href="/time/dst/">DST</a> when applicable. They take into account <a href="/astronomy/refraction.html">refraction</a>. Dates are based on the <a href="/calendar/gregorian-calendar.html">Gregorian calendar</a>. Today is <span class="hl">highlighted</span>. </td>
</tr>
</tfoot>
</table>
<script>
async function fetchSunData() {
const tbody = document.getElementById('sun-data');
const lat = 35.4676; // Latitude for Oklahoma City
const lng = -97.5164; // Longitude for Oklahoma City
for (let day = 1; day <= 30; day++) {
const date = `2024-09-${String(day).padStart(2, '0')}`;
const response = await fetch(`https://api.sunrise-sunset.org/json?lat=${lat}&lng=${lng}&date=${date}&formatted=0`);
const data = await response.json();
const sunrise = new Date(data.results.sunrise).toLocaleTimeString('de-DE', { timeZone: 'America/Chicago' });
const sunset = new Date(data.results.sunset).toLocaleTimeString('de-DE', { timeZone: 'America/Chicago' });
const dayLength = new Date(data.results.day_length * 1000).toISOString().substr(11, 8);
const row = document.createElement('tr');
row.innerHTML = `
<th>${day}</th>
<td class="c sep">${sunrise}</td>
<td class="sep c">${sunset}</td>
<td class="c tr sep-l">${dayLength}</td>
<td class="c tr sep">-</td>
<td class="c sep-l">-</td>
<td class="sep c">-</td>
<td class="c sep">-</td>
<td class="sep c">-</td>
<td class="c sep">-</td>
<td class="sep c">-</td>
<td class="c sep-l">-</td>
<td class="tr sep">-</td>
`;
tbody.appendChild(row);
}
}
fetchSunData();
</script>
</body>
</html>
Now comes the fine tuning
question:
is it possible to change the code so that the current month is always displayed?
answer:
Yes, this is possible! You can customize the JavaScript code to use the current month and year to dynamically retrieve and display the data. Here is an updated code that makes this possible:
a lot of HTML code…
This code automatically adjusts the title and table headings to the current month and year and loads the corresponding data for the current month. When you visit the page again next month, the data for the new month will be displayed.
If you have any further questions or need help, please let me know!
question:
you can remove the columns Daylenght difference as well as Astronomical Twilight, Nautical Twilight, Civil Twilight, and Solar Noon from the table, as they do not contain any data
answer:
Of course! Here is the customized HTML code that removes the unneeded columns:
followed by the new HTML code
This code only shows the columns for sunrise and sunset and removes the other columns that don’t contain any data. If you need further customization, let me know!
question:
as the table is displayed on a mobile device it should automatically adapt to the size, is that possible
answer:
Yes, it is possible to design the table so that it automatically adapts to the size of the screen. To do this, you can use CSS Media Queries and Flexbox to ensure that the table looks good on mobile devices. Here is an example of how you can achieve this:
new HTML code…
This code uses media queries to convert the table on mobile devices into a block-based layout that adapts to the screen size. The data-label attributes in the tags ensure that the column headers are also displayed on small screens.
If you need further customization or have any questions, let me know!
question:
Would it also be possible to display only the data from 6 days before and after the current date?
answer:
Yes, this is possible! You can customize the JavaScript code so that it only shows the data from 6 days before and after the current date. Here is an example of how you can achieve this:
new HTML code…
This code only shows the data from 6 days before and after the current date. If you visit the page on a different day, the data will be updated accordingly.
question:
could the year and date for the display also be made selectable?
answer:
Yes, this is possible! You can add drop-down menus to select the year and month, and then update the table based on the selection. Here’s an example of how you can do this:
new HTML code…
In this code, I have added dropdown menus for selecting the year and month. When the user clicks the “Show” button, the table is updated based on the selection. The data is displayed for 6 days before and after the current date in the selected month and year.
And so on. When the limit of questions has been reached, click on new topic in Pilot and write:
Here is my HTML code (then paste your created code) and CoPilot will ask you how it can help you. Now you can simply ask for further changes to the code.
For example, I have simply inserted your complete question from the forum at the end:
I added columns for “First Light” (which is nautical twilight start plus 12 minutes) and “Last Light” (which is nautical twilight end minus 12 minutes). I have the values for nautical twilight start and end in the chart but I was not able to find a way to add or subtract 12 minutes.
answer:
No problem! You can use the JavaScript Date objects to add or subtract 12 minutes from the times. Here is a customized version of your code that takes this into account:
the HTML which I have posted in the Forum…
In this code, I used the getTime() method to get the time in milliseconds and then added or subtracted 12 minutes (12 * 60000 milliseconds). This should give you the desired times for “First Light” and “Last Light”.
I also had CoPilot add all the code explanations in English that are contained in the HTML code
question:
Can you please add an explanation in English after each function?
All in all, it’s quite simple with good results.
Of course, not everything works straight away, but you can achieve good results quite quickly, especially if you have little or no knowledge of it.