HTML/CSS - Rango Text Editor Online Editor and JavaScript Compiler

html

<div class='container'>
  <h1 class='header'>Rango Text Editor</h1>
  <div class='edit-container'>
    <p class='hint' contenteditable> Write the Text here, and check out the HTML version here https://jsfiddle.net/gx0qew1b/
    <div id='edit' contenteditable>
    </div>
  </div>
  <div id='display' class='display-container'>
  </div>
  <footer>
  </footer>
</div>
<body style="background-color:#ffff4d;">

css

* The CSS file */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: #ffff4d;
}
::-webkit-scrollbar-track {
  background-color: #ffff4d;
}
* {
  box-sizing: border-box;
  outline: 0;
}
body {
  margin: 0;
  font-family: helvetica;
}
.header {
  width: 100%;
  text-align: center;
  margin: 20px 0 0;
  color: Orange;
}
.hint {
  color: pink;
  padding: 0 10px;
  font-size: 15px;

alert("Hi there, this is my first code so go easy on me mk. It's Called Rango Text Editor, hope you enjoy!")
// The javascript file
let display;
let edit;
// Check storage to get saved item else ''
let editContainer = localStorage.getItem('edit-container');
if(editContainer && editContainer.length > 0) {
  // Capture the target elements
  display = document.getElementById('display');
  edit = document.getElementById('edit');
  // Initialize elements with their children
display.innerHTML = editContainer;
edit.innerText = editContainer;
} else {
  let initialContents = "<style> \n.intro { \ncolor: yellow; \ntext-decoration: underline; \ntext-align: center;\n} \n</style>\n\n<h3 class='intro'>Designed by Dennis Crowley </h3>";
  localStorage.setItem('edit-container', initialContents);
  display = document.getElementById('display');
  edit = document.getElementById('edit');
  edit.innerText = initialContents;
  display.innerHTML = initialContents;
}
// When a new data is typed in the edit field, add to storage and update the display panel    
window.addEventListener('keyup', () => {
  // Get the current text in edit container and display

BROWSER

Console