FILE DOWNLOADER

by Airweb

HTML

<div id="nav">
  <input id="fname" type="text" placeholder="FILE NAME...">
  <input id="ext" type="text" placeholder="FILE EXTENSION...">
  <button id="download">
    DOWNLOAD FILE
  </button>
</div>
<textarea id="code" spellcheck="false" autocomplete="false" placeholder="// PASTE YOUR CODE HERE..."></textarea>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: monospace;
}

body {
  padding: 10px;
  overflow-x: hidden;
  background: #232323;
}

button {
  background: grey;
  padding: 5px 30px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  border: 3px solid grey;
  border-radius: 5px;
  transition: all 0.5s;
}

button:hover,
button:focus {
  color: #fff;
  background: #007bff;
  border: 3px solid grey;
}

input[type=text] {
  font-size: 20px;
  padding: 5px;
  background: #1d1d1d;
  border: 0;
  border-bottom: 3px solid grey;
  border-radius: 5px 5px 0 0;
  transition: all 0.5s;
}

input[type=text]:active,
input[type=text]:focus {
  border-bottom: 3px solid #007bff;

}

#nav {
  display: flex;
  gap: 20px;
}

#nav input {
  user-select: none;
  outline: 0;
  color: #fff;
}

#code::-webkit-scrollbar-track {
  background-color: #232f3e;
}

#code::-webkit-scrollbar {
  width: 15px;
  background-color: #232f3e;
}

#code::-webkit-scrollbar-thumb {
  background-color: #131921;
}

#code::-webkit-scrollbar-thumb:hover {
  background-color: #131921;
}

#code {
  background: #1d1d1d;
  padding: 5px;
  color: white;
  font-size: 16px;
  width: calc(100% - 10px);
  height: 640px;
  margin-top: 10px;
  border: 3px solid grey;
  border-radius: 5px;
  outline: 0;
  resize: none;
  transition: all 0.5s;
}

#code:active,
#code:focus {
  border: 3px solid #007bff;
}

@media screen and (max-width: 755px) {
  #nav {
    flex-direction: column;
  }
}

JavaScript

const fname = document.querySelector('#fname');
  const ext = document.querySelector('#ext');
  const download = document.querySelector('#download');
  const code = document.querySelector('#code');

  download.addEventListener('click', () => {
    if (!fname.value.trim().length) {
      alert('Enter a file name');
      return false;
    }
    if (!ext.value.trim().length) {
      alert('Enter a file extension');
      return false;
    }
    if (!code.value.trim().length) {
      alert('Enter a code');
      return false;
    }
    saveTextAsFile()
  })

  function saveTextAsFile() {
    const textFileAsBlob = new Blob([code.value.trim()], {
      type: 'text/plain'
    });
    const fileNameToSaveAs = fname.value.trim().replace(/ /g, '_') + "." + ext.value.trim();

    const downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null) {
      downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    } else {
      downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
      downloadLink.onclick = destroyClickedElement;
      downloadLink.style.display = "none";
      document.body.appendChild(downloadLink);
    }
    downloadLink.click();
  }

  function destroyClickedElement(event) {
    document.body.removeChild(event.target);
  }