Issue with the weather challenge project

Issue with the weather challenge project
0.0 0

#1

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>

#2

Did you try putting the temp unit changing function inside the document.ready function?


#3

Thanks Johnny for the prompt feedback. Yes, I actually did that originally but it didn’t work either.

I’m trying to learn the Google dev tools but I can’t really trace the execution workflow…


#4

Hard to say without seeing the code?


#5
<!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

			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
		}); // document ready
	</script>

</body>
</html>

#6

Sorry, I mean actually running on a codepen or similar so I can debug it.


#7

Sorry, here you have it in Codepen: https://codepen.io/kike1209/pen/ddaNXV

I would assume you will have access, otherwise let me know.

Many thanks.


#8

None of the weather apps that asl me to share my location are working. Perhaps because I said no earlier today. So sorry, can’t really see the code working as it should at the moment.


#9

Many thanks anyway to take your time to look at it, really appreciated.

All the best
Kike