Weather App - Using Symbols instead of text - html

Question

Ok, so I'm currently trying to create a simple weather app as part of learning how to use RSS feeds. I have the weather being displayed as text E.g. Friday: Sunny, Max Temp, Min Temp.
I want to change that text into symbols, so that instead of saying "Sunny" it displayed the image of a sun. I'll show the HTML and Javascript below. Hopefully it makes sense and I can get this problem sorted out.
HTML
<div id="home" data-role="page">
<div data-role="header" data-add-back-btn="true" >
<h1>Your Handy Little Weather App</h1>
</div>
<div data-role="content">
<img src ="./images/UWSLogo.png" width ="174" height ="116" alt ="Logo" align ="right"/>
<h2>UWS Weather</h2>
<p>Check the weather at the UWS Campuses.</p>
<p>Choose your desired location.</p>
<ul data-role="listview" data-inset="true">
<li><a id="ayrFeed" href="#ayr">Ayr</a></li>
<li><a id="dumfriesFeed" href="#dumfries">Dumfries</a></li>
<li><a id="hamiltonFeed" href="#hamilton">Hamilton</a></li>
<li><a id="paisleyFeed" href="#paisley">Paisley</a></li>
</ul>
<h2>Other Weather</h2>
<p>Find out more with our other weather options.</p>
<ul data-role="listview" data-inset="true">
<li><a id="uniFeed" href="#uni">Other Universities</a></li>
<li><a id="holidayFeed" href="#holiday">Popular Holiday Destinations</a> </li>
</ul>
</div>
</div>
</div>
<div id="ayr" data-role="page">
<div data-role="header">
<h1 id="ayrTitle"></h1>
</div>
<div data-role="content">
<ul id="ayrList" data-role="listview" data-inset="true">
<!-- Weather reports go here. -->
</ul>
</div>
</div>
<div id="dumfries" data-role="page">
<div data-role="header">
<h1 id="dumfriesTitle"></h1>
</div>
<div data-role="content">
<ul id="dumfriesList" data-role="listview" data-inset="true">
<!-- Weather reports go here. -->
</ul>
</div>
</div>
</div>
<div id="hamilton" data-role="page">
<div data-role="header">
<h1 id="hamiltonTitle"></h1>
</div>
<div data-role="content">
<ul id="hamiltonList" data-role="listview" data-inset="true">
<!-- Weather reports go here. -->
</ul>
</div>
</div>
Javscript
$(document).ready(function() {
$("#ayrFeed").bind('click', function() {
getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2656708/3dayforecast.rss",
showAyrWeatherFeed);
});
$("#dumfriesFeed").bind('click', function() {
getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2650798/3dayforecast.rss",
showDumfriesWeatherFeed);
});
$("#hamiltonFeed").bind('click', function() {
getFeed("http://open.live.bbc.co.uk/weather/feeds/en/2647570/3dayforecast.rss",
showHamiltonWeatherFeed);
});
function getFeed(url, success){
if(window.navigator.onLine) {
$.jGFeed(url, function(feeds) {
// Check for errors
if(!feeds){
// there was an error
return false;
} else {
localStorage.setItem(url, JSON.stringify(feeds));
success(feeds.title, feeds.entries);
}
});
} else {
// Get the fall-back...
var feed = JSON.parse(localStorage.getItem(url));
if(feed && feed.length > 0) {
success(feed.title, feed.entries);
}
}
}
function showPaisleyWeatherFeed(title, items) {
$("#paisleyTitle").text(title);
var list = $("#paisleyList");
list.empty();
for(var index = 0; index < items.length; index += 1) {
list.append(formatItem(items[index]));
}
$.mobile.changePage($("#paisley"), "flip");
list.listview("refresh");
}
function showHamiltonWeatherFeed(title, items) {
$("#hamiltonTitle").text(title);
var list = $("#hamiltonList");
list.empty();
for(var index = 0; index < items.length; index += 1) {
list.append(formatItem(items[index]));
}
$.mobile.changePage($("#hamilton"), "flip");
list.listview("refresh");
}
function formatItem(item) {
var listItem = document.createElement("li"),
anchor = document.createElement("a");
anchor.setAttribute("href", item.link);
anchor.innerText = item.title;
listItem.innerHTML = anchor.outerHTML;
return listItem.outerHTML;
}

Answer 1

<img src="url" alt="some_text">
Just add this to your code and include the url of the image you would like in the tag.

Answer 2

Here's a FIDDLE with little example if it helps you.
<div>New York Sunny 85F</div>
div {
background: #ddd;
width: 200px;
height: 80px;
line-height: 80px;
font-size: 23px;
text-align: center;
border-radius: 4px;
}
.weather-icon {
width: 38px;
height: 38px;
vertical-align: text-bottom;
}
$(function() {
$('div').html(function() {
return $(this).html().replace('Sunny','<img src="https://cdn1.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Sunny.png" class="weather-icon">');
});
});