<div id="toolbar">

      <button id="addh1">H1</button>

      <button id="addh2">H2</button>

    </div>

    <button id="editBtn" type="button">Edit Document</button>

    <div id="editor">

      <h1 id="title">A Nice Heading.</h1>

      <p>Last Edited By - <span id="author">Monty Shokeen</span></p>

      <p id="content">Some content that needs correction.</p>

    </div>

body {

        font-family: Arial;

        font-size: 1.3em;

        line-height: 1.6em;

      }

​

      .headline {

        font-size: 2em;

        text-align: center;

      }

​

      #wrapper {

        width: 600px;

        background: #fff;

        padding: 1em;

        margin: 1em auto;

        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

        border-radius: 3px;

      }

​

      button {

        border: none;

        padding: 0.8em;

        background: #f96;

        border-radius: 3px;

        color: white;

        font-weight: bold;

        margin: 0 0 1em;

      }

​

      button:hover,

      button:focus {

        cursor: pointer;

        outline: none;

      }

​

      #editor {

        padding: 1em;

        background: #e6e6e6;

        border-radius: 3px;

      }

const editBtn = document.getElementById("editBtn");

      const editables = document.querySelectorAll("#title, #author, #content");

      if (typeof Storage !== "undefined") {

        if (localStorage.getItem("title") !== null) {

          editables[0].innerHTML = localStorage.getItem("title");

        }

​

        if (localStorage.getItem("author") !== null) {

          editables[1].innerHTML = localStorage.getItem("author");

        }

​

        if (localStorage.getItem("content") !== null) {

          editables[2].innerHTML = localStorage.getItem("content");

        }

      }

      editBtn.addEventListener("click", function (e) {

        if (!editables[0].isContentEditable) {

          editables[0].contentEditable = "true";

          editables[1].contentEditable = "true";

          editables[2].contentEditable = "true";

          editBtn.innerHTML = "Save Changes";

          editBtn.style.backgroundColor = "#6F9";

        } else {

          // Disable Editing

          editables[0].contentEditable = "false";

          editables[1].contentEditable = "false";

          editables[2].contentEditable = "false";

          // Change Button Text and Color

          editBtn.innerHTML = "Enable Editing";

          editBtn.style.backgroundColor = "#F96";

          // Save the data in localStorage

          for (var i = 0; i < editables.length; i++) {

            localStorage.setItem(

              editables[i].getAttribute("id"),

              editables[i].innerHTML

            );

          }

        }

      });

      document.addEventListener("keydown", function (e) {

        for (var i = 0; i < editables.length; i++) {

          localStorage.setItem(

            editables[i].getAttribute("id"),

            editables[i].innerHTML

          );

        }

      });

      document.querySelector("#addh1").addEventListener("click", function (e) {

        const text = prompt(

          "What text do you want the heading to have?",

          "Heading"

        );

        editables[2].innerHTML = editables[2].innerHTML + `<h1>${text}</h1>`;

      });

      document.querySelector("#addh2").addEventListener("click", function (e) {

        const text = prompt(

          "What text do you want the heading to have?",

          "Heading"

        );

        editables[2].innerHTML = editables[2].innerHTML + `<h2>${text}</h2>`;

      });