-
Notifications
You must be signed in to change notification settings - Fork 100
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
LP Wilson Pull Request #89
base: main
Are you sure you want to change the base?
Changes from all commits
699f023
a4ce73e
3305a2f
8d6cf80
d926711
fe687b1
f290d63
fad83af
d86fb64
f14298e
a738085
2e179be
9680f9d
9ea7643
e18e933
263aca1
6527700
f98f8c6
dd1b5b9
f893db6
dc93e48
10ff7f0
bfaddcd
d36da95
d2e3a41
44aadf2
f8f5262
453fda0
e3928a6
012f1cd
c22657e
54ab58a
91af768
2fb179b
5c7ba07
39e6300
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
.vscode | ||
.DS_Store | ||
node_modules | ||
.cache | ||
.cache | ||
.env |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
https://api.openweathermap.org/data/2.5/weather this is where to call the api | ||
|
||
here is the documentation website for open weather: https://openweathermap.org/current |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,7 @@ | ||
{ | ||
"dependencies": { | ||
"axios": "^0.27.2" | ||
"axios": "^1.2.1", | ||
"dotenv": "^16.0.3", | ||
"node": "^19.2.0" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
//GET THE AXIOS CALL WORKING | ||
//LOOK AT THE 7-WONDERS CODE TO TRY TO GET THE PROMISE AND THE ASYNC AND AWAIT FUNCTION WORKING. | ||
|
||
//CODE FOR BUTTON: | ||
|
||
const state = { | ||
tempCount: 60, //was temp | ||
}; | ||
var tempCountContainer = document.querySelector('#tempCount'); | ||
var gardenContainer = document.querySelector('#garden'); | ||
|
||
//changing the background color temp function | ||
const setTempColor = () => { | ||
if (state.tempCount <= 49) { | ||
tempCountContainer.style.backgroundColor = 'teal'; | ||
gardenContainer.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; | ||
} else if (state.tempCount >= 50 && state.tempCount <= 59) { | ||
tempCountContainer.style.backgroundColor = 'green'; | ||
gardenContainer.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; | ||
} else if (state.tempCount >= 60 && state.tempCount <= 69) { | ||
tempCountContainer.style.backgroundColor = 'yellow'; | ||
gardenContainer.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃'; | ||
} else if (state.tempCount >= 70 && state.tempCount <= 79) { | ||
tempCountContainer.style.backgroundColor = 'orange'; | ||
gardenContainer.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; | ||
} else if (state.tempCount >= 80) { | ||
tempCountContainer.style.backgroundColor = 'red'; | ||
gardenContainer.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂'; | ||
} | ||
}; | ||
|
||
const renderTemp = () => { | ||
tempCountContainer.textContent = state.tempCount + ' °F'; | ||
setTempColor(); | ||
}; | ||
|
||
renderTemp(); | ||
|
||
const addTemp = (event) => { | ||
state.tempCount += 1; | ||
renderTemp(); | ||
}; | ||
|
||
const subtractTemp = (event) => { | ||
state.tempCount -= 1; | ||
renderTemp(); | ||
}; | ||
|
||
const registerEventHandlers = (event) => { | ||
// console.log('in registerEventHandelers:', event); | ||
const upButton = document.querySelector('#upButton'); | ||
const downButton = document.querySelector('#downButton'); | ||
console.log(upButton); | ||
upButton.addEventListener('click', addTemp); | ||
downButton.addEventListener('click', subtractTemp); | ||
console.log(downButton); | ||
}; | ||
|
||
registerEventHandlers(undefined); | ||
|
||
//AXIOS CODE | ||
|
||
//call to the flask app to get weather | ||
const lat = 47.6038321; | ||
const lon = -122.330062; | ||
Comment on lines
+64
to
+65
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. One of the requirements for Wave 4 was to make two Axios calls and chain them. Rather than hard-coding the lat and lon for Seattle, we wanted you to be able to get this information from the proxy server and then send the information back to the proxy server to get the temperature. This makes the project a yellow. |
||
axios | ||
.get('http://127.0.0.1:5000/weather' + '?lat=' + lat + '&lon=' + lon) | ||
.then((response) => { | ||
var temp = response.data.main.temp; | ||
temp = Math.round(((temp - 273.15) * 9) / 5 + 32); //convert to Farenheit | ||
console.log(temp); | ||
|
||
//need to update the state. | ||
state.tempCount = temp; | ||
renderTemp(); | ||
}) | ||
.catch((error) => { | ||
console.log(`there has been an error in the axios call. Cause: ${error}`); | ||
}); | ||
|
||
//what we tried to get async functions working. | ||
|
||
// async function get_temp(query) { | ||
// let response = await axios.get; | ||
// } | ||
|
||
// adding temperature number | ||
// async function f() { | ||
// let promise = new | ||
|
||
// async function addTemp(event) { | ||
// state.tempCount += 1; | ||
// } | ||
|
||
// const getPromise = (time) => { | ||
// const timeoutTime = time * 1000; | ||
// const myPromise = new Promise((resolve, reject) => { | ||
// setTimeout(() => resolve("It's go time!"), timeoutTime); | ||
// }); | ||
// return myPromise; | ||
// }; | ||
|
||
// state.tempCount += 1; | ||
// const bookCountContainer = document.querySelector("#bookCount"); | ||
// bookCountContainer.textContent = `Book Count: ${state.bookCount}`; | ||
// }; | ||
|
||
//registering event handler | ||
|
||
//if loading, |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
.grid-container { | ||
display: grid; | ||
grid-template-columns: auto auto auto; | ||
background-color: #2196F3; | ||
padding: 10px; | ||
} | ||
.grid-item { | ||
background-color: rgba(255, 255, 255, 0.8); | ||
border: 1px solid rgba(0, 0, 0, 0.8); | ||
padding: 20px; | ||
font-size: 30px; | ||
text-align: center; | ||
} | ||
|
||
button { | ||
font-size: x-large; | ||
} | ||
|
||
#tempCount { | ||
background-color: pink; | ||
} | ||
|
||
#pink-section { | ||
background-color: lightpink; | ||
} | ||
|
||
#garden { | ||
background-color: white; | ||
border: 1px solid black; | ||
} | ||
|
||
h2 { | ||
font-size : 20px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rather than sending
undefined
into the function, you could leave it blank and also have the registerEventHandlers function not take in any parameters.