diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..600d2d3 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode \ No newline at end of file diff --git a/index.html b/index.html index ca2f9db..9998088 100644 --- a/index.html +++ b/index.html @@ -55,6 +55,6 @@

Wilson's Weather

- + diff --git a/scripts/getIp.js b/scripts/getIp.js deleted file mode 100644 index 388c4ad..0000000 --- a/scripts/getIp.js +++ /dev/null @@ -1,6 +0,0 @@ -export async function getIp() { - return await fetch('https://api.ipify.org?format=json') - .then(response => response.json()) - .then(data => console.log(data.ip)) - .catch(error => console.log('Unable to get IP address', error)); -} \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js index 4e282ec..04c2336 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -1,27 +1,37 @@ import { updateWeather } from './weather.js'; -import { getIp } from './getIp.js'; import { updateTime } from './timeDate.js'; -import { updateCurrent } from './updateCurrent.js'; - +// https://weather-app-server-staging-e194f8aa2d04.herokuapp.com/ // This is unsecure fix at some point!!! -const API_BASE_URL = 'https://weather-app-server-d5459d7e5648.herokuapp.com' - +const API_BASE_URL = 'https://weather-app-server-staging-e194f8aa2d04.herokuapp.com'; async function startWeather(latitude, longitude) { - const response = await fetch(`${API_BASE_URL}/?coords=${latitude},${longitude}`); - const weatherData = await response.json() - console.log(weatherData); - return weatherData; -} - -// Create get ip function -async function getIP() { - return await fetch(`${API_BASE_URL}/get-ip`); + try { + const response = await fetch(`${API_BASE_URL}/start-weather-data?coords=${latitude},${longitude}`); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const weatherData = await response.json(); + console.log(weatherData); + return weatherData; + } catch (error) { + console.error('An error occurred:', error); // This is getting called!!! + throw error; // re-throw the error if you want it to propagate + } } -async function ipWeather(ip) { - const response = await fetch(`${API_BASE_URL}/ip-weather-data?ip=${ip}`); - const weatherData = await response.json(); - return weatherData; +async function ipWeather() { + try { + const response = await fetch(`${API_BASE_URL}/ip-weather-data`, { + credentials: 'include' + }); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const weatherData = await response.json(); + return weatherData; + } catch (error) { + console.error('An error occurred:', error); // This error is getting thrown!!! + throw error; // re-throw the error if you want it to propagate + } } // Ask for location, if not get ip @@ -30,7 +40,8 @@ if (navigator.geolocation) { async function(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; - const weatherData = await startWeather(latitude, longitude); + const weatherData = await startWeather(latitude, longitude); // Fixed this error + console.log(weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); }, @@ -38,12 +49,12 @@ if (navigator.geolocation) { // This function is called when an error occurs, such as when the user denies the location permission console.log("Geolocation permission denied."); try { - const ip = await getIp(); - const weatherData = await ipWeather(ip); + const weatherData = await ipWeather(); + console.log(weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); } catch (error) { - console.error('Error:', error); + console.error('Error:', error); // This error is getting thrown } } ); @@ -51,8 +62,8 @@ if (navigator.geolocation) { console.log("Geolocation is not supported by this browser."); (async () => { try { - const ip = await getIp(); - const weatherData = await ipWeather(ip); + const weatherData = await ipWeather(); + console.log(weatherData); updateWeather(weatherData, 'Your Location'); updateTime(weatherData); } catch (error) { @@ -85,7 +96,9 @@ searchBar.addEventListener('input', async function(event) { if (userInput.length > 2) { // Trigger autocomplete after 2 char try { - const response = await fetch(`${API_BASE_URL}/search-locations?input=${encodeURIComponent(userInput)}`); + const response = await fetch(`${API_BASE_URL}/search-locations?input=${encodeURIComponent(userInput)}`, { + credentials: 'include' + }); const data = await response.json(); dropdown.innerHTML = ''; // Clear previous suggestions @@ -118,7 +131,9 @@ searchForm.addEventListener('submit', async function(event) { searchBar.value = ''; // Send a request to the server with the user input - const response = await fetch(`${API_BASE_URL}/weather-data?input=${encodeURIComponent(userSubmission)}`); + const response = await fetch(`${API_BASE_URL}/weather-data?input=${encodeURIComponent(userSubmission)}`, { + credentials: 'include' + }); const weatherData = await response.json(); // Handle the response data here diff --git a/scripts/updateHourly.js b/scripts/updateHourly.js index 605ec89..9701a60 100644 --- a/scripts/updateHourly.js +++ b/scripts/updateHourly.js @@ -58,7 +58,6 @@ export function updateHourly(weatherData, weatherCodeToImageMap) { Weather icon

${kelvinToFahrenheit(forecast.temp)}°F

`; - const currentSetRiseUnix = riseSet[riseSet.length - 1]; const currentSetRiseHour = new Date(currentSetRiseUnix * 1000) diff --git a/scripts/updateWeekly.js b/scripts/updateWeekly.js index 6784663..6d5a5d5 100644 --- a/scripts/updateWeekly.js +++ b/scripts/updateWeekly.js @@ -40,13 +40,15 @@ export function updateWeekly(weatherData, weatherCodeToImageMap) { weeklyHTML += `
-
-

${(i===0) ? 'Today' : day}

-

${dayMonth}

-
-
-

H: ${high}

-

L: ${low}

+
+
+

${(i===0) ? 'Today' : day}

+

${dayMonth}

+
+
+

H: ${high}

+

L: ${low}

+
Weather icon @@ -57,13 +59,13 @@ export function updateWeekly(weatherData, weatherCodeToImageMap) {

Night Avg: ${nightTemp}

-
+
${sunrise}
-
+
@@ -73,7 +75,6 @@ export function updateWeekly(weatherData, weatherCodeToImageMap) {
`; - } const weeklyForecastDiv = document.querySelector('.weekly-body'); weeklyForecastDiv.innerHTML = weeklyHTML; diff --git a/styles.css b/styles.css index 113b388..26766bf 100644 --- a/styles.css +++ b/styles.css @@ -10,7 +10,7 @@ body { /* Main section */ .grid-main { display: grid; - grid-template-columns: [one] 1fr [two] minmax(200px, 60vw) [three] 1fr [four]; + grid-template-columns: [one] 3vw [two] 94vw [three] 3vw [four]; grid-template-rows: [one] 100px [two] auto [three] auto [four] auto [five] 100px [six]; grid-template-areas: '. nav .' '. current .' @@ -35,7 +35,7 @@ body { color: #ffffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.488), 0px 2px 4px rgba(0, 0, 0, 0.427); white-space: nowrap; /* Prevents the text from wrapping */ - overflow: hidden; /* Hides the text that overflows the container */ + overflow: hidden; text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */ min-width: 100px; } @@ -92,6 +92,7 @@ body { } #search-form { + grid-area: nav; width: 400px; padding-left: 25px; } @@ -187,7 +188,6 @@ body { .hourly-body { display: flex; overflow-x: auto; - } .scroll-hour { @@ -256,12 +256,21 @@ body { } .day-high-low { + white-space: nowrap; display: flex; - flex-direction: column; + flex-direction: row; + justify-content: center; + align-items: center; flex-shrink: 0; width: 50px; } +.day-high-low p { + padding-top: 5px; + padding-right: 5px; + font-size: 12px; +} + .day-description { display: flex; flex-direction: column; @@ -272,10 +281,16 @@ body { margin-left: -20px; } +.day-date-col { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + .day-sun-set-rise { display: flex; flex-direction: column; - flex-shrink: 0; } .day-night { @@ -285,6 +300,13 @@ body { width: 100px; } +.sunrise, .sunset { + display: flex; + float: row; + justify-content: space-around; + align-items: center; +} + .shadow { filter: drop-shadow(2px 2px 2px gray); } @@ -310,73 +332,68 @@ body { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */ } - -/* Phones */ @media (max-width: 600px) { .grid-main { grid-template-rows: [one] auto [two] auto [three] auto [four] auto [five] 100px [six]; - grid-template-columns: [one] 1fr [two] minmax(200px, auto) [three] 1fr [four]; + + } + .navbar-content { + flex-direction: column; } - .day-description { - flex-shrink: 1; + #search-form { + grid-area: nav; + width: 300px; + padding-bottom: 20px; } - .current, .hourly, .weekly { - margin-left: 10px; - margin-right: 10px; + #dropdown { + width: 300px; } - .navbar-content { - flex-direction: column; - justify-content: center; - padding: 20px; + .weekly-body { + flex-shrink: 1; + font-size: 16px; } .day-night { display: none; } - #search-form, #dropdown { - width: 100%; - } -} -/* Tablets */ -@media (max-width: 768px) { - .grid-main { - grid-template-columns: [one] 1fr [two] minmax(6fr, 80vw) [three] 1fr [four]; + .day-date { + width: 50px; + padding-left: 10px; } - #search-form, #dropdown { - width: 300px; - } -} -/* desktops */ -@media (max-width: 992px) { - .grid-main { - grid-template-columns: [one] 1fr [two] minmax(500px, 80vw) [three] 1fr [four]; + .day-high-low { + padding-left: 20px; + font-size: 10px; } - #search-form, #dropdown { - width: 250px; + .day-description { + width: 135px; + align-content: center; + font-size: 14px; + padding-left: 10px; } - .day-night { - display: none; + .day-sun-set-rise { + font-size: 12px; + flex-direction: column; + row-gap: 10px; } -} + .sunrise { + flex-direction: column; + } -/* desktops */ -@media (min-width: 992px) { - .grid-main { - grid-template-columns: [one] 1fr [two] minmax(700px, 6fr) [three] 1fr [four]; + .sunset { + flex-direction: column; } } -/* Extra large devices */ -@media (min-width: 1201px) { +@media (min-width: 992px) { .grid-main { - grid-template-columns: [one] 1fr [two] 1000px [three] 1fr [four]; + grid-template-columns: [one] 1fr [two] 800px [three] 1fr [four]; } } \ No newline at end of file