CodePen Embed - Form Events & Prevent Default

<body>
    <h1>Form Events & Prevent Default</h1>
    
    <h3>Sumbit a Cat For Adoption</h3>
    <form action="/shelter" id="shelterForm">
        <input type="text" id="catName">
        <button>Submit</button>
    </form>

    <h3>Available Cats</h3>
    <ul id="cats"></ul>

    <script src="app.js"></script>
</body>

const form = document.querySelector('#shelterForm');
const input = document.querySelector('#catName');
const list = document.querySelector('#cats');

form.addEventListener('submit', (event) => {
    //Stop default behavior
    event.preventDefault();
    //Extract the value from the input
    const catName = input.value;
    //Create a new LI
    const newLI = document.createElement('LI');
    //Add the value to the new LI
    newLI.innerText = catName;
    //Append the LI to the UL
    list.append(newLI);
    //Clear the input value
    input.value = "";
})

This Pen is owned by Ethan Goddard on CodePen.

See more by @realnerdethan on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.