I am accessing the OpenWeather API with ExpressJS by POST and AJAX, just to compare the 2 approaches.
Out of all things( all JS works), I am running into issue with the font awesome issues. Some are displayed, some are not.
I have tried everything placing the i tags inside all various elements, on their own etc. The results are inconsistent.
Anyway here is the markup:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> // this is the FA link
<input id="getIt" name="cityajax" type="text" class="ghost-input" placeholder="Enter a City" required>
<button id="submit">Submit</button>
<div class="textAlignCenter">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
</div>
<div id="message"></div><span id="displaySky"> </span> // the icon here shows, but only after the class is added via jQuery
<div class="wrapper">
<div>
<span class="humidLogo"></span> <i class="far fa-humidity" ></i> Current humidity: <span class="apiHumidity"> % </span> // this icon does not show
</div>
<div>
<span class="windLogo"></span> <i class="fas fa-windsock"></i> Wind speed is: <span class="apiWind"> km/h </span> //this icon does not show either
</div>
</div>
The relevant CSS is here, please don't lauch, this is what I have tried:-)
.fa {
color:violet;
}
.fas, .far {
color:violet;
}
#displaySky {
display: block;
width:100%;
margin: 20px auto;
margin-bottom: 35px;
text-align: center;
color:violet;
font-size:1.3em;
}
#message {
display: block;
width:100%;
margin: 20px auto;
text-align: center;
color:black;
}
i {
color: violet; font-size:2em !important;
}
.wrapper {
margin:10px;
border: grey 1px solid;
padding: 30px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
And the JS, this should not have any effect, but the interesting this is the line where I add the icon class, that icon does show up, just run the ajax request by entering a city in the input field and you will see, the logo gets added properly.
I would be open to some feedback if this JS can be optimized a bit, I have tried to have different icons displayed based on the weather via EJS, but that was too messy, the variables do not have cross file scope, I simple prefer the jQuery way.
String.prototype.capitalize = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
} // ignore this
$("#submit").click(function (e) {
var destination = ($("#getIt").val());
$.post("http://api.openweathermap.org/data/2.5/weather?q=" +
destination +
"&units=metric&appid=15c9456e587b8b790a9092494bdec5ff",
function (result, status, xhr) {
var APIresponded = result["main"]["temp"];
var APIweather = result["weather"][0]["description"];
var sunGoing = result["sys"]["sunset"];
var output = destination.capitalize();
var humidValue = result["main"]["humidity"];
var windy = result["wind"]["speed"];
if (APIweather.includes("snow")) {
$('#displaySky').addClass('far fa-snowflake');
}
if (APIweather.includes("rain")) {
$('#displaySky').addClass('fas fa-cloud-rain');
}
if (APIweather.includes("overcast")) {
$('#displaySky').addClass('fas fa-smog');
}
if (APIweather.includes("sun") || APIweather.includes("clear")) {
$('#displaySky').addClass('fas fa-sun');
}
if (APIweather.includes("scattered")) {
$('#displaySky').addClass('fas fa-cloud-sun'); // All these if clauses work and add the icons
}
$("#message").html("The temperature in " + output + " is : " + APIresponded + " degrees. The sky looks like this: ");
$(".apiHumidity").text(humidValue + " %");
$('.humidLogo').addClass('fas fa-humidity'); // not working
$('.apiWind').html(windy + 'km per hour');
console.log(APIweather);
}
).fail(function (xhr, status, error) {
alert("Result: " + status + " " + error + " " +
xhr.status + " " + xhr.statusText);
});
});
$(document).ajaxStart(function () {
$("img").show(300);
});
$(document).ajaxStop(function () {
$("img").hide(300);
});
That is it, I have created a codepen:
https://codepen.io/damPop/pen/qLgRvp?editors=1000
So, why are the icons not displayed? They do show up in the DOM when I check dev tools, but sized 0/0px. Tried to add the !important rule, did not work either. What am I missing? I have read the similar threads on SO, but none would help with this. I do not think it is a flexbox issue either.
