Source: about.js

// about.html onload script

// Make sure to document our code
// See examples:
// - https://jsdoc.app/howto-es2015-modules.html
// - https://jsdoc.app/howto-es2015-classes.html

let memberIndex = 0;
const members = [
	{
		name: 'Mark Lucernas',
		memberImage: '../img/mark-icon.jpeg',
		memberNoodleImg: '../img/ramen-icon-1.png',
		memberNoodleName: 'Ramen',
		description:
			'Mark is a third year studying computer science and is one of the team leads for our team.'
	},
	{
		name: 'Hieu Pham',
		memberImage: '../img/hieu-icon.jpeg',
		memberNoodleImg: '../img/ravioli-icon-1.png',
		memberNoodleName: 'Ravioli',
		description:
			'Hieu is another one of our team leads and is currently a second year studying computer science.'
	},
	{
		name: 'Xinle Yu',
		memberImage: '../img/henry-icon.jpg',
		memberNoodleImg: '../img/beef-noodle-soup-icon-1.png',
		memberNoodleName: 'Beef Noodle Soup',
		description:
			'Xinle (Henry) is a sophomore majoring in computer science, and he is a developer on the team.'
	},
	{
		name: 'Aaron Kann',
		memberImage: '../img/aaron-icon.jpg',
		memberNoodleImg: '../img/mac-and-cheese-icon-1.png',
		memberNoodleName: 'Mac and Cheese',
		description:
			"Aaron's role on the team is a developer, and he is a second year studying math and computer science."
	},
	{
		name: 'Steve Yin',
		memberImage: '../img/steve-icon.jpg',
		memberNoodleImg: '../img/udon-icon-1.png',
		memberNoodleName: 'Udon',
		description:
			'Steve is a developer on our team, and he is currently a second year majoring in computer engineering.'
	},
	{
		name: 'Darren Yu',
		memberImage: '../img/darren-icon.jpg',
		memberNoodleImg: '../img/instant-noodles-icon-1.png',
		memberNoodleName: 'Instant Noodles',
		description:
			'Darren is a second year computer science major, and he is the planner as well as developer for the team.'
	},
	{
		name: 'Holly Zhu',
		memberImage: '../img/holly-icon.png',
		memberNoodleImg: '../img/spaghetti-icon-1.png',
		memberNoodleName: 'Spaghetti',
		description:
			'Holly is a computer science major with a design minor, and she is the designer and a developer on our team.'
	},
	{
		name: 'Anthony Yao',
		memberImage: '../img/anthony-icon.jpg',
		memberNoodleImg: '../img/pho-icon-1.png',
		memberNoodleName: 'Pho',
		description:
			"Anthony's role on the team is a developer, and he is currently a sophomore majoring in computer science."
	},
	{
		name: 'Hanson Wang',
		memberImage: '../img/hanson-icon.png',
		memberNoodleImg: '../img/pad-thai-icon-1.png',
		memberNoodleName: 'Pad Thai',
		description:
			'Hanson is a math and computer science in his second year, and serves as a developer on the team.'
	}
];

/** Function to update member content */
function updateMember() {
	const currentMemeberImg = document.getElementById('current-member');
	currentMemeberImg.src = members[memberIndex].memberImage;
	currentMemeberImg.alt = members[memberIndex].name + "'s profile picture";

	const currentMemberNoodle = document.getElementById('member-noodle');
	currentMemberNoodle.src = members[memberIndex].memberNoodleImg;
	currentMemberNoodle.alt = members[memberIndex].memberNoodleName + ' icon';

	document.getElementById('member-name').innerText = members[memberIndex].name;
	document.getElementById('description').innerText =
		members[memberIndex].description;
}

/** Function to select next carousel content */
function nextMember() {
	memberIndex = (memberIndex + 1) % members.length;
	updateMember();
}

/** Function to select previous carousel content */
function prevMember() {
	memberIndex = (memberIndex - 1 + members.length) % members.length;
	updateMember();
}

const memberMenu = document.querySelectorAll('.member-menu img');

memberMenu.forEach((mem, idx) => {
	mem.addEventListener('click', () => {
		const currentMemeberImg = document.getElementById('current-member-dt');
		currentMemeberImg.src = members[idx].memberImage;
		currentMemeberImg.alt = members[idx].name + "'s profile picture";

		const currentMemberNoodle = document.getElementById('member-noodle-dt');
		currentMemberNoodle.src = members[idx].memberNoodleImg;
		currentMemberNoodle.alt = members[idx].memberNoodleName + ' icon';

		document.getElementById('member-name-dt').innerText = members[idx].name;
		document.getElementById('description-dt').innerText =
			members[idx].description;
	});
});

document.querySelector('.member-menu img').click();
updateMember();