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