Hi there,
I have built my Weather Challenge project, however I can’t fix the following bug: once the weather data is shown, after clicking on the degree indicator (either the ‘C’ or ‘F’) and convert from Celsius to Farenheit and viceversa, the entire page is rendered again. I’m pretty sure my code is badly structured, any help will be greatly appreciated!
I have copied my code below.
Thanks.
PS. This is my first post, apologies if anything is wrong…
<!DOCTYPE html>
<html>
<head>
<title>Local Weather challenge for freeCodeCamp, by kikedev</title>
<meta charset="utf-8">
<!-- Latest compiled and minified BootstrapCSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
html {
height: 100%;
width: 100%;
margin: 0;
}
#weather-temp-frame{
padding-right: 0;
}
#degree-id {
}
#degree-id-frame {
color: LightBlue;
padding-left: 5px;
}
#weather-icon {
height: 70px;
}
body {
background-image: url(https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c968806d13321ea254a3bd79a248c2ef);
position: relative;
width: 100%;
min-height: auto;
height: 100%;
padding-top: 5%;
text-align: center;
color: DarkBlue;
font-family: Impact, sans-serif !important;
background-position: center;
background-size: cover;
}
.credits {
position: absolute;
padding-bottom: 5px;
right: 0;
bottom: 0;
margin: 0;
width: 100%;
font-family: Arial;
font-size: 90%;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="data">
<h3 id="city-name">Getting weather data for your location...</h3>
<div class="row">
<div id="weather-temp-frame" class="col-md-6 col-xs-6 text-right">
<h3 id="weather-temp"></h3>
</div>
<div id="degree-id-frame" class="col-md-6 col-xs-6 text-left">
<h3><a href='' id="degree-id"></a></h3>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<img id="weather-icon" class="pull-right" src=''>
</div>
<div class="col-md-6 col-xs-6 text-left">
<h3 id="weather-desc"></h3>
</div>
</div>
</div>
<div class="credits">
FreeCodeCamp Weather App, by Kikedev
</div>
<script type="text/javascript">
$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
var q_string = 'lat=' + pos.coords.latitude + '\&lon=' + pos.coords.longitude;
$.get('https://fcc-weather-api.glitch.me/api/current?' + q_string, function(data) {
$('#city-name').text(data.name + ' (' + data.sys.country + ')');
$('#weather-temp').text(Math.round(data.main.temp));
$('#degree-id').text('ªC');
$('#weather-icon').attr('src', data.weather[0].icon);
$('#weather-desc').text(titleCase(data.weather[0].description));
}, 'json');
}); // getCurrentPosition function
} else {
console.log('Geolocation is not supported by this browser.');
} // navigator.geolocation
}); // document ready
function titleCase(s) {
return s.toLowerCase().replace(/^(.)|\s(.)/g, ($1) => $1.toUpperCase());
}
$('#degree-id').click(function() {
var t = $('#weather-temp').text();
if ($(this).text() == 'ªC') {
$(this).text('ªF');
$('#weather-temp').text(Math.round(parseInt(t) * 9 / 5 + 32));
} else {
$(this).text('ªC');
$('#weather-temp').text(Math.round((parseInt(t) - 32) * 5 / 9));
}
}); // click function
</script>
</body>
</html>