jason/CompleteNodeJS
jason/CompleteNodeJS
1
0
Fork 0
Code

Video 58: Creating a Search Form

Browse Source
This commit is contained in:
Jason Williams 2019-10-10 12:30:22 -06:00
parent 9dcb792e18
commit 5c550efba9
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web-server/public/js/app.js
View File

@ -1,12 +1,21 @@
console.log('Client side javascript file is loaded!')
fetch('/weather?address=boston').then((response) => {
response.json().then((data) => {
if (data.error) {
console.log(data.error)
} else {
console.log(data.location)
console.log(data.forecast)
}
const weatherForm = document.querySelector('form')
const search = document.querySelector('input')
weatherForm.addEventListener('submit', (e) => {
e.preventDefault()
const location = search.value
fetch('/weather?address=' + location).then((response) => {
response.json().then((data) => {
if (data.error) {
console.log(data.error)
} else {
console.log(data.location)
console.log(data.forecast)
}
})
})
})

9
web-server/templates/views/index.hbs
View File

@ -6,16 +6,23 @@
<title>Weather</title>
<link rel="icon" href="/img/weather.png">
<link rel="stylesheet" href="/css/styles.css">
<script src="/js/app.js"></script>
</head>
<body>
<div class="main-content">
{{>header}}
<p>Use this site to get your weather!</p>
<form>
<input placeholder="Location">
<button>Search</button>
</form>
</div>
{{>footer}}
<script src="/js/app.js"></script>
</body>
</html>