Skip to content

Commit

Permalink
Add module selectors to projects
Browse files Browse the repository at this point in the history
  • Loading branch information
@robbiejaeger
robbiejaeger committed Jul 15, 2019
1 parent 3d5957e commit 7c7eca7
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 89 deletions.
10 changes: 5 additions & 5 deletions lessons/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
170 changes: 94 additions & 76 deletions projects/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

16 changes: 8 additions & 8 deletions public/js/lesson-lists.js → public/js/module-selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -11,7 +11,7 @@ $(function() {
let selection = $(event.target).data('module');
setModulePreference(selection);
activateButton(selection);
showOrHideLessonContainer(selection, 100);
showOrHideModuleContainer(selection, 100);
});

function initializeLocalStorage() {
Expand All @@ -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);
}
});
};
Expand Down

0 comments on commit 7c7eca7

Please sign in to comment.