I continued to work on my weather app. I added some utility functions and refactored some of my code to make it cleaner. The second time through always comes with improvements. I also learned that Unix time is in seconds whereas JavaScript operates in milliseconds. That required me to multiply the API date/time data by 1000 to get things to line up. It was a fun little bit of knowledge to be aware of for next time.
TLDR;
Okay, so here are the highlights of what I did:
- Practice -> Refactored my code that handles the API calls. Added some more helper functions to abstract out some of the implementation and make my project more declarative in nature. Hopefully it makes it easier to revisit and improve upon.
API helper functions
export type cityData = {
city: string,
lat: number,
lon: number
}
const daysOfweek = ["Sunday", "Monday", "Tuesday","Wednesday", "Thursday","Friday","Saturday"]
export const cityGeoCodes = [
{ city: "Toronto", lat:43.7001, lon:-79.4163 },
{ city: "London", lat:51.5085, lon:-0.1257 },
{ city: "Tokyo", lat:35.6895, lon:139.6917 },
]
export const sampleApiData = {
"lat":43.7001,
"lon":-79.4163,
"timezone":"America/Toronto",
"timezone_offset":-14400,
"current":{
"dt":1650525595,
"sunrise":1650536689,
"sunset":1650586050,
"temp":5.29,
"feels_like":0.64,
"pressure":1021,
"humidity":69,
"dew_point":0.07,
"uvi":0,
"clouds":100,
"visibility":10000,
"wind_speed":7.72,
"wind_deg":60,
"wind_gust":10.8,
"weather":[
{
"id":804,
"main":"Clouds",
"description":"overcast clouds",
"icon":"04n"
}
]
},
"daily":[
{
"dt":1650560400,
"sunrise":1650536689,
"sunset":1650586050,
"moonrise":1650518460,
"moonset":1650548940,
"moon_phase":0.68,
"temp":{
"day":9.58,
"min":5.15,
"max":13.58,
"night":9.66,
"eve":12.6,
"morn":5.59
},
"feels_like":{
"day":6.23,
"night":7.51,
"eve":11.53,
"morn":3.17
},
"pressure":1016,
"humidity":93,
"dew_point":8.56,
"wind_speed":8.09,
"wind_deg":207,
"wind_gust":18.77,
"weather":[
{
"id":501,
"main":"Rain",
"description":"moderate rain",
"icon":"10d"
}
],
"clouds":100,
"pop":1,
"rain":7.73,
"uvi":2.84
},
{
"dt":1650646800,
"sunrise":1650622994,
"sunset":1650672522,
"moonrise":1650608580,
"moonset":1650639300,
"moon_phase":0.72,
"temp":{
"day":10.53,
"min":3.71,
"max":12.05,
"night":8.36,
"eve":11.09,
"morn":3.71
},
"feels_like":{
"day":8.81,
"night":7.86,
"eve":9.4,
"morn":0.5
},
"pressure":1033,
"humidity":45,
"dew_point":-1.25,
"wind_speed":4.2,
"wind_deg":337,
"wind_gust":11.32,
"weather":[
{
"id":801,
"main":"Clouds",
"description":"few clouds",
"icon":"02d"
}
],
"clouds":11,
"pop":0,
"uvi":6.78
},
{
"dt":1650733200,
"sunrise":1650709300,
"sunset":1650758994,
"moonrise":1650698040,
"moonset":1650730140,
"moon_phase":0.75,
"temp":{
"day":5.53,
"min":5.43,
"max":9.35,
"night":5.43,
"eve":7.39,
"morn":5.95
},
"feels_like":{
"day":2.01,
"night":2.28,
"eve":4.02,
"morn":2.87
},
"pressure":1025,
"humidity":76,
"dew_point":1.69,
"wind_speed":5.97,
"wind_deg":89,
"wind_gust":12.03,
"weather":[
{
"id":804,
"main":"Clouds",
"description":"overcast clouds",
"icon":"04d"
}
],
"clouds":100,
"pop":0,
"uvi":2.55
},
{
"dt":1650819600,
"sunrise":1650795608,
"sunset":1650845467,
"moonrise":1650786780,
"moonset":1650821040,
"moon_phase":0.79,
"temp":{
"day":17.2,
"min":5.29,
"max":18.98,
"night":14.61,
"eve":16.51,
"morn":6.48
},
"feels_like":{
"day":16.65,
"night":14.24,
"eve":16.12,
"morn":5.21
},
"pressure":1016,
"humidity":64,
"dew_point":10,
"wind_speed":3.54,
"wind_deg":177,
"wind_gust":9.96,
"weather":[
{
"id":804,
"main":"Clouds",
"description":"overcast clouds",
"icon":"04d"
}
],
"clouds":98,
"pop":0,
"uvi":6.69
},
{
"dt":1650906000,
"sunrise":1650881916,
"sunset":1650931939,
"moonrise":1650875040,
"moonset":1650911880,
"moon_phase":0.83,
"temp":{
"day":17.36,
"min":12.2,
"max":17.36,
"night":12.2,
"eve":14.37,
"morn":13.79
},
"feels_like":{
"day":16.25,
"night":11.09,
"eve":13.3,
"morn":12.95
},
"pressure":1016,
"humidity":42,
"dew_point":3.96,
"wind_speed":6.13,
"wind_deg":256,
"wind_gust":13.03,
"weather":[
{
"id":804,
"main":"Clouds",
"description":"overcast clouds",
"icon":"04d"
}
],
"clouds":85,
"pop":0.15,
"uvi":0.13
},
{
"dt":1650992400,
"sunrise":1650968225,
"sunset":1651018411,
"moonrise":1650962940,
"moonset":1651002600,
"moon_phase":0.86,
"temp":{
"day":9.78,
"min":2.04,
"max":11.14,
"night":2.04,
"eve":5.31,
"morn":6.66
},
"feels_like":{
"day":6.9,
"night":-2.75,
"eve":1.36,
"morn":3.49
},
"pressure":1022,
"humidity":42,
"dew_point":-2.54,
"wind_speed":6.84,
"wind_deg":289,
"wind_gust":10.75,
"weather":[
{
"id":804,
"main":"Clouds",
"description":"overcast clouds",
"icon":"04d"
}
],
"clouds":91,
"pop":0,
"uvi":1
},
{
"dt":1651078800,
"sunrise":1651054536,
"sunset":1651104883,
"moonrise":1651050660,
"moonset":1651093140,
"moon_phase":0.9,
"temp":{
"day":3.41,
"min":-0.19,
"max":3.41,
"night":1.72,
"eve":2.95,
"morn":-0.19
},
"feels_like":{
"day":-1.64,
"night":-2.33,
"eve":-1.05,
"morn":-5.75
},
"pressure":1024,
"humidity":39,
"dew_point":-9.24,
"wind_speed":7.28,
"wind_deg":329,
"wind_gust":10.64,
"weather":[
{
"id":804,
"main":"Clouds",
"description":"overcast clouds",
"icon":"04d"
}
],
"clouds":99,
"pop":0,
"uvi":1
},
{
"dt":1651165200,
"sunrise":1651140847,
"sunset":1651191354,
"moonrise":1651138320,
"moonset":1651183620,
"moon_phase":0.93,
"temp":{
"day":7.76,
"min":0.12,
"max":8.22,
"night":3.98,
"eve":6.29,
"morn":0.28
},
"feels_like":{
"day":4.49,
"night":-0.06,
"eve":3.05,
"morn":-4.94
},
"pressure":1020,
"humidity":37,
"dew_point":-6.03,
"wind_speed":5.74,
"wind_deg":334,
"wind_gust":12.5,
"weather":[
{
"id":800,
"main":"Clear",
"description":"clear sky",
"icon":"01d"
}
],
"clouds":1,
"pop":0,
"uvi":1
}
]
}
export const getCityName = (lat: number, lon: number, list: cityData[]) => {
for(let i=0; i < list.length; ++i){
const {city, lat: l_lat, lon: l_lon} = list[i]
if(l_lat === lat && l_lon === lon)
return city
}
return "No Match for a City"
}
export const getRelevantData = (rawData: typeof sampleApiData) => {
const {lat, lon, daily} = rawData
return {
city: getCityName(lat, lon, cityGeoCodes),
days: daily.map(day => ({
date: new Date(day.dt * 1000),
temp: day.temp.day,
weather: day.weather[0].main
}))
}
}
export const getDateNoTime = (date: Date) => date.setHours(0,0,0,0)
export const getDayOfWeek = (dayNum: number) => daysOfweek[dayNum]
Goal For Round 7 of the #100DaysofCode Challenge
This is my seventh round of the “#100daysofcode” challenge. I will be continuing my work from round five and round six into round seven. I am currently working through the book “Cracking the Coding Interview” by Gayle Laakmann McDowell. My goal is to become more familiar with algorithms and data structures. This goal was derived from my goal to better understand operating systems and key programs that I use in the terminal regularly e.g. Git. This goal was in turn derived from my desire to better understand the fundamental tools used for coding outside of popular GUIs. This in turn was derived from my desire to be a better back-end developer.
I have no idea if my path is correct but I am walking down this road anyways. Worst case scenario I learn a whole bunch of stuff that will help me out on my own personal projects.