JSFiddle - React, Tailwind, and code Playground

by Mark Hendricks

HTML

<div id="wrap">
<div id="save">
<input type="text" id="filename" placeholder="Enter Filename">.csv
<button onClick="csv();" id="download">Download</button>
</div>
<div>
<textarea id="content" wrap="off" cols="50" rows="10"></textarea>
</div>
</div>

CSS

#wrap {
  display: inline-block;
}
#content {
  display: inline;
  outline: none;
}
#filename {
  text-align: right;
  outline: none;
  padding-right: 4px;
  width: 140px;
}
#save {
  text-align: right;
  margin: 0px 3px 3px 0px;
}
#download {
  padding-left: 6px;
}
::placeholder {
  color: #aeaeae;
}

JavaScript

function download() {
    var a = document.body.appendChild(
        document.createElement("a")
    );
    if (filename.value == "") {
			a.download = "avg_price_calc.csv";
    } else {
    	a.download = document.getElementById("filename").value+".csv";
    }
    a.href = "data:text/csv," + document.getElementById("content").value;
    a.click();
    document.getElementById("filename").value = "";
    document.getElementById("content").value = "";
    document.body.removeChild(a); 
}

function csv() {
	download();
}