IN DEV Local Host Notes

In this example below you will see how to do a IN DEV Local Host Notes with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by clarkhacks, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright clarkhacks ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>IN DEV Local Host Notes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Poppins'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="page-container">
  <input id="uploadImage" type="file" onchange="encodeImageFileAsURL(this)"/>
  <div class="title-container">
    <h1 contenteditable="true" onkeyup="titleReplace()" onkeydown="titleReplace()" id="docTitle">Document Title</h1>
  </div>
  <div class="toolbar">
    <button class="tool" onclick="saveData()" title="Save"><i class="fa fa-save"></i></button>
    <button class="tool" onclick="deleteData()" title="Delete"><i class="fa fa-trash"></i></button>
    <button class="tool" onclick="insertHeader()" title="Header"><i class="fa fa-header"></i></button>
    <button class="tool" onclick="insertBold()" title="Bold"><b><i class="fa fa-bold"></i></b></button>
    <button class="tool" onclick="insertItalic()" title="Italic"><em><i class="fa fa-italic"></i></em></button>
    <button class="tool" onclick="insertCode()" title="Code"><i class="fa fa-code"></i></button>
    <button class="tool" onclick="insertLink()" title="Hyperlink"><i class="fa fa-link"></i></button>
    <button class="tool" onclick="insertImage()" title="Image"><i class="fa fa-image"></i></button>
    <button class="tool touching" onclick="centerText()" title="Center"><i class="fa fa-align-center"></i></button>
    <button class="tool touching" onclick="leftText()" title="Left"><i class="fa fa-align-left"></i></button>
    <button class="tool touching" onclick="rightText()" title="Right"><i class="fa fa-align-right"></i></button>
  </div>
  <div class="entry-content" contenteditable="true" id="docContent">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis id ab, ipsum praesentium deserunt nulla doloremque et quasi voluptatum aperiam. Odit blanditiis illo facilis, aliquid placeat impedit quisquam alias ullam.</p>
    <h3>Header</h3>
    <p>div Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo nulla voluptas eum ducimus enim ex id sint vero, unde quasi consequuntur at obcaecati officia veritatis animi! Magnam, non qui! Veniam! <a href="#">http://link.tld</a>.</p><img class="center" src="https://clarkhacks.com/img/logo.png" alt="Bleh"/>
  </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/clarkhacks/in-dev-local-host-notes-oogxXg */
html {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  text-align: center;
  line-height: 1.4;
  background-color: white;
  color: rgba(0, 0, 0, 0.8);
  font-family: Poppins, freight-text-pro, Georgia, Cambria, "Times New Roman", Times, serif;
}

img {
  width: 80%;
  display: block;
  max-width: 20rem;
}
img.center {
  width: 80%;
  margin: auto;
}

div.page-container {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 80px;
  height: 100%;
}
div.page-container div.entry-content {
  height: 100%;
  max-width: 80rem;
  margin: 0px auto;
  text-align: left;
  font-size: 18px;
  line-height: 1.5;
  padding-left: 10%;
  padding-right: 10%;
}
div.page-container a {
  color: #57ad68;
  text-decoration: none;
  line-height: 35px;
  text-decoration: none;
  letter-spacing: -0.02em;
}
div.page-container a:hover {
  text-decoration: none;
}
div.page-container pre {
  background-color: #000;
  color: #fff;
  border-radius: 4px;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: auto;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
table caption {
  font-size: 1.5em;
  margin: 0.5em 0 0.75em;
}
table tr {
  background: #fff;
  border: 1px solid #ddd;
  padding: 0.35em;
}
table th, table td {
  padding: 0.625em;
  text-align: center;
}
table th {
  font-size: 0.85em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 1.3em;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 0.625em;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 0.8em;
    text-align: right;
  }
  table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
}
.toolbar {
  text-align: left;
  padding-left: 10%;
  margin: 1rem;
  background-color: #efefef;
}
.toolbar button.tool {
  margin: 0.5rem;
  background-color: #fff;
  border-radius: 4px;
  padding: 0.4rem;
  border: none;
}

.touching {
  margin: 0 !important;
}

#uploadImage {
  display: none;
}


/*Downloaded from https://www.codeseek.co/clarkhacks/in-dev-local-host-notes-oogxXg */
'use strict';

function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();

      // Range.createContextualFragment() would be useful here but is
      // only relatively recently standardized and is not supported in
      // some browsers (IE9, for one)
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(),
        node,
        lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);

      // Preserve the selection
      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(html);
  }
}

// Upload Image

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    document.getElementById("docContent").focus();
    pasteHtmlAtCaret('<img src="' + reader.result + '" class="center"/>');
  };
  reader.readAsDataURL(file);
}

function insertHeader() {
  if (window.getSelection) {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var header = document.createElement("h3");
    header.appendChild(selectedText);
    selection.insertNode(header);
  } else {
    document.getElementById("docContent").focus();
    pasteHtmlAtCaret("<h3>Header</h3>");
  }
}
function rightText() {
  document.execCommand("justifyRight");
}
function centerText() {
  document.execCommand("justifyCenter");
}
function leftText() {
  document.execCommand("justifyLeft");
}
function insertBold() {
  document.execCommand("bold");
}
function insertItalic() {
  document.execCommand("italic");
}
function insertCode() {
  document.getElementById("docContent").focus();
  pasteHtmlAtCaret("<pre><code>...</code></pre>");
}
function insertLink() {
  document.getElementById("docContent").focus();
  pasteHtmlAtCaret("<b>INSERTED</b>");
}
function insertImage() {
  document.getElementById("uploadImage").click();
}

(function() {
  if (localStorage.getItem("docExists") == JSON.stringify("true")) {
    load();
    saveData();
  } else {
    localStorage.setItem("docExists", JSON.stringify("true"));
    saveData();
  }
})();

function titleReplace() {
  document.title = document.getElementById("docTitle").textContent;
}

function load() {
  var docTitle = JSON.parse(localStorage.getItem("docTitle")),
      docContent = JSON.parse(localStorage.getItem("docContent"));
  document.getElementById("docTitle").innerHTML = docTitle;
  document.getElementById("docContent").innerHTML = docContent;
}
function saveData() {
  var docTitle = document.getElementById("docTitle").textContent,
      docContent = document.getElementById("docContent").innerHTML,
      docName = docTitle,
      full = [
        docTitle = docTitle,
        docContent = docContent
      ];
  localStorage.setItem("docTitle", JSON.stringify(docTitle));
  localStorage.setItem("docContent", JSON.stringify(docContent));
}
function deleteData() {
  localStorage.clear();
  window.location.href = window.location.href;
}

Comments