website/scripts/visuals.js

/**
 **-
 * JavaScript providing functions for
 * generating inset HTML elements 
 * required by an article
 *
 * Visuals includes items that stand out
 * on the page and includes images and
 * the navigation buttons at the bottom
 * of the page
 *
 * Author - Philip Osztromok
 *
 * 27 March 2022
 *+
*/

// Image functions
function addImageWithCaption(image, caption) {
	const newFigure = document.createElement("figure")
	const newImage = document.createElement("img")
	const newCaption = document.createElement("figcaption")
	newImage.setAttribute("src", image)
	newImage.setAttribute("alt", caption)
	newCaption.innerHTML = `${caption}`
	
	newFigure.append(newImage)
	newFigure.append(newCaption)
	
	return newFigure
}

// Button functions
function addButtonGroup(list) {
	const newButtonGroup = document.createElement("div")
	newButtonGroup.classList.add("btngroup")
	console.log(list);
	for (let index=0; index < list.length; index=index+2) {
		let button=list[index];
		let url="window.location.href='" + list[index+1] + "'"
		let buttonItem = document.createElement("button")
		buttonItem.classList.add("button")
		buttonItem.setAttribute("onclick", url)
		buttonItem.innerHTML = `
			${button}
		`
		newButtonGroup.append(buttonItem)
	}
	return newButtonGroup
}

function addSmallButtonGroup(list) {
	const newButtonGroup = document.createElement("div")
	newButtonGroup.classList.add("smallbtngroup")
	for (let index=0; index < list.length; index=index+2) {
		let button=list[index];
		let url="window.location.href='" + list[index+1] + "'"
		let buttonItem = document.createElement("button")
		buttonItem.classList.add("smallbutton")
		buttonItem.setAttribute("onclick", url)
		buttonItem.innerHTML = `
			${button}
		`
		newButtonGroup.append(buttonItem)
	}
	return newButtonGroup
}

export { addImageWithCaption, addButtonGroup, addSmallButtonGroup }

/*
 *
 * helper functions
 *
*/