Skip to content

H
hitachi-weather
Commit 1d893e80 by Kornkitt Poolsup
Options

forecast fixed

parent 55704d36
Showing with 34 additions and 18 deletions
css/main.css
......@@ -2,6 +2,12 @@
box-sizing: border-box;
}
head {
max-width: 100%;
display: flex;
flex-direction: column;
}
body {
font-size: 14px;
font-family: 'Poppins';
......
index.html
......@@ -15,11 +15,14 @@
<div class="container-fluid">
<span class="navbar-brand mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span>
</div>
<div class="container-fluid" id="showtime" onload="startTime()" style="color: #6A6F7D;"></div>
<div class="container-fluid">
<p id="showtime" onload="startTime()" style="color: #6A6F7D;">-</p>
</div>
<hr>
<div class="container">
<div class="container-fluid">
<div class="container-fluid">
<div class="row" style="width: 100%;">
<div class="col-4">
<button class="active-headertab" id="home-menu-tab" type="button" onclick="navigate('home')" style="display: inline-block;" disabled>
......@@ -47,14 +50,17 @@
</div>
</div>
</div>
</div>
</nav>
</head>
<body>
<div class="container-fluid">
<!-- Homepage -->
<div class="container mt-3" id="homepage">
<div class="row" style="width: 100%; color: #36455A;">
<div class="row row-flex" style="width: 100%; color: #36455A;">
<div class="col-6">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center;">
<div class="card-body">
......@@ -107,7 +113,7 @@
<!-- Camera page -->
<div class="container mt-3" id="camerapage" style="display: none;">
<div class="row" style="width: 100%;">
<div class="row row-flex" style="width: 100%;">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam01" class="card-img-top" width="100%">
<div class="card-body" style="display:inline-block;">
......@@ -155,9 +161,9 @@
<!-- Forecast page -->
<div class="container mt-3" id="forecastpage" style="display: none;">
<div class="row" style="width: 100%;">
<div class="row row-flex" style="width: 100%;">
<i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i>
<br><p id="forecasttime" style="color: #6A6F7D;"> </p>
<br><p id="forecasttime" style="color: #6A6F7D;">-</p>
<div id="forcastplain" style="text-align: center; display: inline-block;">
<img id="forecast-pic" class="mt-5" style="align-items: center;" width="200rem">
......@@ -192,7 +198,7 @@
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
......
index.js
......@@ -159,10 +159,10 @@ function getForecast() {
var now = Date.now();
var temperature, precip, humid, ws, pic, description;
for (let d in obj.data.list) {
console.log(now, obj.data.list[d].dt * 1000);
console.log(obj.data.list[d].dt * 1000, now);
if (obj.data.list[d].dt * 1000 > now) {
temperature = obj.data.list[d].main["temp"] - 273.15;
precip = obj.data.list[d].rain["3h"];
precip = obj.data.list[d].clouds["all"];
humid = obj.data.list[d].main["humidity"]
ws = obj.data.list[d].wind["speed"];
......@@ -179,7 +179,7 @@ function getForecast() {
$("#forecast-description").text(capitalize(description));
$("#forecast-temperature").text(Math.round(temperature).toString());
$("#forecast-precip").text(precip.toString() + " mm");
$("#forecast-precip").text(precip.toString() + " %");
$("#forecast-humid").text(humid.toString() + " %");
$("#forecast-ws").text(ws.toString() + " km/h");
}
......@@ -193,16 +193,13 @@ function showtime() {
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
document.getElementById("forecasttime").innerHTML = day[now.getDay()] + " " + now.getDate() + ", " + month[now.getMonth()];
document.getElementById("showtime").innerHTML = day[now.getDay()] + " " + now.getDate() + ", " + month[now.getMonth()];
var date_show = day[now.getDay()] + " " + now.getDate().toString() + ", " + month[now.getMonth()];
console.log(date_show);
}
document.getElementById("forecasttime").innerHTML = date_show;
document.getElementById("showtime").innerHTML = date_show;
// Update the count down every 1 second
setInterval(showtime, 1000);
setInterval(getData, 5000);
setInterval(getCamera, 5000);
setInterval(getForecast, 3600000);
}
function init() {
getData();
......@@ -212,3 +209,10 @@ function init() {
}
init();
// Update the count down every 1 second
setInterval(showtime, 1000);
setInterval(getData, 5000);
setInterval(getCamera, 5000);
setInterval(getForecast, 3600000);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment