

<html>
  <head>
    <title>Comma Separator Tool</title>
    <link rel="icon" type="image/x-icon" href="logo.png">
    <script defer data-domain="tools.badheshchauhan.com"  src="https://getanalyzr.vercel.app/tracking-script.js"></script>

    <style>
     #quotes {
       background-color:blue;
       color: white;
       font-size: 18px;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       padding: 10px 20px;
       }

  
      .tool-container {
        width: 600px;
        margin: 0 auto;
        padding: 20px;
        text-align: center;
      }
      .tool-header {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
        text-shadow: 2px 2px 10px green;

      }
      .text-input {
        width: 80%;
        height: 200px;
        margin-bottom: 20px;
        padding: 10px;
        font-size: 18px;
        border: 1px solid #ccc;
        border-radius: 5px;
        resize: none;
      }
      .tool-options {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        border-radius: 25px;

      }
      .tool-option {
        width: 150px;
        margin: 0 10px;
        text-align: center;
      }
      .tool-option button {
        width: 100%;
        height: 30px;
        background-color: #4CAF50;
        color: white;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        border-radius: 25px;

      }
      .tool-option button:hover {
        background-color: #3e8e41;
      }
      .output {
        width: 80%;
        min-height: 150px;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 10px;
        font-size: 18px;
        border: 1px solid #ccc;
        border-radius: 5px;
        word-wrap: break-word;
      }
      .copy-btn {
        background-color: #4CAF50;
        color: white;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 20px;
        padding: 10px 20px;
        margin-right: 30px;

      }
      .copy-btn:hover {
        background-color: #3e8e41;
      }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">

  </head>
  <body>
    <div class="tool-container">
      <div class="tool-header">Comma Separator Tool By Badhesh</div>
      <textarea class="text-input" placeholder="Enter text here"></textarea>

          <center><button id="quotes">Option</button></center><br />
      <div class="tool-options">
       <div class="tool-option">
          <button id="space">Space</button>
        </div>
        <div class="tool-option">
          <button id="single-quotes">Single</button>
        </div>
        <div class="tool-option">
          <button id="double-quotes">Double</button>
        </div>
        <div class="tool-option">
  <button id="column-to-list">Comma</button>
</div>
      </div>
      <center><div><textarea placeholder="output text here" class="output"></textarea></div>
      <button class="copy-btn" id="output" onclick="copyOutput()">Copy</button>
      <button class="copy-btn" id="save-btn">Save as Text</button>
    </div></center>
    <script>
      // JavaScript for comma separator tool functionality
      const input = document.querySelector('.text-input');
      const output = document.querySelector('.output');
      const singleCommaBtn = document.querySelector('#single-quotes');
const doubleCommaBtn = document.querySelector('#double-quotes');
  singleCommaBtn.addEventListener('click', () => {
    let inputArr = input.value.split("\n");
    let outputArr = inputArr.map(i => `'${i}'`);
    output.textContent = outputArr.join(',');
  });

  doubleCommaBtn.addEventListener('click', () => {
    let inputArr = input.value.split("\n");
    let outputArr = inputArr.map(i => `"${i}"`);
    output.textContent = outputArr.join(",");
  });

const columnToListBtn = document.querySelector('#column-to-list');
columnToListBtn.addEventListener('click', () => {
  let inputArr = input.value.split("\n");
  output.textContent = inputArr.join(",");
});


columnToListBtn.addEventListener('click', () => {
  let inputArr = input.value.split("\n");
  let outputArr = inputArr.map(i => `${i}`);
  output.textContent = outputArr.join(",");
});

const space = document.querySelector('#space');
columnToListBtn.addEventListener('click', () => {
  let inputArr = input.value.split("\n");
  output.textContent = inputArr.join(",");
});


space.addEventListener('click', () => {
  let inputArr = input.value.split("\n");
  let outputArr = inputArr.map(i => `${i}`);
  output.textContent = outputArr.join(" ");
});

  function copyOutput() {
    // Create a range and select the output text
    var range = document.createRange();
    range.selectNode(output);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    // Copy the selected text
    document.execCommand("copy");
    // Clear the selection
    selection.removeAllRanges();
    // Show a message that the text has been copied
    alert("Text is Copied to clipboard! Thank you");
  }
  const saveBtn = document.querySelector('#save-btn');
     saveBtn.addEventListener('click', () => {
    const textToSave = output.value;
    const textToSaveAsBlob = new Blob([textToSave], { type: "text/plain" });
    const textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    const fileNameToSaveAs = "output.txt";

    const downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
});

</script>
</body>
</html>


