Issue 24, refactor click function for toggling meetup views

LearnTeachCode · Apr 24, 2019 · 72e6c0b · 72e6c0b
1 parent 67dcc59
commit 72e6c0b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 32 deletions.
diff --git a/custom.js b/custom.js
@@ -305,19 +305,11 @@
 
 		// Toggle between calendar and list views
 
-		$('.views').on('click', '.view', function() {
-			$(this).addClass('showing').siblings().removeClass('showing');
-
-			if (this.id === 'weekbutton') {
-				$('.listview').hide();
-				$('.weekview').show();
-				$('.dots').show();
-			} 
-			if (this.id === 'listbutton') {
-				$('.weekview').hide();
-				$('.listview').show();
-				$('.dots').hide();
-			}
+		$('.viewLinks').on('click', '.viewLink', function() {
+			$('.viewLink').removeClass('active');
+			$('.view').removeClass('showing');
+			$(this).addClass('active');
+			$('.view.' + this.id ).addClass('showing');
 		});
 
 		// Click Event for Load More

diff --git a/index.html b/index.html
@@ -36,23 +36,25 @@ <h2>Upcoming Events:</h2>
 
 		<div id="mapid"></div>
 
-		<div class='views'>
-			<span class='view showing' id='listbutton'>List View</span>
-			<span class='view' id='weekbutton'>Week View</span>
+		<div class='viewLinks'>
+			<a class='viewLink active' id='list'>List View</a>
+			<a class='viewLink' id='weekly'>Week View</a>
 		</div>
 
-		<div class='weekview slider'>
-			<button class='prev' onclick='plusSlides(-1)'>&#10094</button>
-			<button class='next' onclick='plusSlides(1)'>&#10095</button>
-			<div class='week slide fade' id='firstweek'></div>
-			<div class='week slide fade' id='secondweek'></div>
-		</div>
-		<div class='dots'>
-			<span class='dot' onclick='currentSlide(1)'></span>
-			<span class='dot' onclick='currentSlide(2)'></span>
+		<div class='view weekly'>
+			<div class='weekview slider'>
+				<button class='prev' onclick='plusSlides(-1)'>&#10094</button>
+				<button class='next' onclick='plusSlides(1)'>&#10095</button>
+				<div class='week slide fade' id='firstweek'></div>
+				<div class='week slide fade' id='secondweek'></div>
+			</div>
+			<div class='dots'>
+				<span class='dot' onclick='currentSlide(1)'></span>
+				<span class='dot' onclick='currentSlide(2)'></span>
+			</div>	
 		</div>
 
-		<ul class="listview"></ul>
+		<div class='view list showing'><ul class="listview"></ul></div>
 
 		<p>Visit our <a href="https://www.meetup.com/LearnTeachCode/">Meetup.com page</a> for details on our next meetings.</p>
 

diff --git a/style.css b/style.css
@@ -15,6 +15,7 @@ body {
 
 a {
   color: #b74949;
+  cursor: pointer;
 }
 
 h1 {
@@ -96,17 +97,28 @@ section {
 }
 .view {
   padding: 5px;
+  display: none;
+}
+.viewLinks {
+  width: 100%;
+  padding: 5px;
+  margin: 25px 0;
+}
+.viewLink {
+  padding: 5px;
+  color: #000;
+}
+.viewLink:hover, .viewLink.active {
+  color: rgba(183, 73, 73);
+  text-decoration: underline;
 }
 .showing {
-  color:  rgba(183, 73, 73);;
-  transform: scale(1.015);
+  display: block;
 }
 
-
 /** WEEK VIEW **/
 .weekview {
   position: relative;
-  display: none;
   min-height: 250px;
 }
 .week {
@@ -263,7 +275,6 @@ section {
 }
 
 .dots {
-  display: none;
   text-align: center;
   padding: 15px;
 }
@@ -278,7 +289,7 @@ section {
   transition: background-color 0.6s ease;
 }
 
-.active, .dot:hover {
+.dot:hover, .dot.active {
   background-color: #717171;
 }