JSFiddle - React, Tailwind, and code Playground

by hotbelgo

HTML

<body onload="checkEdits()">
    <div id="wrapper">
        <div id="header">
          <header><h1>Bison Mail</h1></header>
      </div>
      <hr>
      <br id="clearleft">

      <div id="leftcolumn">
        <hr>
        <ul class="navbar">
            <li><a href="staffhome.html">Home</a></li>
            <li><a href="staffinfo.html">Packages</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
            <li><a href="mailhome.html">Sign-Out</a></li>
        </ul>
        <hr>
    </div>

    <div id="rightcolumn">
        <div class="container">
            <div class="table-row">
                <div class="heading">Name:</div>
                <div id="name" class="edit" contenteditable="true">Meshech Price</div>
            </div>
            <div class="table-row">
                <div class="heading">Date Received:</div>
                <div id="dateRecieved" class="edit" contenteditable="true">11/1/2014</div>
            </div>
            <div class="table-row">
                <div class="heading">Date of Pickup:</div>
                <div id="dateOfPickup" class="edit" contenteditable="true">None</div>
            </div>
            <div class="table-row">
                <div class="heading">ID:</div>
                <div id="ID" class="edit" contenteditable="true">N/A</div>
            </div>
            <div class="table-row">
                <div class="heading">E-mail:</div>
                <div id="email" class="edit" contenteditable="true"><address><a href="[email protected]">[email protected]</a></address></div>
            </div>
            <div class="table-row">
                <div class="heading">E-mail Sent:</div>
                <div id="emailSent" class="edit" contenteditable="true">Sent</div>
            </div>
            <div class="table-row">
                <div class="heading">Signature:</div>
                <div id="signature" class="edit" contenteditable="true">N/A</div>
            </div>
   ...

JavaScript

function saveEdits() {

        //get the editable element
        var editElem = document.getElementsByClassName("edit");
        //display.write(editElem);
        //get the edited element content
        localStorage.userEdits = {}
        Array.prototype.forEach.call(editElem, function(e) {
            console.log(e.id)
            localStorage.setItem([e.id], e.innerHTML);
        });
    
        //display.write(userVersion);
        //save the content to local storage

        //write a confirmation to the user
        document.getElementsByClassName("update").innerHTML="Edits saved!";

        }

    function checkEdits() {

    //find out if the user has previously saved edits
        if(localStorage.userEdits) {
            var editElem = document.getElementsByClassName("edit");
            Array.prototype.forEach.call(editElem, function(e) {
                console.log(e.id)
                e.innerHTML = localStorage.getItem(e.id);
            });
        }
}