Local Weather App Feedback?

Project Feedback
#1

Hey guys! I just finished the local weather project and was looking for feedback on it, any feedback at all, positive or negative, is appreciated! Thank you in advance. The link is below:

#2

I have two suggestions.

#1) I would increase the percentage of the max-width property of your “weather-box” class. Currently, everything squished on a smaller width screen.

#2) Related to the above, even with an increase in max-width percentage, at some point on a narrow screen the degree symbol plus the “C” or “F” ends up on a separate line than the temperature (see screenshot below). To prevent this, delete the anchor with id="CToF from your HTML and include it in the html of the span with id=“temp” along with the actual temperature. Nesting it all in the span element will keep all the text together. See below for how you could implement this. Note, that I have simplified your original code a bit too.

  function tempConvert(temp) {
    var symbol = "℃";
    if (degreeType == "c") {
      temp = temp * 9 / 5 + 32;
      symbol = "℉"
      degreeType = "f";
    } else {
      degreeType = "c";
    }
    $("#temp").html(temp + '<a id="CToF" href="#">'+ symbol + '</a>');
  }

You will also need to make a slight change to click handler to handle the dynamically created anchor.

  $("#temp").on('click', "a", function() {
    tempConvert(temperature);
  });