-
Notifications
You must be signed in to change notification settings - Fork 0
/
05. Exercise.html
37 lines (34 loc) · 1.19 KB
/
05. Exercise.html
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Twitter | rappi </title>
<style>
* { box-sizing: border-box; }
body { margin: 0; background: #eee; color: #666; font: 14px/1.4 sans-serif; }
.wrap { width: 800px; margin: 30px auto; background: #f7f7f7; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
h1 { text-align: center; }
.search { font: inherit; background: transparent; font-size: 18px; padding: 5px 10px; border-radius: 5px; width: 100%; border: 1px solid #ddd; outline: none; margin-bottom: 20px; }
.search:focus { border: 1px solid #ccf; }
.tweet { border: 1px solid #ddd; padding: 5px; margin-bottom: 20px; border-radius: 5px; }
</style>
</head>
<body>
<div class="wrap">
<h1>Twitter</h1>
<input type="text" class="search" placeholder="Your Search Query">
<div class="results"></div>
</div>
<script>
async function onSearch(e) {
searchFor(e.target.value);
}
async function searchFor(query){
const q = encodeURIComponent(query);
const url = `https://rappi.herokuapp.com/twitter/search.json?q=${q}`;
}
document.querySelector('.search').addEventListener('change', onSearch);
searchFor('ducks');
</script>
</body>
</html>