I have a web page that display the weather based on the user input, also, I have a time HTML Element. The data will be initialized using JS. This is the code of the HTML Elements:
HTML:
<div class="content">
<div class="date-time">
<h1 class="time">
00:00:00
</h1>
<h2 class="date">
</h2>
</div>
</div>
JavaScript:
setInterval(() => {
// 12Hr Format For Hour
function twilveFormat(hour) {
if (hour >= 13) {
return hour % 12;
} else {
return hour;
}
}
function isAM_PM(hour) {
if (hour >= 12) {
return "AM";
} else {
return "PM";
}
}
const days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursay",
"Friday",
"Saturday"
];
const months = [
"Jan",
"Feb",
"March",
"Apr",
"May",
"Jun",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
const time = new Date();
const date = time.getDate();
const month = time.getMonth();
const day = time.getDay();
const min = time.getMinutes();
const sec = time.getSeconds();
const hour = time.getHours();
const hourIn12HR = twilveFormat(hour);
const isAM = isAM_PM(hour);
// Time
document.querySelector(
".content .date-time .time"
).innerHTML = `${hourIn12HR}:${min}:${sec} <span id='AM_PM'>${isAM}</span>`;
// Date
document.querySelector(
".content .date-time .date"
).innerHTML = `${days[day]}, ${date} ${months[month]}`;
}, 1000);
I use Openweathermap API:
const res = await fetch(
`http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${this.apiKey}`
);
const data = await res.json();
this.display(data);
What I want is every time the user enters a city name using the below code of input, the timezone changes to the city that the user selected. The Openweathermap API have a timezone attribute but I don't know how to use it
HTML input:
<div action="" class="myform">
<input type="" class="search" placeholder="Search">
<button class="myBtn"><i class="fas fa-search"></i></button>
</div>
To achieve your goal you first need to get the timezone-property and parse it to your need. By looking at the OpenWeatherMap API I can see that the response contains a "timezone"-property which gives you the shift in seconds from UTC time for that city. So what you can try: You can fetch the current time at your location using
var x = new Date();
Next you add the amount of seconds that the timezone-property holds. (of course you need to parse it to a number first) like so:
x.setSeconds(x.getSeconds + {timezoneParsed});
That will return you the city's current time as number of ticks. Next you just out put the current time in human readable format like so for instance:
x.toISOString();