Untitled

 avatar
unknown
plain_text
4 months ago
2.9 kB
3
Indexable
function solve() {
    const emailInput = document.getElementById("email");
    const eventInput = document.getElementById("event");
    const locationInput = document.getElementById("location");
    const nextButton = document.getElementById("next-btn");
    const previewList = document.getElementById("preview-list");
    const eventList = document.getElementById("event-list");

    // Validation for missing DOM elements
    if (!emailInput || !eventInput || !locationInput || !nextButton || !previewList || !eventList) {
        console.error("One or more required elements are missing from the DOM.");
        return;
    }

    // Button Actions
    const buttonActions = {
        edit(event) {
            const main = event.target.closest("li");
            const [email, evt, loc] = Array.from(main.querySelectorAll("p")).map((el) =>
                el.textContent.split(": ")[1]
            );

            emailInput.value = email;
            eventInput.value = evt;
            locationInput.value = loc;

            previewList.removeChild(main);
            nextButton.disabled = false;
        },
        apply(event) {
            const main = event.target.closest("li");
            main.querySelectorAll("button").forEach((btn) => btn.remove());
            eventList.appendChild(main);
            nextButton.disabled = false;
        },
    };

    // Add to Preview List
    nextButton.addEventListener("click", () => {
        const email = emailInput.value.trim();
        const event = eventInput.value.trim();
        const location = locationInput.value.trim();

        if (!email || !event || !location) {
            console.warn("Invalid input values.");
            return;
        }

        const li = document.createElement("li");
        li.className = "application";

        const article = document.createElement("article");
        article.innerHTML = `
            <p>Email: ${email}</p>
            <p>Event: ${event}</p>
            <p>Location: ${location}</p>
        `;
        li.appendChild(article);

        ["Edit", "Apply"].forEach((action) => {
            const button = document.createElement("button");
            button.textContent = action;
            button.className = "action-btn";
            button.addEventListener("click", buttonActions[action.toLowerCase()]);
            li.appendChild(button);
        });

        previewList.appendChild(li);

        emailInput.value = "";
        eventInput.value = "";
        locationInput.value = "";
        nextButton.disabled = true;
    });

    // Enable/Disable "Next" Button Dynamically
    [emailInput, eventInput, locationInput].forEach((input) => {
        input.addEventListener("input", () => {
            nextButton.disabled = !(
                emailInput.value.trim() &&
                eventInput.value.trim() &&
                locationInput.value.trim()
            );
        });
    });
}
Editor is loading...
Leave a Comment