Online HTML Code Editor

Online HTML Code Editor

ဒါက တော့မိမိကိုယ်တိုင် HTML CSS JavaScript Code တွေကိုရေးသားလေ့ကျင့်လို့ရအောင်ပြုလုပ်ထားတဲ့ Code Editor တခုဖြစ်ပါတယ်။ဒီ Code Editor ကတော့ Codeing တွေ Script တွေကိုစိတ်ဝင်စားတဲ့သူ တွေအတွက်အထူးသင့် လျော်တဲ့ Online Code Editor ဖြစ်ပါတယ်။လိုအပ်လို့ထည့်သွင်းအသုံးပြုချင်တယ်ဆိုရင်အောက်ကပြုလုပ်ထည့်သွင်းရတဲ့အဆင့်အနည်းဖြင့်ထည့်သွင်းအသုံးပြုနိုင်မှာဖြစ်ပါတယ်။

1. မိမိ blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages ကိုနှိပ်
3. + အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
6. save ကိုနှိပ်ပြီးပါပြီ

 <script crossorigin="anonymous" src="https://kit.fontawesome.com/f97427a625.js"></script>
<div class="tab-buttons">
    <button class="tab-button active-tab-button" onclick="toggleTab(0)"><i class="fa-brands fa-html5"></i> HTML</button>
    <button class="tab-button" onclick="toggleTab(1)"><i class="fa-brands fa-css3-alt"></i> CSS</button>
    <button class="tab-button" onclick="toggleTab(2)"><i class="fa-brands fa-square-js"></i> JavaScript</button>
</div>
<div class="tab" id="tab1">
  <div class="html-code">
    <textarea class="message_to_coppied" cols="40" id="htmlbox" rows="8" width="100%"> <h1>This is the preview.</h1> 
 <div class="someDiv">
   Welcome to CodeEditor 
</div> 
  </textarea>
    </div>
      <button id="htmlbutton"><i class="fa fa-copy"></i> Copy</button>
<button id="btn_clear" onclick="cdClear();"><i class="fa fa-trash-o"></i> Delete</button>
      <button onclick="run()"><i class="fa fa-pencil-square-o"></i> Result</button>
 <button id="savebutton"><i class="fa fa-floppy-o"></i> Save</button>
</div>
<div class="tab" id="tab2">
  <div class="css-code">
 <textarea class="message_to_coppied" cols="40" id="cssbox" rows="8" width="100%"> body{ font-family:'Verdana', sans-serif; background:turquoise; } 
  .someDiv{ padding:10px; margin:20px; display:inline-block; background:orange; }
</textarea>
</div>  
 <button id="cssbutton"><i class="fa fa-copy"></i> Copy</button>
 <button id="btn_clear" onclick="cdClear1();"><i class="fa fa-trash-o"></i> Delete</button>
<button onclick="run()"><i class="fa fa-pencil-square-o"></i> Result</button>
<button id="savebutton"><i class="fa fa-floppy-o"></i> Save</button>
</div>
<div class="tab" id="tab3">
  <div class="js-code">
 <textarea class="message_to_coppied" cols="40" id="jsbox" rows="8" width="100%">  
       </textarea>
    </div>
  <button id="jsbutton"><i class="fa fa-copy"></i> Copy</button>
 <button id="btn_clear" onclick="cdClear2();"><i class="fa fa-trash-o"></i> Delete</button>
<button onclick="run()"><i class="fa fa-pencil-square-o"></i> Result</button>
 <button id="savebutton"><i class="fa fa-floppy-o"></i> Save</button>
</div>
<label class="play-icon"><i class="fa-solid fa-play"></i> Check Result</label>
        <iframe id="result"></iframe>
<style>
box{
  background: #fff;
}

.tab-buttons {
  display: flex;
}

.tab-button {
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 10px 20px;
  cursor: pointer;
  height: 40px;
}

.tab-button:hover {
  background-color: #ddd;
}

.tab {
  display: none;
  width: 98%;
  border: none;
  padding: 3px 3px;
  background-color: #ddd;
}

.active-tab-button {
  background-color: #ddd ;
  transform: scaleY(1.1);
  transform-origin: bottom;
}
.play-icon{
  margin-left:10px;
}
#result {
  width: 100%;
  height: 100%;
  border: none;
}

</style>
<script>
function toggleTab(tabIndex) {
  let tabs = document.getElementsByClassName("tab");
  for (let i = 0; i < tabs.length; i++) {
      tabs[i].style.display = "none";
  }
  tabs[tabIndex].style.display = "block";

  // Remove the 'active-tab-button' class from all buttons
  let buttons = document.getElementsByClassName("tab-button");
  for (let i = 0; i < buttons.length; i++) {
      buttons[i].classList.remove("active-tab-button");
  }

  // Add the 'active-tab-button' class to the clicked button
  buttons[tabIndex].classList.add("active-tab-button");
}

toggleTab(0);
</script>
<script>
const html_code = document.querySelector('.html-code textarea');
const css_code = document.querySelector('.css-code textarea');
const js_code = document.querySelector('.js-code textarea');
const result = document.querySelector('#result');

function run() {
    // Storing data in Local Storage
    localStorage.setItem('html_code', html_code.value);
    localStorage.setItem('css_code', css_code.value);
    localStorage.setItem('js_code', js_code.value);

    // Executing HTML, CSS $ JS code
    result.contentDocument.body.innerHTML = `<style>${localStorage.css_code}</style>` + localStorage.html_code;
    result.contentWindow.eval(localStorage.js_code);
}

// Checking if user is typing anything in input field
html_code.onkeyup = () => run();
css_code.onkeyup = () => run();
js_code.onkeyup = () => run();

// Accessing data stored in Local Storage. To make it more advanced you could check if there is any data stored in Local Storage.
html_code.value = localStorage.html_code;
css_code.value = localStorage.css_code;
js_code.value = localStorage.js_code;
</script>
<script>
//HTML
let htmlbox = document.getElementById("htmlbox");
      let htmlbutton = document.getElementById("htmlbutton");
      htmlbutton.onclick = function () {
        htmlbox.select();
        
        document.execCommand("copy");
        
        htmlbutton.innerText = "Copied";
    
    };
       
        
//CSS
let cssbox = document.getElementById("cssbox");
      let cssbutton = document.getElementById("cssbutton");
      cssbutton.onclick = function () {
        cssbox.select();
        
        document.execCommand("copy");
        cssbutton.innerText = "Copied";
        
        };
//JavaScript 
let jsbox = document.getElementById("jsbox");
      let jsbutton = document.getElementById("jsbutton");
      jsbutton.onclick = function () {
        jsbox.select();
        document.execCommand("copy");
        jsbutton.innerText = "Copied";
     
        };

    </script>
<script>

function cdClear() { var wtarea = document.getElementById('htmlbox');
  wtarea.value = '';
  document.getElementById("btnInfo")
        .style.display = "none",document.getElementById("button-link")
        .style.display = "none",document.getElementById("btn_clear")
        .style.display = "none"
}
function cdClear1() { var wtarea = document.getElementById('cssbox');
  wtarea.value = '';
  document.getElementById("btnInfo")
        .style.display = "none",document.getElementById("button-link")
        .style.display = "none",document.getElementById("btn_clear")
        .style.display = "none"
}
function cdClear2() { var wtarea = document.getElementById('jsbox');
  wtarea.value = '';
  document.getElementById("btnInfo")
        .style.display = "none",document.getElementById("button-link")
        .style.display = "none",document.getElementById("btn_clear")
        .style.display = "none"
}
</script>