-
Notifications
You must be signed in to change notification settings - Fork 0
/
newWeather.html
117 lines (107 loc) · 4.92 KB
/
newWeather.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
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<!-- Mapbox CSS -->
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
<!--geocoder style-->
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
<link rel="stylesheet" href="css/newWeather.css">
</head>
<body>
<!--<div class="page-wrapper bg-primary-subtle">-->
<!-- <!–main header–>-->
<!-- <header class="p-3 bg-primary bg-gradient text-white position-absolute z-1 w-100">-->
<!-- <div class="d-flex justify-content-between">-->
<!-- <h3 class="m-0"><strong>Weather App</strong></h3>-->
<!-- <p id="location" class="m-0"><strong>Current city: <span id="currentCity"></span></strong></p>-->
<!-- </div>-->
<!-- </header>-->
<!-- <main class="position-relative">-->
<!-- <!–weather cards–>-->
<!-- <section id="insert-weather" class="d-flex justify-content-around w-100 position-absolute z-2"></section>-->
<!-- <!–mapbox container–>-->
<!-- <section id="insert-map"></section>-->
<!-- </main>-->
<!--</div>-->
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Add a Movie!</h3>
<div>
<form>
<!--Title input-->
<label for="title">Name of the Movie:
<input id="title" name="title" type="text">
</label>
<!--description textarea-->
<label for="summary">Give a brief summary.
<textarea id="summary" name="summary" placeholder="Movie Summary"></textarea>
</label>
<!--year input-->
<label>Select a year the movie was created
<select id="ddlYears">
<option>Select</option>
</select>
</label>
<!--category select-->
<label id="categories">Genre
<input type="checkbox" class="categories" name="category[]" value="Action">Action
<input type="checkbox" class="categories" name="category[]" value="Adventure">Adventure
<input type="checkbox" class="categories" name="category[]" value="Animation">Animation
<input type="checkbox" class="categories" name="category[]" value="Crime">Crime
<input type="checkbox" class="categories" name="category[]" value="Documentary">Documentary
<input type="checkbox" class="categories" name="category[]" value="Drama">Drama
<input type="checkbox" class="categories" name="category[]" value="Family">Family
<input type="checkbox" class="categories" name="category[]" value="Fantasy">Fantasy
<input type="checkbox" class="categories" name="category[]" value="History">History
<input type="checkbox" class="categories" name="category[]" value="Horror">Horror
<input type="checkbox" class="categories" name="category[]" value="Music">Music
<input type="checkbox" class="categories" name="category[]" value="Mystery">Mystery
<input type="checkbox" class="categories" name="category[]" value="Romance">Romance
<input type="checkbox" class="categories" name="category[]" value="Science Fiction">Science Fiction
<input type="checkbox" class="categories" name="category[]" value="TV Movie">TV Movie
<input type="checkbox" class="categories" name="category[]" value="Thriller">Thriller
<input type="checkbox" class="categories" name="category[]" value="War">War
<input type="checkbox" class="categories" name="category[]" value="Western">Western
</label>
<!--rating-->
<label for="rating">Movie Rating
<select id="rating">
<option>Select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</label>
</form>
</div>
<button id="submit" type="button">Add</button>
</div>
</div>
<!--JQuery CDN-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!--Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<!-- Mapbox JS -->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<!--mapbox-gl-geocoder-->
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<!--Custom JS-->
<script type="module" src="js/newWeather.js"></script>
</body>
</html>