Name of code : XMLHttpRequest
Categorie : API
Ce code HTML, CSS et JavaScript crée une page web qui affiche le cours d'une devise en euros et son changement récent en pourcentage.
Le code JavaScript utilise l'API XMLHTTPRequest pour récupérer les données de cours et de changement à partir d'un fichier JSON situé à une adresse URL spécifiée. Lorsque la réponse JSON est obtenue, le code JavaScript modifie le contenu de la page en utilisant les valeurs JSON récupérées pour mettre à jour le cours et le changement affichés, et pour formater la date et l'heure en utilisant les options de localisation pour la France.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{
--basse-font-size : 5vw;
}
*{
font-family: fantasy;
margin: 1px;
}
#cour{
font-size: calc(var(--basse-font-size)*2);
}
#heur{
font-size: var(--basse-font-size);
}
#courchange{
font-size: var(--basse-font-size);
}
.flex{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
.down{
color: red;
}
.up{
color: green;
}
.notmove{
color: orange;
}
.down:after {
content: " ?";
color: red;
}
.up:after {
content: " ?";
color: green;
}
.notmove:after {
content: " =";
color: orange;
}
</style>
</head>
<body>
<div class="flex">
<h1 ><span id="cour">0.978 €</span><span id="courchange"class="up down">+0.78 %</span></h1>
<h2 id="heur"> 29/39/23 02H34</h2>
</div>
</body>
</html>
<script>
const xhr = new XMLHttpRequest();
xhr.responseType ='json';
xhr.open('GET', 'https://netgem.symex.be/quote.json', true);
xhr.send();
xhr.onreadystatechange = function() { //Appelle une fonction au changement d'état.
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
console.log(xhr.response)
variable_xhr = xhr.response.var;
variable ="";
if (variable_xhr > 0){
variable = '+' + variable_xhr;
courchange.classList.remove('notmove');
courchange.classList.remove('down');
courchange.classList.add('up');
}else if(variable_xhr < 0){
variable = '-' + variable_xhr;
courchange.classList.remove('notmove');
courchange.classList.remove('up');
courchange.classList.add('down');
}else{
variable = ' ' + variable_xhr;
courchange.classList.remove('up');
courchange.classList.remove('down');
courchange.classList.add('notmove');
}
cour.textContent = xhr.response.value+"€";
courchange.textContent = variable+"%";
let date = new Date(xhr.response.date);
let formattedDate = date.toLocaleString('fr-FR', {hour: '2-digit', minute:'2-digit', day: '2-digit', month: '2-digit', year: 'numeric'});
heur.textContent = formattedDate;
}
}
</script>