Monster Manager

				
					function createMonster(event) {
    event.preventDefault(); // Prevents the default form submission behavior

    // Getting all input field values
    const name = document.getElementById('name').value;
    const type = document.querySelector('input[name="type"]:checked'); // Gets the selected radio button
    const rarity = document.getElementById('rarity').value;
    const favorite = document.querySelector('input[name="favorite"]').checked; // Checks if the checkbox is checked

    // Validating the form to ensure all required fields are filled
    if (!name || !type || !rarity) {
        alert('Please fill out all fields.');
        return;
    }

    // Creating a monster object with the collected values
    const monster = {
        name,
        type: type.value, // Extracts the selected radio button's value
        rarity,
        favorite
    };

    // Calls function to add the monster details to the table
    addMonsterToTable(monster);

    // Resets the form fields after submission
    document.getElementById('monster-form').reset();
}

// Function to display the monster details in a table format
function addMonsterToTable(monster) {
    const tableBody = document.getElementById('monster-table-body'); // Gets the table body
    const row = tableBody.insertRow(); // Creates a new row in the table

    // Populating the row with monster details
    row.innerHTML = `
        <td>${monster.favorite ? 'Yes' : 'No'}</td> <!-- Shows 'Yes' if favorite is true, otherwise 'No' -->
        <td>${monster.name}</td>
        <td>${monster.type}</td>
        <td>${monster.rarity}</td>
        <td><button class="delete-btn">Delete</button></td> <!-- Delete button -->
    `;
}

// Function to delete a monster entry from the table
function deleteMonster(button) {
    const row = button.parentElement.parentElement; // Gets the parent row of the clicked button
    row.remove(); // Removes the row from the table
}