Spindler_ES6_Functions.html

<!DOCTYPE html>
<html>
<head>
    <title>Lab #9</title>
</head>
<body>
<div id="todo"></div>
<script>
    let toDoListToPass = ['todo1', 'todo2', 'todo3', 'todo4', 'todo5']
    let headerToPass = "To-Do: "

    const addToDoHeader = (header) => {
        const toDoElement = document.getElementById('todo');
        if (!toDoElement)
            return;

        toDoElement.innerHTML = '<h1>' + header + '</h1>';
    }

    const generateToDoListHTML = (toDoList) => {
        let toDoListHTML = '';
        for (let i = 0; i < toDoList.length; i++)
            toDoListHTML += '<p>' + toDoList[i] + '</p>';

        return toDoListHTML;
    }

    const addToDoList = (toDoList) => {
        const toDoElement = document.getElementById('todo');
        if (!toDoElement)
            return;

        const toDoListHTML = generateToDoListHTML(toDoList);
        toDoElement.innerHTML += toDoListHTML;
    }

    addToDoHeader(headerToPass);
    addToDoList(toDoListToPass);
</script>
</body>
</html>