Skip to content

Commit

Permalink
basically changed to another api for better accuracy, finished today at
Browse files Browse the repository at this point in the history
  • Loading branch information
@DexterW1
DexterW1 committed Sep 22, 2023
1 parent 8d778f4 commit e546c3f
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 33 deletions.
22 changes: 21 additions & 1 deletion fetchurl.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

const api_key = "0b36dbb17bfa775ceb8149f2441436db";

const options = {method: 'GET', headers: {accept: 'application/json'}};
/**
* Fetch data from server
* @param {string} URL API url
Expand All @@ -15,6 +15,25 @@ export const fetchData = async function (URL) {
console.log(error);
}
}
export const fetchDataTomorrow = async function(lat,lon){
try {
const response = await fetch(`https://api.tomorrow.io/v4/weather/forecast?location=${lat},${lon}&timesteps=1h&units=imperial&apikey=00rFwFMB1rWrDjhX1DPgv6IMZIDBrPYN`,options);
const data = await response.json();
return data;
} catch (error) {
console.log(error);
}
}
export const fetchDataTomorrowDaily = async function(lat,lon){
try {
const response = await fetch(`https://api.tomorrow.io/v4/weather/forecast?location=${lat},${lon}&timesteps=1d&units=imperial&apikey=00rFwFMB1rWrDjhX1DPgv6IMZIDBrPYN`,options);
const data = await response.json();
return data;
} catch (error) {
console.log(error);
}
}


export const url = {
currentWeather(lat, lon) {
Expand All @@ -29,6 +48,7 @@ export const url = {
reverseGeo(lat, lon) {
return `http://api.openweathermap.org/geo/1.0/reverse?lat=${lat}&lon=${lon}&limit=5`
},

/**
* @param {string} query Search query e.g.: "London", "New York"
*/
Expand Down
32 changes: 20 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ <h2>5-Day Forecast</h2>
<div class="cast-container second-day-cast">
<div class="cast-icon-temp">
<!-- <ion-icon name="sunny"></ion-icon> -->
<img src="images/01d.png" alt="rainy">
<img src="images/02d.png" alt="rainy">
<p class="fivecast-temp">73&degf</p>
</div>
<p class="fivecast-date">22 Sep</p>
Expand All @@ -157,7 +157,7 @@ <h2>5-Day Forecast</h2>
<div class="cast-container third-day-cast">
<div class="cast-icon-temp">
<!-- <ion-icon name="thunderstorm"></ion-icon> -->
<img src="images/01d.png" alt="hello">
<img src="images/03d.png" alt="hello">
<p class="fivecast-temp">73&degf</p>
</div>
<p class="fivecast-date">23 Sep</p>
Expand All @@ -166,7 +166,7 @@ <h2>5-Day Forecast</h2>
<div class="cast-container fourth-day-cast">
<div class="cast-icon-temp">
<!-- <ion-icon name="moon"></ion-icon> -->
<img src="images/01d.png" alt="sunny">
<img src="images/04d.png" alt="sunny">
<p class="fivecast-temp">73&degf</p>
</div>
<p class="fivecast-date">24 Sep</p>
Expand All @@ -175,7 +175,7 @@ <h2>5-Day Forecast</h2>
<div class="cast-container fifth-day-cast">
<div class="cast-icon-temp">
<!-- <ion-icon name="rainy"></ion-icon> -->
<img src="images/01d.png" alt="sunny">
<img src="images/09d.png" alt="sunny">
<p class="fivecast-temp">73&degf</p>
</div>
<p class="fivecast-date">25 Sep</p>
Expand All @@ -188,42 +188,50 @@ <h2>Today At</h2>
<div class="today-at-cards-container">
<div class="card time-card">
<p class="time">6 AM</p>
<ion-icon name="cloudy"></ion-icon>
<img src="images/01d.png" alt="sunny">
<!-- <ion-icon name="cloudy"></ion-icon> -->
<p class="temp">84&degf</p>
</div>
<div class="card time-card">
<p class="time">6 AM</p>
<ion-icon name="cloudy"></ion-icon>
<img src="images/03d.png" alt="sunny">
<!-- <ion-icon name="cloudy"></ion-icon> -->
<p class="temp">84&degf</p>
</div>
<div class="card time-card">
<p class="time">6 AM</p>
<ion-icon name="cloudy"></ion-icon>
<img src="images/02d.png" alt="sunny">
<!-- <ion-icon name="cloudy"></ion-icon> -->
<p class="temp">84&degf</p>
</div>
<div class="card time-card">
<p class="time">6 AM</p>
<ion-icon name="cloudy"></ion-icon>
<img src="images/04d.png" alt="sunny">
<!-- <ion-icon name="cloudy"></ion-icon> -->
<p class="temp">84&degf</p>
</div>
<div class="card time-card">
<p class="time">6 AM</p>
<ion-icon name="cloudy"></ion-icon>
<img src="images/09d.png" alt="sunny">
<!-- <ion-icon name="cloudy"></ion-icon> -->
<p class="temp">84&degf</p>
</div>
<div class="card time-card">
<p class="time">6 AM</p>
<ion-icon name="cloudy"></ion-icon>
<img src="images/10d.png" alt="sunny">
<!-- <ion-icon name="cloudy"></ion-icon> -->
<p class="temp">84&degf</p>
</div>
<div class="card time-card">
<p class="time">6 AM</p>
<ion-icon name="cloudy"></ion-icon>
<img src="images/11d.png" alt="sunny">
<!-- <ion-icon name="cloudy"></ion-icon> -->
<p class="temp">84&degf</p>
</div>
<div class="card time-card">
<p class="time">6 AM</p>
<ion-icon name="cloudy"></ion-icon>
<img src="images/03n.png" alt="sunny">
<!-- <ion-icon name="cloudy"></ion-icon> -->
<p class="temp">84&degf</p>
</div>
</div>
Expand Down
77 changes: 58 additions & 19 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
//================= Imports =================================
import { fetchData, url } from "./fetchurl.js";
import { fetchData, fetchDataTomorrow, fetchDataTomorrowDaily, url } from "./fetchurl.js";
//============== API keys & URL FETCH =========================
const geoApiKey='34115bdcf64c4755840a021732995807'


// ============= GLOBAL VARIABLES ==================
// let lat,long;
Expand Down Expand Up @@ -48,6 +46,15 @@ function timeUnix(timestamp){
const formattedTime = `${hours}:${minutes} ${ampm}`;
return formattedTime;
}
function timeUnixHr(timestamp){
const date = new Date(timestamp * 1000);
const originalHours = date.getHours();
const hours = originalHours % 12 || 12; // Convert to 12-hour format
const minutes = date.getMinutes();
const ampm = originalHours >= 12 ? 'PM' : 'AM';
const formattedTime = `${hours} ${ampm}`;
return formattedTime;
}
function unixDayMonth(timestamp) {
const date = new Date(timestamp * 1000);
const day = date.getDate();
Expand All @@ -59,6 +66,9 @@ function unixDayMonth(timestamp) {
const month = monthNames[monthIndex];
return `${day} ${month}`;
}
function grabCurrentWeather(data){
return data.timelines.hourly[0].values.temperature;
}
// ============= Search Input Code ==================


Expand All @@ -69,14 +79,21 @@ searchText.addEventListener('keydown',async(event)=>{
console.log(geoLocation);
const lat = geoLocation[1].lat;
const lon = geoLocation[1].lon;
const tomorrowWeather = await fetchDataTomorrow(lat,lon);
const tomorrowWeatherDaily = await fetchDataTomorrowDaily(lat,lon);
const currWeather = await fetchCurrentWeather(lat,lon);
const currAirQuality = await fetchAirQuality(lat,lon);
const currForecast = await fetchForecast(lat,lon);
updateWeather(currWeather);
console.log(tomorrowWeather);
updateWeather(currWeather,tomorrowWeather);
updateAirQuality(currAirQuality);
updateSunriseSunset(currWeather);
updateHumPressVisFeel(currWeather);
updateFiveForecast(currForecast);
updateFiveForecast(currForecast,tomorrowWeatherDaily);
updateTodayAt(currForecast,tomorrowWeather);
console.log(currWeather);
console.log(currForecast);
console.log(tomorrowWeatherDaily);
}
})
function fetchCurrentWeather(lat,lon){
Expand All @@ -94,15 +111,16 @@ function metersToMiles(meters) {
}

// ================= Update Data Left-Side Now-Container =====================
const descriptionNow = document.querySelector('.left-now-container #weather-descripiton');
const tempNow = document.querySelector('.temp-and-icon #temp');
const dayNow = document.querySelector('.day-container #day');
const imgNow = document.querySelector('.temp-and-icon img');
const locationNow = document.querySelector('.location-container #location');
function updateWeather(data){
console.log(data);
tempNow.innerHTML=Math.ceil(data.main.temp) + '&degf';
function updateWeather(data,tomorrowData){
tempNow.innerHTML=Math.round(grabCurrentWeather(tomorrowData)) + '&degf';
imgNow.src='images/'+data.weather[0].icon+'.png';
imgNow.alt=data.weather[0].description;
descriptionNow.innerHTML=data.weather[0].description
dayNow.innerHTML= `<ion-icon name="calendar-clear"></ion-icon>` + grabNowDate();
locationNow.innerHTML='<ion-icon name="location"></ion-icon>'+ data.name + ', '+data.sys.country;
}
Expand Down Expand Up @@ -136,7 +154,6 @@ function updateSunriseSunset(data){
const sunsetTime = data.sys.sunset;
const resultSunrise = timeUnix(sunriseTime);
const resultSunset = timeUnix(sunsetTime);
console.log(resultSunset);
sunriseElement.innerHTML=resultSunrise;
sunsetElement.innerHTML=resultSunset;
}
Expand All @@ -149,8 +166,8 @@ const feelslikeText = document.querySelector('.feels_like .info .info1 .data');
function updateHumPressVisFeel(data){
humidityText.innerHTML= data.main.humidity+'%';
pressureText.innerHTML=data.main.pressure+' hPa';
visibilityText.innerHTML=Math.ceil(metersToMiles(data.visibility))+' mi';
feelslikeText.innerHTML=Math.ceil(data.main.feels_like) +'&degf';
visibilityText.innerHTML=Math.round(metersToMiles(data.visibility))+' mi';
feelslikeText.innerHTML=Math.round(data.main.feels_like) +'&degf';
}
//================================ 5 forecast ===========================
// Using querySelectorAll to grab all elements with the class "fivecast-temp"
Expand All @@ -160,46 +177,68 @@ const dateElements = document.querySelectorAll('.fivecast-date');
// Using querySelectorAll to grab all elements with the class "fivecast-day"
const dayElements = document.querySelectorAll('.fivecast-day');
const imgElements = document.querySelectorAll('.cast-icon-temp img');
function updateFiveForecast(data){
console.log(data);
function updateFiveForecast(data,tomorrowData){
const index = [7,15,23,31,39];
for(let i of index){
if(i==7){
imgElements[0].src='images/'+data.list[i].weather[0].icon+'.png';
imgElements[0].alt=data.list[i].weather[0].description;
temperatureElements[0].innerHTML=Math.ceil(data.list[i].main.feels_like)+'&degf';
temperatureElements[0].innerHTML=Math.round(tomorrowData.timelines.daily[1].values.temperatureMax)+'&degf';
dateElements[0].innerHTML=unixDayMonth(data.list[i].dt);
dayElements[0].innerHTML=getDayAbbreviationFromTimestamp(data.list[i].dt);
}
else if(i==15){
imgElements[1].src='images/'+data.list[i].weather[0].icon+'.png';
imgElements[1].alt=data.list[i].weather[0].description;
temperatureElements[1].innerHTML=Math.ceil(data.list[i].main.feels_like)+'&degf';
temperatureElements[1].innerHTML=Math.round(tomorrowData.timelines.daily[2].values.temperatureMax)+'&degf';
dateElements[1].innerHTML=unixDayMonth(data.list[i].dt);
dayElements[1].innerHTML=getDayAbbreviationFromTimestamp(data.list[i].dt);
}
else if(i==23){
imgElements[2].src='images/'+data.list[i].weather[0].icon+'.png';
imgElements[2].alt=data.list[i].weather[0].description;
temperatureElements[2].innerHTML=Math.ceil(data.list[i].main.feels_like)+'&degf';
temperatureElements[2].innerHTML=Math.round(tomorrowData.timelines.daily[3].values.temperatureMax)+'&degf';
dateElements[2].innerHTML=unixDayMonth(data.list[i].dt);
dayElements[2].innerHTML=getDayAbbreviationFromTimestamp(data.list[i].dt);
}
else if(i==31){
imgElements[3].src='images/'+data.list[i].weather[0].icon+'.png';
imgElements[3].alt=data.list[i].weather[0].description;
temperatureElements[3].innerHTML=Math.ceil(data.list[i].main.feels_like)+'&degf';
temperatureElements[3].innerHTML=Math.round(tomorrowData.timelines.daily[4].values.temperatureMax)+'&degf';
dateElements[3].innerHTML=unixDayMonth(data.list[i].dt);
dayElements[3].innerHTML=getDayAbbreviationFromTimestamp(data.list[i].dt);
}
else if(i==39){
imgElements[4].src='images/'+data.list[i].weather[0].icon+'.png';
imgElements[4].alt=data.list[i].weather[0].description;
temperatureElements[4].innerHTML=Math.ceil(data.list[i].main.feels_like)+'&degf';
temperatureElements[4].innerHTML=Math.round(tomorrowData.timelines.daily[5].values.temperatureMax)+'&degf';
dateElements[4].innerHTML=unixDayMonth(data.list[i].dt);
dayElements[4].innerHTML=getDayAbbreviationFromTimestamp(data.list[i].dt);
}
}
console.log(data);
}

//================================ Today At ===========================
const todayTimeElement = document.querySelectorAll('.time-card .time');
const todayTempElement = document.querySelectorAll('.time-card .temp');
const todayImgElement = document.querySelectorAll('.time-card img');
function updateTodayAt(imgData,tomorrowData){
console.log(todayTempElement);
let count =0;
for(let i =0; i<todayTimeElement.length;i++){
if(i==0){
todayTimeElement[i].innerHTML='Now';
todayImgElement[i].src='images/'+imgData.list[i].weather[0].icon+'.png';
todayImgElement[i].alt=imgData.list[i].weather[0].description;
todayTempElement[i].innerHTML=Math.round(tomorrowData.timelines.hourly[count].values.temperature)+'&degf';
count+=3;
}
else{
todayTimeElement[i].innerHTML=timeUnixHr(imgData.list[i].dt);
todayImgElement[i].src='images/'+imgData.list[i].weather[0].icon+'.png';
todayImgElement[i].alt=imgData.list[i].weather[0].description;
todayTempElement[i].innerHTML=Math.round(tomorrowData.timelines.hourly[count].values.temperature)+'&degf';
count+=3;
}
}
}
5 changes: 4 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -427,8 +427,11 @@ header img{
.time-card .time{
font-size: 1rem;
}
.time-card ion-icon{
/* .time-card ion-icon{
font-size: 3rem;
} */
.time-card img{
width: 3.5rem;
}
.time-card .temp{
font-size: 1rem;
Expand Down

0 comments on commit e546c3f

Please sign in to comment.