Styled upcoming events with date cards and added name of venue

Author: Jason Bazalar

custom.js

@@ -56,6 +56,7 @@
 	 */
 	function getFormattedMeetups(meetups) {
 		var formattedMeetups = [];
+
 		// For each event create a list item
 		meetups.filter( function( meetup, index) {
 			// Setup event date info
@@ -64,16 +65,23 @@
 			d.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 			d.month = d.months[d.date.getMonth()];
 			d.d = d.date.getDate();
+			d.wkdys = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
+			d.dow = d.wkdys[ d.date.getDay() ];
 			d.day = (d.d > 9)? d.d : "0"+d.d;
 			d.time = formatAMPM( d.date );
 
 			// Formant and add current event to list
 			formattedMeetups.push(
-				'<li>'
-				+ d.month + ' ' + d.day
-				+ ' (' + d.time+ ') - '
-				+ meetup.venue.city + ': '
-				+'<a href="'+meetup.event_url+'">'+meetup.name+'</a>'
+				'<li class="meetup">'
+				+ '<div class="datebox">'
+				+ ' <div class="dow">' + d.dow + '</div>'
+				+ ' <div class="date">' + d.month + ' ' + d.day + '</div>'
+				+ ' <div class="time">' + d.time	+ '</div>'
+				+ '</div>'
+				+ '<div class="infobox">'
+				+ ' <div class="title"><a href="' + meetup.event_url + '">' + meetup.name + '</a></div>'
+				+ ' <div class="city">' + meetup.venue.city + ' - ' + meetup.venue.name + '</div>'
+				+ '</div>'
 				+'</li>'
 			);
 		});

style.css

@@ -67,6 +67,49 @@ section {
 }
 
 /** UPCOMING EVENTS **/
+.meetups {
+	list-style: none;
+	padding-left: 0px;
+}
+
+.meetup {
+	display: grid;
+	grid-template-columns: 9% repeat(6, 10%);
+	margin-bottom: 0.4rem;
+}
+
+.datebox {
+	display: table-cell;
+    border: 1px solid #b74949;
+    margin-right: 5px;
+    font-size: 13px;
+	border-radius: 5px;
+	text-align: center;
+	line-height: 1.3;
+}
+.datebox .dow {
+	background-color: rgba(183, 73, 73, 0.30);
+	padding: 3px 3px 1px 0px;
+	text-transform: uppercase;
+	font-weight: 600;
+}
+.datebox .date {
+	padding: 3px 3px 0 3px;
+}
+.datebox .time {
+	padding: 0 3px 2px;
+}
+
+.infobox {
+	padding-left: 10px;
+	grid-column-start: 2;
+	grid-column-end: 10;
+}
+.infobox .city {
+	font-style: italic;
+    font-size: 16px;
+}
+
 .load-more {
 	display: flex;
 	list-style: none;
@@ -77,7 +120,6 @@ section {
 	margin: 0 auto;
 	border: 1px solid #b74949;
 	padding: 10px;
-	font-size: 1em;
 	text-decoration: none;
 }
 .load-more a:hover {
@@ -102,5 +144,18 @@ section {
 	ul.meetups li a {
 		display: block;
 	}
-
+	
+	.datebox {
+		grid-column-start: 1;
+		grid-column-end: 3;
+	}
+	.infobox {
+		grid-column-start: 3;
+		grid-column-end: 10;
+	}
+	
+	.load-more a {
+		font-size: 2em;
+		padding: 10px 25px;
+	}
 }