Source: fortune.js

// fortune.html onload module script

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

import { getHoroscope, getNoodleData } from './genHoroscope.js';
import { getLocalStorage } from './utils.js';

// upon loading, call updatenoodle, passing in the noodleIndex from local storage
document.addEventListener('DOMContentLoaded', init);

/** On load function */
async function init() {
	const dropbtn = document.getElementById('dropbtn');
	const noodleButtons = document.getElementsByClassName('noodleButton');
	const prevButton = document.getElementById('leftArrow');
	const nextButton = document.getElementById('rightArrow');
	const noodleImg = document.getElementById('noodle-image');

	dropbtn.addEventListener('click', buttonFunct);

	// Makes prevButton go to previous noodle fortune
	prevButton.addEventListener('click', () => {
		if (noodleIndex == 0) {
			noodleIndex = 11;
		} else {
			noodleIndex--;
		}
		console.log(noodleIndex);
		updateNoodle(noodleIndex);
	});

	// Makes nextButton got o next noodle fortune
	nextButton.addEventListener('click', () => {
		if (noodleIndex == 11) {
			noodleIndex = 0;
		} else {
			noodleIndex++;
		}
		updateNoodle(noodleIndex);
	});

	for (let i = 0; i < noodleButtons.length; i++) {
		noodleButtons[i].addEventListener('click', function () {
			updateNoodle(i);
			noodleIndex = i;
		});
	}

	let noodleIndex = getLocalStorage('myNoodleIndex');
	// typecase noodleIndex to int
	noodleIndex = parseInt(noodleIndex);
	updateNoodle(noodleIndex);
}

/**
 * @param {int} newNoodleIndex The index of the noodle to be displayed
 */
async function updateNoodle(newNoodleIndex) {
	const noodleData = await getNoodleData();
	document.getElementById('noodle-image').src = noodleData[newNoodleIndex].path;
	document.getElementById('noodle-image').alt =
		noodleData[newNoodleIndex].noodleName;
	document.getElementById('fortuneText').innerText = await getHoroscope(
		newNoodleIndex + 1
	);

	return newNoodleIndex;
}

/** Function to toggle dropbown */
function buttonFunct() {
	document.getElementById('myDropdown').classList.toggle('show');
}