Weather app problems again

1

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,

2

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 ):

Capture
Capture817×549 5.12 KB

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!

3

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!"

4

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
5

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!!

6

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.

7

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