script.js

document.addEventListener("DOMContentLoaded", () => {
    const profileName = document.getElementById("profileName");
    const profileBio = document.getElementById("profileBio");
    const profileImage = document.getElementById("profileImage");
    const profileCard = document.getElementById("profileCard");
    const feedback = document.getElementById("feedback");

    const nameInput = document.getElementById("nameInput");
    const bioInput = document.getElementById("bioInput");
    const imageInput = document.getElementById("imageInput");
    const bgColorInput = document.getElementById("bgColorInput");

    const updateButton = document.createElement("button");
    updateButton.textContent = "Update Profile Card";
    updateButton.type = "button";
    document.querySelector(".editor form fieldset").appendChild(updateButton);

    function updateName() {
        profileName.textContent = nameInput.value.trim() || "John Doe";
    }

    function updateBio() {
        profileBio.textContent = bioInput.value.trim() || "This is a short bio.";
    }

    function updateImage() {
        const imageUrl = imageInput.value.trim();
        if (imageUrl) {
            profileImage.setAttribute("src", imageUrl);
        }
    }

    function changeBackgroundColor() {
        profileCard.style.backgroundColor = bgColorInput.value || "#fff";
    }

    function updateProfile() {
        updateName();
        updateBio();
        updateImage();
        changeBackgroundColor();

        feedback.textContent = "Profile updated successfully!";
        setTimeout(() => {
            feedback.textContent = "";
        }, 3000);
    }

    updateButton.addEventListener("click", updateProfile);
});