01. Sacry Story / JS Advanced Exam - 22 October 2022

function solve() {
    const firstNameEl = document.querySelector('#first-name');
    const lastNameEl = document.querySelector('#last-name');
    const ageEl = document.querySelector('#age');
    const titleEl = document.querySelector('#story-title');
    const genreEl = document.querySelector('#genre');
    const storyEl = document.querySelector('#story');
    const publishButton = document.querySelector('#form-btn');
    const previewUl = document.querySelector('#preview-list');
    const mainDivEl = document.querySelector('#main');
    publishButton.addEventListener('click', publish);

    function publish(e) {
        e.preventDefault();

        const firstName = firstNameEl.value;
        const lastName = lastNameEl.value;
        const age = ageEl.value;
        const title = titleEl.value;
        const genre = genreEl.value;
        const story = storyEl.value;

        if (!firstName || !lastName || !age || !title || !story) {
            return;
        }

        clearInputFields();
        createAndAppendLi(firstName, lastName, age, title, genre, story);
        document.querySelector('.edit-btn').addEventListener('click', editStoryInfo);
        document.querySelector('.save-btn').addEventListener('click', saveStory);
        document.querySelector('.delete-btn').addEventListener('click', deleteStory);
    }

    function clearInputFields() {
        firstNameEl.value = '';
        lastNameEl.value = '';
        ageEl.value = '';
        titleEl.value = '';
        genreEl.value = '';
        storyEl.value = '';
        publishButton.disabled = true;
    }

    function createAndAppendLi(firstName, lastName, age, title, genre, story) {
        const listElement = document.createElement('li');
        listElement.classList.add('story-info');

        listElement.innerHTML = `
        <article>
        <h4>Name: ${firstName} ${lastName}</h4>
        <p>Age: ${age}</p>
        <p>Title: ${title}</p>
        <p>Genre: ${genre}</p>
        <p>${story}</p>
        </article>
        <button class="save-btn">Save Story</button>
        <button class="edit-btn">Edit Story</button>
        <button class="delete-btn">Delete Story</button>
        `

        previewUl.appendChild(listElement);
    }

    function editStoryInfo(e) {
        const liElement = e.target.parentElement;
        const articleElements = Array.from(e.target.parentElement.children[0].children);

        firstNameEl.value = articleElements[0].textContent.split(' ')[1];
        lastNameEl.value = articleElements[0].textContent.split(' ')[2];
        ageEl.value = articleElements[1].textContent.split(' ')[1];
        titleEl.value = articleElements[2].textContent.split(' ')[1];
        genreEl.value = articleElements[3].textContent.split(' ')[1];
        storyEl.value = articleElements[4].textContent;

        liElement.remove();
        publishButton.disabled = false;
    }

    function saveStory(e) {
        mainDivEl.innerHTML = '';
        const h1El = document.createElement('h1');
        h1El.textContent = "Your scary story is saved!";
        mainDivEl.appendChild(h1El);
    }

    function deleteStory(e) {
        const liElement = e.target.parentElement;
        liElement.remove();
        publishButton.disabled = false;
    }
}