Updated

droleander · May 27, 2019 · 7e923f0 · 7e923f0
1 parent 2b0d961
commit 7e923f0
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 93 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,7 +1,7 @@
 * {
 	box-sizing: border-box;
-	margin: 0 !important;
-	padding: 0 !important;
+	margin: 0;
+	padding: 0;
 }
 
 html, body {
@@ -20,17 +20,18 @@ body {
 .container {
 	border: 5px solid #009f9f;
 	border-radius: 20px;
-	margin: 1rem auto !important;
-	padding: 5px;
-	width: 95%;
+	line-height: 1.5;
+	margin: 1rem auto;
+	min-width: 300px;
+	width: 80%;
 	text-align: center;
 }
 
 .flexi {
 	display: flex;
 	flex-direction: row;
-	justify-content: space-around;
-	margin: 0.25rem auto !important;
+	justify-content: space-evenly;
+	margin: 0.25rem auto;
 }
 
 h1 {
@@ -44,26 +45,39 @@ section {
 	flex: 1 0 auto;
 }
 
+section .container {
+	padding: .25rem;
+}
+
+
 #dspLoc {
 	font-size: 1.75rem;
+	font-weight: bold;
+	text-align: center;
 }
 
 .dspIcon {
 	width: 3.5rem;
 }
 
 #dspWeather {
-	font-size: 1.75rem;
+	font-size: 1.25rem;
+	font-weight: bold;
 }
 
 #dspTemp {
-	font-size: 1.75rem;
+	display: inline-block;
+	font-size: 2.5rem;
+	width: 7rem;
 }
 
 #dspButton {
+	position: relative;
+	display: inline;
 	font-size: 1.25rem;
-	font-weight: bold;
-	padding: 0 .5rem !important;
+	width: 2.25rem;
+	height: 2.25rem;
+	top: -7px;
 }
 
 #dspSunrise,
@@ -85,10 +99,4 @@ footer .row {
 footer a,
 footer a:hover {
 	color: #fff;
-}
-
-@media screen and (max-width: 320px) {
-	h1 {
-		font-size: 2.25rem;
-	}
 }
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="#0033ff">
 
-	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
+	<!--link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"-->
 	<link href="https://fonts.googleapis.com/css?family=Righteous|Lato:300" rel="stylesheet">
 	<link href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' rel="stylesheet" integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
 	<link href="css/style.css" rel="stylesheet">
@@ -21,46 +21,34 @@
 
 	<header>
 		<div class="container">
-			<div class="row">
-				<div class="col">
-					<h1><img class="dspIcon" src="#">Weather<img class="dspIcon" src="#"></h1>
-				</div>
-			</div>
+			<h1>Weather</h1>
 		</div>
 	</header>
 
 	<section>
 		<div class="container">
-			<div class="row">
-				<div class="col">
-					<p><span id="dspLoc">Location...</span></p>
-					<p><span id="dspWeather">Weather condition...</span></p>
-					<p><img class="dspIcon" src="#" alt="weather icon"></p>
-					<p id="dspTemp"><span id="dspTempValue">0</span>&deg;<span id="dspTempUnit">C</span></p>
-					<button id="dspButton" class="btn btn-light" onclick="convertTemp()" value="degC">&deg;F</button>
-					<div class="flexi">
-						<span id="dspSunrise"><i class="fas">&#xf185;</i> <span id="dspSunriseTime">00:00:00 AM</span></span>
-						<span id="dspSunset"><i class="far">&#xf185;</i> <span id="dspSunsetTime">00:00:00 PM</span></span>
-					</div>
-					<p id="dspWind"><i class="fas">&#xf72e;</i> <span id="dspWindValue">0</span> m/s</p>
-				</div>
+			<p id="dspLoc">Location...</p>
+			<img class="dspIcon" src="#" alt="weather icon">
+			<p id="dspWeather">Weather condition...</p>
+			<p id="dspTemp"><span id="dspTempValue">0</span>&deg;<span id="dspTempUnit">C</span></p>
+			<button id="dspButton" onclick="convertTemp()" value="degC">&deg;F</button>
+			<div class="flexi">
+				<p id="dspSunrise"><i class="fas">&#xf185;</i> <span id="dspSunriseTime">00:00:00 AM</span></p>
+				<p id="dspSunset"><i class="far">&#xf185;</i> <span id="dspSunsetTime">00:00:00 PM</span></p>
 			</div>
+			<p id="dspWind"><i class="fas">&#xf72e;</i> <span id="dspWindValue">0</span> m/s</p>
 		</div>
 	</section>
 
 	<footer>
 		<div class="container">
-			<div class="row">
-				<div class="col">
-					<p>Created by lleander</p>
-					<p>Powered by <a href="http://OpenWeatherMap.org" target="_blank">OpenWeatherMap.org</a></p>
-				</div>
-			</div>
+			<p>Created by lleander</p>
+			<p>Powered by <a href="http://OpenWeatherMap.org" target="_blank">OpenWeatherMap.org</a></p>
 		</div>
 	</footer>
 
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
+	<!--script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script-->
 	<!--script src="https://www.l2.io/ip.js?var=myip"></script-->
 	<script src="js/localweather.js"></script>
 

diff --git a/js/localweather.js b/js/localweather.js
@@ -38,16 +38,26 @@ async function getWeatherInfo(lat, lon) {
 			dataType: 'json'
 		});
 
-		let loc = data.name;
-		let icon = "https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
-		let temp = data.main.temp;
+		let loc = `${data.name}, ${data.sys.country}`;
+		let icon = `https://openweathermap.org/img/w/${data.weather[0].icon}.png`;
+		let temp = data.main.temp.toFixed(0);
+
 		let weather = data.weather[0].description;
 		weather = weather.substr(0, 1).toUpperCase() + weather.substr(1);
-		let sunrise = new Date(data.sys.sunrise * 1000).toLocaleTimeString();
-		let sunset = new Date(data.sys.sunset * 1000).toLocaleTimeString();
+
+		let sunrise = new Date(data.sys.sunrise * 1000);
+		let sunrise_hr = sunrise.getHours();
+		let sunrise_mn = sunrise.getMinutes();
+		let sunrise_time = `${sunrise_hr}:${sunrise_mn} AM`;
+
+		let sunset = new Date(data.sys.sunset * 1000);
+		let sunset_hr = sunset.getHours() > 12 ? sunset.getHours() - 12: sunset.getHours();
+		let sunset_mn = sunset.getMinutes();
+		let sunset_time = `${sunset_hr}:${sunset_mn} PM`;
+
 		let wind = data.wind.speed;
 
-		displayWeather(loc, icon, weather, temp, sunrise, sunset, wind);
+		displayWeather(loc, icon, weather, temp, sunrise_time, sunset_time, wind);
 
 	} catch (ex) {
 		alert(`An error has occurred.\nPlease try again later.`);
@@ -73,14 +83,14 @@ function convertTemp() {
 	// C = (5 / 9) * (F - 32); F = ((9 / 5) * C) + 32; //
 
 	if (bttnValue === "degC") {
-		currTemp = parseFloat((((9 / 5) * currTemp) + 32).toFixed(2));
+		currTemp = parseFloat((((9 / 5) * currTemp) + 32).toFixed(0));
 
 		// display info //
 		$("#dspTempUnit").html("F");
 		$("#dspButton").attr("value", "degF").html("&deg;C");
 
 	} else {
-		currTemp = parseFloat(((5 / 9) * (currTemp - 32)).toFixed(2));
+		currTemp = parseFloat(((5 / 9) * (currTemp - 32)).toFixed(0));
 
 		// display info //
 		$("#dspTempUnit").html("C");
@@ -90,50 +100,50 @@ function convertTemp() {
 	$("#dspTempValue").html(currTemp);
 }
 
-/* Sample JSON Response
+	/* Sample JSON Response from https://api.openweathermap.org/data/2.5/weather?lat=14.6760413&lon=121.0437003&units=metric&appid=9e63e3db08ca3fc65ea3925879bdc7b7
 
-{
-	"coord": {
-		"lon": 121,
-		"lat": 14.51
-	},
-	"weather": [
 	{
-		"id": 500,
-		"main": "Rain",
-		"description": "light rain",
-		"icon": "10n"
-	}
-	],
-	"base": "stations",
-	"main": {
-		"temp": 26.98,
-		"pressure": 1011,
-		"humidity": 88,
-		"temp_min": 25.56,
-		"temp_max": 29.44
-	},
-	"visibility": 8000,
-	"wind": {
-		"speed": 1,
-		"deg": 60
-	},
-	"clouds": {
-		"all": 90
-	},
-	"dt": 1558880302,
-	"sys": {
-		"type": 1,
-		"id": 8160,
-		"message": 0.0062,
-		"country": "PH",
-		"sunrise": 1558819596,
-		"sunset": 1558865979
-	},
-	"timezone": 28800,
-	"id": 7091218,
-	"name": "Moonwalk II",
-	"cod": 200
+		"coord": {
+			"lon": 121.04,
+			"lat": 14.68
+		},
+		"weather": [
+			{
+				"id": 802,
+				"main": "Clouds",
+				"description": "scattered clouds",
+				"icon": "03d"
+			}
+		],
+		"base": "stations",
+		"main": {
+			"temp": 31.95,
+			"pressure": 1011,
+			"humidity": 62,
+			"temp_min": 31.67,
+			"temp_max": 32.22
+		},
+		"visibility": 10000,
+		"wind": {
+			"speed": 3.1,
+			"deg": 120
+		},
+		"clouds": {
+			"all": 40
+		},
+		"dt": 1558924666,
+		"sys": {
+			"type": 1,
+			"id": 8160,
+			"message": 0.0053,
+			"country": "PH",
+			"sunrise": 1558905964,
+			"sunset": 1558952406
+		},
+		"timezone": 28800,
+		"id": 1966336,
+		"name": "Bagong Pagasa",
+		"cod": 200
 	}
 
 */