From de6e3345a2375ed81b59a65bfb8c47aaec4b7e71 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Sun, 3 Mar 2019 19:30:38 -0800
Subject: [PATCH 01/20] Setup initial view option buttons

---
 index.html   |   5 +++++
 listview.png | Bin 0 -> 2863 bytes
 style.css    |  11 +++++++++++
 weekview.png | Bin 0 -> 2927 bytes
 4 files changed, 16 insertions(+)
 create mode 100644 listview.png
 create mode 100644 weekview.png

diff --git a/index.html b/index.html
index b401b9b..9951cc7 100644
--- a/index.html
+++ b/index.html
@@ -37,6 +37,11 @@ <h2>Upcoming Events:</h2>
 
 		<div id="mapid"></div>
 
+		<div class='viewoptions'>
+			<img src='./listview.png' alt='list view'>
+			<img src='./weekview.png' alt='week view'>
+		</div>
+
 		<ul class="meetups"></ul>
 
 		<p>Visit our <a href="https://www.meetup.com/LearnTeachCode/">Meetup.com page</a> for details on our next meetings.</p>
diff --git a/listview.png b/listview.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9100f54ddad0ccc4dfebc705d4c1ece50f7e854
GIT binary patch
diff --git a/style.css b/style.css
index 25c6932..ff33c28 100644
--- a/style.css
+++ b/style.css
@@ -88,6 +88,17 @@ section {
   overflow-y: auto;
 }
 
+/** VIEW OPTIONS **/
+
+.viewoptions {
+  float: right;
+  padding: 5px;
+}
+
+img {
+  margin: 5px;
+}
+
 /** UPCOMING EVENTS **/
 .meetups {
   list-style: none;
diff --git a/weekview.png b/weekview.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d279fa46cc50feb989526e3bdc03d7d10e3d790
GIT binary patch

From 6428fc72e2921ac13864bee5ad02936c9bf8adf2 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Tue, 5 Mar 2019 18:51:24 -0800
Subject: [PATCH 02/20] Style week view and make mobile responsive

---
 index.html | 14 ++++++++++++--
 style.css  | 31 +++++++++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 9951cc7..910b250 100644
--- a/index.html
+++ b/index.html
@@ -38,8 +38,18 @@ <h2>Upcoming Events:</h2>
 		<div id="mapid"></div>
 
 		<div class='viewoptions'>
-			<img src='./listview.png' alt='list view'>
-			<img src='./weekview.png' alt='week view'>
+			<img src='./listview.png' alt='list view' id='listbutton'>
+			<img src='./weekview.png' alt='week view' id='weekbutton'>
+		</div>
+
+		<div class='weekview' style='display: none'>
+			<div class='day' id='sunday'>Sun</div>
+			<div class='day' id='monday'>Mon</div>
+			<div class='day' id='tuesday'>Tue</div>
+			<div class='day' id='wednesday'>Wed</div>
+			<div class='day' id='thursday'>Thu</div>
+			<div class='day' id='friday'>Fri</div>
+			<div class='day' id='saturday'>Sat</div>
 		</div>
 
 		<ul class="meetups"></ul>
diff --git a/style.css b/style.css
index ff33c28..7bed699 100644
--- a/style.css
+++ b/style.css
@@ -89,16 +89,35 @@ section {
 }
 
 /** VIEW OPTIONS **/
-
 .viewoptions {
-  float: right;
+  width: 100%;
   padding: 5px;
 }
 
 img {
   margin: 5px;
+  padding: 5px;
+}
+
+img:hover {
+  box-shadow: 1px 1px 1px #ccc;
+}
+
+.weekview {
+  border: 1px solid #ccc;
+  display: flex;
+  flex-flow: row;
+  flex: 1 100%;
 }
 
+.day {
+  border: 1px solid #ccc;
+  width: 100%;
+  height: 500px;
+  text-align: center;
+}
+
+
 /** UPCOMING EVENTS **/
 .meetups {
   list-style: none;
@@ -174,6 +193,14 @@ img {
     margin-bottom: 0;
   }
 
+  /** VIEW OPTIONS **/
+  .weekview {
+    flex-flow: column;
+  }
+  .day {
+    width: 100%;
+  }
+
   /** UPCOMING EVENTS **/
   ul.meetups {
     list-style: none;

From 7d4636f2d1235682376e225574dcb9526562b1f3 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Tue, 5 Mar 2019 18:51:55 -0800
Subject: [PATCH 03/20] Create on click events to toggle list and week views

---
 custom.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/custom.js b/custom.js
index c277d0e..ee8046b 100644
--- a/custom.js
+++ b/custom.js
@@ -207,10 +207,21 @@
 	/**
 	 * Get initial set of group meetups
 	 */
-	$(document).ready(function(){
+	$(document).ready(function() {
 		// Get intial set of meetups
 		getData( api.url, processData, api.err);
 
+		// Toggle between calendar and list views
+		$( "#weekbutton" ).on('click', function() {     
+			$('.meetups').hide();
+			$('.weekview').show();
+		});
+
+		$( "#listbutton" ).on('click', function() {     
+			$('.weekview').hide();
+			$('.meetups').show();
+		});
+
 		// Click Event for Load More
 		$('.meetups').on('click','.load-more a',function(e) {
 			e.preventDefault();

From ee61ce26ce597beaa0f4e60adb2162355808daa4 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Sat, 9 Mar 2019 13:14:05 -0800
Subject: [PATCH 04/20] Adding day of week divs

---
 index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 910b250..caf5d75 100644
--- a/index.html
+++ b/index.html
@@ -43,13 +43,13 @@ <h2>Upcoming Events:</h2>
 		</div>
 
 		<div class='weekview' style='display: none'>
-			<div class='day' id='sunday'>Sun</div>
-			<div class='day' id='monday'>Mon</div>
-			<div class='day' id='tuesday'>Tue</div>
-			<div class='day' id='wednesday'>Wed</div>
-			<div class='day' id='thursday'>Thu</div>
-			<div class='day' id='friday'>Fri</div>
-			<div class='day' id='saturday'>Sat</div>
+			<div class='day' id='sunday'></div>
+			<div class='day' id='monday'></div>
+			<div class='day' id='tuesday'></div>
+			<div class='day' id='wednesday'></div>
+			<div class='day' id='thursday'></div>
+			<div class='day' id='friday'></div>
+			<div class='day' id='saturday'></div>
 		</div>
 
 		<ul class="meetups"></ul>

From 5edb15be40ec10684c5e8e4214079f2529b02a6f Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Sat, 9 Mar 2019 13:14:39 -0800
Subject: [PATCH 05/20] Restyle week view meetup

---
 style.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 7bed699..f75e891 100644
--- a/style.css
+++ b/style.css
@@ -113,10 +113,13 @@ img:hover {
 .day {
   border: 1px solid #ccc;
   width: 100%;
-  height: 500px;
   text-align: center;
 }
 
+.week-meetup {
+  list-style: none;
+  font-size: 0.8em;
+}
 
 /** UPCOMING EVENTS **/
 .meetups {

From afb23a3ba08394e12e184416dcf36b99cee46b03 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Sat, 9 Mar 2019 13:17:32 -0800
Subject: [PATCH 06/20] Adding functions to get current week, format week
 meetups, and display meetups in week format

---
 custom.js | 103 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)

diff --git a/custom.js b/custom.js
index ee8046b..e88c2ba 100644
--- a/custom.js
+++ b/custom.js
@@ -33,6 +33,7 @@
 		// List new meetups
 		listMeetups(data);
 		mapMeetups(data);
+		listMeetupsinWeekView(data);
 	}
 
 	function mapMeetups(data){
@@ -140,6 +141,107 @@
 		$(".meetups").append(list);
 	}
 
+	// Display Meetup Data in Week View
+	function listMeetupsinWeekView(data) {
+		let list = [];
+		list = getWeekFormattedMeetups(data.results);
+		console.log(list);
+
+		let week = getWeekRange();
+		console.log(week);
+		let thisWeek = [];
+		for(let i=1; i < week.length; i++) {
+			thisWeek.push('<div>'
+				+ week[i].dow.substring(0,3) + ' ' 
+				+ week[i].month.substring(0,3) + ' ' 
+				+ week[i].date		
+				+ '</div>');
+		}
+		
+		//if list[0][i] === date, push to id div
+
+		$('#sunday').append(thisWeek[0] + list[0]);
+		$('#monday').append(thisWeek[1] + list[1]);
+		$('#tuesday').append(thisWeek[2] + list[2]);
+		$('#wednesday').append(thisWeek[3] + list[3]);
+		$('#thursday').append(thisWeek[4] + list[4]);
+		$('#friday').append(thisWeek[5] + list[5]);
+		$('#saturday').append(thisWeek[6] + list[6]);
+	}
+	// Get Week Range
+	function getWeekRange() {
+		let d = new Date; //get current date
+		let first = d.getDate() - d.getDay(); //result?
+		let firstday = (new Date(d.setDate(first - 1))).toUTCString();
+		let week = [firstday];
+		const weekdays = ['Sunday','Monday','Tueday','Wednesday','Thursday','Friday','Saturday'];
+		const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+		for(let i=0; i<7; i++) {
+			let next = new Date(d.getTime());
+			next.setDate(first+i);
+			week.push({
+				dow: weekdays[next.getDay()],
+				date: next.getDate(),
+				month: months[next.getMonth()]
+			});
+		}
+		return week;
+	}
+
+	// Format Meetup Data for Week View
+	function getWeekFormattedMeetups( meetups ) {
+		let sunday = [];
+		let monday = [];
+		let tuesday = [];
+		let wednesday = [];
+		let thursday = [];
+		let friday = [];
+		let saturday = [];
+		let formattedMeetupsByWeek = [sunday, monday, tuesday, wednesday, thursday, friday, saturday];
+
+		// For each event create a list item
+		meetups.filter( function( meetup ) {
+			let d = getDateFormats( meetup );
+
+			let formattedMeetup = '<li id="meetup-' + meetup.id + '" class="week-meetup">'
+			+ '<div class="infobox">' 
+			+ ' <div class="date">' + d.dowFull + ' ' + d.day + '</div>'
+			+ ' <div class="title"><a href="' + meetup.event_url + '">' + meetup.name + '</a></div>'
+			+ ' <div>' + meetup.venue.city + ' - ' + meetup.venue.name + '</div>'
+			+ '</div>'
+			+ '<div>'
+			+ ' <div>' + d.time + '</div>'
+			+ '</div>'
+			+'</li>';
+
+			switch( d.dow ) {
+				case "Sun":
+					sunday.push(formattedMeetup.toString());
+					break;
+				case "Mon":
+					monday.push(formattedMeetup);
+					break;
+				case "Tue":
+					tuesday.push(formattedMeetup);
+					break;
+				case "Wed":
+					wednesday.push(formattedMeetup);
+					break;
+				case "Thu":
+					thursday.push(formattedMeetup);
+					break;
+				case "Fri":
+					friday.push(formattedMeetup);
+					break;
+				case "Sat":
+					saturday.push(formattedMeetup);
+					break;
+			}
+		});
+		console.log(formattedMeetupsByWeek);
+		return formattedMeetupsByWeek;
+	}
 	/**
 	 * formatEvents() will get a set of meetups and format accordingly
 	 * @param {meetups}
@@ -238,6 +340,7 @@
 			meetupListItem.classList.add('active');
 			setTimeout( () => { meetupListItem.classList.remove('active'); }, 3000);
 		});
+
 	});
 
 })();

From c8c682ea4358fbb0d2ef8caae1aabe8aeb20350f Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Sat, 16 Mar 2019 22:40:08 -0700
Subject: [PATCH 07/20] Refactor weekview functions

---
 custom.js | 102 ++++++++++++++++++++++++------------------------------
 1 file changed, 45 insertions(+), 57 deletions(-)

diff --git a/custom.js b/custom.js
index e88c2ba..bcd29c9 100644
--- a/custom.js
+++ b/custom.js
@@ -143,38 +143,50 @@
 
 	// Display Meetup Data in Week View
 	function listMeetupsinWeekView(data) {
-		let list = [];
-		list = getWeekFormattedMeetups(data.results);
-		console.log(list);
 
 		let week = getWeekRange();
-		console.log(week);
-		let thisWeek = [];
+		console.log('week', week[1]);
+		
+		let unfilteredMeetups = data.results;
+		console.log(unfilteredMeetups);
+		let currentDay = new Date();
+		let maxDay = new Date(currentDay.getDate()+5);
+		let maxTime = maxDay.getTime(); //compare by utc time
+		console.log(maxTime);
+
+		let filteredMeetups = unfilteredMeetups.filter(meetup.time >= currentTime);
+
+		let meetupsByDay = getWeekFormattedMeetups(filteredMeetups);
+
+		console.log('meetups by day', meetupsByDay);
+
+
 		for(let i=1; i < week.length; i++) {
-			thisWeek.push('<div>'
-				+ week[i].dow.substring(0,3) + ' ' 
-				+ week[i].month.substring(0,3) + ' ' 
-				+ week[i].date		
-				+ '</div>');
+			let weekday = week[i];
+
+			let teststring = meetupsByDay[weekday.dow.substring(0,3)];
+			let formattedWeek = '<div>'
+				+ weekday.dow.substring(0,3) + ' ' 
+				+ weekday.month.substring(0,3) + ' ' 
+				+ weekday.date		
+				+ '</div>'
+			if(teststring) {
+				formattedWeek += teststring.join('');		
+			} else {
+				formattedWeek += 'No meetups! :(';
+			}
+			$('#' + weekday.dow.toLowerCase()).append(formattedWeek);
+
 		}
-		
-		//if list[0][i] === date, push to id div
-
-		$('#sunday').append(thisWeek[0] + list[0]);
-		$('#monday').append(thisWeek[1] + list[1]);
-		$('#tuesday').append(thisWeek[2] + list[2]);
-		$('#wednesday').append(thisWeek[3] + list[3]);
-		$('#thursday').append(thisWeek[4] + list[4]);
-		$('#friday').append(thisWeek[5] + list[5]);
-		$('#saturday').append(thisWeek[6] + list[6]);
 	}
+
 	// Get Week Range
 	function getWeekRange() {
 		let d = new Date; //get current date
-		let first = d.getDate() - d.getDay(); //result?
+		let first = d.getDate() - d.getDay();
 		let firstday = (new Date(d.setDate(first - 1))).toUTCString();
 		let week = [firstday];
-		const weekdays = ['Sunday','Monday','Tueday','Wednesday','Thursday','Friday','Saturday'];
+		const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
 		const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
 		for(let i=0; i<7; i++) {
@@ -191,18 +203,16 @@
 
 	// Format Meetup Data for Week View
 	function getWeekFormattedMeetups( meetups ) {
-		let sunday = [];
-		let monday = [];
-		let tuesday = [];
-		let wednesday = [];
-		let thursday = [];
-		let friday = [];
-		let saturday = [];
-		let formattedMeetupsByWeek = [sunday, monday, tuesday, wednesday, thursday, friday, saturday];
+	
+		let dayArrays = {};
 
 		// For each event create a list item
-		meetups.filter( function( meetup ) {
+		meetups.forEach( function( meetup ) {
 			let d = getDateFormats( meetup );
+			// does d.dow exist within dayArray as array, if not create array
+			if( !dayArrays[d.dow] ) {
+				dayArrays[d.dow] = [];
+			}
 
 			let formattedMeetup = '<li id="meetup-' + meetup.id + '" class="week-meetup">'
 			+ '<div class="infobox">' 
@@ -214,33 +224,11 @@
 			+ ' <div>' + d.time + '</div>'
 			+ '</div>'
 			+'</li>';
-
-			switch( d.dow ) {
-				case "Sun":
-					sunday.push(formattedMeetup.toString());
-					break;
-				case "Mon":
-					monday.push(formattedMeetup);
-					break;
-				case "Tue":
-					tuesday.push(formattedMeetup);
-					break;
-				case "Wed":
-					wednesday.push(formattedMeetup);
-					break;
-				case "Thu":
-					thursday.push(formattedMeetup);
-					break;
-				case "Fri":
-					friday.push(formattedMeetup);
-					break;
-				case "Sat":
-					saturday.push(formattedMeetup);
-					break;
-			}
+			
+			dayArrays[d.dow].push(formattedMeetup);
 		});
-		console.log(formattedMeetupsByWeek);
-		return formattedMeetupsByWeek;
+		console.log('formated data', dayArrays);
+		return dayArrays;
 	}
 	/**
 	 * formatEvents() will get a set of meetups and format accordingly

From 97d4fd73c4dd11d47a63755018d85fa1159cff4e Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Tue, 19 Mar 2019 21:59:54 -0700
Subject: [PATCH 08/20] Slider functionality

---
 slider.js | 30 ++++++++++++++++++++++++
 style.css | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+)
 create mode 100644 slider.js

diff --git a/slider.js b/slider.js
new file mode 100644
index 0000000..1009fa1
--- /dev/null
+++ b/slider.js
@@ -0,0 +1,30 @@
+let slideIndex = 1;
+showSlides(slideIndex);
+
+// next/previous slide controls
+function plusSlides(n) {
+    showSlides(slideIndex += n);
+}
+
+// thumbnail controls
+function currentSlide(n) {
+    showSlides(slideIndex = n);
+}
+
+// slider
+function showSlides(n) {
+    let i;
+    let slides = document.querySelectorAll('.slide');
+    let dots = document.querySelectorAll('.dot');
+    console.log(slides.length);
+    if (n > slides.length) { slideIndex = 1 }
+    if (n < 1) { slideIndex = slides.length }
+    for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = 'none';
+    }
+    for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(' active', '');
+    }
+    slides[slideIndex-1].style.display = 'flex';
+    dots[slideIndex-1].className += ' active';
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index f75e891..bc97bc8 100644
--- a/style.css
+++ b/style.css
@@ -189,6 +189,74 @@ img:hover {
 .load-more a:hover {
   background: rgba(183, 73, 73, 0.3);
 }
+/* Slider */
+.slider {
+  position: relative;
+  margin: auto;
+  max-width: 1000px;
+  height: 200px;
+  border: 1px solid black;
+}
+.slide {
+  display: none;
+}
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  width: auto;
+  height: 100%;
+  margin-top: -18px;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+  background: none;
+  border: none;
+}
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+.prev:hover, .next:hover {
+  background-color: rgba(0, 0, 0, 0.218);
+}
+.prev:focus, .next:focus {
+  outline: none;
+}
+.dots {
+  text-align: center;
+  padding: 15px;
+}
+.dot {
+  cursor: pointer;
+  height: 15px;
+  width: 15px;
+  margin: 0 2px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+.active, .dot:hover {
+  background-color: #717171;
+}
+.fade {
+  -webkit-animation-name: fade;
+  -webkit-animation-duration: 1.5s;
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+@-webkit-keyframes fade {
+  from {opacity: .4}
+  to {opacity: 1}
+}
+@keyframes fade {
+  from {opacity: .4}
+  to {opacity: 1}
+}
 
 /** MOBILE STYLES **/
 @media only screen and (max-device-width: 768px) {

From d209c222eb23bed8cf09a25f1a8e4eda2c596a7c Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Tue, 19 Mar 2019 22:00:50 -0700
Subject: [PATCH 09/20] Meetup weekview filter weekdays for two weeks, style
 weekview

---
 custom.js  | 67 ++++++++++++++++++++++++++++++++----------------------
 index.html | 19 ++++++++--------
 style.css  | 66 +++++++++++++++++++++++++++++++++++++----------------
 3 files changed, 97 insertions(+), 55 deletions(-)

diff --git a/custom.js b/custom.js
index bcd29c9..839bcbc 100644
--- a/custom.js
+++ b/custom.js
@@ -4,12 +4,21 @@
 		ltc.meetups = [];
 		ltc.markers = {};
 
+	// get week range for meetups
+	let currentWeek = getWeekRange();
+	let today = new Date;
+	console.log(currentWeek);
+	let firstDow = today.getDate()-currentWeek[1].date + 1;
+	let lastDow = currentWeek[14].date-today.getDate();
 	const api = {};
 		api.group = 'LearnTeachCode';
-		api.perPage = 15;
+		// api.perPage = 15; &page=' + api.perPage + 
 		api.offset = 0;
 		api.path = 'https://api.meetup.com/2/events?&sign=true&photo-host=public';
-		api.url = api.path + '&group_urlname=' + api.group + '&page=' + api.perPage;
+		api.startWeekDate = '-' + firstDow + 'd';
+		api.endWeekDate = lastDow + 'd';
+		api.status = 'upcoming,past';
+		api.url = api.path + '&group_urlname=' + api.group + '&status=' + api.status + '&time=' + api.startWeekDate + ',' + api.endWeekDate;
 		api.err = "Error occurred processing Meetup API URL";
 
 	// Get Meetup Data
@@ -24,6 +33,9 @@
 	}
 
 	function processData(data) {
+		let utctime = new Date(data.results[0].time);
+		console.log(utctime.toUTCString());
+
 		data.results.forEach( function( meetup, index ) {
 			// Get event formatted dates and time
 			data.results[index].d = getDateFormats( meetup );
@@ -145,38 +157,41 @@
 	function listMeetupsinWeekView(data) {
 
 		let week = getWeekRange();
-		console.log('week', week[1]);
 		
 		let unfilteredMeetups = data.results;
-		console.log(unfilteredMeetups);
 		let currentDay = new Date();
 		let maxDay = new Date(currentDay.getDate()+5);
 		let maxTime = maxDay.getTime(); //compare by utc time
-		console.log(maxTime);
 
-		let filteredMeetups = unfilteredMeetups.filter(meetup.time >= currentTime);
+		let filteredMeetups = unfilteredMeetups.filter((meetup) => meetup.time >= maxTime);
 
 		let meetupsByDay = getWeekFormattedMeetups(filteredMeetups);
 
-		console.log('meetups by day', meetupsByDay);
+		for(let i=1; i <= 7; i++) {
+			let week1div = '<div class="day" id="' + week[i].dow.toLowerCase() + week[i].date + '"></div>';
+			document.querySelector('#firstweek').insertAdjacentHTML('beforeend', week1div);
+		}
 
+		for(let i=8; i <= 14; i++) {
+			let week2div = '<div class="day" id="' + week[i].dow.toLowerCase() + week[i].date + '"></div>';
+			document.querySelector('#secondweek').insertAdjacentHTML('beforeend', week2div);
+		}
 
 		for(let i=1; i < week.length; i++) {
 			let weekday = week[i];
-
-			let teststring = meetupsByDay[weekday.dow.substring(0,3)];
-			let formattedWeek = '<div>'
+			let dowDay = weekday.dow.substring(0,3) + weekday.date;
+			let teststring = meetupsByDay[dowDay];
+			let formattedWeek = '<div class="weekday">'
 				+ weekday.dow.substring(0,3) + ' ' 
 				+ weekday.month.substring(0,3) + ' ' 
-				+ weekday.date		
-				+ '</div>'
+				+ weekday.date
+				+ '</div>';
 			if(teststring) {
 				formattedWeek += teststring.join('');		
 			} else {
-				formattedWeek += 'No meetups! :(';
-			}
-			$('#' + weekday.dow.toLowerCase()).append(formattedWeek);
-
+				formattedWeek += '<div class="week-meetup">No meetups!</div';
+			}			
+			$('#' + weekday.dow.toLowerCase() + weekday.date).append(formattedWeek);
 		}
 	}
 
@@ -189,7 +204,7 @@
 		const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
 		const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
-		for(let i=0; i<7; i++) {
+		for(let i=0; i<14; i++) {
 			let next = new Date(d.getTime());
 			next.setDate(first+i);
 			week.push({
@@ -210,24 +225,22 @@
 		meetups.forEach( function( meetup ) {
 			let d = getDateFormats( meetup );
 			// does d.dow exist within dayArray as array, if not create array
-			if( !dayArrays[d.dow] ) {
-				dayArrays[d.dow] = [];
+			let dowDay = d.dow + d.day;
+			if( !dayArrays[dowDay] ) {
+				dayArrays[dowDay] = [];
 			}
 
 			let formattedMeetup = '<li id="meetup-' + meetup.id + '" class="week-meetup">'
-			+ '<div class="infobox">' 
-			+ ' <div class="date">' + d.dowFull + ' ' + d.day + '</div>'
+			+ '<div class="timebox">' + d.time + '</div>'
+			+ '<div class="infobox-week">' 
+			// + ' <div class="date">' + d.dowFull + ' ' + d.day + '</div>'
 			+ ' <div class="title"><a href="' + meetup.event_url + '">' + meetup.name + '</a></div>'
-			+ ' <div>' + meetup.venue.city + ' - ' + meetup.venue.name + '</div>'
-			+ '</div>'
-			+ '<div>'
-			+ ' <div>' + d.time + '</div>'
+			+ ' <div class="city-week">' + meetup.venue.city + ' - ' + meetup.venue.name + '</div>'
 			+ '</div>'
 			+'</li>';
 			
-			dayArrays[d.dow].push(formattedMeetup);
+			dayArrays[dowDay].push(formattedMeetup);
 		});
-		console.log('formated data', dayArrays);
 		return dayArrays;
 	}
 	/**
diff --git a/index.html b/index.html
index caf5d75..cd6843f 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,6 @@
 	gtag('config', 'UA-118124010-1');
 	</script>
 	<!-- Google Analytics - END -->
-
 	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
    integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
    crossorigin=""/>
@@ -42,14 +41,15 @@ <h2>Upcoming Events:</h2>
 			<img src='./weekview.png' alt='week view' id='weekbutton'>
 		</div>
 
-		<div class='weekview' style='display: none'>
-			<div class='day' id='sunday'></div>
-			<div class='day' id='monday'></div>
-			<div class='day' id='tuesday'></div>
-			<div class='day' id='wednesday'></div>
-			<div class='day' id='thursday'></div>
-			<div class='day' id='friday'></div>
-			<div class='day' id='saturday'></div>
+		<div class='weekview slider' style='display: none'>
+			<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>
 
 		<ul class="meetups"></ul>
@@ -86,5 +86,6 @@ <h2>Stuff we do at Learn Teach Code:</h2>
 	integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
 	crossorigin=""></script>
 	<script src="custom.js"></script>
+	<script src="slider.js"></script>
 	</body>
 </html>
diff --git a/style.css b/style.css
index bc97bc8..11a2ff2 100644
--- a/style.css
+++ b/style.css
@@ -105,22 +105,54 @@ img:hover {
 
 .weekview {
   border: 1px solid #ccc;
+  position: relative;
+}
+
+.week {
   display: flex;
-  flex-flow: row;
-  flex: 1 100%;
+  flex-flow: row nowrap;
+  flex: 2 50% auto;
 }
 
 .day {
   border: 1px solid #ccc;
-  width: 100%;
-  text-align: center;
+  /* text-align: center; */
+  width: 15%;
 }
 
 .week-meetup {
   list-style: none;
   font-size: 0.8em;
+  border: 1px solid #ccc;
+  text-decoration: none;
+  line-height: 18px;
+  border: 1px solid #b74949;
+  text-align: center;
+  border-radius: 5px;  
+  margin: 5px;
 }
 
+.timebox {
+  border-bottom: 1px solid #b74949;
+  text-align: center;
+  border-radius: 5px 5px 0 0;
+  background-color: rgba(183, 73, 73, 0.3);
+}
+.city-week {
+  font-style: italic;
+}
+.weekday {
+  text-transform: uppercase;
+  background-color: #ddd;
+  text-align: center;
+}
+
+.title a {
+  text-decoration: none;
+}
+.infobox-week {
+  padding: 5px;
+}
 /** UPCOMING EVENTS **/
 .meetups {
   list-style: none;
@@ -189,14 +221,7 @@ img:hover {
 .load-more a:hover {
   background: rgba(183, 73, 73, 0.3);
 }
-/* Slider */
-.slider {
-  position: relative;
-  margin: auto;
-  max-width: 1000px;
-  height: 200px;
-  border: 1px solid black;
-}
+/** Slider **/
 .slide {
   display: none;
 }
@@ -205,23 +230,26 @@ img:hover {
   position: absolute;
   width: auto;
   height: 100%;
-  margin-top: -18px;
+  margin-top: 0px;
   padding: 16px;
-  color: white;
+  color: black;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
-  border-radius: 0 3px 3px 0;
+  border-radius: 3px 0 0 3px;
   user-select: none;
-  background: none;
-  border: none;
+  background: rgba(0, 0, 0, 0.218);
 }
 .next {
-  right: 0;
-  border-radius: 3px 0 0 3px;
+  right: -45px;
+  border-radius: 0 3px 3px 0;
+}
+.prev {
+  left: -45px;
 }
 .prev:hover, .next:hover {
   background-color: rgba(0, 0, 0, 0.218);
+  color: white;
 }
 .prev:focus, .next:focus {
   outline: none;

From 87ea8f4b9f437ceeb8bcf83647057c50ae6e7454 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Thu, 21 Mar 2019 23:03:56 -0700
Subject: [PATCH 10/20] Responsive design, and tidying up css

---
 custom.js  |  20 +++++----
 index.html |  10 ++---
 style.css  | 129 ++++++++++++++++++++++++++++++++---------------------
 3 files changed, 93 insertions(+), 66 deletions(-)

diff --git a/custom.js b/custom.js
index 839bcbc..31355e6 100644
--- a/custom.js
+++ b/custom.js
@@ -150,7 +150,7 @@
 		$('.load-more').remove();
 
 		// Add the list to the element
-		$(".meetups").append(list);
+		$(".listview").append(list);
 	}
 
 	// Display Meetup Data in Week View
@@ -189,7 +189,7 @@
 			if(teststring) {
 				formattedWeek += teststring.join('');		
 			} else {
-				formattedWeek += '<div class="week-meetup">No meetups!</div';
+				formattedWeek += '<div class="week-meetup-none">No meetups!</div';
 			}			
 			$('#' + weekday.dow.toLowerCase() + weekday.date).append(formattedWeek);
 		}
@@ -231,11 +231,11 @@
 			}
 
 			let formattedMeetup = '<li id="meetup-' + meetup.id + '" class="week-meetup">'
-			+ '<div class="timebox">' + d.time + '</div>'
-			+ '<div class="infobox-week">' 
+			+ '<div class="week-time">' + d.time + '</div>'
+			+ '<div class="week-infobox">' 
 			// + ' <div class="date">' + d.dowFull + ' ' + d.day + '</div>'
 			+ ' <div class="title"><a href="' + meetup.event_url + '">' + meetup.name + '</a></div>'
-			+ ' <div class="city-week">' + meetup.venue.city + ' - ' + meetup.venue.name + '</div>'
+			+ ' <div class="week-city">' + meetup.venue.city + ' - ' + meetup.venue.name + '</div>'
 			+ '</div>'
 			+'</li>';
 			
@@ -258,7 +258,7 @@
 
 			// Formant and add current event to list
 			formattedMeetups.push(
-				'<li id="meetup-' + meetup.id + '" class="meetup">'
+				'<li id="meetup-' + meetup.id + '" class="list-meetup">'
 				+ '<div class="datebox">'
 				+ ' <div class="dow">' + d.dow + '</div>'
 				+ ' <div class="date">' + d.month + ' ' + d.day + '</div>'
@@ -316,17 +316,19 @@
 
 		// Toggle between calendar and list views
 		$( "#weekbutton" ).on('click', function() {     
-			$('.meetups').hide();
+			$('.listview').hide();
 			$('.weekview').show();
+			$('.dots').show();
 		});
 
 		$( "#listbutton" ).on('click', function() {     
 			$('.weekview').hide();
-			$('.meetups').show();
+			$('.listview').show();
+			$('.dots').hide();
 		});
 
 		// Click Event for Load More
-		$('.meetups').on('click','.load-more a',function(e) {
+		$('.listview').on('click', '.load-more a', function(e) {
 			e.preventDefault();
 			api.offset++;
 			getData( api.url + '&offset=' + api.offset, processData, api.err);
diff --git a/index.html b/index.html
index cd6843f..44824c4 100644
--- a/index.html
+++ b/index.html
@@ -36,12 +36,12 @@ <h2>Upcoming Events:</h2>
 
 		<div id="mapid"></div>
 
-		<div class='viewoptions'>
-			<img src='./listview.png' alt='list view' id='listbutton'>
-			<img src='./weekview.png' alt='week view' id='weekbutton'>
+		<div class='views'>
+			<img class='view' src='./listview.png' alt='list view' id='listbutton'>
+			<img class='view' src='./weekview.png' alt='week view' id='weekbutton'>
 		</div>
 
-		<div class='weekview slider' style='display: none'>
+		<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>
@@ -52,7 +52,7 @@ <h2>Upcoming Events:</h2>
 			<span class='dot' onclick='currentSlide(2)'></span>
 		</div>
 
-		<ul class="meetups"></ul>
+		<ul class="listview"></ul>
 
 		<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
index 11a2ff2..2562a29 100644
--- a/style.css
+++ b/style.css
@@ -89,77 +89,79 @@ section {
 }
 
 /** VIEW OPTIONS **/
-.viewoptions {
+.views {
   width: 100%;
   padding: 5px;
 }
-
-img {
+.view {
   margin: 5px;
   padding: 5px;
 }
-
-img:hover {
+.view:hover {
   box-shadow: 1px 1px 1px #ccc;
+  transform: scale(1.015);
 }
 
+/** WEEK VIEW **/
 .weekview {
-  border: 1px solid #ccc;
   position: relative;
+  display: none;
 }
-
 .week {
   display: flex;
   flex-flow: row nowrap;
   flex: 2 50% auto;
 }
-
 .day {
   border: 1px solid #ccc;
-  /* text-align: center; */
   width: 15%;
 }
-
-.week-meetup {
-  list-style: none;
+/** WEEK VIEW MEETUPS **/
+.weekday {
+  text-transform: uppercase;
+  background-color: #ddd;
+  text-align: center;
+  white-space: wrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.week-meetup, .week-meetup-none {
+  border: 1px solid #b74949;
+  border-radius: 5px; 
   font-size: 0.8em;
-  border: 1px solid #ccc;
+  text-align: center;
   text-decoration: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  list-style: none;
   line-height: 18px;
-  border: 1px solid #b74949;
-  text-align: center;
-  border-radius: 5px;  
   margin: 5px;
 }
-
-.timebox {
-  border-bottom: 1px solid #b74949;
-  text-align: center;
-  border-radius: 5px 5px 0 0;
-  background-color: rgba(183, 73, 73, 0.3);
+.week-meetup-none {
+  border: none;
 }
-.city-week {
-  font-style: italic;
+.week-meetup:hover {
+  transform: scale(1.015);
 }
-.weekday {
-  text-transform: uppercase;
-  background-color: #ddd;
+.week-time {
+  background-color: rgba(183, 73, 73, 0.3);
+  border-bottom: 1px solid #b74949;
+  border-radius: 5px 5px 0 0;
   text-align: center;
 }
-
-.title a {
-  text-decoration: none;
-}
-.infobox-week {
+.week-infobox {
   padding: 5px;
 }
-/** UPCOMING EVENTS **/
-.meetups {
+.week-city {
+  font-style: italic;
+}
+
+/** LIST VIEW MEETUPS **/
+.listview {
   list-style: none;
   padding-left: 0px;
 }
-
-.meetup {
+.list-meetup {
   display: grid;
   grid-template-columns: 70px repeat(6, 10%);
   margin-bottom: 0.4rem;
@@ -167,8 +169,7 @@ img:hover {
   -moz-transition: background 0.3s ease-in-out;
   -webkit-transition: background 0.3s ease-in-out;
 }
-
-.meetup.active {
+.list-meetup.active {
   background-color: rgba(183, 73, 73, 0.25);
   border-radius: 5px;
 }
@@ -221,24 +222,26 @@ img:hover {
 .load-more a:hover {
   background: rgba(183, 73, 73, 0.3);
 }
-/** Slider **/
+
+/** SLIDER **/
 .slide {
   display: none;
 }
+
 .prev, .next {
-  cursor: pointer;
+  background: rgba(0, 0, 0, 0.218);
+  border-radius: 3px 0 0 3px;
+  color: black;
+  font-weight: bold;
+  font-size: 18px;
   position: absolute;
   width: auto;
   height: 100%;
   margin-top: 0px;
   padding: 16px;
-  color: black;
-  font-weight: bold;
-  font-size: 18px;
   transition: 0.6s ease;
-  border-radius: 3px 0 0 3px;
   user-select: none;
-  background: rgba(0, 0, 0, 0.218);
+  cursor: pointer;
 }
 .next {
   right: -45px;
@@ -250,42 +253,61 @@ img:hover {
 .prev:hover, .next:hover {
   background-color: rgba(0, 0, 0, 0.218);
   color: white;
+  transform: scale(1.015);
 }
 .prev:focus, .next:focus {
   outline: none;
 }
+
 .dots {
+  display: none;
   text-align: center;
   padding: 15px;
 }
 .dot {
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 2px;
-  background-color: #bbb;
-  border-radius: 50%;
-  display: inline-block;
   transition: background-color 0.6s ease;
 }
+
 .active, .dot:hover {
   background-color: #717171;
 }
+
 .fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1.5s;
   animation-name: fade;
   animation-duration: 1.5s;
 }
+
 @-webkit-keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
 }
+
 @keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
 }
 
+/** MEDIA QUERIES **/
+@media (max-width: 768px) {
+
+  /** WEEK VIEW **/
+  .week {
+    flex-flow: column nowrap;
+  }
+  .day {
+    width: 100%;
+  }
+}
+
 /** MOBILE STYLES **/
 @media only screen and (max-device-width: 768px) {
   .tagline {
@@ -300,15 +322,15 @@ img:hover {
     width: 100%;
   }
 
-  /** UPCOMING EVENTS **/
-  ul.meetups {
+  /** LIST VIEW MEETUPS **/
+  ul.listview {
     list-style: none;
     padding-left: 0;
   }
-  ul.meetups li {
+  ul.listview li {
     margin-bottom: 2rem;
   }
-  ul.meetups li a {
+  ul.listview li a {
     display: block;
   }
 
@@ -327,4 +349,7 @@ img:hover {
     font-size: 2em;
     padding: 10px 25px;
   }
+  .week {
+    flex-flow: column nowrap;
+  }
 }

From 6415b9bc1b9c014e50ff8c1e66abb674cc4dca71 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Fri, 22 Mar 2019 18:12:41 -0700
Subject: [PATCH 11/20] Change prev, next hover background color

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 2562a29..2efa37c 100644
--- a/style.css
+++ b/style.css
@@ -251,7 +251,7 @@ section {
   left: -45px;
 }
 .prev:hover, .next:hover {
-  background-color: rgba(0, 0, 0, 0.218);
+  background-color: rgba(183, 73, 73, 0.3);
   color: white;
   transform: scale(1.015);
 }

From 01f411b142e6ebc57ec093eb16faaa2829487a98 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Fri, 22 Mar 2019 18:13:03 -0700
Subject: [PATCH 12/20] Add comments for refactor issues

---
 custom.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/custom.js b/custom.js
index 31355e6..eedba3f 100644
--- a/custom.js
+++ b/custom.js
@@ -4,6 +4,7 @@
 		ltc.meetups = [];
 		ltc.markers = {};
 
+//COMBINE WITH DATE FUNCTION
 	// get week range for meetups
 	let currentWeek = getWeekRange();
 	let today = new Date;
@@ -159,6 +160,8 @@
 		let week = getWeekRange();
 		
 		let unfilteredMeetups = data.results;
+
+// REMOVE UNNECESSARY, COMBINE with DATE FUNCTION
 		let currentDay = new Date();
 		let maxDay = new Date(currentDay.getDate()+5);
 		let maxTime = maxDay.getTime(); //compare by utc time
@@ -167,6 +170,7 @@
 
 		let meetupsByDay = getWeekFormattedMeetups(filteredMeetups);
 
+//COMBINE BELOW 
 		for(let i=1; i <= 7; i++) {
 			let week1div = '<div class="day" id="' + week[i].dow.toLowerCase() + week[i].date + '"></div>';
 			document.querySelector('#firstweek').insertAdjacentHTML('beforeend', week1div);
@@ -194,10 +198,12 @@
 			$('#' + weekday.dow.toLowerCase() + weekday.date).append(formattedWeek);
 		}
 	}
-
+// ADD TO DATE FUNCTION
 	// Get Week Range
 	function getWeekRange() {
 		let d = new Date; //get current date
+
+//FIX THAT FIRST INDEX ISSUE WITH FALSE DAY
 		let first = d.getDate() - d.getDay();
 		let firstday = (new Date(d.setDate(first - 1))).toUTCString();
 		let week = [firstday];

From 11d96af1e6599c7b717b85caafb7d8881888c306 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Fri, 22 Mar 2019 21:35:48 -0700
Subject: [PATCH 13/20] Remove console.log

---
 slider.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/slider.js b/slider.js
index 1009fa1..130c095 100644
--- a/slider.js
+++ b/slider.js
@@ -16,7 +16,6 @@ function showSlides(n) {
     let i;
     let slides = document.querySelectorAll('.slide');
     let dots = document.querySelectorAll('.dot');
-    console.log(slides.length);
     if (n > slides.length) { slideIndex = 1 }
     if (n < 1) { slideIndex = slides.length }
     for (i = 0; i < slides.length; i++) {

From 466871c487b9d6a8470146c6b9e751304fe9f2ae Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Fri, 22 Mar 2019 21:36:01 -0700
Subject: [PATCH 14/20] Edit comment

---
 custom.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/custom.js b/custom.js
index eedba3f..1010b28 100644
--- a/custom.js
+++ b/custom.js
@@ -203,7 +203,7 @@
 	function getWeekRange() {
 		let d = new Date; //get current date
 
-//FIX THAT FIRST INDEX ISSUE WITH FALSE DAY
+//FIX THAT FIRST INDEX ISSUE WITH FALSE
 		let first = d.getDate() - d.getDay();
 		let firstday = (new Date(d.setDate(first - 1))).toUTCString();
 		let week = [firstday];

From 6d582d32a15ece16cc1601573fde353d185d0c7b Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Sat, 30 Mar 2019 19:45:48 -0700
Subject: [PATCH 15/20] Fixing time issue with filtering meetups

---
 custom.js | 138 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 83 insertions(+), 55 deletions(-)

diff --git a/custom.js b/custom.js
index 1010b28..35a9640 100644
--- a/custom.js
+++ b/custom.js
@@ -3,22 +3,29 @@
 		ltc.map;
 		ltc.meetups = [];
 		ltc.markers = {};
-
+	
 //COMBINE WITH DATE FUNCTION
 	// get week range for meetups
-	let currentWeek = getWeekRange();
+	let days = getCurrentDates(2);
 	let today = new Date;
-	console.log(currentWeek);
-	let firstDow = today.getDate()-currentWeek[1].date + 1;
-	let lastDow = currentWeek[14].date-today.getDate();
+	// let firstDow = today.getDate() - days[0].date + 1;
+	// let lastDow = days[days.length -1].date - today.getDate(); // next week Saturday
+	// let firstDow = 0;
+	let lastDow = 14 - today.getDay();
+	console.log(days);
+	console.log('todays date', today.getDate());
+	// console.log(firstDow, lastDow);
+	// let firstDow = 7;
+	// let lastDow = 28;
 	const api = {};
 		api.group = 'LearnTeachCode';
-		// api.perPage = 15; &page=' + api.perPage + 
+		// api.perPage = 21; 
 		api.offset = 0;
 		api.path = 'https://api.meetup.com/2/events?&sign=true&photo-host=public';
-		api.startWeekDate = '-' + firstDow + 'd';
-		api.endWeekDate = lastDow + 'd';
-		api.status = 'upcoming,past';
+		// api.startWeekDate = firstDow + 'd'; //-4d, 
+		api.startWeekDate = '0';
+		api.endWeekDate = lastDow + 'd'; // 23
+		api.status = 'upcoming';
 		api.url = api.path + '&group_urlname=' + api.group + '&status=' + api.status + '&time=' + api.startWeekDate + ',' + api.endWeekDate;
 		api.err = "Error occurred processing Meetup API URL";
 
@@ -34,9 +41,8 @@
 	}
 
 	function processData(data) {
-		let utctime = new Date(data.results[0].time);
-		console.log(utctime.toUTCString());
-
+		data.days = getCurrentDates(2);
+		console.log(data);
 		data.results.forEach( function( meetup, index ) {
 			// Get event formatted dates and time
 			data.results[index].d = getDateFormats( meetup );
@@ -142,7 +148,7 @@
 			if(data.meta.total_count > data.meta.count && data.meta.count >= api.perPage){
 				list += '<li class="load-more"><a href="https://www.meetup.com/LearnTeachCode/events/">Load More</a></li>';
 			}
-		}else{
+		} else{
 			// No upcoming events note
 			list += '<li>No Meetups Currently Scheduled. Stay tuned.</li>';
 		}
@@ -157,70 +163,49 @@
 	// Display Meetup Data in Week View
 	function listMeetupsinWeekView(data) {
 
-		let week = getWeekRange();
-		
-		let unfilteredMeetups = data.results;
+		let days = data.days;
+		console.log('testing', days);
+		let meetups = data.results;
 
-// REMOVE UNNECESSARY, COMBINE with DATE FUNCTION
-		let currentDay = new Date();
-		let maxDay = new Date(currentDay.getDate()+5);
-		let maxTime = maxDay.getTime(); //compare by utc time
+		// REMOVE UNNECESSARY, COMBINE with DATE FUNCTION
+		// let today = new Date();
+		// let maxDay = new Date(today.getDate()+5);
+		// let maxTime = maxDay.getTime(); //compare by utc time
 
-		let filteredMeetups = unfilteredMeetups.filter((meetup) => meetup.time >= maxTime);
+		// let filteredMeetups = meetups.filter((meetup) => meetup.time >= maxTime);
 
-		let meetupsByDay = getWeekFormattedMeetups(filteredMeetups);
+		let meetupsByDay = getWeekFormattedMeetups(meetups);
 
 //COMBINE BELOW 
-		for(let i=1; i <= 7; i++) {
-			let week1div = '<div class="day" id="' + week[i].dow.toLowerCase() + week[i].date + '"></div>';
+		for(let i=0; i <= 6; i++) {
+			let week1div = '<div class="day" id="' + days[i].dow.toLowerCase() + days[i].date + '"></div>';
 			document.querySelector('#firstweek').insertAdjacentHTML('beforeend', week1div);
 		}
 
-		for(let i=8; i <= 14; i++) {
-			let week2div = '<div class="day" id="' + week[i].dow.toLowerCase() + week[i].date + '"></div>';
+		for(let i=7; i <= 13; i++) {
+			let week2div = '<div class="day" id="' + days[i].dow.toLowerCase() + days[i].date + '"></div>';
 			document.querySelector('#secondweek').insertAdjacentHTML('beforeend', week2div);
 		}
 
-		for(let i=1; i < week.length; i++) {
-			let weekday = week[i];
+		for(let i=0; i < days.length; i++) {
+			let weekday = days[i];
 			let dowDay = weekday.dow.substring(0,3) + weekday.date;
-			let teststring = meetupsByDay[dowDay];
+			let meetupString = meetupsByDay[dowDay];
 			let formattedWeek = '<div class="weekday">'
 				+ weekday.dow.substring(0,3) + ' ' 
 				+ weekday.month.substring(0,3) + ' ' 
 				+ weekday.date
 				+ '</div>';
-			if(teststring) {
-				formattedWeek += teststring.join('');		
+				console.log(weekday);
+			if(meetupString) {
+				formattedWeek += meetupString.join('');	
+
 			} else {
 				formattedWeek += '<div class="week-meetup-none">No meetups!</div';
 			}			
 			$('#' + weekday.dow.toLowerCase() + weekday.date).append(formattedWeek);
 		}
 	}
-// ADD TO DATE FUNCTION
-	// Get Week Range
-	function getWeekRange() {
-		let d = new Date; //get current date
-
-//FIX THAT FIRST INDEX ISSUE WITH FALSE
-		let first = d.getDate() - d.getDay();
-		let firstday = (new Date(d.setDate(first - 1))).toUTCString();
-		let week = [firstday];
-		const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
-		const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
-		for(let i=0; i<14; i++) {
-			let next = new Date(d.getTime());
-			next.setDate(first+i);
-			week.push({
-				dow: weekdays[next.getDay()],
-				date: next.getDate(),
-				month: months[next.getMonth()]
-			});
-		}
-		return week;
-	}
 
 	// Format Meetup Data for Week View
 	function getWeekFormattedMeetups( meetups ) {
@@ -231,7 +216,7 @@
 		meetups.forEach( function( meetup ) {
 			let d = getDateFormats( meetup );
 			// does d.dow exist within dayArray as array, if not create array
-			let dowDay = d.dow + d.day;
+			let dowDay = d.dow + d.d;
 			if( !dayArrays[dowDay] ) {
 				dayArrays[dowDay] = [];
 			}
@@ -279,7 +264,50 @@
 		});
 		return formattedMeetups;
 	}
+// ADD TO DATE FUNCTION
+	// Get Week Range
+	// function getWeekRange() {
+	// 	const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
+	// 	const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+	// 	let d = new Date; //get current date
+
+	// 	let first = d.getDate() - d.getDay(); //date - dow in num 22 - 5 = 17
+	// 	let firstday = (new Date(d.setDate(first - 1))).toUTCString();
+	// 	let week = [firstday];
+
+	// 	for(let i=0; i<21; i++) {
+	// 		let next = new Date(d.getTime());
+	// 		next.setDate(first+i);
+	// 		week.push({
+	// 			dow: weekdays[next.getDay()],
+	// 			date: next.getDate(),
+	// 			month: months[next.getMonth()]
+	// 		});
+	// 	}
+	// 	return week;
+	// }
+	// Get Week Range
+	function getCurrentDates(numOfWeeks) {
+		const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
+		const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+		let numOfDays = numOfWeeks * 7;
+		let days = [];
+		let today = new Date;
+		let firstDay = today.getDate() - today.getDay();
+		
+		for(let i=0; i<numOfDays; i++) {		 
+			let nextDate = new Date(today.getTime()); 
+			nextDate.setDate(firstDay+i);
+			days.push({
+				dow: weekdays[nextDate.getDay()],
+				date: nextDate.getDate(),
+				month: months[nextDate.getMonth()],
+				year: nextDate.getFullYear()
+			});
+		}
+		return days;
 
+	}
 	function getDateFormats(meetup) {
 		const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 		const weekdays = ['Sunday','Monday','Tueday','Wednesday','Thursday','Friday','Saturday'];

From fb499f94c470e0023656a655c85c20321bd123a5 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Sun, 7 Apr 2019 12:30:01 -0700
Subject: [PATCH 16/20] Removed comments

---
 custom.js | 47 ++---------------------------------------------
 1 file changed, 2 insertions(+), 45 deletions(-)

diff --git a/custom.js b/custom.js
index 35a9640..c16db3b 100644
--- a/custom.js
+++ b/custom.js
@@ -8,23 +8,13 @@
 	// get week range for meetups
 	let days = getCurrentDates(2);
 	let today = new Date;
-	// let firstDow = today.getDate() - days[0].date + 1;
-	// let lastDow = days[days.length -1].date - today.getDate(); // next week Saturday
-	// let firstDow = 0;
 	let lastDow = 14 - today.getDay();
-	console.log(days);
-	console.log('todays date', today.getDate());
-	// console.log(firstDow, lastDow);
-	// let firstDow = 7;
-	// let lastDow = 28;
 	const api = {};
 		api.group = 'LearnTeachCode';
-		// api.perPage = 21; 
 		api.offset = 0;
 		api.path = 'https://api.meetup.com/2/events?&sign=true&photo-host=public';
-		// api.startWeekDate = firstDow + 'd'; //-4d, 
 		api.startWeekDate = '0';
-		api.endWeekDate = lastDow + 'd'; // 23
+		api.endWeekDate = lastDow + 'd';
 		api.status = 'upcoming';
 		api.url = api.path + '&group_urlname=' + api.group + '&status=' + api.status + '&time=' + api.startWeekDate + ',' + api.endWeekDate;
 		api.err = "Error occurred processing Meetup API URL";
@@ -42,7 +32,6 @@
 
 	function processData(data) {
 		data.days = getCurrentDates(2);
-		console.log(data);
 		data.results.forEach( function( meetup, index ) {
 			// Get event formatted dates and time
 			data.results[index].d = getDateFormats( meetup );
@@ -164,19 +153,10 @@
 	function listMeetupsinWeekView(data) {
 
 		let days = data.days;
-		console.log('testing', days);
 		let meetups = data.results;
 
-		// REMOVE UNNECESSARY, COMBINE with DATE FUNCTION
-		// let today = new Date();
-		// let maxDay = new Date(today.getDate()+5);
-		// let maxTime = maxDay.getTime(); //compare by utc time
-
-		// let filteredMeetups = meetups.filter((meetup) => meetup.time >= maxTime);
-
 		let meetupsByDay = getWeekFormattedMeetups(meetups);
 
-//COMBINE BELOW 
 		for(let i=0; i <= 6; i++) {
 			let week1div = '<div class="day" id="' + days[i].dow.toLowerCase() + days[i].date + '"></div>';
 			document.querySelector('#firstweek').insertAdjacentHTML('beforeend', week1div);
@@ -196,7 +176,6 @@
 				+ weekday.month.substring(0,3) + ' ' 
 				+ weekday.date
 				+ '</div>';
-				console.log(weekday);
 			if(meetupString) {
 				formattedWeek += meetupString.join('');	
 
@@ -224,7 +203,6 @@
 			let formattedMeetup = '<li id="meetup-' + meetup.id + '" class="week-meetup">'
 			+ '<div class="week-time">' + d.time + '</div>'
 			+ '<div class="week-infobox">' 
-			// + ' <div class="date">' + d.dowFull + ' ' + d.day + '</div>'
 			+ ' <div class="title"><a href="' + meetup.event_url + '">' + meetup.name + '</a></div>'
 			+ ' <div class="week-city">' + meetup.venue.city + ' - ' + meetup.venue.name + '</div>'
 			+ '</div>'
@@ -264,28 +242,7 @@
 		});
 		return formattedMeetups;
 	}
-// ADD TO DATE FUNCTION
-	// Get Week Range
-	// function getWeekRange() {
-	// 	const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
-	// 	const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-	// 	let d = new Date; //get current date
-
-	// 	let first = d.getDate() - d.getDay(); //date - dow in num 22 - 5 = 17
-	// 	let firstday = (new Date(d.setDate(first - 1))).toUTCString();
-	// 	let week = [firstday];
-
-	// 	for(let i=0; i<21; i++) {
-	// 		let next = new Date(d.getTime());
-	// 		next.setDate(first+i);
-	// 		week.push({
-	// 			dow: weekdays[next.getDay()],
-	// 			date: next.getDate(),
-	// 			month: months[next.getMonth()]
-	// 		});
-	// 	}
-	// 	return week;
-	// }
+
 	// Get Week Range
 	function getCurrentDates(numOfWeeks) {
 		const weekdays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

From 19c513f83114c35dbed39e2d3739ad0e31dd5de5 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Sun, 7 Apr 2019 12:32:08 -0700
Subject: [PATCH 17/20] Merge branch wip/calendarview/refactor

---
 custom.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/custom.js b/custom.js
index c16db3b..a7bb933 100644
--- a/custom.js
+++ b/custom.js
@@ -4,9 +4,7 @@
 		ltc.meetups = [];
 		ltc.markers = {};
 	
-//COMBINE WITH DATE FUNCTION
 	// get week range for meetups
-	let days = getCurrentDates(2);
 	let today = new Date;
 	let lastDow = 14 - today.getDay();
 	const api = {};

From e4f88fb4c47b52b0460db2ab2da36840ea4f613e Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Sat, 20 Apr 2019 12:34:01 -0700
Subject: [PATCH 18/20] Adding state tracking for list/week view toggle

---
 custom.js  | 24 ++++++++++++++----------
 index.html |  4 ++--
 style.css  |  7 ++++---
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/custom.js b/custom.js
index a7bb933..9053c73 100644
--- a/custom.js
+++ b/custom.js
@@ -304,16 +304,20 @@
 		getData( api.url, processData, api.err);
 
 		// Toggle between calendar and list views
-		$( "#weekbutton" ).on('click', function() {     
-			$('.listview').hide();
-			$('.weekview').show();
-			$('.dots').show();
-		});
-
-		$( "#listbutton" ).on('click', function() {     
-			$('.weekview').hide();
-			$('.listview').show();
-			$('.dots').hide();
+		
+		$('.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();
+			}
 		});
 
 		// Click Event for Load More
diff --git a/index.html b/index.html
index 44824c4..31466a8 100644
--- a/index.html
+++ b/index.html
@@ -37,8 +37,8 @@ <h2>Upcoming Events:</h2>
 		<div id="mapid"></div>
 
 		<div class='views'>
-			<img class='view' src='./listview.png' alt='list view' id='listbutton'>
-			<img class='view' src='./weekview.png' alt='week view' id='weekbutton'>
+			<span class='view showing' id='listbutton'>List View</span>
+			<span class='view' id='weekbutton'>Week View</span>
 		</div>
 
 		<div class='weekview slider'>
diff --git a/style.css b/style.css
index 2efa37c..5fa9e3c 100644
--- a/style.css
+++ b/style.css
@@ -92,16 +92,17 @@ section {
 .views {
   width: 100%;
   padding: 5px;
+  margin: 25px 0;
 }
 .view {
-  margin: 5px;
   padding: 5px;
 }
-.view:hover {
-  box-shadow: 1px 1px 1px #ccc;
+.showing {
+  color:  rgba(183, 73, 73);;
   transform: scale(1.015);
 }
 
+
 /** WEEK VIEW **/
 .weekview {
   position: relative;

From 67dcc59ed9d3f7c436e1c79c2fa79edb6281a23c Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Sat, 20 Apr 2019 12:38:19 -0700
Subject: [PATCH 19/20] Adding min-height to weekview and removing .png files

---
 listview.png | Bin 2863 -> 0 bytes
 style.css    |   2 ++
 weekview.png | Bin 2927 -> 0 bytes
 3 files changed, 2 insertions(+)
 delete mode 100644 listview.png
 delete mode 100644 weekview.png

diff --git a/listview.png b/listview.png
deleted file mode 100644
index d9100f54ddad0ccc4dfebc705d4c1ece50f7e854..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/style.css b/style.css
index 5fa9e3c..ee297e2 100644
--- a/style.css
+++ b/style.css
@@ -107,11 +107,13 @@ section {
 .weekview {
   position: relative;
   display: none;
+  min-height: 250px;
 }
 .week {
   display: flex;
   flex-flow: row nowrap;
   flex: 2 50% auto;
+  min-height: 250px;
 }
 .day {
   border: 1px solid #ccc;
diff --git a/weekview.png b/weekview.png
deleted file mode 100644
index 0d279fa46cc50feb989526e3bdc03d7d10e3d790..0000000000000000000000000000000000000000
GIT binary patch

From 72e6c0b690c5991eebbdfc2e2896d679840c0573 Mon Sep 17 00:00:00 2001
From: itsevalieu <itsevalieu@gmail.com>
Date: Tue, 23 Apr 2019 21:00:48 -0700
Subject: [PATCH 20/20] Issue 24, refactor click function for toggling meetup
 views

---
 custom.js  | 18 +++++-------------
 index.html | 28 +++++++++++++++-------------
 style.css  | 23 +++++++++++++++++------
 3 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/custom.js b/custom.js
index 9053c73..5b46448 100644
--- 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
index 31466a8..f37b2e2 100644
--- 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
index ee297e2..582af4c 100644
--- 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;
 }
 
