Skip to content

Commit

Permalink
Merge pull request turingschool#381 from turingschool/project-buttons
Browse files Browse the repository at this point in the history 
Add module selectors to projects index page
  • Loading branch information
@brittanydionigi
brittanydionigi authored Jul 16, 2019
2 parents d2c61e1 + 2591c3b commit a2b1b66
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 90 deletions.
12 changes: 6 additions & 6 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,8 +175,8 @@ <h3>CSS</h3>
<hr/>
</section>

<section class="lesson-container" data-module="3" style="display:none">
<h2>Module 3 Curriculum</h2>

<section class="module-content" data-module="3" style="display:none">
<p class="mod-description">Module 3 focuses on front-end frameworks and libraries for building complex, scalable, fully-tested applications, as well as diving into asynchronous JavaScript and consuming APIs. Primary tools used are React, React Router, and Redux. Projects are designed to reinforce lesson concepts by allowing students to practice implementing network requests, frameworks, and testing in applications that range from small and simple to larger and more complex.</p>

<h3>Tooling & Workflow</h3>
Expand Down Expand Up @@ -289,7 +289,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 @@ -365,4 +365,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 a2b1b66

Please sign in to comment.