Add resetButton (#10)

Add reset map button

Author: samilboyalikli

index.html

@@ -17,14 +17,16 @@
 
   <div id="map_container"></div>
 
+  <div id="buttonGroup">
+    <button id="reset_button" onclick="resetButton()">Sıfırla</button>
+    <a id="github_logo" href="https://github.com/ozanyerli" target="_blank" rel="noopener noreferrer"><img src="images/GitHub-Mark-32px.png" alt="Github page link"></a>
+  </div>
   <button id="download_button" onclick="downloadMap()">Haritayı İndir</button>
 
-  <a id="github_logo" href="https://github.com/ozanyerli" target="_blank" rel="noopener noreferrer"><img src="images/GitHub-Mark-32px.png" alt="Github page link"></a>
-
   <div id="city_count_text">Seçilen il sayısı:&nbsp;<span id="city_count">0</span>/81</div>
 
   <script src="turkeyvisited.js"></script>
 
 </body>
 
-</html>
+</html>

styles.css

@@ -44,7 +44,7 @@ html {
 
 #download_button {
     margin-left: 335px;
-    margin-top: 1em;
+    margin-top: 0.5em;
     padding: 0.5em 1.7em;
     border: 0.16em solid rgb(255, 255, 255);
     border-radius: 2em;
@@ -56,6 +56,7 @@ html {
     text-shadow: 0 0.04em 0.04em rgba(255, 255, 255, 0.253);
     text-align: center;
     transition: all 0.2s;
+    cursor: pointer;
 }
 
 #download_button:hover {
@@ -66,4 +67,29 @@ html {
 #github_logo {
     margin-left: 1000px;
     opacity: 0.5;
-}
+}
+
+#reset_button {
+    padding: 0.5em 1.7em;
+    border: 0.16em solid rgb(255, 255, 255);
+    border-radius: 2em;
+    box-sizing: border-box;
+    text-decoration: none;
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+    color: #000000;
+    text-shadow: 0 0.04em 0.04em rgba(255, 255, 255, 0.253);
+    text-align: center;
+    transition: all 0.2s;
+    cursor: pointer;
+}
+
+#reset_button:hover {
+    color: black;
+    background-color: #EFAE88;
+}
+
+#buttonGroup {
+    margin-left: 335px;
+    margin-top: 1em;
+}

turkeyvisited.js

@@ -133,3 +133,9 @@ function downloadMap() {
     });
   });
 }
+
+function resetButton() {
+  localStorage.removeItem("selectedCities")
+  cityCount = 0; document.getElementById("city_count").innerHTML = cityCount;
+  location.reload()
+}