local-storage/index.html at master · efano/local-storage · 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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet"
    href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.2.5/css/calcite-web.min.css">
  <link rel="stylesheet" href="style.css" />
  <link rel="icon"
    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌶️</text></svg>">
  <title>Street Food Tracker</title>
</head>

<body>
  <div id="container">
    <!-- side navigation -->
    <div id="side-panel">
      <div class="panel panel-white panel-no-border">
        <h3> <span class="logo">🌶️ </span>Street Food Tracker</h3>
        <div class="modifier-class trailer-2 js-tab-group tabs-transparent">
          <nav class="tab-nav">
            <a class="tab-title js-tab tab-info">About</a>
            <a class="tab-title js-tab tab-disabled tab-form">Form</a>
            <a class="tab-title is-active js-tab tab-list">List</a>
          </nav>
          <section class="tab-contents">
            <article class="tab-section js-tab-section tab-content-info animate-fade-in">
              <p>
                This Street Food Tracker web application collects data input by having the user click on a location on the map and then filling out a data input form. The submitted data is then stored in the browser via the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">localStorage</a> property which allows the app to save key-value pairs within the web browser. These data will persist even after the browser window is closed. The application also utilizes the <a target="_blank"
                href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API">Geolocation API</a> which automatically orients the basemap near the user's physical location.</p>
              <p>
                This application was designed & developed by <a class="portfolioLink" target="_blank" href="https://efano.github.io/"> Lis Fano</a>. The code for this application can be viewed on <a target="_blank"
                href="https://github.com/efano/local-storage">GitHub</a>.
              </p>
            </article>
            <article class="tab-section js-tab-section tab-content-form animate-fade-in">
              <div class="card form card-form">
                <div class="card-content streetFood">
                  <form id="form">
                    <label>
                      <div for="vendor" class="vendor-type">Vendor Type:</div>
                      <select name="vendor" id="vendor" class="select-full form__vendor--type" required>
                        <option value="" selected>select</option>
                        <option value="truck">Food Truck</option>
                        <option value="cart">Food Cart</option>
                        <option value="stand">Food Stand</option>
                      </select>
                      <div class="input-error-message vendor-error animate-fade-in">
                        A vendor type is required
                      </div>
                    </label>
                    <label>
                      <div for="food" class="food-type">Food Type:</div>
                      <select name="food" id="food" class="select-full form__food--type" required>
                        <option value="" selected>select</option>
                        <option value="🍔">American Cuisine</option>
                        <option value="🥐 ">Baked Goods</option>
                        <option value="🍳 ">Breakfast</option>
                        <option value="🇨🇳 ">Chinese Cuisine</option>
                        <option value="🥤 ">Coffee/Beverages</option>
                        <option value="🍪 ">Desserts</option>
                        <option value="🇵🇭 ">Filipino Cuisine</option>
                        <option value="🥘 ">Fusion Cuisine</option>
                        <option value="🇮🇳 ">Indian Cuisine</option>
                        <option value="🇮🇹 ">Italian Cuisine</option>
                        <option value="🇯🇵 ">Japanese Cuisine</option>
                        <option value="🇰🇷 ">Korean Cuisine</option>
                        <option value="🇲🇽 ">Mexican Cuisine</option>
                        <option value="🥙 ">Middle Eastern Cuisine</option>
                        <option value="❓">Unknown Cuisine</option>
                        <option value="🇹🇭 ">Thai Cuisine</option>
                        <option value="🥗 ">Vegetarian/Vegan Cuisine</option>
                        <option value="🇻🇳 ">Vietnamese Cuisine</option>
                      </select>
                      <div class="input-error-message food-error animate-fade-in">
                        A food type is required
                      </div>
                    </label>
                    <fieldset class="fieldset-checkbox">
                      <label>
                        <input class="checkbox" type="checkbox" name="seating" value="seating">Outdoor Seating
                      </label>
                    </fieldset>
                    <button type="" class="form__btn btn select-full " id="form__btn">Map Location</button>
                  </form>
                </div>
              </div>
            </article>
            <article class="tab-section js-tab-section is-active tab-content-list animate-fade-in cards close-card-icon">
              <p class="tab-content-text">Click on the map to add a new street food location list item </p>
            </article>
          </section>
        </div>
      </div>
    </div>
    <!-- map -->
    <div class="map-container">
      <div id="map">
        <div class="loader is-active padding-leader-3 padding-trailer-3">
          <div class="loader-bars"></div>
          <div class="loader-text">Loading...</div>
        </div>
        <div class="card block animate-fade-in legend legend-disabled">
          <div class="card-content">
            <p class="font-size--1 card-last"><span class="icon-ui-map-pin icon-ui-blue markers-legend"></span>Food
              Truck</p>
            <p class="font-size--1 card-last"><span class="icon-ui-map-pin icon-ui-green markers-legend"></span>Food
              Cart</p>
            <p class="font-size--1 card-last"><span class="icon-ui-map-pin icon-ui-red markers-legend"></span>Food Stand
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script defer src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
  <script src="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.2.5/js/calcite-web.min.js">
  </script>
  <script defer src="script.js"></script>
  <script>
    calcite.init()
  </script>
</body>

</html>