.DS_Store
# understand-javascript-arrays
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Plunker</title>
</head>
<body>

    <input type="text" id="input">

    <button type="button" id="button">Add</button>

    <ul id="list">
        <!-- Pets -->
    </ul>

    <script src="script.js"></script>
</body>
</html>
const input  = document.querySelector('#input');
const button = document.querySelector('#button');
const list   = document.querySelector('#list');

const pets   = [];

button.addEventListener("click", function (evt) {
    if (input.value.length > 0) {
        pets.push(input.value);
        input.value = "";
        render();
    }
});

function render () {
    list.innerHTML = pets.map(x => `<li>${x}</li>`).join('');
}