Widget html css js

Bonjour,

Je suis actuellement en formation de développement et l'un de mes projets et de faire des widgets sur un site avec uniquement du html css js.
Plusieurs widgets sont demandés comme :

- Un widget calculatrice
- Un widget météo
- Un widget générateur de mot de passe
....
J'ai donc commencé par le widget météo j'ai un début de piste mais je ne sais pas si c'est en C° ou en F°.. et cela ne me dit pas si il pleu ou si il fait beau etc... est ce que quelqu'un peux m'aider svp ?

<div>
        <input id="queryLoc" type="text" value="ex : paris,fr" />
        <input type="button" value="Météo"  onclick="buttonClickGET()"  />
        <p id="zone_meteo">toto</p>
    </div>

var callBackGetSuccess = function(data) {
    console.log("donnees api", data)
    //alert("Meteo temp  : "  + data.main.temp);
    var element = document.getElementById("zone_meteo");
    element.innerHTML = "La temperature est de " + data.main.temp;
}


function buttonClickGET(){
    var queryLoc = document.getElementById("queryLoc").value;

    var url = "https://api.openweathermap.org/data/2.5/weather?q="+queryLoc+"&appid=c21a75b667d6f7abb81f118dcf8d4611&units=metric"

    $.get(url, callBackGetSuccess).done(function(){
        //alert( "second success" );
      })
      .fail(function(){
        alert( "error" );
      })
      .always(function(){
        //alert( "finished" );
      });
}