1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| //Icone qui sera afficher a l'écrans a l'aide de la description condition meteo
const meteoImg = {
"Rain": "wi wi-day-rain",
"Clouds": "wi wi-day-cloudy",
"Clear": "wi wi-day-cloudy",
"Snow": "wi wi-day-snow",
"Mist": "wi wi-day-fog",
"Drizzle": "wi wi-day-sleet",
"Thunderstorm": "wi wi-thunderstorm"
}
// la première lettre d'un mot soit en Majuscule
function lettreMaj(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
//Fournir heure au format hh:mm à partir d'un timestamp
const CONV = {
dt_a_hm: dt => {
let date = new Date(dt * 1000);
return ("0" + date.getHours()).substr(-2) + "h" + (date.getMinutes() + "0").substr(0, 2);
}
}
//main function
async function main() {
let ville;
// recupere les données sur le serveur openweathermap pour avoir la meteo sur 5 jours
const meteo2 = await fetch("http://api.openweathermap.org/data/2.5/forecast?q=" + ville + "&APPID=d372021858e26c181fc642ca0f0dbd18&units=metric")
.then(resultat => resultat.json())
.then(json => json)
}
afficherMeteoInfo2(meteo2)
//fonction qui affiche le rendu a l'écrans
function afficherMeteoInfo2(data2) {
// Récupère toute la liste des informations météo sur 5 jours
let list = data2.list;
// petit test pour l'icone...
const conditions = list[0].weather[0].main;
//Clonage de la <tr class="modele"> Modification du nom pour les classe model,heure,temperature,icone,condition pour avoir une numérotation.
$(document).ready(function () {
var eM = $('.modele');
var eH = $('.heure');
var eT = $('.temperature');
var eW = $('.icone');
var eC = $('.conditions');
for (var i = 0; i < 13; i++) {
eM.attr("class", "modele" + i)
eH.attr("class", "heure" + i)
eT.attr("class", "temperature" + i)
eW.attr("class", "icone" + i)
eC.attr("class", "conditions" + i)
eM.clone().insertBefore(eM);
$(".modele12").remove();
}
});
// récupération des donné Heure,Temp,Icone,Description
for (var i = 0; i <= 12; i++) {
//test info
console.log(" list[i].dt : ", CONV.dt_a_hm(list[i].dt));
console.log(" list[i].main.temp : ", list[i].main.temp);
console.log(" list[i].weather[0].description : ", list[i].weather[0].description);
console.log(" list[i].weather[0].icon : ", list[i].weather[0].icon);
console.log("-------------------------------------", i);
// j'essais d'afficher tous les donnés qui sont dans la liste pour chaque classe avec leur numérotation. j'ai toujours une Erreur
$('.heure' + i)[0].innerHTML = CONV.dt_a_hm(list[i].dt);
$('.temperature' + i)[0].textContent = Math.round(list[i].main.temp);
$(".conditions" + i)[0].textContent = list[i].weather[0].description;
$('.icone' + i)[0].className = meteoImg[conditions];
};
//Ici a l'écrans tous s'affiche 12X bien sure simplement de la duplication voir image ...
//$('.heure')[0].innerHTML = CONV.dt_a_hm(list[i].dt);
//$('.temperature')[0].textContent = Math.round(list[i].main.temp);
//$(".conditions")[0].textContent = list[i].weather[0].description;
//$('.icone')[0].className = meteoImg[conditions];
} |
Clonage et affectation d'élément
Répondre avec citation
Partager