Vanilla_JavaScript_Project/index.html at master · mlassoff/Vanilla_JavaScript_Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<metaname="viewport" content="width=device-width, initial-scale=1">
<scriptsrc="key.js"></script>
<linkhref="https://fonts.googleapis.com/css?family=Gelasio:400,700&display=swap" rel="stylesheet"><style>
body{
font-family:'Gelasio', serif;
margin:10px;
 }

#form{
border:1px solid black;
padding:10px;
background-color:#fafafa;
 }
#formbutton {
width:100%;
font-size:1.25em;
height:30px;
background-color: orange;
font-family:'Gelasio', serif;

 }

#forminput{
font-size:1.25em;
width:100%;
background-color: antiquewhite;
margin-bottom:10px;
 }

#result{
margin-top:10px;

 }
</style>
</head>
<body>
<divid="form">
<labelfor="address">Address</label>
<inputtype="text" id="address"/>
<buttonid="btnGetData">Get Civic Data</button>
</div>
<divid="result"></div>

<script>
letbtnGetData=document.getElementById('btnGetData');
letresultArea=document.getElementById('result');
lettextAddress=document.getElementById('address');

btnGetData.onclick=function(){
letaddress=textAddress.value;
varurl="https://www.googleapis.com/civicinfo/v2/representatives?key="+googleKey+"&address="+address
console.log(url);

fetch(url)
.then((resp)=>resp.json())
.then(function(data){
console.log(data);
letout="";
for(varx=0;x<data.offices.length;x++){
out+="<strong>"+data.offices[x].name;
out+=":</strong> "+data.officials[data.offices[x].officialIndices[0]].name+"<br/>";
}

resultArea.innerHTML=out;

})
}
</script>
</body>
</html>