Chromebook Notepad

Chromebook-Notepad.markdown

Chromebook Notepad

Super simple text editor for Chromebooks.

A Pen by Jaakko Alajoki on CodePen.

License.

index.html

<div class="textarea" contentEditable="true"></div>

PqoMRm.markdown

PqoMRm

A Pen by Jaakko Alajoki on CodePen.

License.

script.js

document.addEventListener("DOMContentLoaded", function(event) { 

  // Get textarea.
  var textarea =  document.getElementsByClassName("textarea")[0];

  // Load content from localStorage.
  textarea.innerHTML = window.localStorage["content"] || "Please write something!";
  
  // Save content after every keypress.
  textarea.addEventListener("keyup", function() {
  	window.localStorage["content"] = textarea.innerHTML;
  })
  
});

style.scss

html, body {
  padding: 0;
  margin: 0;
  
}
.textarea {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 1rem;
  font-family: "Consolas", "Lucida Console", "Monaco", "Courier New";
}