LivePreviewPureJavascript.js

/* html and css

<div class="card">
  <h1>
  PHP Web Developer
  </h1>
  <span>
    Full Time Job
  </span>
</div>

<br>
<br>

Try to enter the infos to get the livepreview.

<br>
<br>

<input oninput="HandleText()" type="text" id="job_title" placeholder="Enter The Job Title"/>
<br>
<br>
<input oninput="HandleText()" type="text" id="type_job" placeholder="Enter The Job Type"/>

<h3>Live Preview</h3>

<div class="card">
  <h1 id="output_value">
  
  </h1>
  <span id="output_value_2">
    
  </span>
</div>
--------------- css ----------------------
.card {
  display: flex;
  justify-content: center;
  border: 1px solid #ccc;
  padding: 1rem;
}

h1 {
  font-size: 1rem;
}

span {
  font-size: 0.8rem;
}

*/
function HandleText() {
	let jobTitle = document.getElementById("job_title");
  let jobType = document.getElementById("type_job");
  
  //console.log(jobType.value);
  
  document.getElementById("output_value").innerHTML = jobTitle.value;
  document.getElementById("output_value_2").innerHTML = jobType.value;
}