-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
53 lines (53 loc) · 2.01 KB
/
index.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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Youtube</title>
<link rel="stylesheet" href="./styles/index.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
/>
<script src="./scripts/index.js"></script>
</head>
<body onload="getData()">
<!-- Create a Navbar that looks exactly like Youtube.
In the search box of the navbar, the user should be able to search for videos.
Show the search results in a grid format, exactly as Youtube.com shows.
Show 20 results for each video.
Please note, search results should be thumbnails not the videos itself.
When a user clicks on any thumbnail, take them to a new page where they can actually see the video. Use iframe embed code to show video. Use ES6 throughout. -->
<div class="navbar">
<div>
<span
class="material-symbols-outlined"
style="color: white; margin-top: 35px"
>
menu
</span>
<img
src="https://www.logo.wine/a/logo/YouTube/YouTube-White-Full-Color-Dark-Background-Logo.wine.svg"
alt=""
/>
</div>
<div>
<input type="text" id="query" placeholder="Search" />
<button id="search" onclick="getData()">
<span class="material-symbols-outlined"> search </span>
</button>
<button id="voice">
<span class="material-symbols-outlined"> mic </span>
</button>
</div>
<div>
<span class="material-symbols-outlined"> video_call </span>
<span class="material-symbols-outlined"> apps </span>
<span class="material-symbols-outlined"> notifications </span>
</div>
</div>
<button id="sorting" onclick="filter()">Sort By Publish Time</button>
<div id="results"></div>
</body>
</html>