So I’m making an Editor website, and I want to have a save button that will only save the code written in the box, and not the entire editor code

So, as I mentioned I am making an HTML, CSS and JavaScript editor and I need a save button, but I’m not sure of the code for it. I know a code that will make it save the entire code (script) for the editor, but I don’t want that, I want to make a Save button that will only save what the visitor types in the text box!

Bellow is my button codes! NOTE: I only need the “Save Button” code!

Code

.btn-run
{
    padding:8px;
    background-color:#3A65FF;
    border:none;
    color:#FFFFFF;
    border-radius:2px;
    transition:all 0.3s;
}

.btn-run:hover
{
    background-color:#404040;
}
#outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
}

<div id="outer">
  <div class="inner">
    <form><textarea name="sourceCode" id="sourceCode"></textarea></form>
    <button onClick="runCode();" class="btn-run" type="button" style="float: 
    none;">Save Code</button>
  </div>
</div>

Answer

You can get what the user has typed in your textarea using the .value property and get the data that the user has written.

function runCode(){
  let userWrittenCode = document.getElementById("sourceCode");
  
  if(!userWrittenCode.value) console.log("Please write some code");
  else{
    //Do user input code sanitization
    console.log("Your Data is: ");
    console.log(userWrittenCode.value); 
  }
}

.btn-run {
  padding: 8px;
  background-color: #3A65FF;
  border: none;
  color: #FFFFFF;
  border-radius: 2px;
  transition: all 0.3s;
}

.btn-run:hover {
  background-color: #404040;
}

#outer {
  width: 100%;
  text-align: center;
}

.inner {
  display: inline-block;
}

<div id="outer">
  <div class="inner">
    <form><textarea name="sourceCode" id="sourceCode"></textarea></form>
    <button onClick="runCode();" class="btn-run" type="button" style="float: 
        none;">Save Code</button>
  </div>
</div>