THE DEMO PROJECT SOURCE CODE

 HTML

<h1>Hello World</h1>

<input oninput="don();" type="text" placeholder="Write your name" >

<h1 id="h1" >No text yet</h1>

CSS

h1{

color:red;

background:yellow;

border-radius:20px;

text-align:center;

box-shadow:

4px 4px 5px rgba(30,30,30,0.2),

inset 4px 4px 5px rgba(30,30,30,0.2)

;

font-family: arial;

}

h1::selection{

background:rgb(255,255,255,0.6);

color:rgb(255,0,0,0.6);

}

input{

color:red;

background:yellow;

border-radius:20px;

text-align:center;

box-shadow:

4px 4px 5px rgba(30,30,30,0.2),

inset 4px 4px 5px rgba(30,30,30,0.2)

;

outline:none;

border:none;

}

input::selection{

background:rgb(255,255,255,0.6);

color:rgb(255,0,0,0.6);

}

input::placeholder{

color:rgb(199,0,0);

}

JS

//let input = document.querySelector("#h1");

//let inputbox = document.querySelector("input").value;

//input.addEventListener("click",function(){

// let inputbox = document.querySelector("input").value;

// document.querySelector("#h1").innerText = inputbox

//});

function don(){

 let inputbox = document.querySelector("input").value;

 document.querySelector("#h1").innerText = inputbox

}