Scary Story

function solve() {
  //TODO ....

  const BtnPublish= document.getElementById('form-btn');
  const PreviewList= document.getElementById('preview-list');
  const DivMain= document.getElementById('main');

  //input fields
  const InputName=document.getElementById('first-name');
  const InputLName=document.getElementById('last-name');
  const InputAge=document.getElementById('age');
  const InputTitle=document.getElementById('story-title');
  const InputGenre=document.getElementById('genre');

  const InputStory= document.getElementById('story');

  BtnPublish.addEventListener('click',(e)=>{

    e.preventDefault();
if(InputName.value =='' || InputLName.value=='' || InputAge.value=='' || InputTitle.value=='' || InputGenre.value==''
|| InputStory.value=='' ){
  return;
}


    const Elementh1= document.createElement('h4');
    Elementh1.textContent=`Name:${InputName.value} ${InputLName.value}`;//6

    const Elp1= document.createElement('p');//5
    Elp1.textContent=`Age: ${InputAge.value}`;

    const Elp2= document.createElement('p');
    Elp2.textContent=`Title: ${InputTitle.value}`;//7

    const Elp3= document.createElement('p');
    Elp3.textContent=`Genre: ${InputGenre.value}`;//7
    const Elp4= document.createElement('p');
    Elp4.textContent=`${InputStory.value}`;

    const Article = document.createElement('article');
    Article.appendChild(Elementh1);
    Article.appendChild(Elp1);
    Article.appendChild(Elp2);
    Article.appendChild(Elp3);
    Article.appendChild(Elp4);

    const BtnSave= document.createElement('button');
    BtnSave.classList.add('save-btn');
    BtnSave.textContent='Save Story';

    const BtnEdit= document.createElement('button');
    BtnEdit.classList.add('edit-btn');
    BtnEdit.textContent='Edit Story';
    const BtnDelete= document.createElement('button');
    BtnDelete.classList.add('delete-btn');
    BtnDelete.textContent='Delete Story';



    //
    const LiElement= document.createElement('li');
    LiElement.classList.add('story-info');
    LiElement.appendChild(Article);
    LiElement.appendChild(BtnSave);
    LiElement.appendChild(BtnEdit);
    LiElement.appendChild(BtnDelete);

    //

    PreviewList.appendChild(LiElement);

    BtnPublish.setAttribute('disabled','disabled');

     InputName.value='';
     InputLName.value='';
     InputAge.value='';
     InputTitle.value='';
     InputGenre.value='';

     InputStory.value='';

     BtnEdit.addEventListener('click',()=>{

      InputName.value=Elementh1.textContent.substring(5);

      let AllNames= Elementh1.textContent.split(' ');
      InputLName.value=AllNames[1];;
      InputAge.value=Elp1.textContent.substring(5);
      InputTitle.value=Elp2.textContent.substring(7);
      InputGenre.value=Elp3.textContent.substring(7);

      InputStory.value=Elp4.textContent;

      BtnSave.setAttribute('disabled','disabled');
      BtnEdit.setAttribute('disabled','disabled');
      BtnDelete.setAttribute('disabled','disabled');

      BtnPublish.removeAttribute('disabled');
      LiElement.remove();
     });

     BtnSave.addEventListener('click',()=>{
      DivMain.innerHTML='';

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

      DivMain.appendChild(Elementh);

     });
     BtnDelete.addEventListener('click',()=>{
      LiElement.remove();
      BtnPublish.removeAttribute('disabled');
     })

  })
}