diff --git a/custom.js b/custom.js index c277d0e..5b46448 100644 --- a/custom.js +++ b/custom.js @@ -3,13 +3,18 @@ ltc.map; ltc.meetups = []; ltc.markers = {}; - + + // get week range for meetups + let today = new Date; + let lastDow = 14 - today.getDay(); const api = {}; api.group = 'LearnTeachCode'; - api.perPage = 15; 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 = '0'; + 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"; // Get Meetup Data @@ -24,6 +29,7 @@ } function processData(data) { + data.days = getCurrentDates(2); data.results.forEach( function( meetup, index ) { // Get event formatted dates and time data.results[index].d = getDateFormats( meetup ); @@ -33,6 +39,7 @@ // List new meetups listMeetups(data); mapMeetups(data); + listMeetupsinWeekView(data); } function mapMeetups(data){ @@ -128,7 +135,7 @@ if(data.meta.total_count > data.meta.count && data.meta.count >= api.perPage){ list += '
  • Load More
    • '; } - }else{ + } else{ // No upcoming events note list += '
  • No Meetups Currently Scheduled. Stay tuned.
    • '; } @@ -137,9 +144,72 @@ $('.load-more').remove(); // Add the list to the element - $(".meetups").append(list); + $(".listview").append(list); } + // Display Meetup Data in Week View + function listMeetupsinWeekView(data) { + + let days = data.days; + let meetups = data.results; + + let meetupsByDay = getWeekFormattedMeetups(meetups); + + for(let i=0; i <= 6; i++) { + let week1div = '
    '; + document.querySelector('#firstweek').insertAdjacentHTML('beforeend', week1div); + } + + for(let i=7; i <= 13; i++) { + let week2div = '
    '; + document.querySelector('#secondweek').insertAdjacentHTML('beforeend', week2div); + } + + for(let i=0; i < days.length; i++) { + let weekday = days[i]; + let dowDay = weekday.dow.substring(0,3) + weekday.date; + let meetupString = meetupsByDay[dowDay]; + let formattedWeek = '
    ' + + weekday.dow.substring(0,3) + ' ' + + weekday.month.substring(0,3) + ' ' + + weekday.date + + '
    '; + if(meetupString) { + formattedWeek += meetupString.join(''); + + } else { + formattedWeek += '
    No meetups!' + + '
    ' + d.time + '
    ' + + '
    ' + + '
    ' + meetup.name + '
    ' + + '
    ' + meetup.venue.city + ' - ' + meetup.venue.name + '
    ' + + '
    ' + +''; + + dayArrays[dowDay].push(formattedMeetup); + }); + return dayArrays; + } /** * formatEvents() will get a set of meetups and format accordingly * @param {meetups} @@ -155,7 +225,7 @@ // Formant and add current event to list formattedMeetups.push( - '
  • ' + '
  • ' + '
    ' + '
    ' + d.dow + '
    ' + '
    ' + d.month + ' ' + d.day + '
    ' @@ -171,6 +241,28 @@ return formattedMeetups; } + // 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 { meetupListItem.classList.remove('active'); }, 3000); }); + }); })(); diff --git a/index.html b/index.html index b401b9b..f37b2e2 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,6 @@ gtag('config', 'UA-118124010-1'); - @@ -37,7 +36,25 @@

    Upcoming Events:

    -
      +
      + List View + Week View +
      + +
      +
      + + +
      +
      +
      +
      + + +
      +
      + +

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

        @@ -71,5 +88,6 @@

        Stuff we do at Learn Teach Code:

        integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""> + diff --git a/slider.js b/slider.js new file mode 100644 index 0000000..130c095 --- /dev/null +++ b/slider.js @@ -0,0 +1,29 @@ +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'); + 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 25c6932..582af4c 100644 --- a/style.css +++ b/style.css @@ -15,6 +15,7 @@ body { a { color: #b74949; + cursor: pointer; } h1 { @@ -88,13 +89,94 @@ section { overflow-y: auto; } -/** UPCOMING EVENTS **/ -.meetups { +/** VIEW OPTIONS **/ +.views { + width: 100%; + padding: 5px; + margin: 25px 0; +} +.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 { + display: block; +} + +/** WEEK VIEW **/ +.weekview { + position: relative; + min-height: 250px; +} +.week { + display: flex; + flex-flow: row nowrap; + flex: 2 50% auto; + min-height: 250px; +} +.day { + border: 1px solid #ccc; + width: 15%; +} +/** 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; + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + overflow: hidden; list-style: none; - padding-left: 0px; + line-height: 18px; + margin: 5px; +} +.week-meetup-none { + border: none; +} +.week-meetup:hover { + transform: scale(1.015); +} +.week-time { + background-color: rgba(183, 73, 73, 0.3); + border-bottom: 1px solid #b74949; + border-radius: 5px 5px 0 0; + text-align: center; +} +.week-infobox { + padding: 5px; +} +.week-city { + font-style: italic; } -.meetup { +/** LIST VIEW MEETUPS **/ +.listview { + list-style: none; + padding-left: 0px; +} +.list-meetup { display: grid; grid-template-columns: 70px repeat(6, 10%); margin-bottom: 0.4rem; @@ -102,8 +184,7 @@ section { -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; } @@ -157,21 +238,113 @@ section { background: rgba(183, 73, 73, 0.3); } +/** SLIDER **/ +.slide { + display: none; +} + +.prev, .next { + 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; + transition: 0.6s ease; + user-select: none; + cursor: pointer; +} +.next { + right: -45px; + border-radius: 0 3px 3px 0; +} +.prev { + left: -45px; +} +.prev:hover, .next:hover { + background-color: rgba(183, 73, 73, 0.3); + color: white; + transform: scale(1.015); +} +.prev:focus, .next:focus { + outline: none; +} + +.dots { + text-align: center; + padding: 15px; +} +.dot { + background-color: #bbb; + border-radius: 50%; + display: inline-block; + cursor: pointer; + height: 15px; + width: 15px; + margin: 0 2px; + transition: background-color 0.6s ease; +} + +.dot:hover, .dot.active { + 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 { margin-bottom: 0; } - /** UPCOMING EVENTS **/ - ul.meetups { + /** VIEW OPTIONS **/ + .weekview { + flex-flow: column; + } + .day { + width: 100%; + } + + /** 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; } @@ -190,4 +363,7 @@ section { font-size: 2em; padding: 10px 25px; } + .week { + flex-flow: column nowrap; + } }