Video 59: Wiring up the User Interface
This commit is contained in:
parent
5c550efba9
commit
6d75e93eaf
@ -40,3 +40,16 @@ header a {
|
||||
.portrait {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #CCCCCC;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: 1px solid #888888;
|
||||
background: #888888;
|
||||
color: #FFFFFF;
|
||||
padding: 8px;
|
||||
}
|
||||
|
@ -2,19 +2,24 @@ console.log('Client side javascript file is loaded!')
|
||||
|
||||
const weatherForm = document.querySelector('form')
|
||||
const search = document.querySelector('input')
|
||||
const messageOne = document.querySelector('#message-1')
|
||||
const messageTwo = document.querySelector('#message-2')
|
||||
|
||||
weatherForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
const location = search.value
|
||||
|
||||
messageOne.textContent = 'Loading...'
|
||||
messageTwo.textContent = ''
|
||||
|
||||
fetch('/weather?address=' + location).then((response) => {
|
||||
response.json().then((data) => {
|
||||
if (data.error) {
|
||||
console.log(data.error)
|
||||
messageOne.textContent = data.error
|
||||
} else {
|
||||
console.log(data.location)
|
||||
console.log(data.forecast)
|
||||
messageOne.textContent = data.location
|
||||
messageTwo.textContent = data.forecast
|
||||
}
|
||||
})
|
||||
})
|
||||
|
@ -18,6 +18,9 @@
|
||||
<input placeholder="Location">
|
||||
<button>Search</button>
|
||||
</form>
|
||||
|
||||
<p id="message-1"></p>
|
||||
<p id="message-2"></p>
|
||||
</div>
|
||||
|
||||
{{>footer}}
|
||||
|
Loading…
Reference in New Issue
Block a user