Javascript Playground

<h1>Hello Code Beautify!</h1>

<label>Enter Number :-</label>
<input type='text' id='inputN' value='10'>
<button onclick='trianglePattern()'>Click</button>
<div id='displayPattern'></div>

body {
background: #a28089;
}

h1 {
color: white;
font-size: 30px;
text-align: center;
}

span {
color: green;
font-size: 30px;
}

var hello = document.querySelector('h1');
hello.innerHTML += ' With Fun <span>Javascript Playground</span>';

function trianglePattern(){
let n = Number(document.getElementById("inputN").value);

let strPtn = " ";
for(let i = 1; i<=n; i++)
{
   for(let j = 1; j<=i; j++)
   {
      strPtn = strPtn + "*";
   }
   strPtn = strPtn + "<br>";
}
document.getElementById('displayPattern').innerHTML = strPtn;
}
trianglePattern();