I'm encountering an error in Chrome's console where it returns:
Failed to load resource: the server responded with a status of 404 (Not Found)
I've read other posts related to this and how it may be the path that I specified is where the error is occurring. But since I don't have much experience with this, I can't seem to find where the error is. The script.js file may look a bit weird since it's compiled from a TypeScript file. Another error that I'm encountering is that when I load the HTML page and then refresh it, the error is a bit different. The different error is:
GET http://localhost:63342/WeatherWizard/src/html/api.openweathermap.org/data/2.5/forecast?lat=49.1438509&lon=-123.11269889999998 404 (Not Found) send @ bundle.js:9666 ajax @ bundle.js:9273 jQuery.(anonymous function) @ bundle.js:9422 getJSON @ bundle.js:9403 (anonymous) @ bundle.js:32 locationSuccess @ bundle.js:31
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>WeatherWizard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <!-- Makes me host Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/4c5e04f914.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="../js/bundle.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1 id="filler">Weather Wizard</h1>
<p>Finding your local weather!</p>
<!-- Your current location is: -->
<p id="currentCity">hello where is this</p>
</div>
<nav class="navbar">
<div class="d-flex justify-content-end"> <!-- TODO: don't know if it should be justify-content-end or justify-content-start // both give the same result -->
<div class="container-fluid">
<div class="navbear-header">
<a class="navbar-brand" href="">WeatherWizard27</a>
</div>
</div>
</div>
<form class="form-inline">
<div class="form-group">
<input class="form-control" type="text" placeholder="Location">
<div class="input-group-btn">
<button class="btn btn-outline-success my-2 my-sm 0" type="submit">
<i class="fa fa-search" aria-hidden="true"> Search</i> <!-- TODO: change to boostrap's font-->
</button>
</div>
</div>
</form>
</nav>
<div class="container">
<div class="row">
<div class="col">
<h2>Monday</h2>
</div>
<div class="col">
<h2>Tuesday</h2>
</div>
<div class="col">
<h2>Wednesday</h2>
</div>
<div class="col">
<h2>Thursday</h2>
</div>
<div class="col">
<h2>Friday</h2>
</div>
</div>
</div>
</body>
script.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const WeatherData_1 = require("./WeatherData");
const $ = require("jquery");
$(document).ready(function () {
var deg = 'c';
var weatherDiv = $('#weather');
var location = $('p.location');
getLocation();
function getLocation() {
document.getElementById("filler").innerHTML = "is this showing up?";
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
}
else {
showError("Your browser does not support Geolocation!");
}
}
function locationSuccess(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
try {
return new Promise(function (resolve, reject) {
$.getJSON("api.openweathermap.org/data/2.5/forecast?lat=" + lat + "&lon=" + lon, function (weatherResponse) {
resolve(weatherResponse);
});
}).then(function (weatherResponse) {
var weatherData = new WeatherData_1.WeatherData();
var assignedWeatherData = setWeatherDataHelper(weatherData, weatherResponse);
displayCurrentCity(assignedWeatherData);
});
}
catch (err) {
showError("We can't find information about your city!");
}
}
;
function setWeatherDataHelper(weatherData, weatherResponse) {
var date = new Date();
console.log("created a new Date object");
weatherData.date = formatTimeIntoAMPM(date);
weatherData.city = weatherResponse.city.name;
weatherData.country = weatherResponse.country;
weatherData.temperature = weatherResponse.list.main.temp;
weatherData.minTemperature = weatherResponse.list.main.temp_min;
weatherData.maxTemperature = weatherResponse.list.main.temp_max;
weatherData.weather = weatherResponse.list.weather.id;
weatherData.weatherIcon = weatherResponse.list.weather.icon;
return weatherData;
}
function locationError(error) {
switch (error.code) {
case error.TIMEOUT:
showError("A timeout occurred! Please try again!");
break;
case error.POSITION_UNAVAILABLE:
showError('We can\'t detect your location. Sorry!');
break;
case error.PERMISSION_DENIED:
showError('Please allow geolocation access for this to work.');
break;
case error.UNKNOWN_ERROR:
showError('An unknown error occured!');
break;
}
}
;
function showError(msg) {
weatherDiv.addClass('error').html(msg);
}
;
function formatTimeIntoAMPM(date) {
console.log("got into format time method");
var minutes = date.getMinutes.toString().length === 1 ? '0' + date.getMinutes() : date.getMinutes();
var hours = date.getHours().toString().length == 1 ? '0' + date.getHours() : date.getHours();
var ampm = date.getHours() >= 12 ? 'pm' : 'am';
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var combinedDate = date.getDay() + ' ' + months[date.getMonth()] + ' ' + date.getDate() + ' ' + hours + minutes + ampm;
return combinedDate;
}
;
function displayWeatherData(assignedWeatherData) {
}
;
function displayCurrentCity(assignedWeatherData) {
console.log("got into displayCurrentCity method");
var element = document.getElementById("currentCity");
element.innerHTML = assignedWeatherData.city + ", " + assignedWeatherData.country;
}
});
//# sourceMappingURL=script.js.map
