From de6e3345a2375ed81b59a65bfb8c47aaec4b7e71 Mon Sep 17 00:00:00 2001 From: itsevalieu 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 @@

Upcoming Events:

+
+ list view + week view +
+

Visit our Meetup.com page for details on our next meetings.

diff --git a/listview.png b/listview.png new file mode 100644 index 0000000000000000000000000000000000000000..d9100f54ddad0ccc4dfebc705d4c1ece50f7e854 GIT binary patch literal 2863 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 N002ovPDHLkV1g)hOPK%w literal 0 HcmV?d00001 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 literal 2927 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 Z4FIbLK5W2J0p|b!002ovPDHLkV1gRmZodEk literal 0 HcmV?d00001 From 6428fc72e2921ac13864bee5ad02936c9bf8adf2 Mon Sep 17 00:00:00 2001 From: itsevalieu 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 @@

Upcoming Events:

- list view - week view + list view + week view +
+ +
    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 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 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 @@

    Upcoming Events:

      From 5edb15be40ec10684c5e8e4214079f2529b02a6f Mon Sep 17 00:00:00 2001 From: itsevalieu 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 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('
      ' + + week[i].dow.substring(0,3) + ' ' + + week[i].month.substring(0,3) + ' ' + + week[i].date + + '
      '); + } + + //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 = '
    • ' + + '
      ' + + '
      ' + d.dowFull + ' ' + d.day + '
      ' + + '
      ' + meetup.name + '
      ' + + '
      ' + meetup.venue.city + ' - ' + meetup.venue.name + '
      ' + + '
      ' + + '
      ' + + '
      ' + d.time + '
      ' + + '
      ' + +'
      • '; + + 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 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('
      ' - + week[i].dow.substring(0,3) + ' ' - + week[i].month.substring(0,3) + ' ' - + week[i].date - + '
      '); + let weekday = week[i]; + + let teststring = meetupsByDay[weekday.dow.substring(0,3)]; + let formattedWeek = '
      ' + + weekday.dow.substring(0,3) + ' ' + + weekday.month.substring(0,3) + ' ' + + weekday.date + + '
      ' + 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 = '
    • ' + '
      ' @@ -214,33 +224,11 @@ + '
      ' + d.time + '
      ' + '
      ' +'
      • '; - - 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 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 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 = '
      '; + document.querySelector('#firstweek').insertAdjacentHTML('beforeend', week1div); + } + for(let i=8; i <= 14; i++) { + let week2div = '
      '; + 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 = '
      ' + let dowDay = weekday.dow.substring(0,3) + weekday.date; + let teststring = meetupsByDay[dowDay]; + let formattedWeek = '
      ' + weekday.dow.substring(0,3) + ' ' + weekday.month.substring(0,3) + ' ' - + weekday.date - + '
      ' + + weekday.date + + '
      '; if(teststring) { formattedWeek += teststring.join(''); } else { - formattedWeek += 'No meetups! :('; - } - $('#' + weekday.dow.toLowerCase()).append(formattedWeek); - + formattedWeek += '
      No meetups!' - + '
      ' - + '
      ' + d.dowFull + ' ' + d.day + '
      ' + + '
      ' + d.time + '
      ' + + '
      ' + // + '
      ' + d.dowFull + ' ' + d.day + '
      ' + '
      ' + meetup.name + '
      ' - + '
      ' + meetup.venue.city + ' - ' + meetup.venue.name + '
      ' - + '
      ' - + '
      ' - + '
      ' + d.time + '
      ' + + '
      ' + meetup.venue.city + ' - ' + meetup.venue.name + '
      ' + '
      ' +''; - 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'); - @@ -42,14 +41,15 @@

      Upcoming Events:

      week view
      -