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

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

@ -1,6 +1,14 @@
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')
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) => { response.json().then((data) => {
if (data.error) { if (data.error) {
console.log(data.error) console.log(data.error)
@ -10,3 +18,4 @@ fetch('/weather?address=boston').then((response) => {
} }
}) })
}) })
})

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>