Application météo avec ville par défaut et choix utilisateur en JavaScript

Question

Bonjour Loui !
Voici ma résolution pour ce projet d'application météo.
Pour définir une ville par défaut, j'ai d'abord appelé la fonction avec l'argument de départ recevoirTemperature(ville); puis je l'ai ensuite rappelé dans le click event et lui passer la variable stockant le choix de l'utilisateur en paramètre recevoirTemperature(villeChoisie);
let ville = "Kinshasa";
let btnChanger = document.querySelector('#changer');
function recevoirTemperature(ville) {
const url = 'https://api.openweathermap.org/data/2.5/weather?q=' + ville + '&appid=1ba1d7541111c71b5a4fff124077ae07&units=metric';
let requeteClimat = new XMLHttpRequest();
requeteClimat.open('GET', url);
requeteClimat.responseType = 'json';
requeteClimat.send();
requeteClimat.onload = function () {
if (requeteClimat.readyState === XMLHttpRequest.DONE) {
if (requeteClimat.status === 200) {
let reponse = requeteClimat.response;
document.querySelector('#temperature_label').textContent = reponse.main.temp;
document.querySelector('#ville').textContent = reponse.name;
// console.log(reponse);
};
};
};
};
recevoirTemperature(ville);
btnChanger.addEventListener('click', () => {
let villeChoisie = prompt('Choisissez une ville.');
recevoirTemperature(villeChoisie);
// console.log(villeChoisie);
});

Louis-Nicolas Leuillet · Accepted Answer

Bonne approche Eliezer !
Ton code est propre et bien structuré.
Un petit point à noter : le paramètre de ta fonction s'appelle aussi ville , comme ta variable globale. Ça fonctionne, mais ça peut prêter à confusion. En JavaScript, le paramètre va "masquer" la variable globale à l'intérieur de la fonction, ce qui dans ton cas ne pose pas de problème concret, mais renommer l'un ou l'autre (par exemple le paramètre en nomVille ) rendrait le code plus lisible :
function recevoirTemperature(nomVille) {
const url = 'https://api.openweathermap.org/data/2.5/weather?q=' + nomVille + '&appid=1ba1d7541111c71b5a4fff124077ae07&units=metric';
// ...
}
Sinon, tout le reste est bon : la gestion du readyState , du status 200 , la récupération de reponse.main.temp et reponse.name . Bien joué !

Eliezer Tshiabola · Answer

Merci Louis!
Voici la correction
let btnChanger = document.querySelector('#changer');
function recevoirTemperature(nomVille) {
const url = 'https://api.openweathermap.org/data/2.5/weather?q=' + nomVille + '&appid=1ba1d7541111c71b5a4fff124077ae07&units=metric';
let requeteClimat = new XMLHttpRequest();
requeteClimat.open('GET', url);
requeteClimat.responseType = 'json';
requeteClimat.send();
requeteClimat.onload = function () {
if (requeteClimat.readyState === XMLHttpRequest.DONE) {
if (requeteClimat.status === 200) {
let reponse = requeteClimat.response;
document.querySelector('#temperature_label').textContent = reponse.main.temp;
document.querySelector('#ville').textContent = reponse.name;
// console.log(reponse);
} else {
alert('Un problème est intervenu, veuillez réessayer plutard');
}
};
};
};
recevoirTemperature('Kinshasa');
btnChanger.addEventListener('click', () => {
let villeChoisie = prompt('Choisissez une ville.');
recevoirTemperature(villeChoisie);
// console.log(villeChoisie);
});

Louis-Nicolas Leuillet · Answer

Nickel ! T u peux passer à la suite !

Application météo avec ville par défaut et choix utilisateur en JavaScript

Formation JavaScript (legacy)