HTML এবং Javascript দিয়ে বানিয়ে ফেলুন Live HTML Viewer
JavaScript

HTML এবং Javascript দিয়ে বানিয়ে ফেলুন Live HTML Viewer

আজকের Tutorial এ আমি দেখাবো আপনারা কিভাবে HTML এবং JS দিয়ে Live HTML Viewer বানাবেন।অর্থাৎ, HTML Code লিখে Submit করলে এর Output দেখাবে।

 

প্রথমেই HTML code করতে হবে। নিচে কোডটি দেয়া হলো:

এখানে একটি textarea,button এবং div বানিয়ে নিতে হবে এবং এর একটি id দিতে হবে।এখন এটি দেখতে এমন হবে:

[এখানে আমি একটু css add করেছি]

 

এবার Javascript code করতে হবে।নিচে js code দেয়া হলো:

এখানে একটি Variable এ submit button এর element টি নিতে হবে।আমি এখানে showHTML নামের variable এ এটা নিয়েছি।এরপর একটি event listener add করতে হবে এবং একটি function নিতে হবে।তারপর একটি variable এ output div element এবং আরেকটি variable এ textarea এর value assign করতে হবে।

এখানে আমি, output নামক variable এ output div element এবং code নামক variable এ textarea এর value assign করেছি

এখন output div এ code show করানোর জন্য লিখতে হবে:

output.innerHTML = code;

এখন submit button এ tap করলেই html code এর preview দেখা যাবে।

সম্পূর্ণ কোড:

HTML:

<textarea  id="code" cols="30" rows="10"></textarea><br>
<button id="showHTML">Submit</button>
<div id="output"></div>

JS:

const showHTML = document.getElementById('showHTML');
    
    showHTML.addEventListener('click',()=>{
      const output = document.getElementById('output');
      const code = document.getElementById('code').value;
      
      output.innerHTML = code;





    })

 

 

 

2 thoughts on "HTML এবং Javascript দিয়ে বানিয়ে ফেলুন Live HTML Viewer"

  1. Tareq Aziz Author says:
    March 25, 2023 at 7:36 pm
    Great
  2. Rakibuzzaman Contributor says:
    March 25, 2023 at 9:25 pm

    HTML Viewer

    HTML Viewer
    Paste your HTML code below:

    View HTML

    function viewHTML() {
    var htmlCode = document.getElementById(“html-input”).value;
    document.getElementById(“html-output”).innerHTML = htmlCode;
    }

Leave a Reply