-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (94 loc) · 4.17 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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">
<link rel="shortcut icon" type="image/png" href="https://img.icons8.com/doodle/2x/sun--v1.png" />
<link rel="stylesheet" href="./style/reset.css">
<link rel="stylesheet" href="./style/map.css">
<!-- <link rel="stylesheet" type="image/png" href="https://ibb.co/0ynp9N4"> -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-national-dish.json"></script>
<!-- <script src="./data/country-by-national-dish.json"></script> -->
<script src="./dist/main.js"></script>
<title>Pop Eats</title>
</head>
<body>
<button id="modalBtn" class="button">Instructions</button>
<div id="simpleModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="closeBtn">×</span>
<h2>User Instructions</h2>
</div>
<div class="modal-body">
<p>Welcome to Pop Eats !</p><br>
<p>How to Use:</p><br>
<p>Hover over over each country to see what the country is. If you already know where the country you are looking for
is,
click on the country and the country's national dish/favorite food will appear above the map!</p>
<br>
</div>
<div class="modal-footer">
<h3>Enjoy!</h3>
</div>
</div>
</div>
<div>
<div class="title">
<h1>Pop Eats</h1>
</div>
<div class="social_media_links">
<p>Socials:</p>
<a target="_blank" href="https://www.linkedin.com/in/la-vinia-parker-ab93885a">
<img src="./images/icons/linkedin.png" alt="linkedin social media logo" />
</a>
<a target="_blank" href="https://github.com/lavparker">
<img src="./images/icons/github.png" alt="github social media logo" />
</a>
<a target="_blank" href="https://www.instagram.com/vinia.tech/">
<img src="./images/icons/icons8-instagram-64.png" alt="instagram social media logo" />
</a>
<div class="author">
<p>by La Vinia Parker</p>
</div>
</div>
<div class="country_info_display">
<p id="food_displayer">Select a Country!</p>
</div>
</filter>
</div>
<!-- <div class="dropdown">
<label for="country-name">Choose a Country:</label>
<select name="country-name" id="country-name">
<option value="countries">Countries</option>
<option value="afghanistan">Afghanistan</option>
<option value="albania">Albania</option>
<option value="algeria">Algeria</option>
<option value="angola">Angola</option>
<option value="argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="australia">Australia</option>
<option value="austria">Austria</option>
<option value="azerbaijan">Azerbaijan</option>
<option value="bahamas, the">Bahamas, the</option>
<option value="bahrain">Bahrain</option>
<option value="bangladesh">Bangladesh</option>
<option value="belarus">Belarus</option>
<option value="belgium">Belgium</option>
<option value="benin">Benin</option>
<option value="bermuda">Bermuda</option>
<option value="bolivia">Bolivia</option>
<option value="bosnia-herzegovina">Bosnia-Herzegovina</option>
<option value="botswana">Botswana</option>
<option value="brazil">Brazil</option>
<option value="brunei">Brunei</option>
<option value="bulgaria">Bulgaria</option>
<option value="burkina faso">Burkina Faso</option>
<option value="burundi">Burundi</option>
</select>
</div> -->
</body>
</html>