function solve() {
  const taskElement = document.querySelector('#task');
  const descriptionElement = document.querySelector('#description');
  const dateElement = document.querySelector('#date');
  const addButtonElement = document.querySelector('#add');
  const open = document
    .querySelectorAll('section')[1]
    .querySelectorAll('div')[1];
  const inProgress = document
    .querySelectorAll('section')[2]
    .querySelectorAll('div')[1];
  const complete = document
    .querySelectorAll('section')[3]
    .querySelectorAll('div')[1];

  addButtonElement.addEventListener('click', onClick);

  function onClick(e) {
    e.preventDefault();
    const taskInput = taskElement.value;
    const descriptionInput = descriptionElement.value;
    const dateInput = dateElement.value;
    const isInvalid = !taskInput && !descriptionInput && !dateInput;

    if (isInvalid) return;

    createArticle(
      'open',
      'green',
      'red',
      taskInput,
      descriptionInput,
      dateInput
    );

    taskElement.value = '';
    descriptionElement.value = '';
    dateElement.value = '';
  }

  function createArticle(
    tabType,
    firstBtnClass,
    secondBtnClass,
    task,
    description,
    date
  ) {
    const newArticleElement = document.createElement('article');
    const h3Element = document.createElement('h3');
    h3Element.textContent = task;
    const descriptionParaElement = document.createElement('p');
    descriptionParaElement.textContent = `Description: ${description}`;
    const dateParaElement = document.createElement('p');
    dateParaElement.textContent = `Due Date: ${date}`;

    newArticleElement.appendChild(h3Element);
    newArticleElement.appendChild(descriptionParaElement);
    newArticleElement.appendChild(dateParaElement);

    if (tabType === 'open') {
      const btnsDivElement = document.createElement('div');
      btnsDivElement.className = 'flex';

      const startBtn = document.createElement('button');
      startBtn.textContent = 'Start';
      startBtn.className = firstBtnClass;
      startBtn.addEventListener('click', () => {
        removeArticle(newArticleElement);
        createArticle('In Progress', 'red', 'orange', task, description, date);
      });

      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = 'Delete';
      deleteBtn.className = secondBtnClass;
      deleteBtn.addEventListener('click', () =>
        removeArticle(newArticleElement)
      );

      btnsDivElement.appendChild(startBtn);
      btnsDivElement.appendChild(deleteBtn);
      newArticleElement.appendChild(btnsDivElement);
      open.appendChild(newArticleElement);
    } else if (tabType === 'In Progress') {
      const btnsDivElement = document.createElement('div');
      btnsDivElement.className = 'flex';

      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = 'Delete';
      deleteBtn.className = firstBtnClass;
      deleteBtn.addEventListener('click', () =>
        removeArticle(newArticleElement)
      );

      const finishBtn = document.createElement('button');
      finishBtn.textContent = 'Finish';
      finishBtn.className = secondBtnClass;
      finishBtn.addEventListener('click', () => {
        removeArticle(newArticleElement);
        createArticle('Complete', null, null, task, description, date);
      });

      btnsDivElement.appendChild(deleteBtn);
      btnsDivElement.appendChild(finishBtn);
      newArticleElement.appendChild(btnsDivElement);
      inProgress.appendChild(newArticleElement);
    } else if (tabType === 'Complete') {
        complete.appendChild(newArticleElement);
    }
  }

  function removeArticle(article) {
    article.remove();
  }
}