01. Scary Story

function solve() {
  //get references;
  const firstNameEl = document.getElementById("first-name");
  const lastNameEl = document.getElementById("last-name");
  const ageEl = document.getElementById("age");
  const storyTitleEl = document.getElementById("story-title");
  const genreEl = document.getElementById("genre");
  const storyEl = document.getElementById("story");
  const publishBtn = document.getElementById("form-btn");
  const previewListUl = document.getElementById("preview-list");

  publishBtn.addEventListener('click', publishStory);

  function publishStory(e) {
    e.preventDefault;

    //take values;
    const firstName = firstNameEl.value;
    const lastName = lastNameEl.value;
    const age = ageEl.value;
    const storyTitle = storyTitleEl.value;
    const genre = genreEl.value;
    const story = storyEl.value;

    //validate input;
    if (!firstName || !lastName || !age || !storyTitle || !story) {
      return;
    }

    //create elements;
    const listElement = document.createElement('li');
    const articleElement = document.createElement('article');
    const h4Elemnt = document.createElement('h4');
    const ageP = document.createElement('p');
    const titleP = document.createElement('p');
    const genreP = document.createElement('p');
    const storyP = document.createElement('p');
    const saveBtn = document.createElement('button');
    const editBtn = document.createElement('button');
    const deleteBtn = document.createElement('button');

    //add classes;
    listElement.classList.add('story-info');
    saveBtn.classList.add('save-btn');
    editBtn.classList.add('edit-btn');
    deleteBtn.classList.add('delete-btn');

    //add event listeners;
    saveBtn.addEventListener('click', saveStory);
    editBtn.addEventListener('click', editStory);
    deleteBtn.addEventListener('click', deleteStory);

    //add text content;
    h4Elemnt.textContent = `Name: ${firstName} ${lastName}`;
    ageP.textContent = `Age: ${age}`;
    titleP.textContent = `Title: ${storyTitle}`;
    genreP.textContent = `Genre: ${genre}`;
    storyP.textContent = `${story}`;
    saveBtn.textContent = 'Save Story';
    editBtn.textContent = 'Edit Story';
    deleteBtn.textContent = 'Delete Story';

    //append elements
    previewListUl.appendChild(listElement);
    listElement.appendChild(articleElement);
    listElement.appendChild(saveBtn);
    listElement.appendChild(editBtn);
    listElement.appendChild(deleteBtn);
    articleElement.appendChild(h4Elemnt);
    articleElement.appendChild(ageP);
    articleElement.appendChild(titleP);
    articleElement.appendChild(genreP);
    articleElement.appendChild(storyP);

    //clear input and disable button;
    firstNameEl.value = '';
    lastNameEl.value = '';
    ageEl.value = '';
    storyTitleEl.value = '';
    storyEl.value = '';

    publishBtn.disabled = true;

    function editStory() {
      firstNameEl.value = firstName;
      lastNameEl.value = lastName;
      ageEl.value = age;
      storyTitleEl.value = storyTitle;
      storyEl.value = story;

      listElement.remove();
      publishBtn.disabled = false;
    }

    function saveStory() {
      const mainDiv = document.getElementById("main");
      mainDiv.innerHTML = '';

      const h1El = document.createElement('h1');
      h1El.textContent = "Your scary story is saved!";

      mainDiv.appendChild(h1El);
    }

    function deleteStory() {
      listElement.remove();
      publishBtn.disabled = false;
    }
  }
}