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!') console.log('Client side javascript file is loaded!')
fetch('/weather?address=boston').then((response) => { const weatherForm = document.querySelector('form')
response.json().then((data) => { const search = document.querySelector('input')
if (data.error) {
console.log(data.error) weatherForm.addEventListener('submit', (e) => {
} else { e.preventDefault()
console.log(data.location)
console.log(data.forecast) 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> <title>Weather</title>
<link rel="icon" href="/img/weather.png"> <link rel="icon" href="/img/weather.png">
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<script src="/js/app.js"></script>
</head> </head>
<body> <body>
<div class="main-content"> <div class="main-content">
{{>header}} {{>header}}
<p>Use this site to get your weather!</p> <p>Use this site to get your weather!</p>
<form>
<input placeholder="Location">
<button>Search</button>
</form>
</div> </div>
{{>footer}} {{>footer}}
<script src="/js/app.js"></script>
</body> </body>
</html> </html>