From 7c7eca7b4830923a689e0638d3a5a495600cc9b5 Mon Sep 17 00:00:00 2001
From: Robbie Jaeger <jaeger.rob@gmail.com>
Date: Mon, 15 Jul 2019 14:05:26 -0600
Subject: [PATCH] Add module selectors to projects

---
 lessons/index.html                            |  10 +-
 projects/index.html                           | 170 ++++++++++--------
 .../{lesson-lists.js => module-selectors.js}  |  16 +-
 3 files changed, 107 insertions(+), 89 deletions(-)
 rename public/js/{lesson-lists.js => module-selectors.js} (71%)

diff --git a/lessons/index.html b/lessons/index.html
index 79ce659cd..70a6a3ac6 100644
--- a/lessons/index.html
+++ b/lessons/index.html
@@ -11,7 +11,7 @@
   <button class="btn btn-dark module-selector" data-module="0">Show All</button>
 </section>
 
-<section class="lesson-container" data-module="1" style="display:none">
+<section class="module-content" data-module="1" style="display:none">
   <h2>Module 1 Lessons</h2>
 
   <h3>Syllabus</h3>
@@ -102,7 +102,7 @@ <h3>Professional Development</h3>
 
 
 
-<section class="lesson-container" data-module="2" style="display:none">
+<section class="module-content" data-module="2" style="display:none">
   <h2>Module 2 Curriculum</h2>
   <p class="mod-description">Module 2 focuses on fundamental JavaScript concepts, popular patterns for writing and organizing front-end code, and learning new tools and workflows to help improve the development process for more complex applications. Projects will reinforce lesson concepts by emphasizing Object-Oriented Programming, Test-Driven Development and heavy data manipulation. | <a href="https://docs.google.com/presentation/d/1VgzKmBWpBM7cQfj6oNNJ_x1BRDE2Hzi0soeYuqqUuFE/present?usp=sharing">Intro to Mod 2 (slides)</a></p>
 
@@ -175,7 +175,7 @@ <h3>CSS</h3>
   <hr/>
 </section>
 
-<section class="lesson-container" data-module="3" style="display:none">
+<section class="module-content" data-module="3" style="display:none">
   <h2>Module 3 Lessons</h2>
 
   <h3>Tooling & Workflow</h3>
@@ -288,7 +288,7 @@ <h3>Other Stuff</h3>
   <hr/>
 </section>
 
-<section class="lesson-container" data-module="4" style="display:none">
+<section class="module-content" data-module="4" style="display:none">
   <h2>Module 4 Lessons</h2>
 
   <h3>Server-Side JavaScript and APIs</h3>
@@ -364,4 +364,4 @@ <h3>Topics to Push Yourself</h3>
   </ul>
 </section>
 
-<script src="/public/js/lesson-lists.js"></script>
+<script src="/public/js/module-selectors.js"></script>
diff --git a/projects/index.html b/projects/index.html
index 927684131..ac2b0c862 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -3,91 +3,109 @@
 title: Projects
 ---
 
-<h2>Module 1 Projects</h2>
+<section>
+  <button class="btn btn-dark module-selector" data-module="1">Module 1</button>
+  <button class="btn btn-dark module-selector" data-module="2">Module 2</button>
+  <button class="btn btn-dark module-selector" data-module="3">Module 3</button>
+  <button class="btn btn-dark module-selector" data-module="4">Module 4</button>
+  <button class="btn btn-dark module-selector" data-module="0">Show All</button>
+</section>
 
-<ul class="projects">
-  <li class="project"><a href="dog-party-2.0.html">Dog Party 2.0</a></li>
-  <li class="project"><a href="number-guesser-doubles.html">Number Guesser Doubles</a></li>
-  <!-- <li class="project"><a href="ideabox-redux-wk1.html">IdeaBox Redux Week 1</a></li> -->
-  <!-- <li class="project"><a href="ideabox-redux-wk2.html">IdeaBox Redux Week 2</a></li> -->
-  <li class="project"><a href="check-yo-self.html">Check Yo'Self</a></li>
-  <!-- <li class="project"><a href="foto-finder-final.html">Foto Finder</a></li>
-  <li class="project"><a href="m1-static-comp-1.html">Static Comp Challenge #1</a></li>
-  <li class="project"><a href="m1-static-comp-2.html">Static Comp Challenge #2</a></li> -->
-  <li class="project"><a href="static-comp-peer-review.html">Static Comp Peer Review</a></li>
-  <li class="project"><a href="final-eval-rubric.html">Final Eval Rubric</a></li>
-  <li class="project"><a href="https://github.com/turingschool-examples/html-warmup-challenges">HTML Warmup Challenges</a></li>
-  <li class="project"><a href="https://github.com/turingschool-examples/css-layout-challenges">CSS Layout Challenges for Warmups</a></li>
-  <li class="lessons"><a href="https://github.com/turingschool-examples/javascript-foundations">Javascript Foundations Exercises</a></li>
-  <li class="project"><a href="https://github.com/turingschool/frontend-lightning-talks">Lightning Talks</a></li>
-</ul>
+<section class="module-content" data-module="1" style="display:none">
+  <h2>Module 1 Projects</h2>
 
-<h2>Module 2 Projects</h2>
+  <ul class="projects">
+    <li class="project"><a href="dog-party-2.0.html">Dog Party 2.0</a></li>
+    <li class="project"><a href="number-guesser-doubles.html">Number Guesser Doubles</a></li>
+    <!-- <li class="project"><a href="ideabox-redux-wk1.html">IdeaBox Redux Week 1</a></li> -->
+    <!-- <li class="project"><a href="ideabox-redux-wk2.html">IdeaBox Redux Week 2</a></li> -->
+    <li class="project"><a href="check-yo-self.html">Check Yo'Self</a></li>
+    <!-- <li class="project"><a href="foto-finder-final.html">Foto Finder</a></li>
+    <li class="project"><a href="m1-static-comp-1.html">Static Comp Challenge #1</a></li>
+    <li class="project"><a href="m1-static-comp-2.html">Static Comp Challenge #2</a></li> -->
+    <li class="project"><a href="static-comp-peer-review.html">Static Comp Peer Review</a></li>
+    <li class="project"><a href="final-eval-rubric.html">Final Eval Rubric</a></li>
+    <li class="project"><a href="https://github.com/turingschool-examples/html-warmup-challenges">HTML Warmup Challenges</a></li>
+    <li class="project"><a href="https://github.com/turingschool-examples/css-layout-challenges">CSS Layout Challenges for Warmups</a></li>
+    <li class="lessons"><a href="https://github.com/turingschool-examples/javascript-foundations">Javascript Foundations Exercises</a></li>
+    <li class="project"><a href="https://github.com/turingschool/frontend-lightning-talks">Lightning Talks</a></li>
+  </ul>
+</section>
 
-<ul class="projects">
-  <li class="project"><a href="flash-cards.html">Flash Cards</a></li>
-  <li class="project"><a href="JSFun.html">JSFun</a></li>
-  <li class="project"><a href="fitlit.html">FitLit</a></li>
-  <li class="project"><a href="module-2/game-time.html">Game Time</a></li>
-  <li class="lessons"><a href="fun-review.html">jsFUN: Review</a></li>
-  <li class="project"><a href="overlook.html">Overlook</a></li>
-  <!-- <li class="project"><a href="https://github.com/turingschool-examples/react-static-comp">React-Static-Comp</a></li> -->
-  <!-- <li class="project"><a href="whateverly.html">Whateverly</a></li> -->
-  <!-- <li class="project"><a href="memoize.html">Memoize</a></li> -->
+<section class="module-content" data-module="2" style="display:none">
+  <h2>Module 2 Projects</h2>
 
+  <ul class="projects">
+    <li class="project"><a href="flash-cards.html">Flash Cards</a></li>
+    <li class="project"><a href="JSFun.html">JSFun</a></li>
+    <li class="project"><a href="fitlit.html">FitLit</a></li>
+    <li class="project"><a href="module-2/game-time.html">Game Time</a></li>
+    <li class="lessons"><a href="fun-review.html">jsFUN: Review</a></li>
+    <li class="project"><a href="overlook.html">Overlook</a></li>
+    <!-- <li class="project"><a href="https://github.com/turingschool-examples/react-static-comp">React-Static-Comp</a></li> -->
+    <!-- <li class="project"><a href="whateverly.html">Whateverly</a></li> -->
+    <!-- <li class="project"><a href="memoize.html">Memoize</a></li> -->
 
-  <!-- <li class="project"><a href="weathrly.html">Weathrly</a></li> -->
-  <!-- <li class="project"><a href="game-time.html">Game Time</a></li> -->
-  <!-- <li class="project"><a href="sorting-suite.html">Sorting Suite</a></li> -->
-  <!-- <li class="project"><a href="complete-me.html">Complete-Me</a></li> -->
-  <!-- <li class="project"><a href="flash-cards.html">Flash Cards</a></li> -->
-  <!-- <li class="project"><a href="2DoBox-Pivot">2DoBox-Pivot</a></li> -->
-  <!-- <li class="project"><a href="seven-weeks-of-fonts.html">Seven Weeks of Fonts</a></li> -->
-  <!-- <li class="project"><a href="style-guide-challenges.html">Style Guide Challenges</a></li> -->
-  <!-- <li class="project"><a href="tier-one.html">Tier One Projects</a></li> -->
-  <!-- <li class="project"><a href="bird-feeder-1.html">Mini-Project: Bird Feeder 1.0</a></li> -->
-  <!-- <li class="project"><a href="fire-bae.html">Fire-Bae Projects</a></li> -->
-  <!-- <li class="project"><a href="number-guesser-in-react.html">Number Guesser in React</a></li> -->
-  <!-- <li class="project"><a href="shoot-the-breeze.html">Shoot the Breeze</a></li> -->
 
-</ul>
+    <!-- <li class="project"><a href="weathrly.html">Weathrly</a></li> -->
+    <!-- <li class="project"><a href="game-time.html">Game Time</a></li> -->
+    <!-- <li class="project"><a href="sorting-suite.html">Sorting Suite</a></li> -->
+    <!-- <li class="project"><a href="complete-me.html">Complete-Me</a></li> -->
+    <!-- <li class="project"><a href="flash-cards.html">Flash Cards</a></li> -->
+    <!-- <li class="project"><a href="2DoBox-Pivot">2DoBox-Pivot</a></li> -->
+    <!-- <li class="project"><a href="seven-weeks-of-fonts.html">Seven Weeks of Fonts</a></li> -->
+    <!-- <li class="project"><a href="style-guide-challenges.html">Style Guide Challenges</a></li> -->
+    <!-- <li class="project"><a href="tier-one.html">Tier One Projects</a></li> -->
+    <!-- <li class="project"><a href="bird-feeder-1.html">Mini-Project: Bird Feeder 1.0</a></li> -->
+    <!-- <li class="project"><a href="fire-bae.html">Fire-Bae Projects</a></li> -->
+    <!-- <li class="project"><a href="number-guesser-in-react.html">Number Guesser in React</a></li> -->
+    <!-- <li class="project"><a href="shoot-the-breeze.html">Shoot the Breeze</a></li> -->
+  </ul>
+</section>
 
-<h2>Module 3 Projects</h2>
+<section class="module-content" data-module="3" style="display:none">
+  <h2>Module 3 Projects</h2>
 
-<ul class="projects">
-  <li class="project"><a href="turing-yearbook.html">Turing Yearbook</a></li>
-  <li class="project"><a href="light-side.html">Light Side</a></li>
-  <li class="project"><a href="https://github.com/turingschool-examples/movie-tracker">MovieTracker</a></li>
-  <li class="project"><a href="ux-ui-team-hackathon.html">Design + Build Team Hackathon</a></li>
-  <li class="project"><a href="binary-challenge.html">Binary Challenge</a></li>
+  <ul class="projects">
+    <li class="project"><a href="turing-yearbook.html">Turing Yearbook</a></li>
+    <li class="project"><a href="light-side.html">Light Side</a></li>
+    <li class="project"><a href="https://github.com/turingschool-examples/movie-tracker">MovieTracker</a></li>
+    <li class="project"><a href="ux-ui-team-hackathon.html">Design + Build Team Hackathon</a></li>
+    <li class="project"><a href="binary-challenge.html">Binary Challenge</a></li>
 
-  <!-- <li class="project"><a href="swapi-box.html">SWapi-Box</a></li> -->
-  <!-- <li class="project"><a href="self-directed-project.html">Self-Directed Projects</a></li> -->
-  <!-- <li class="project"><a href="trapper-keeper.html">Trapper Keeper</a></li> -->
-  <!-- <li class="project"><a href="weather&#45;forecast.html">Weather Forecast</a></li> -->
-  <!-- <li class="project"><a href="remember.html">remEMBER</a></li> -->
-  <!-- <li class="project"><a href="https://github.com/turingschool&#45;examples/headcount2.0">HeadCount2.0</a></li> -->
-  <!-- <li class="project"><a href="red&#45;green&#45;blue.html">Red Green Blue</a></li> -->
-  <!-- <li class="project"><a href="walker-texas-rangerbox.html">Walker Texas Rangerbox</a></li> -->
-</ul>
+    <!-- <li class="project"><a href="swapi-box.html">SWapi-Box</a></li> -->
+    <!-- <li class="project"><a href="self-directed-project.html">Self-Directed Projects</a></li> -->
+    <!-- <li class="project"><a href="trapper-keeper.html">Trapper Keeper</a></li> -->
+    <!-- <li class="project"><a href="weather&#45;forecast.html">Weather Forecast</a></li> -->
+    <!-- <li class="project"><a href="remember.html">remEMBER</a></li> -->
+    <!-- <li class="project"><a href="https://github.com/turingschool&#45;examples/headcount2.0">HeadCount2.0</a></li> -->
+    <!-- <li class="project"><a href="red&#45;green&#45;blue.html">Red Green Blue</a></li> -->
+    <!-- <li class="project"><a href="walker-texas-rangerbox.html">Walker Texas Rangerbox</a></li> -->
+  </ul>
+</section>
 
-<h2>Module 4 Projects</h2>
+<section class="module-content" data-module="4" style="display:none">
+  <h2>Module 4 Projects</h2>
 
-<ul class="projects">
-  <li class="project"><a href="palette-picker.html">Palette Picker</a></li>
-  <li class="project"><a href="build-your-own-backend.html">Build Your Own Backend</a></li>
-<!--   <ul>
-    <li><a href="./byob/backend-feature-checklist.html">BE Feature Checklist</a></li>
+  <ul class="projects">
+    <li class="project"><a href="palette-picker.html">Palette Picker</a></li>
+    <li class="project"><a href="build-your-own-backend.html">Build Your Own Backend</a></li>
+  <!--   <ul>
+      <li><a href="./byob/backend-feature-checklist.html">BE Feature Checklist</a></li>
+    </ul>
+   -->  <li class="project"><a href="capstone.html">Cross-Pollination</a></li>
+    <li class="project"><a href="final-countdown.html">Final Countdown</a></li>
+    <li class="project"><a href="m4-mock-interview.html">Mock Interview Assessment</a></li>
+    <!-- <li class="project"><a href="jet-fuel.html">Jet Fuel</a></li> -->
+    <!-- <li class="project"><a href="real-time.html">Real Time</a></li> -->
+    <!-- <li class="project"><a href="impostor-syndrome.html">Impostor Syndrome</a></li> -->
+    <!-- <li class="project"><a href="house-of-vars.html">House of Vars</a></li> -->
+    <!-- <li class="project"><a href="refacktor-track.html">Refacktor Track (tor)</a></li> -->
+    <!-- <li class="project"><a href="mod-4-assignments-assignment.html">Mod 4 Assignments Assignment</a></li> -->
+    <!-- <li class="project"><a href="pattrn-party.html">Pattrn Party</a></li> -->
+    <!-- <li class="project"><a href="m4-static-comp-2.html">Static Comp Challenge</a></li> -->
   </ul>
- -->  <li class="project"><a href="capstone.html">Cross-Pollination</a></li>
-  <li class="project"><a href="final-countdown.html">Final Countdown</a></li>
-  <li class="project"><a href="m4-mock-interview.html">Mock Interview Assessment</a></li>
-  <!-- <li class="project"><a href="jet-fuel.html">Jet Fuel</a></li> -->
-  <!-- <li class="project"><a href="real-time.html">Real Time</a></li> -->
-  <!-- <li class="project"><a href="impostor-syndrome.html">Impostor Syndrome</a></li> -->
-  <!-- <li class="project"><a href="house-of-vars.html">House of Vars</a></li> -->
-  <!-- <li class="project"><a href="refacktor-track.html">Refacktor Track (tor)</a></li> -->
-  <!-- <li class="project"><a href="mod-4-assignments-assignment.html">Mod 4 Assignments Assignment</a></li> -->
-  <!-- <li class="project"><a href="pattrn-party.html">Pattrn Party</a></li> -->
-  <!-- <li class="project"><a href="m4-static-comp-2.html">Static Comp Challenge</a></li> -->
-</ul>
+</section>
+
+<script src="/public/js/module-selectors.js"></script>
+
diff --git a/public/js/lesson-lists.js b/public/js/module-selectors.js
similarity index 71%
rename from public/js/lesson-lists.js
rename to public/js/module-selectors.js
index a44ced0ec..244d39b62 100644
--- a/public/js/lesson-lists.js
+++ b/public/js/module-selectors.js
@@ -2,7 +2,7 @@ $(function() {
   initializeLocalStorage();
   let modulePreference = getModulePreference();
   activateButton(modulePreference);
-  showOrHideLessonContainer(modulePreference, 0);
+  showOrHideModuleContainer(modulePreference, 0);
 
   $('.module-selector').on('click', function(event) {
     let previousModulePreference = getModulePreference();
@@ -11,7 +11,7 @@ $(function() {
     let selection = $(event.target).data('module');
     setModulePreference(selection);
     activateButton(selection);
-    showOrHideLessonContainer(selection, 100);
+    showOrHideModuleContainer(selection, 100);
   });
 
   function initializeLocalStorage() {
@@ -20,14 +20,14 @@ $(function() {
     }
   };
 
-  function showOrHideLessonContainer(moduleSelection, ease) {
-    if (moduleSelection == 0) { return $('.lesson-container').show(ease) };
+  function showOrHideModuleContainer(moduleSelection, ease) {
+    if (moduleSelection == 0) { return $('.module-content').show(ease) };
 
-    $('.lesson-container').each(function(idx, lessonContainer) {
-      if ($(lessonContainer).data('module') == moduleSelection) {
-        $(lessonContainer).show(ease);
+    $('.module-content').each(function(idx, moduleContainer) {
+      if ($(moduleContainer).data('module') == moduleSelection) {
+        $(moduleContainer).show(ease);
       } else {
-        $(lessonContainer).hide(ease);
+        $(moduleContainer).hide(ease);
       }
     });
   };