Merge remote-tracking branch 'upstream/master'

Author: bgroveben

README.md

@@ -1,4 +1,5 @@
 FreeCodeCamp Python Curriculum
+https://freecodecamp.github.io/python-coding-challenges
 =============
 
 To run locally:

index.html

@@ -60,7 +60,7 @@
         <i class="fa fa-refresh"></i>
       </button>
 
-      <button id="map-button" class="btn">
+      <button id="map-button" class="btn" onclick="toggleMap()">
         Map
         <i class="fa fa-list"></i>
       </button>
@@ -69,6 +69,17 @@
 
   </div>
 
+  <div id="map" class="map">
+    <a href="javascript:void(0)" class="close-map" onclick="toggleMap()">&times;</a>
+    <div class="challenge-list">
+      <a href="#" onclick="loadChallengeFromMap('a')">Addition</a>
+      <a href="#" onclick="loadChallengeFromMap('b')">Subtraction</a>
+      <a href="#" onclick="loadChallengeFromMap('c')">Dummy 1</a>
+      <a href="#" onclick="loadChallengeFromMap('d')">Dummy 2</a>
+    </div>
+  </div>
+
   <script src="load-challenges.js"></script>
+  <script src="map.js"></script>
 </body>
 </html>

load-challenges.js

@@ -101,6 +101,16 @@ function startLoadChallenge() {
   if ( !foundIncomplete ) courseComplete(challenges, challenges.length - 1);
 }
 
+function loadChallengeFromMap(id) {
+  const challenges = getChallengeList();
+  for (const i in challenges) {
+    let c = challenges[i];
+    if ( c.id === id ) {
+      loadChallenge(challenges, i);
+    }
+  }
+}
+
 (() => {
   if ( localStorage.getItem('fcc-python-challenges') ) {
     startLoadChallenge();

map.js

@@ -0,0 +1,5 @@
+function toggleMap() {
+  const mapRef = document.getElementById("map");
+  const currentWidth = mapRef.style.width;
+  mapRef.style.width = currentWidth === "250px" ? "0" : "250px";
+}

stylesheet.css

@@ -172,3 +172,46 @@ h2 {
   cursor: pointer;
   text-decoration: underline;
 }
+
+.map {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  background-color: #eee;
+  overflow-x: hidden;
+  padding-top: 60px;
+  transition: 0.5s;
+}
+
+.map a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+
+.map a:hover, .offcanvas a:focus {
+  color: #006400;
+}
+
+.map .close-map {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+    .map {padding-top: 15px;}
+    .map a {font-size: 18px;}
+}
+
+.challenge-list {
+  border-top: 2px solid #006400;
+}