<div class='container'>
  <h1 class='header'>Online Text Editor</h1>
  <div class='edit-container'>
    <p class='hint' contenteditable>This div has a class of "edit-container" of which you can style. Same thing with the next div with class of "display-container"...Write your codes  and it will display in the next div</p>
    <div id='edit' contenteditable>

    </div>
  </div>
  <div id='display' class='display-container'>
  </div>
  <footer>
    <p align='center'>Created with <span class='hearts'>&hearts;</span> by <a href='https://twitter.com/iamdillion'>Dillion Megida</a></p>
  </footer>
</div>

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: yellow;
}
::-webkit-scrollbar-track {
  background-color: lightblue;
}
* {
  box-sizing: border-box;
  outline: 0;
}
body {
  margin: 0;
  font-family: helvetica;
}
.header {
  width: 100%;
  text-align: center;
  margin: 20px 0 0;
  color: teal;
}
.hint {
  color: pink;
  padding: 0 10px;
  font-size: 15px;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.display-container, .edit-container {
  background-color: teal;
  margin: 5px 10px;
  width: 45%;
  height: 70%;
  overflow-y: auto;
  padding-bottom: 30px;
}
#edit {
  color: white;
  font-family: monospace;
  font-size: 16px;
  width: 100%;
  display: inline-block;
  padding: 10px;
}
.hearts {
  color: red;
  font-size: 25px;
}
footer {
  width: 100%;
}


@media only screen and (max-width: 550px) {
  .display-container, .edit-container {
    width: 90%;
  }
}

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 Dillion Megida</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
  edit = document.getElementById('edit');
  editContainer = edit.innerText;
  display = document.getElementById('display');
  display.innerHTML = editContainer;
  
  // Update storage
  localStorage.setItem('edit-container', editContainer);
});