Make a navigable presentation from a HTML page

presentation.js

const sections = document.getElementsByTagName("section");
let currentSectionIndex = 0

// Add style
const style = `
section {
	padding: 10px 0;
	height: 100vh;
}
`
let styleElement = document.createElement("style")
styleElement.innerText = style
document.head.appendChild(styleElement)

/**
* Scrolls to section with the number `index`.
*/
function scrollToSection(index) {
	sections[index].scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
}

/**
* Sets `currentSectionIndex` to the new value provided in `index` and scrolls to this section.
*/
function setCurrentSectionIndex(index) {
	// Clamp index
	if (index < 0) {
	    index = 0
	} else if (index >= sections.length) {
	    index = sections.length - 1
	}

	currentSectionIndex = index
	scrollToSection(currentSectionIndex)
}    

// Go one slide forward when the users presses ->
document.addEventListener('keyup', (e) => {
	if (e.code != 'ArrowRight') {
		return
	}
	setCurrentSectionIndex(currentSectionIndex + 1) 
})

// Go one slide forward when the users presses <-
document.addEventListener('keyup', (e) => {
	if (e.code != 'ArrowLeft') {
		return
	}
	
	setCurrentSectionIndex(currentSectionIndex - 1)
})