Weather app problems again

I’m stuck once again with this assignment.
Why does my layout get messed up when I click on the temp unit in order to convert into Fahrenheit? And why won’t convert it back to C if I click again?

This is the link to my code pen:

If someone could, please, take a look at it and tell me how to proceed, I’d really appreciate it. I’ve been working on this assignment for 3 months now, in my spare time, and sometimes it feels like it’s just impossible, even ifi the answer is most times really trivial. It’s really frustrating.

Thanks in advance,

Ah, just arrived here, have seen this post flagged as “new” so here i am :slight_smile:
Unfortunately i can’t see your app ( or, at least, this is what i see, tried Opera and Chrome ):

This afternoon i think i could have a look at your code ( at least to understand why i can’t see anything :/)
Don’t give up man!

Uhmm, I’ve tried with Chrome and Firefox (which I normally use) and it seems to work fine here (except the things I mentioned above). That might be another bug I iwas not aware of.
Thanks for taking the time to help me out!

Looking forward to your comments!"

Ok so…i’m not (yet!) a professionist, but i noticed i couple of things:

  • The API key stuff, since your going to put the code in a public place it’s suggested not to insert private things

  • Try to separate functions: i see a .click() binding into a getJson (asynchronous) into the getLoc func^^
    In this specific case, i will separate the click stuff and use it to trigger a function of conversion ^^ I mean you have the °C / °F label so clicking the label will trigger the conversion stuff. This is a logic indipendent from the Json or whatever data you consider, so it should be implemented separately into the code.

  • about the specific issue, the conversion function you implemented is

var fahTemp = Math.round(parseInt($("#temp").text()) * 9 / 5 + 32)

At this point you have the °F temperature, there’s no way to come back from here.
This is how i adapted your function triyng to change the less i can:

$(’#tempUnit’).click(function ()
{
var currentTempUnit = $("#tempUnit").text();
// change
//var newTempUnit = currentTempUnit == “C” ? “F” : “C”;
var newTempUnit;
currentTempUnit == “C” ? newTempUnit=“F” : newTempUnit=“C”;
//added update unit
$("#tempUnit").text(newTempUnit);
if (newTempUnit === “F”)
{
var fahTemp = Math.round(parseInt($("#temp").text()) * 9 / 5 + 32);
$("#temp").text(fahTemp );
$("#tempUnit").text(newTempUnit );
}
else
{
var celTemp = Math.round((parseInt($("#temp").text()) - 32) * 5 / 9 );
$("#temp").text(celTemp );
$("#tempUnit").text(newTempUnit );
}

It works, but you need to uniform it to your code ^^
Let me know if it helps^^

Good luck,
-LyR-

P.S:
The data problem i had before was due to the geolocalization ( disabled in all my browser); i had others problems related to graphics (i.e. coudn’t see the F once translated ) but that were problems related to my configuration i guess.

1 Like

Thanks so much!! I won’t have a lot of time in the next few days, but as soon as I’m able I’ll try it out.

Thanks!!

I’ve finally found the time to look into it, and it really works! Thanks for that! However, I’m using .apend, as I originally did, but instead of replacing the original text, it writes it literally on top. I’ve tried using .replaceWith, which works but, I can’t click on it again after the first click, and won’t keep the css, I don’t understand why.
Thanks again for all the help. If you find the time to take a look at it again and give me a few hints, I’d really appreciate it.

In case anyone gets here looking for an answer, I finally solved it by using .empty(). Like this:

function getLoc(position) {
  var apiKey = "XXXXX";
      mLat = position.coords.latitude;
      mLon = position.coords.longitude;
      cityState = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+mLat+","+mLon;
      weathInfo = "https://api.forecast.io/forecast/" + apiKey + "/" + mLat + "," + mLon  + "?units=auto&exclude=hourly&exclude=alerts&exclude=daily&callback=?" ;
  

  
   $.getJSON(cityState, function(data2){
     var userLoc = data2.results[0].formatted_address;
     var locArr = userLoc.split(",");
     locArr.splice(0,2); 
     locArr.pop();
     var locString = locArr.join(",");
     $("#locBlock").append("<p>"+locString+"</p>");
    });  
  
  $.getJSON(weathInfo, function(data1) {
    var currently = data1.currently;
    var precipProbability = currently.precipProbability * 100;
    var currentTempUnitFormat =  data1.flags.units;
    var currentTemp = Math.round(currently.temperature);
 
    
      
      if (currentTempUnitFormat === "si"){
       var tempUnit = "C";
    }
    else {
      var tempUnit = "F";
    }  
    
    
    
    
  
  $('#temp').append('<p class="temp">'+currentTemp+'&deg</p>');
  $('#tempUnit').append('<p class="tempUnit">'+tempUnit+'</p>');
      
      $('#tempUnit').click(function ()
    {
        var currentTempUnit = $("#tempUnit").text();
        
        var newTempUnit;
        currentTempUnit == "C" ? newTempUnit="F" : newTempUnit="C";
       
    $("#tempUnit").text(newTempUnit);
        if (newTempUnit === "F")
        {
        var fahTemp = Math.round(parseInt($("#temp").text()) * 9 / 5 + 32);
        $("#temp").empty().append('<p class="temp">'+fahTemp+'&deg</p>');
        $("#tempUnit").empty().append('<p class="tempUnit">'+newTempUnit+'</p>');
        }
        else
        {
        var celTemp = Math.round((parseInt($("#temp").text()) - 32) * 5 / 9 );
        $("#temp").empty().append('<p class="temp">'+celTemp+'&deg</p>');
        $("#tempUnit").empty().append('<p class="tempUnit">'+newTempUnit+'</p>');
        }

  });
    
   $("#precipBlock").append("<p> "+precipProbability +"% chance</p>");

   $("#windBlock").append("<p>"+currently.windSpeed+"m/s</p>");
      
    
    
   
   
    
    
    
          
   $("canvas").attr("id", currently.icon);      
   });   
}    

1 Like