RESPONSIVE EVENTS LIST--Need help

I have html and css but am in need of js to complete event list. I have my API key and Cal ID but am unfamiliar in how to link the js to the html to display the info in the selected areas of my cards rather than just a list of events in the body. Any help is appreciated.

<!DOCTYPE html>
<html>
<head>
	
<!--META-->	
  <meta charset="UTF-8">
  <meta name="description" content="...">
  <meta name="keywords" content="...">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
<!--LINKS-->
	
	<!--Bootstrap CSS-->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	
</head>
<body style="background-color:white;">

<div class="card-wrapper">
	
	<!--Card Container-->
	<div class="card-container">
		<div class="front">
			<div class="ev-image">
				<div class="date-box">
					<div class="ev-day">01</div>
					<div class="ev-month">Jan</div>
				</div>
			</div>
			<div class="ev-body">
				<div class="ev-title">Event Title Here</div>
				<div class="ev-location">Event Location</div>
			</div>
		</div>
			<div class="front back">Hello</div>
	</div>
	<!--End Card Container-->
	
	<div class="card-container">
			<div class="front"></div>
			<div class="front back"></div>
	</div>
	
	<div class="card-container">
			<div class="front"></div>
			<div class="front back"></div>
	</div>
<table id="cal">
</table>
</div>
</body>
</html>
.ev-body{
	padding:10px;
	display:flex;
	justify-content:left;
	align-items:left;
	flex-direction:column;
	margin:20px;
}
.ev-location{
	color:white;
	font-weight:400;
	font-size:.8em;
	letter-spacing:1px;
	text-transform:uppercase;
}
.ev-title{
	color:white;
	font-weight:700;
	font-size:1.5em;
	letter-spacing:1px;
	text-transform:uppercase;
	margin-bottom:5px;
}
.date-box{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	margin-left:40px;
	background-color:#125676;
	height:80px;
	width:80px;
}
.ev-day{
	color:white;
	font-size:2.2em;
	font-weight:700;
	margin-bottom:-10px;
}
.ev-month{
	color:white;
	font-size:1em;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:1px;
}
.ev-image{
	display:flex;
	background-color:orange;
	height:50%;
	background-image:url(https://img.cinemablend.com/filter:scale/quill/c/c/0/7/2/9/cc07292d3e1177eb1f3a646ad7f30463180b32fe.jpg?mw=600);
	background-repeat:no-repeat;
	background-size:cover;
}
.card-wrapper{
	font-family:arial;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
}
.card-container{
	margin:20px;
  cursor: pointer;
  height: 400px;
  perspective: 500;
  position: relative;
  width: 350px;
  transform-style: preserve-3d;
  transition: all .5s ease-in-out;
	box-shadow:0px 4px 8px 0px grey;
	margin:20px;
}

.card-container:hover {
  transform: rotateY(180deg);
}
.front {
	background:#125676;
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
	outline: 0px solid grey;
	outline-offset:-10px;
}
.back {
	display:flex;
  background:tomato;
  color:white;
  text-align: center;
  transform: rotateY(180deg);
	align-items:center;
	justify-content:center;
}

This code creates a list but i dont know how to add it into my html elements. Im new at this with JS…

var GoogleCalendarEvents = (function () {
	"use strict";
	class GoogleCalendarEvents {
		/**
		 * GoogleCalendarEvents constructor
		 *
		 * @param {string} key
		 */
		constructor(key) {
			this._key = key;
			const startOfToday = new Date();

			startOfToday.setHours(0, 0, 0, 0);
			// Default options
			this._calendarId = null;
			this._maxResults = 10;
			this._momentDateFormat = "dddd, MMMM Do YYYY";
			this._momentTimeFormat = "h:mm a";
			this._orderBy = "startTime";
			this._q = null;
			this._showDeleted = false;
			this._singleEvents = true;
			this._timeMax = null;
			this._timeMin = startOfToday.toISOString();
			this._timeZone = null;
			this._updatedMin = null;

			this._metaDate = "cant figure this out";
		}
		/**
		 * Calendar identifier.
		 * Default: not defined
		 *
		 * @param {string} calendarId
		 * @return {GoogleCalendarEvents}
		 */
		calendarId(calendarId) {
			this._calendarId = calendarId;
			return this;
		}
		/**
		 * Maximum number of events returned on one result page. The number of events in the resulting page may be less than this value,
		 * or none at all, even if there are more events matching the query.
		 * Default: 10
		 * Acceptable Values: 1 - 2500
		 *
		 * @param {int} maxResults
		 * @return {GoogleCalendarEvents}
		 */
		maxResults(maxResults) {
			if (maxResults < 1 || maxResults > 2500) {
				throw new Error(
					"Invalid maxResults value. Acceptable values are: 1 - 2500."
				);
			}
			this._maxResults = maxResults;
			return this;
		}
		/**
		 * MomentJS format for the date display.
		 * Default: "dddd, MMMM Do YYYY"
		 *
		 * @param {string} momentDateFormat
		 * @return {GoogleCalendarEvents}
		 */
		momentDateFormat(momentDateFormat) {
			this._momentDateFormat = momentDateFormat;
			return this;
		}
		/**
		 * MomentJS format for the time display.
		 * Default: "h:mm a"
		 *
		 * @param {string} momentTimeFormat
		 * @return {GoogleCalendarEvents}
		 */
		momentTimeFormat(momentTimeFormat) {
			this._momentTimeFormat = momentTimeFormat;
			return this;
		}
		/**
		 * The order of the events returned in the result.
		 * Default: "startTime"
		 * Acceptable values: "startTime", "updated"
		 *
		 * @param {string} orderBy
		 * @return {GoogleCalendarEvents}
		 */
		orderBy(orderBy) {
			const acceptableValues = ["startTime", "updated"];
			if (!acceptableValues.includes(orderBy)) {
				throw new Error(
					'Invalid orderBy value. Acceptable values are: "startTime", "updated".'
				);
			}
			this._orderBy = orderBy;
			return this;
		}
		/**
		 * Free text search terms to find events that match these terms in any field, except for extended properties.
		 * Default: not defined
		 *
		 * @param {string} q
		 * @return {GoogleCalendarEvents}
		 */
		q(q) {
			this._q = q;
			return this;
		}
		/**
		 * Whether to include deleted events (with status equals "cancelled") in the result.
		 * Cancelled instances of recurring events (but not the underlying recurring event) will still be included if showDeleted and singleEvents are both False.
		 * If showDeleted and singleEvents are both True, only single instances of deleted events (but not the underlying recurring events) are returned.
		 * Default: false
		 *
		 * @param {boolean} showDeleted
		 * @return {GoogleCalendarEvents}
		 */
		showDeleted(showDeleted) {
			this._showDeleted = showDeleted;
			return this;
		}
		/**
		 * Whether to expand recurring events into instances and only return single one-off events and instances of recurring events,
		 * but not the underlying recurring events themselves.
		 * Default: true
		 *
		 * @param {boolean} singleEvents
		 * @return {GoogleCalendarEvents}
		 */
		singleEvents(singleEvents) {
			this._singleEvents = singleEvents;
			return this;
		}
		/**
		 * Upper bound (exclusive) for an event's start time to filter by.
		 * Must be an RFC3339 timestamp with mandatory time zone offset, for example, 2011-06-03T10:00:00-07:00, 2011-06-03T10:00:00Z.
		 * Milliseconds may be provided but are ignored. If timeMin is set, timeMax must be greater than timeMin.
		 * Default: not defined
		 *
		 * @param {string|Date} timeMax
		 * @return {GoogleCalendarEvents}
		 */
		timeMax(timeMax) {
			this._timeMax = timeMax instanceof Date ? timeMax.toISOString() : timeMax;
			return this;
		}
		/**
		 * Lower bound (exclusive) for an event's end time to filter by.
		 * Must be an RFC3339 timestamp with mandatory time zone offset, for example, 2011-06-03T10:00:00-07:00, 2011-06-03T10:00:00Z.
		 * Milliseconds may be provided but are ignored. If timeMax is set, timeMin must be smaller than timeMax.
		 * Default: beginning of today
		 *
		 * @param {string|Date} timeMin
		 * @return {GoogleCalendarEvents}
		 */
		timeMin(timeMin) {
			this._timeMin = timeMin instanceof Date ? timeMin.toISOString() : timeMin;
			return this;
		}
		/**
		 * Time zone used in the response.
		 * Default: the time zone of the calendar
		 *
		 * @param {string} timeZone
		 * @return {GoogleCalendarEvents}
		 */
		timeZone(timeZone) {
			this._timeZone = timeZone;
			return this;
		}
		/**
		 * Lower bound for an event's last modification time (as a RFC3339 timestamp) to filter by. When specified,
		 * entries deleted since this time will always be included regardless of showDeleted.
		 * Default: not defined
		 *
		 * @param {string|Date} updatedMin
		 * @return {GoogleCalendarEvents}
		 */
		updatedMin(updatedMin) {
			this._updatedMin =
				updatedMin instanceof Date ? updatedMin.toISOString() : updatedMin;
			return this;
		}
		/**
		 * Render the calendar events.
		 *
		 * @param {string|Node|NodeList|jQuery} target
		 */
		async render(target) {
			if (!this._key) {
				throw new Error("You must provide an apiKey.");
			}
			if (!this._calendarId) {
				throw new Error("You must provide a calendarId.");
			}
			// Get the events
			const url = `https://www.googleapis.com/calendar/v3/calendars/${this._calendarId}/events`;
			const params = {
				key: this._key,
				maxResults: this._maxResults,
				orderBy: this._orderBy,
				q: this._q,
				showDeleted: this._showDeleted,
				singleEvents: this._singleEvents,
				timeMax: this._timeMax,
				timeMin: this._timeMin,
				timeZone: this._timeZone,
				updatedMin: this._updatedMin
			};
			const response = await this._get(url, params);
			const events = response.items || [];
			// Render the events
			const ul = this._renderList(events);
			const element = this._parseTarget(target);
			element.appendChild(ul);
		}
		/**
		 * Send a get request to the provided url.
		 *
		 * @param {string} url
		 * @param {{}} parameters
		 * @return {Promise}
		 * @private
		 */
		_get(url, parameters) {
			return new Promise((resolve, reject) => {
				const xhr = new XMLHttpRequest();
				Object.keys(parameters).forEach((key) => {
					if (parameters[key] === null) {
						delete parameters[key];
					}
				});
				const query = Object.keys(parameters).map(
					(key) => key + "=" + parameters[key]
				);
				url = query.length ? url + "?" + query.join("&") : url;
				xhr.onload = () => resolve(JSON.parse(xhr.responseText));
				xhr.ontimeout = () =>
					reject(new Error(`The request for "${url}" timed out.`));
				xhr.onerror = () => reject(new Error(xhr.statusText));
				xhr.open("GET", url, true);
				xhr.send(null);
			});
		}
		/**
		 * Parse target element for rendering the events list.
		 * Default: not defined
		 * Acceptable values:
		 *  string - the selector of the target element
		 *  NodeList - the NodeList object representing the target element (will take the first matching element)
		 *  Node - the Node object referencing the target element.
		 *  jQuery - the jQuery object containing the target element (will take the first matching element)
		 *
		 * @param {string|Node|NodeList|jQuery} target
		 * @return {Node}
		 * @private
		 */
		_parseTarget(target) {
			if (!target) {
				throw new Error(
					"You must provide a target element for Google Calendar Events."
				);
			}
			if (typeof target === "string") {
				return document.querySelector(target);
			} else if (target instanceof Node) {
				return target;
			} else if (target instanceof NodeList && target.length) {
				return options.target[0];
			} else if (
				typeof jQuery === "function" &&
				target instanceof jQuery &&
				typeof target.length
			) {
				return target[0];
			} else {
				throw new Error(`Unsupported value for the target: ${target}.`);
			}
		}
		/**
		 * Render the google calendar events list.
		 *
		 * @param {[]} events
		 * @return {Element}
		 * @private
		 */
		_renderList(events) {
			const lib = this;
			const ul = document.createElement("div");
			ul.setAttribute("class", "event-list");
			events.forEach((event) => {
				const li = document.createElement("div");
				li.setAttribute("class", "event-list-item");
				li.setAttribute("itemscope", "");
				li.setAttribute("itemtype", "http://schema.org/Event");
				lib._renderListItemMeta(event, li);
				lib._renderListItemTitle(event, li);
				lib._renderListItemDate(event, li);
				lib._renderListItemLocation(event, li);
				lib._renderListItemDescription(event, li);
				ul.appendChild(li);
			});
			return ul;
		}

		/**
		 * Create the nodes for the Event's meta
		 *
		 * @param {{}} event
		 * @param {Node} li
		 * @private
		 */
		_renderListItemMeta(event, li) {
			const meta = document.createElement("meta");
			meta.setAttribute("content", this._metaDate);
			meta.setAttribute("itemprop", "startDate");

			li.appendChild(meta);
		}

		/**
		 * Create the nodes for the Event's title
		 *
		 * @param {{}} event
		 * @param {Node} li
		 * @private
		 */
		_renderListItemTitle(event, li) {
			if (event.summary) {
				const title = document.createElement("h4");
				title.setAttribute("class", "event-title");
				title.setAttribute("itemprop", "name");
				if (event.htmlLink) {
					const link = document.createElement("a");
					link.setAttribute("href", event.htmlLink);
					//	link.setAttribute('rel', event.summary);
					link.setAttribute("rel", "noopener noreferrer");
					link.setAttribute("target", "blank");
					link.setAttribute("itemprop", "url");
					link.innerText = event.summary;
					title.appendChild(link);
				} else {
					title.innerText = event.summary;
				}
				li.appendChild(title);
			}
		}
		/**
		 * Create the nodes for the Event's date
		 *
		 * @param {{}} event
		 * @param {Node} li
		 * @private
		 */
		_renderListItemDate(event, li) {
			let formatted = "";
			const { date, dateTime } = event.start;
			if (date) {
				if (moment) {
					formatted = moment(date).format(this._momentDateFormat);
				} else {
					formatted = this._formatDate(date);
				}
			}
			if (dateTime) {
				const userTimeZone = this._timeZone || moment.tz.guess();
				if (moment && moment.tz) {
					formatted = moment
						.tz(dateTime, userTimeZone)
						.format(this._momentDateFormat + ", " + this._momentTimeFormat);
				} else if (moment) {
					formatted = moment(dateTime).format(
						this._momentDateFormat + ", " + this._momentTimeFormat
					);
				} else {
					formatted =
						this._formatDate(dateTime) +
						", " +
						this._formatTime(dateTime, userTimeZone);
				}
			}
			if (formatted) {
				const dateElement = document.createElement("div");
				dateElement.setAttribute("class", "event-date");
				dateElement.innerText = formatted;
				li.appendChild(dateElement);
			}
		}
		/**
		 * Create the nodes for the Event's location
		 *
		 * @param {{}} event
		 * @param {Node} li
		 * @private
		 */
		_renderListItemLocation(event, li) {
			if (event.location) {
				const location = document.createElement("div");
				location.setAttribute("class", "event-location");
				location.setAttribute("itemprop", "location");
				location.setAttribute("itemscope", "");
				location.setAttribute("itemtype", "http://schema.org/Place");
				location.innerText = event.location;
				li.appendChild(location);
			}
		}
		/**
		 * Create the nodes for the Event's description
		 *
		 * @param {{}} event
		 * @param {Node} li
		 * @private
		 */
		_renderListItemDescription(event, li) {
			if (event.description) {
				const description = document.createElement("description");
				description.setAttribute("class", "event-description");
				description.innerHTML = event.description;
				li.appendChild(description);
			}
		}
		/**
		 * Format the date (without moment)
		 *
		 * @param {string|Date} date
		 * @private
		 */
		_formatDate(date) {
			date = date instanceof Date ? date : new Date(date);
			return date.toLocaleDateString([], {
				weekday: "long",
				year: "numeric",
				month: "long",
				day: "numeric"
			});
		}
		/**
		 * Format the time (without moment)
		 *
		 * @param {string|Date} date
		 * @param {string} timeZone
		 * @private
		 */
		_formatTime(date, timeZone) {
			date = date instanceof Date ? date : new Date(date);
			return date.toLocaleTimeString([], {
				timeZone: timeZone,
				hour: "numeric",
				minute: "2-digit",
				hourCycle: "h12"
			});
		}
	}
	return GoogleCalendarEvents;
})();

// options start here
new GoogleCalendarEvents("")
	.calendarId(
		""
	)
	.maxResults(6)
	.momentDateFormat("MMM D")
	.render(".google_cal");

You might struggle getting help with this. If you don’t know JavaScript, you should either learn it (highly recommended) or hire someone to do it for you. It doesn’t look like a freecodecamp project.

Thank you, yes that is on my list to learn next, just wanted to try to get this piece of the puzzle moving along too for now. Do you know of any good tutorials?

I know a great one. I used it myself to learn almost everything I know :slight_smile: