script.js

//feedback form help center
  var articleVotesBtnsBlock = document.querySelector(".article-votes-btns-wrap");
  var articleVotesBtns = document.querySelectorAll(".js--article-votes-btn");
  var formYes = document.querySelector(".js--form-yes");
  var formNo = document.querySelector(".js--form-no");
  
  if(formNo) {
    var radioBtns = document.querySelectorAll("input[type='radio'][name='feedback-selection']");
    var labvarextareaNo = formNo.querySelector(".article-votes-form-no-textarea-label");
    var btnSendYes = document.querySelector(".js--btn-send-yes");
    var btnSendNo = document.querySelector(".js--btn-send-no");
    var userResponse = {
      subject: 'Help center feedback',
      url: document.location.href,
      responseType: 'yes',
      radioResponse: '-',
      description: '-',
    };
    var itemSucces = document.querySelector(".article-votes-feedback-success");
    var itemFail = document.querySelector(".article-votes-feedback-fail");
    var date = new Date();
    var commentPlaceholderText = 'Your comments will help us to improve the article!';
    var commentPlaceholderErrorText = 'Please let us know how we can improve the article - leave your comment here!';

    for (var i = 0; i < articleVotesBtns.length; i++) {
      articleVotesBtns[i].addEventListener('click', function(e){
        e.preventDefault();

        if(this.getAttribute('data-type') === 'yes') {
          setActiveBtn();
          clearForm();

          this.classList.add("active");
          formNo.classList.remove("visible");
          formYes.classList.add("visible");
        }

        if(this.getAttribute('data-type') === 'no') {
          setActiveBtn();
          clearForm();

          this.classList.add("active");
          formYes.classList.remove("visible");
          formNo.classList.add("visible");
        }
      });
    }

    //submit
    btnSendYes.addEventListener('click', function(e){
      e.preventDefault();
      userResponse.description = formYes.querySelector(".article-votes-textarea").value;

      sendRequest(userResponse);

    });

    btnSendNo.addEventListener('click', function(e){
      e.preventDefault();
      // userResponse

      for (var i = 0; i < radioBtns.length; i++) {
        userResponse.responseType = 'no';
        if(radioBtns[i].checked){
          userResponse.radioResponse = radioBtns[i].value;
        }
        userResponse.description = formNo.querySelector(".article-votes-textarea").value;
      }
      
      //user comment requaered validation
      if(userResponse.description.length > 0) {
        sendRequest(userResponse);
      } else {
        showValidationError();
      }
    });
    
    function showValidationError(){
      //change placeholder for comment textarea
      var commentTextarea = formNo.querySelector(".article-votes-textarea");
      if(commentTextarea !== undefined) {
        commentTextarea.placeholder = commentPlaceholderErrorText;
        //change placeholder color -> red
        commentTextarea.classList.add('validationError');
      }
    }

function sendRequest(userResponse) {
      var result = false;

      //block form
      setDisabledForm();

      var request = new XMLHttpRequest();
# Update Webhook URL
      var url = 'https://hooks.slack.com/services/xxx/xxx/xxxx'

# You can change the slack post style.
      var data = {
        text: date + '\n' +  userResponse.responseType + '\n' + userResponse.radioResponse + '\n' + userResponse.description + '\n' + userResponse.url
      }
      
      request.open('POST', url);
      request.withCredentials = false;
      request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      request.addEventListener("readystatechange", function () {
        if (request.status === 200) {
          setCloseForm();
          clearForm();

          itemSucces.classList.add("active");
        } else {
          setCloseForm();
          clearForm();
        }
      });

      request.send('payload=' + JSON.stringify(data));
    }

    function clearForm(){
      formYes.querySelector(".article-votes-textarea").value = '';

      for (var i = 0; i < radioBtns.length; i++) {
        if(i === 0 && radioBtns[i] !== undefined){
          radioBtns[i].checked = true;
        } else {
          radioBtns[i].checked = false;
        }
      }
      
      var commentTextarea = formNo.querySelector(".article-votes-textarea");
      commentTextarea.placeholder = commentPlaceholderText;
      //change placeholder color -> red
      commentTextarea.classList.remove('validationError');
            commentTextarea.value = '';
      labvarextareaNo.innerText = '';
    }

    function setActiveBtn(){
      for (var i = 0; i < articleVotesBtns.length; i++) {
        articleVotesBtns[i].classList.remove("active");
      }
    }

    function setDisabledForm(){
      articleVotesBtnsBlock.classList.add("disabled");
      formYes.classList.add("disabled");
      formNo.classList.add("disabled");
    }

    function setCloseForm(){
      formYes.classList.remove("visible");
      formNo.classList.remove("visible");
    }
  }
});