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 src="https://kit.fontawesome.com/f97427a625.js" crossorigin="anonymous"></script>
<div class="wrapper">
    <!--This is where we will type code-->
    <div class="input">
      <div class="editor">
        <label><i class="fa-brands fa-html5"></i> HTML</label>
        <textarea class="html" onkeyup="compileCode()" spellcheck="false"></textarea>
      </div>
      <div class="editor">
        <label><i class="fa-brands fa-css3-alt"></i> CSS</label>
        <textarea class="css" onkeyup="compileCode()" spellcheck="false"></textarea>
      </div>
      <div class="editor">
        <label><i class="fa-brands fa-square-js"></i> JavaScript</label>
        <textarea class="javascript" onkeyup="compileCode()" spellcheck="false"></textarea>
      </div>
    </div>

    <!--This is where the result will display-->
    <div class="output">
      <label><i class="fa-solid fa-play"></i> Result</label>
      <iframe class="display"></iframe>
    </div>
  </div>
<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins';
}

  {
  width: 100%;
  height: 100vh;
  background-color: #000;
}

.wrapper{
  display: flex;
}

.input, .output{
  flex-basis: 50%;
  height: 100vh;
}

.input{
  background-color: #ddd;
}

.editor{
  height: 33.3%;
  display: flex;
  flex-direction: column;
}

.editor textarea{
  height: 100%;
  resize: none;
  background: none;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 17px;
  color: #000;
  font-weight: 500;
  font-family: 'Cascadia Code';
}

.editor label{
  background-color: #000;
  color: #fff;
  padding: 5px;
}

i{
  margin-right: 7px;
}

.output{
  display: flex;
  flex-direction: column;
}

.output label{
  background-color:#000;
  color: #fff;
  padding: 5px;
}

iframe{
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
</style>
<script>
const htmlCode = document.querySelector(".html");
const cssCode = document.querySelector(".css");
const jsCode = document.querySelector(".javascript");
const display = document.querySelector(".display");

function compileCode () {
  display.contentDocument.body.innerHTML = htmlCode.value + "<style>" + cssCode.value + "</style>";
  display.contentWindow.eval(jsCode.value);
}
</script>