Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>

  <header class="header">
    <nav class="primary-nav">
      <div class="logo">
        <span>Writing Assistant</span>
      </div>
      <ul role="list" class="nav-list">
        <li class="nav-item"><a href="#notes" class="nav-link">Notes</a></li>
        <li class="nav-item"><a href="https://kernixwebdesign.com/resume-portfolio.html" target="_blank"
            class="nav-link">Portfolio Home</a></li>
      </ul>
    </nav>
    <h2>Mouse-only document &amp; email composition tool</h2>
    <p>Assistive teechnology tool for people with reduced motor skills</p>
  </header>

  <main>
    <div class="container">

      <nav class="main-nav">
        <ul>
          <li><a href="#" tabindex="-1">A</a>
            <div class="submenu">
              <ul id="lettera" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">B</a>
            <div class="submenu">
              <ul id="letterb" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">C</a>
            <div class="submenu">
              <ul id="letterc" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">D</a>
            <div class="submenu">
              <ul id="letterd" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">E</a>
            <div class="submenu">
              <ul id="lettere" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">F</a>
            <div class="submenu">
              <ul id="letterf" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">G</a>
            <div class="submenu">
              <ul id="letterg" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">H</a>
            <div class="submenu">
              <ul id="letterh" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" class="multi" tabindex="-1">IJK</a>
            <div class="submenu">
              <ul id="letteri" class="top-words"></ul>
              <ul id="letterj" class="top-words"></ul>
              <ul id="letterk" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">L</a>
            <div class="submenu">
              <ul id="letterl" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">M</a>
            <div class="submenu">
              <ul id="letterm" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">N</a>
            <div class="submenu">
              <ul id="lettern" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">O</a>
            <div class="submenu">
              <ul id="lettero" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">P</a>
            <div class="submenu">
              <ul id="letterp" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" class="multi" tabindex="-1">QR</a>
            <div class="submenu">
              <ul id="letterq" class="top-words"></ul>
              <ul id="letterr" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">S</a>
            <div class="submenu">
              <ul id="letters" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">T</a>
            <div class="submenu">
              <ul id="lettert" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" class="multi" tabindex="-1">UV</a>
            <div class="submenu">
              <ul id="letteru" class="top-words"></ul>
              <ul id="letterv" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" tabindex="-1">W</a>
            <div class="submenu">
              <ul id="letterw" class="top-words"></ul>
            </div>
          </li>
          <li><a href="#" class="multi" tabindex="-1">XYZ</a>
            <div class="submenu">
              <ul id="letterx" class="top-words"></ul>
              <ul id="lettery" class="top-words"></ul>
              <ul id="letterz" class="top-words"></ul>
            </div>
          </li>
        </ul>
      </nav>

      <button id="accordian1" class="accordian1" title="Click to open and close">Add Names, Proper Nouns and
        Phrases</button>
      <div id="panel1" class="panel panel1-inactive">
        <section class="alphabet">
          <div id="special-words" class="box special-items">
          </div>
        </section>
      </div>

    </div>

    <section class="main-section">

      <!-- Clear textfield Modal -->
      <div class="modal-container" id="modal2">
        <div class="modal">
          <button class="close-btn" id="close2">
            <i class="fa fa-times"></i>
          </button>
          <div class="modal-header">
            <h3>Delete text</h3>
          </div>
          <div class="modal-content">
            <p>Are you sure that you want to clear the text field?</p>
            <form class="modal-form">
              <button id="clearText" type="button" class="submit-btn yes-btn">Yes, delete the field.</button>
            </form>
          </div>
        </div>
      </div>
      <!-- end modal -->

      <button id="open2" class="clear-btn">Clear text box</button>
      <button id="copy" class="copy-btn" value="copy-text" title="Does not work in IE">Copy text</button>
      <!-- <textarea name="text-box" id="text-box" class="text-box"
        placeholder="Click any proper nouns or alphabet word buttons, or try the keyboard below to enter text..."></textarea> -->
      <textarea name="text-box" id="text-box" class="text-box"
        placeholder="Click any proper nouns or alphabet word buttons, or try the keyboard below to enter text..."></textarea>

      <div class="two-col">
        <div id="keyboard" class="keybrd-box">
          <div class="keybrd-row top-items">
            <button class="nonAlpha tilde" tabindex="-1">~</button>
            <button class="nonAlpha exclamation" tabindex="-1">!</button>
            <button class="nonAlpha atsymbol" tabindex="-1">@</button>
            <button class="nonAlpha pound" tabindex="-1">#</button>
            <button class="nonAlpha dollar" value="$" tabindex="-1">$</button>
            <button class="nonAlpha percent" value="%" tabindex="-1">%</button>
            <button class="nonAlpha caret" value="^" tabindex="-1">^</button>
            <button id="amp" class="nonAlpha ampersand" value="&amp;" tabindex="-1">&#38;</button>
            <button class="nonAlpha asterisk" tabindex="-1">*</button>
            <button class="nonAlpha rtparen" tabindex="-1">(</button>
            <button class="nonAlpha leftparen" tabindex="-1">)</button>
            <button class="nonAlpha underscore" tabindex="-1">_</button>
            <button class="nonAlpha plus" tabindex="-1">+</button>
            <button id="backspace" class="nonprint backspace" tabindex="-1">Backspace</button>
          </div>
          <div class="keybrd-row top-items">
            <button class="nonAlpha accent" tabindex="-1">`</button>
            <button class="nonAlpha one" tabindex="-1">1</button>
            <button class="nonAlpha two" tabindex="-1">2</button>
            <button class="nonAlpha three" tabindex="-1">3</button>
            <button class="nonAlpha four" tabindex="-1">4</button>
            <button class="nonAlpha five" tabindex="-1">5</button>
            <button class="nonAlpha six" tabindex="-1">6</button>
            <button class="nonAlpha seven" tabindex="-1">7</button>
            <button class="nonAlpha eight" tabindex="-1">8</button>
            <button class="nonAlpha nine" tabindex="-1">9</button>
            <button class="nonAlpha zero" tabindex="-1">0</button>
            <button class="nonAlpha dash" tabindex="-1">-</button>
            <button class="nonAlpha equal" tabindex="-1">=</button>
            <button id="delete" class="nonprint delete" tabindex="-1">Delete</button>
          </div>
          <div class="keybrd-row top-items">
            <button id="tab" class="nonprint tab" tabindex="-1">Tab</button>
            <button class="key keyq" value="q" tabindex="-1">Q</button>
            <button class="key keyw" value="w" tabindex="-1">W</button>
            <button class="key keye" value="e" tabindex="-1">E</button>
            <button class="key keyr" value="r" tabindex="-1">R</button>
            <button class="key keyt" value="t" tabindex="-1">T</button>
            <button class="key keyy" value="y" tabindex="-1">Y</button>
            <button class="key keyu" value="u" tabindex="-1">U</button>
            <button class="key keyi" value="i" tabindex="-1">I</button>
            <button class="key keyo" value="o" tabindex="-1">O</button>
            <button class="key keyp" value="p" tabindex="-1">P</button>
            <button id="rtsq" class="nonAlpha rtsq shiftItem" tabindex="-1">[</button>
            <!-- <button class="nonAlpha rtcurly shiftItem" tabindex="-1">{</button> -->
            <button id="leftsq" class="nonAlpha leftsq shiftItem" tabindex="-1">]</button>
            <!-- <button class="nonAlpha rtcurly shiftItem" tabindex="-1">}</button> -->
            <button id="backslash" class="nonAlpha backslash shiftItem" tabindex="-1">\</button>
            <!-- <button class="nonAlpha pipe shiftItem" tabindex="-1">|</button> -->
          </div>
          <div class="keybrd-row top-items">
            <button id="caps" class="nonprint caps caps-off" tabindex="-1">Caps</button>
            <button class="key keya" value="a" tabindex="-1">A</button>
            <button class="key keys" value="s" tabindex="-1">S</button>
            <button class="key keyd" value="d" tabindex="-1">D</button>
            <button class="key keyf" value="f" tabindex="-1">F</button>
            <button class="key keyg" value="g" tabindex="-1">G</button>
            <button class="key keyh" value="h" tabindex="-1">H</button>
            <button class="key keyj" value="j" tabindex="-1">J</button>
            <button class="key keyk" value="k" tabindex="-1">K</button>
            <button class="key keyl" value="l" tabindex="-1">L</button>
            <button id="semicolon" class="nonAlpha shiftItem" tabindex="-1">;</button>
            <!-- <button class="nonAlpha colon" tabindex="-1">:</button> -->
            <button id="quotes" class="nonAlpha shiftItem" tabindex="-1">&#39;</button>
            <!-- <button class="nonAlpha quotes" tabindex="-1">&quot;</button> -->

            <button id="enter" class="enter nonprint" tabindex="-1">Enter</button>
          </div>
          <div class="keybrd-row top-items">
            <button id="shiftl" class="nonprint shiftL shift-off" tabindex="-1">Shift</button>
            <button class="key keyz" value="z" tabindex="-1">Z</button>
            <button class="key keyx" value="x" tabindex="-1">X</button>
            <button class="key keyc" value="c" tabindex="-1">C</button>
            <button class="key keyv" value="v" tabindex="-1">V</button>
            <button class="key keyb" value="b" tabindex="-1">B</button>
            <button class="key keyn" value="n" tabindex="-1">N</button>
            <button class="key keym" value="m" tabindex="-1">M</button>
            <button id="comma" class="nonAlpha shiftItem" tabindex="-1">,</button>
            <!-- <button class="nonAlpha lt" tabindex="-1">&lt;</button> -->
            <button id="periodpunc" class="nonAlpha shiftItem" tabindex="-1">.</button>
            <!-- <button class="nonAlpha gt" tabindex="-1">&gt;</button> -->
            <button id="forwardslash" class="nonAlpha shiftItem" tabindex="-1">/</button>
            <!-- <button class="nonAlpha question" value="?">?</button> -->
            <button id="shiftr" class="nonprint shiftR shift-off" tabindex="-1">Shift</button>
          </div>
          <div class="keybrd-row top-items">
            <button id="ctrlleft" class="nonprint ctrl secondary" tabindex="-1">Ctrl</button>
            <button class="nonprint alt secondary" tabindex="-1">Alt</button>
            <button id="spacebar" class="spacebar nonprint" tabindex="-1">Spacebar</button>
            <button class="nonprint alt secondary" tabindex="-1">Alt</button>
            <button id="ctrlright" class="nonprint ctrl secondary" tabindex="-1">Ctrl</button>
          </div>
        </div>
        <!-- nav keys -->
        <div class="keybrd-box2">
          <div class="keybrd-row top-items">
            <button id="homekey" class="home" value="home" tabindex="-1">Home</button>
            <!-- <button id="uparrow" class="up-arrow secondary" value="&uarr;" tabindex="-1">&#8679;</button> -->
            <!-- <button id="page-up" class="page-up secondary" value="page up" tabindex="-1">Pg &#8679;</button> -->
          </div>
          <div class="keybrd-row top-items">
            <button id="leftarrow" class="larr" value="&larr;" tabindex="-1">&#8678;</button>
            <span class="navBtn nothing" value=" " tabindex="-1">&nbsp; &nbsp;</span>
            <button id="rightarrow" class="rarr" value="&rarr;" tabindex="-1">&#8680;</button>
          </div>
          <div class="keybrd-row top-items">
            <button id="end" class="end" tabindex="-1">End</button>
            <!-- <button id="downarrow" class="down-arrow secondary" value="&darr;" tabindex="-1">&#8681;</button> -->
            <!-- <button id="page-down" class="page-down secondary" value="page down" tabindex="-1">Pg &#8681;</button> -->
          </div>
          <hr>
          <div class="keybrd-row top-items">
            <button class="numpad nonAlpha" tabindex="-1">7</button>
            <button class="numpad nonAlpha" tabindex="-1">8</button>
            <button class="numpad nonAlpha" tabindex="-1">9</button>
            <button class="numpad nonAlpha" tabindex="-1">/</button>
          </div>
          <div class="keybrd-row top-items">
            <button class="numpad nonAlpha" tabindex="-1">4</button>
            <button class="numpad nonAlpha" tabindex="-1">5</button>
            <button class="numpad nonAlpha" tabindex="-1">6</button>
            <button class="numpad nonAlpha" tabindex="-1">*</button>
          </div>
          <div class="keybrd-row top-items">
            <button class="numpad nonAlpha" tabindex="-1">1</button>
            <button class="numpad nonAlpha" tabindex="-1">2</button>
            <button class="numpad nonAlpha" tabindex="-1">3</button>
            <button class="numpad nonAlpha" tabindex="-1">-</button>
          </div>
          <div class="keybrd-row top-items">
            <button class="numpad nonAlpha zero2" tabindex="-1">0</button>
            <button class="numpad nonAlpha" tabindex="-1">.</button>
            <button class="numpad nonAlpha" tabindex="-1">+</button>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- https://betterprogramming.pub/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc -->
  <!-- <div class="input-box">
    <div class="inputfile">
      <input type="file" class="fileupload">
      <textarea class="userinputarea" cols="60" rows="10" placeholder="text will appear here">
      </textarea>
      <div class="useroutput" id="useroutput"></div>
    </div>
  </div> -->

  <div class="notes-container">
    <section id="notes" class="notes">
      <div class="container border technical">
        <h2>Important notes about using this app</h2>
        <p>This single-page app is for anyone with reduced fine motor controls, assuming they have better control of
          positioning a mouse pointer than clicking individual keys on a keyboard. Diseases and conditions that often
          result in a loss of fine motor skills include infection, multiple sclerosis, stroke, cerebral palsy, brain
          tumors, neuropathy, and spinal injuries.</p>
        <p>My goal is to have a friend or family member upload a file of text to populate the Writing Assistant page for
          someone who could benefit from the app. This file should contain the most used words and phrases for
          someone who has reduced motor control. This way they will be able to communicate with loved ones much easier,
          especially if they also have trouble speaking.</p>
        <p>When I have the file upload issue solved, you will be able to download the app to use on a desktop or laptop.
          I would also like to make the app available to any websites and non-profit organizations that assist people
          with disabilities.</p>
        <h3>General Notes:</h3>
        <ol>
          <li>This app is for people who prefer to use a mouse to write because of their motor control difficulties.
            This app is NOT for tablets or smartphones, though I tried to make it responsive in the event you wanted to
            show someone the features or have a very small laptop monitor.</li>
          <li>Click the Proper Names button at the top to open that section. Click it
            a second time to close the section.</li>
          <li>The text area has a clear button that will delete everything in those text field.
            Clicking that button opens a popup asking to confirm the deletion. The popup confirmation is in case you
            clicked the clear button by accident. The text area also has a copy button to copy the contents into your
            clipboard. You can then paste the text into another program.</li>
          <li>All buttons have a change in color when you hover over them to know that you are "over the target", so to
            speak. They also turn orange when you click them.</li>
          <li>All words are designed to add a space before the word. Conversely, all characters on the keyboard do not
            add a space. So if
            you will be typing out a word, use the Spacebar key of the virtual keyboard before typing the word.</li>
          <li>You can skip the Techincal Documentation section unless you want to download the app or edit the code that
            runs the app.</li>
        </ol>

        <h3>Alphabetical words:</h3>
        <ol>
          <li>If you hover over the buttons for each letter of the alphabet, you'll see between 20 to 100+ words. I
            added
            the most commonly used words that were 4 letters or greater, though for a few letters the cutoff is 3
            letters.</li>
          <li>Ideally, you want long words that are most often used by the user. The list shouldn’t be so long that you
            lose time searching for a word that is not in there because you can’t remember a list of 100 words per
            letter. Shorter is probably better.</li>
          <li>Depending on the number of words you upload or the size of your monitor, you may not always see the text
            entered in the text box because the mega menu will block part of the text field, though the background is
            partially transparent. Don’t worry, if you click a word and can’t see the text box - it will be added.</li>
        </ol>

        <h3>Virtual Keyboard and main text area:</h3>
        <ol>
          <li>I omitted the Insert key as I find it an annoyance rather than a helpful key. I also moved the Delete key
            to the main keyboard section. Backspace removes a character behind the cursor, while Delete removes a
            character in front of the cursor. Place your cursor anywhere in the text field to use them. The same goes
            for the Enter and Tab keys.</li>
          <li>I have the Ctrl and Alt keys disabled as they are not needed for basic email or document writing. I also
            hid the buttons for arrow up, page up, arrow down, and page down as I don’t think they are needed, though I
            may add them in later.</li>
          <li>The Home, End, right and left arrow keys are functional. However, the Home key takes you to the beginning
            of the text area, as opposed to the beginning of each line. The end key has the same issue but it takes you
            to the end of the text area instead of the end of each line.</li>
          <li>I added the nav keys and number pad to the left mostly to make entering numbers easier.</li>
          <li>Both the Caps key and Shift keys will stay highlighted until you click them a second time. All words and
            letters will be capitalized while the Caps key is on.</li>
          <li>Hitting the Shift key toggles the 8
            double-character keys that are below the top row on a standard keyboard. Or specifically, square and curly
            brackets, back slash and pipe, colon and semi-colonm, single and double quotes, and forward slash and
            question mark. Those keys also have a subtle border and color difference from the other keys.</li>
          <li>As you can see, I created a new row for the double-character keys that are above the top row of
            letters. The Backspace key looked odd on that row by itself.</li>
          <li>All words or letters that are the first in the text area, or are the first after you hit enter, or that
            follow a period, exclamation, or question mark will automatically be capitalized. Use the Caps key for all
            other capital letters.</li>
          <li><strong>Tip</strong>: I have a few free browser extensions added to my Chrome and Brave web browsers. One
            that may help
            you is the spelling and grammar checker called Grammarly. I highly recommend that you add
            that extension to your browser. It will pur a red underline under spelling and grammar errors in the text
            box. Just click the suggested replacement to make the change.</li>
        </ol>
      </div>
    </section>
  </div>

  <footer class="primary-footer">
    <div class="footer-container">
      <h3>My important links:</h3>
      <div class="footer-box">
        <ul class="footer-nav">
          <li><a href="https://kernixwebdesign.com/resume-portfolio.html" target="_blank">Portfolio Home</a></li>
          <li><a href="https://kernixwebdesign.com/" target="_blank">My Website</a></li>
          <li><a href="https://kernixwebdesign.com/inventory-management-resume/" target="_blank">My Resume</a></li>
          <li><a href="https://github.com/Kernix13" target="_blank">GitHub</a></li>
          <!-- <li><a href="#">Figma</a></li> -->
          <li><a href="https://codepen.io/jim-kernicky/pens/public" target="_blank">Codepen</a></li>
          <li><a href="https://www.freecodecamp.org/fccb4a9d0f6-135f-4a94-97f5-795068269ca7"
              target="_blank">freeCodeCamp</a></li>
        </ul>
      </div>
      <hr>
      <p class="copyright"> &copy; 2021 Kernix Web Design</p>
    </div>
  </footer>

</body>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Roboto&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --modal-duration: 1000ms;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #f5f5f5;
  color: #000;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  text-rendering: optimizeSpeed;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header, footer {
    font-family: 'Architects Daughter', cursive;
    font-size: 120%;
}
button {
  font-family: 'Roboto', sans-serif;
}

a, a:visited {
  text-decoration: none;
  color: #0000cd;
}

a:hover, a:focus {
  text-decoration: underline;
}

.highlight-text {
  font-weight: 600;
  font-style: italic;
  color: rgb(75, 72, 136);
  font-family: 'Architects Daughter', cursive;
  font-size: 1.25rem;
}
.highlight2 {
  font-weight: 600;
  font-style: italic;
  text-decoration: underline;
  color: rgb(75, 72, 136);
}

.header, .container, .footer-container {
  width: 85%;
  max-width: 1100px;
}

.notes-container {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto 3em;
}

.header {
  padding: 0.5em 0;
}

.header h2, .header p {
  text-align: center;
}
.header h2 {
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 0;
  padding: 0.5em 0 0;
}

.header p {
  margin: 0;
  padding-bottom: 1.5em;
}

nav, .logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.photo {
  display: block;
  width: 3.75em;
  height: auto;
  /* background-color: rgba(196, 134, 247, 0.486); */
}

.logo span {
  padding-left: 1em;
}

.nav-list {
  display: flex;
  justify-content: flex-end;
  /* from Kev Powell, the below is normal for a nav ul or maybe just ul */
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  font-weight: 600;
  transition: color 250ms ease-out;
}

.nav-link:hover, .nav-list.active {
  text-decoration: none;
  color: rgb(170, 144, 1);
}

.nav-item + .nav-item {
  margin-left: 1.5em;
}
/* ----------HEADER ABOVE--------------------- */
main, section, .box, .header, .keybrd-row, .alphabet, .footer-container, .container   {
  margin: 0 auto;
}

/* .box {
  background-color: #000;
  display: block;
  padding: 4.5em;
  border: 1px solid #ff0000;
} */

.alphabet {
  background-color: rgba(0, 0, 0, 0.247);
  display: block;
  padding: 1.5em;
}
.top-items, .keybrd-row {
  list-style: none;
  padding: 0;
}

.keybrd-box2 > .top-items button, .keybrd-box2 > .keybrd-row button {
  margin: 0.125em;
  padding: 0.25em 0.5em;
}

.keybrd-box2 > .top-items {
  display: flex;
  justify-content: center;
}

.keybrd-box2 > .top-items > button {
  width: 3.75em;
  margin: 0.25em 0.25em;
  font-size: 0.875rem;
}

.keybrd-box2 > .top-items > .numpad {
  width: 2em;
  font-size: 0.9rem;
  margin: 0.25em 0.5em;
  padding: 0.375em;
}

.keybrd-box2 > .top-items > .zero2 {
  width: 5em;
}

.top-items button, .keybrd-row button, .special-items button {
  display: inline-block;

  margin: 0.25em;
  padding: 0.375em 0.75em;
  color: #333;
  background-color: #fff;
  border: 1px solid rgba(7, 7, 87, 0.618);
  border-radius: 0.25em;
  transition: box-shadow 250ms ease-in-out;
}
.top-items button, .keybrd-row button {
  font-size: 1rem;
}

.special-items button {
  font-size: 0.9375rem;
}

.top-items > .secondary {
  border: none;
  color: #ccc;
  background-color: #fff;
}
.top-items > .secondary:hover {
  cursor: unset;
  color: #ccc;
  background-color: #fff;
  box-shadow: none;
}
.top-items > .secondary:active {
  color: #ccc;
  background-color: #fff;
  box-shadow: none;
  transform: translateY(0);
}

.top-items button:hover, .keybrd-row button:hover, .special-items button:hover {
  cursor: pointer;
  color: #000;
  background-color: #ddd;
  box-shadow: 0.125em 0.125em 0.25em rgba(7, 7, 87, 0.95);
}

.keybrd-row .caps-on, .keybrd-row .caps-on:hover, .keybrd-row .shift-on, .keybrd-row .shift-on:hover {
  background-color: orange;
  box-shadow: 0 5px gray;
  /* transform: translateY(2px); */
}

.top-items button:active, .keybrd-row button:active, .special-items button:active {
  background-color: orange;
  box-shadow: 0 5px gray;
  transform: translateY(2px);
}

/* text area and copy */
.main-section {
  margin-top: 4em;
  position: relative;
}

.text-box {
  display: block;
  width: 85%;
  height: 10em;
  font-family: 'Roboto', sans-serif;
  margin: 2.5em auto 1.5em;
  background-color: #fff;
  font-size: 1.125rem;
  color: #222;
  overflow: auto;
  padding: 0.5em;
  box-shadow: inset 0.125em 0.125em 0.375em #666;
  /* outline: 1px solid blue; */
}

.text-box:focus {
  outline: 1px solid green;
  box-shadow: inset 0.125em 0.125em 0.375em #666;
}

.text-box:focus::placeholder {
  color: transparent;  
}

.text-box::placeholder {
  color: #aaa;  
}

.copy-btn, .clear-btn {
  cursor: pointer;
  display: block;
  position: absolute;
  background-color: rgba(238, 223, 140, 0.322);
  color: #000;
  padding: 0.25em 0.5em;
  border: 2px solid #888;
  border-radius: 0.25em;
}

.copy-btn { 
  top: -5.2%;
  right: 7.5%;
}

.clear-btn {
  top: -5.2%;
  right: 21%;
}

.copy-btn:hover, .clear-btn:hover {
  background-color: rgba(246, 185, 17, 0.722);
}

.copy-btn:active, .clear-btn:active {
  background-color: orange;
  color: #fff;
}

.two-col {
  width: 85%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
}

.keybrd-box, .keybrd-box2 {
  border: 1px solid #888;
  background-color: rgba(238, 223, 140, 0.322);
  color: #fff;
  border-radius: 0.375em;
}

.keybrd-box {
  width: 81%;
  max-width: 1000px;
  margin: 0 auto 2em;
  padding: 0.5em 0;
}

.keybrd-box2 {
  width: 19%;
  height: max-content;
  font-size: 0.5rem;
  margin: 0 auto .5em;
  padding-bottom: 0.125em;
}

.keybrd-row {
  display: block;
  text-align: center;
}

.keybrd-row button {
  font-weight: bold;
}

.spacebar {
  width: 40%;
} 

/* ==============================================
styling for the alphabet letters and their mega-menus
================================================ */

/* this is like the nav tag */
/* .alphabet {
  padding-bottom: 0.5em;
} */

/* alpha-nav is equivalent to the top-level li > a or just li items */
/* KP has display: inline-block only for positioning reasons, so that they are next to each other but I only have a single item in each and my parent container is display flex */
  /* display: inline-block; */

.alpha-nav {
  margin-left: 0.5em;
  padding: 0.125em 0.5em;
  border: 1px dotted #999;
  text-align: center;
}

.alpha-nav a {
  display: block;
} 
.alpha-nav a:hover {
  color: #fff;
} 

.top-words {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.top-words button {
  display: inline-block;
  font-size: 1rem;
  margin: 0.25em;
  padding: 0.375em 0.75em;
  color: #333;
  background-color: #fff;
  border: 1px solid rgba(7, 7, 87, 0.618);
  border-radius: 0.25em;
  transition: box-shadow 250ms ease-in-out;
}

.top-words button:hover {
  cursor: pointer;
  color: #000;
  background-color: #eee;
  box-shadow: 0.125em 0.125em 0.25em rgba(7, 7, 87, 0.95);
}

.top-words button:active {
  background-color: orange;
  box-shadow: 0 5px gray;
  transform: translateY(2px);
}
/* -------end Alpha ----------- */

/* -------file upload ----------- */
.fileupload {
  display: block;
  width: 80%;
  margin: 0 auto;
  padding-top: 1em;
}
.userinputarea {
  display: block;
  margin: 2em auto;
}

input[type="file"] {
  color: rgb(161, 7, 7);
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  font-weight: bold;
}

.fileupload::file-selector-button {
  color: blue;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #fff;
  border: 1px solid #888;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  margin-right: 0.5em;
  transition: background-color 300ms ease-out;
}

.fileupload::file-selector-button:hover {
  cursor: pointer;
  background-color: #ddd;
}

/* -------------notes and docs----------------------- */ 
.notes {
  background-color: #fff;
}

.border {
  padding: 3em 0;
}

.notes {
  margin-top: 2em;

}

.technical h3, .technical h4  {
  margin-bottom: 0;
  padding: 1em 0 0;
}

/* -------------footer----------------------- */ 

footer {
  text-align: center;
  background-color: rgb(49, 49, 88);
  color: #fff;
  padding: 1em 0 0;
}

footer h3 {
  padding: 1em 0 0.75em;
  margin: 0;
  font-weight: 700;
}

.footer-box {
  padding-bottom: 1em;
}

.footer-nav {
  display: flex;
  justify-content: space-evenly;

  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav li {
  padding-left: 0.5em;
  transition: transform 250ms ease-out;
}
.footer-nav li:hover {
  transform: translateY(-0.25em);
}
.footer-nav a {
  font-size: 1.25rem;
  color: white;
  transition: color 250ms ease-out;
}
.footer-nav a:hover {
 text-decoration: none;
 color: rgb(240, 213, 62);

}

.copyright {
  font-size: .95rem;
  margin: 0;
  padding-bottom: 1em; 
}

/* ================================= */
.notes-docs {
  width: 85%;
  max-width: 1200px;
}

.main-nav {
  margin-bottom: 1em;
  padding: 1em 0 0;
}
.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  text-align: center;
  list-style: none;
}

.main-nav li {
  display: inline-block;
  color: #333;
  background-color: #fff;
  border: 1px solid rgba(7, 7, 87, 0.618);
  border-radius: 0.25em;
  transition: box-shadow 250ms ease-out;
  margin: 0 0.75em 0.5em 0;
}

.main-nav li:hover {
  text-decoration: none;
  color: #000;
  background-color: #ddd;
  box-shadow: 0.125em -0.125em 0.25em rgba(7, 7, 87, 0.75);
}

.main-nav .multi {
  letter-spacing: .1875rem;
}

.main-nav a {
  color: #444;
  display: block;
  padding: .25em 0.75em;
}

.submenu {
  position: absolute;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  display: none;
  padding: 0.5em 0.25em 0;
  z-index: 9999;
}

.main-nav li:hover .submenu {
  display: block;
}

.submenu a:hover {
  cursor: pointer;
  text-decoration: none;
  color: #000;
  background-color: #eee;
  box-shadow: 0.125em 0.125em 0.25em rgba(7, 7, 87, 0.95);
}

.submenu li a:active {
  background-color: orange;
  box-shadow: 0 5px gray;
  transform: translateY(2px);
}

/* === accordian-like animation for proper nouns === */
.accordian1 {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  border: none;
  text-align: center;
  outline: none;
  font-size: 1rem;
  /* margin-bottom: 0.5em; */
  padding: 1rem 0;
  background-color: rgba(238, 223, 140, 0.322);
  color: #000;
  border: 2px solid #888;
  transition: background-color 250ms linear;
  border-radius: 0.25em;
}

.accordian1:hover {
  background-color: rgba(246, 190, 36, 0.445);
}

.panel1-inactive {
  display: none;
  overflow: hidden;
  opacity: 0;
  background-color: #fff;
}

.panel1-active {
  overflow: inherit;
  opacity: 1;
  animation: opac 1000ms forwards;
}

@keyframes opac {
  0% {
    opacity: 0;
  }
  50% {
    display: block;
    opacity: 0.75;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

/* modal styles */
.yes-btn {
  display: block;
  background-color: transparent;
  border: 0;
  border-radius: 5px;
  color: #000;
  cursor: pointer;
  padding: 1em 2em;
  border: 0.25em solid rgba(0, 128, 0, 0.75);
  width: 75%;
  margin: 2em auto 1em;
  transition: background-color 500ms ease;
}

.yes-btn:hover {
  background-color: rgb(200, 235, 213);
}

.modal-container {
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.modal-container.show-modal {
  display: block;
}

.modal {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  width: 25em;
  animation-name: modalopen;
  animation-duration: var(--modal-duration);
}

.modal-header {
  background-color: #708090;
  color: #fff;
  padding: 15px;
}

.modal-header h3 {
  margin: 0;
}

.modal-content {
  padding: 20px;
}

.modal-form div {
  margin: 15px 0;
}

.modal-form label {
  display: block;
  margin-bottom: 5px;
}

.modal-form .form-input {
  padding: 8px;
  width: 100%;
}

.close-btn {
  background: transparent;
  cursor: pointer;
  border: 1px solid #fff;
  color: #fff;
  font-size: 25px;
  position: absolute;
  top: 0;
  right: 0;
}

@keyframes modalopen {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 1058px) {
  .two-col {
    flex-direction: column;
  }
  .keybrd-box {
    width: 100%;
  }
  .keybrd-box2 {
    width: 22%;
    height: max-content;
    font-size: 0.5rem;
    margin: 0 auto .5em;
    padding: 0;
  }
}

@media (max-width: 1000px) {
  .top-items button, .keybrd-row button {
    font-size: .875rem;
  }
}

@media (max-width: 900px) {
  .top-items button, .keybrd-row button, .special-items button {
    margin: 0.25em;
    padding: 0.25em 0.5em;
  }
}

@media (max-width: 590px) {
  footer {
    font-size: 0.875rem;
  }

  .footer-nav a {
    font-size: 1rem;
  }
}
              
            
!

JS

              
                /* Problems &/or tasks remaining  */
// 1. use local storage to store the text in textarea in case the user gets interrupted or is not finished composing their email or document
// 2. import and export for type="module" is NOT possible if app is running from user's localhost (C:/). Is there a solution for that or do I need to keep a small amount of "common" words in the main.js file?
// 3. I need to have the user upload 1. list of email addresses and corresponding names, 2. list of proper nouns, 3. a very large sample of their past writing. Once I store all that data, I need to generate a new html file with the data from the uploads.
// 4. Once that is possible, have a number input field so that they can fine tune the # of alphabetical words to more or less words for each letter.
// 5. Have the keyboard keys created by JS for different languages, e.g. Greek.

// content.js has all the proper and alphabetical words
// PROPER NOUNS SECTION [^a-zA-Z\s.:?!'-]+
let proper = `Congratulations!, Dear, Hello, Help!, How are you?, I hope all is well, I really appreciate, I'm sorry, I’m sorry to hear that., Sincerely Yours,, Thank You!, That sounds great!, To Whom It May Concern:, What do you think?, Wishing you the best!, Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, January, February, March, April, May, June, July, August, September, October, November, December`

// /[^a-zA-Z'-]+/gi
let wordsToSplit = `
able about above afraid after again against agree allow alone also always am among and anger animal answer appear apple are area arrange arrive actually another back bank basic been before began begin behind being believe best better between black blue body bone book born both bottom bought branch bread break bright bring broke brother brought brown build busy because become call came can't carefully carry caught cause center certainly chair chance change check child children choose city class clean clear clock close cloud coast coat cold color come commonly company compare completely consider contain continue control cook cool copy corner correctly cost could count country cover create cross crowd current cat dance danger dark deal dear decide deep degree depend describe design determine develop different difficult direct discuss distant divide doctor does dollar don't done door double down draw dream dress drink drive drop during day dad didn't dog each early earth ease east edge effect eight either electric else enemy energy engine enough equal especially even evening event ever every exact example except excite exercise expect experience experiment e-mail easy eat effort explain eye face fact fair fall family famous farm fast father favor fear feed feel feet fell felt field fight figure fill final find fine finger finish fire first five flat floor flow flower follow food foot force forest form forward found four free fresh friendly from front fruit full false game garden gather gave general gentle girl give glad glass gold gone good government grand grass gray great green grew ground group grow guess guide get guy hair half hand happen happy hard have head hear heard heart heat heavy held help here high hill history hold hole home hope hour house how huge hundred hunt hurry her heat him his hot idea imagine inch include indicate industry insect instant instrument interest invent iron island join jump just keep kept kind knew know if ignore immediately important improve independent into isn't job journal joy kiss lake land language large last late laugh lead learn least leave left length less letter level life lift light like lose line liquid list listen little live locate lone long look lost loud love lately machine made magnet main major make many mark market mass master match material matter mean meant measure meat meet melody men metal method middle might mile milk million mind mine minute miss modern moment money mom month moon more morning most mother motion mountain mouth move much multiply music must my myself name nation natural nature near necessary neck need neighbor never next night nine noise noon north nose note nothing notice noun number new no now object observe occur ocean offer office often once only open operate opposite order original other over off old one orange our page paint pair paper parent part particular party pass past path pattern people perhaps period person phrase pick picture piece place plain plan plane planet plant play please plural poem point position possible pound power practice prepare present press pretty print probably problem process produce product proper property protect prove provide pull push pink purple quart question quickly quietly quite race radio rain raise range rather reach read ready real reason receive record region remember repeat reply represent require rest result rich ride right ring rise river road rock roll room root rope rose round rule quality quit red said same scale school science score search season second section select sense sentence separate serve settle seven several shall shape share sharp sheet shell shine shore short should shoulder shout show sight silent silver similar simple since single sister six skill sleep small smell smile snow soft solution some something soon sound south space speak special speech speed spell spend spread spring square stand star start state station stay stick still stood stop store story straight strange street stretch strong student study subject subtract success sudden suggest suit summer sun supply support sure surface surprise symbol system table tail take talk tall teach team teeth tell temperature test than thank that the their them then there these they thick thin thing think third this those though thought thousand three through throw time tiny tire today together told took tool total touch toward town track trade train travel tree triangle trip trouble truck turn twenty type tomorrow ten two under unit until usual value vary very view village visit voice upon use vacation various video virtually visible visual vote ultimately understand unfortunately wait walk wall want warm wash watch water wave wear weather week weight well went were west what wheel when where whether which while white who whole whose why wide wife wild will wind window wing winter wire wish with woman women won't wonder wood word work world would write written wrong wrote wait without yard year yellow young your zero zone yes yell yesterday yourself
`

// EMAIL ADDRESSES AND NAMES OUTPUT

// PROPER NOUN SPLIT & SORT PRIOT TO OUTPUT
function properNouns() {
  let nouns = proper.split(/[^a-zA-Z\s.:?!'-]\s+/gi);
  return nouns;
}
let pn = properNouns();

// ALPHABETICAL WORDS SPLIT PRIOT TO OUTPUT
function splitWords(str) {
  let words = str.split(/[^a-zA-Z'-]+/gi);
  for (let i = 0; i < words.length; i++) {
    if (words !== "") {
      return words.sort((a, b) => a.localeCompare(b));
    }
  }
}
// console.log(splitWords(lowerCase));

/* =========== get a count for each word ================
also: https://jsbin.com/vuvosah/edit?js,console
wordCount 
=============================================================*/

const a = splitWords(wordsToSplit);

function wordCount(a) {
  let counts = {}

  for (let i = 0; i < a.length; i++) {
    if (counts[a[i]]) {
      counts[a[i]] += 1
    } else {
      counts[a[i]] = 1
    }
  }
  // console.log(counts);
  return counts;
}
wordCount(a);

/* ============ output creates:
the object with the words as keys and their counts as values
==================== */
let inputWords = wordCount(a);
let output = Object.entries(inputWords).map(([word, count]) => ({ word, count }));
// let outputKeys = Object.entries(inputWords).map(([word, count]) => ({ word, count }));

/* ==================================
properNounOutput places the Proper Nouns in the #special-words div
=================================== */
function properNounOutput(arr) {
  for (let i = 0; i < arr.length; i++) {

    let outputNouns = `<button class="special" value="${arr[i]}" tabindex="-1">${arr[i]}</button>`;
    let nounButton = document.createElement('button');
    nounButton.value = arr[i];
    let specialNoun = document.getElementById("special-words");
    specialNoun.insertAdjacentHTML("beforeend", outputNouns);

  }
}
properNounOutput(pn);

/* ==================================
pageOutput places the words in each alphabet letter div
=================================== */
function pageOutput(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].count > 0 && arr[i].word != "") {

      let outputHTML = `<li class="text-btn" value><a class="${arr[i].word}">${arr[i].word}</a></li>`;

      let textButton = document.createElement('li');
      textButton.value = arr[i].word;
      textButton.classList.add('text-btn');

      let firstLetter = arr[i].word.charAt(0);
      let id = `letter${firstLetter}`;
      let ul = document.getElementById(id);

      // The if statement only prevents possible errors, 
      // caused by the last ul with id letterxyz
      if (ul) {
        ul.insertAdjacentHTML("beforeend", outputHTML);
      }
    }
  }
}
pageOutput(output);

// variables for user favorite words, most used words and textarea element
const special = document.getElementsByClassName('special');
const textBtns = document.getElementsByClassName('text-btn');
const textBox = document.getElementById("text-box");

// add alphabetical megamenu words to textarea on click, and capitalize if following end of sentence punctuation
for (let i = 0; i < textBtns.length; i++) {
  if (textBtns[i]) {
    textBtns[i].addEventListener('click', e => {
      let word = e.target.textContent;
      let len = textBox.value.length;
      let punc = textBox.value;
      let first = word.charAt(0);
      let remainder = word.slice(1)

      if (['.', '?', '!', '\n'].includes(punc.charAt(len - 1)) || textBox.value.charAt(0) == '') {
        textBox.value = textBox.value + " " + first.toUpperCase() + remainder;
        textBox.focus();
      } else {
        textBox.value = textBox.value + " " + word;
        textBox.focus();
      }
    })
  }

}

// add Special Words to text-box, capitalize words if following ., ! or ?
for (let i = 0; i < special.length; i++) {
  special[i].addEventListener('click', e => {
    let userFavs = e.target.value;
    if (e.target.value == 'com' || e.target.value == 'net' || e.target.value == 'org') {
      textBox.value = textBox.value + userFavs;
      textBox.focus();
    } else {
      textBox.value = textBox.value + " " + userFavs;
      textBox.focus();
    }
  })
}

/* ==============================================================
  add keyboard chars to page in "text-area" on click
====================== */
// GET INDEX POSITION OF CURSOR
// https://www.webtips.dev/webtips/javascript/how-to-get-caret-position-with-javascript
function cursorPosition() {
  const position = textBox.selectionStart;
  // console.log("position is: " + position);
  return position;
}
// cursorPosition()

// letters, CAPS key, SHIFT key
const keys = document.getElementsByClassName('key');
const capsKey = document.getElementById("caps");

function addLetters() {
  for (let i = 0; i < keys.length; i++) {
    keys[i].addEventListener('click', e => {
      let letterkey = e.target.value;
      if (capsKey.classList.contains('caps-off')) {
        let len = textBox.value.length;
        let punc = textBox.value;
        let x = cursorPosition();
        if (['.', '?', '!', '\n'].includes(punc.charAt(len - 1)) || textBox.value.charAt(0) == '') {
          textBox.value = textBox.value.slice(0, x) + " " + letterkey.toUpperCase() + textBox.value.slice(x);
          textBox.focus();
          textBox.selectionEnd = x + 2;
        } else {
          textBox.value = textBox.value.slice(0, x) + letterkey.toLowerCase() + textBox.value.slice(x);
          textBox.focus();
          textBox.selectionEnd = x + 1;
        }
      } else {
        let x = cursorPosition();
        textBox.value = textBox.value.slice(0, x) + letterkey.toUpperCase() + textBox.value.slice(x);
        textBox.focus();
        textBox.selectionEnd = x + 1;
      }
    })
  }
}
addLetters()

// add or remove class for highlighting the CAPS key & SHIFT key
function capitalize() {
  if (!capsKey.classList.contains('caps-on')) {
    capsKey.classList.add("caps-on");
    capsKey.classList.remove("caps-off");
  } else {
    capsKey.classList.add("caps-off");
    capsKey.classList.remove("caps-on");
  }
}
capsKey.addEventListener("click", capitalize);

const shiftl = document.getElementById("shiftl");
const shiftr = document.getElementById("shiftr");


function shift() {
  if (!shiftl.classList.contains('shift-on') || !shiftr.classList.contains('shift-on')) {
    shiftl.classList.add("shift-on");
    shiftl.classList.remove("shift-off");
    shiftr.classList.add("shift-on");
    shiftr.classList.remove("shift-off");
  } else {
    shiftl.classList.add("shift-off");
    shiftl.classList.remove("shift-on");
    shiftr.classList.add("shift-off");
    shiftr.classList.remove("shift-on");
  }
}
shiftl.addEventListener("click", shift);
shiftr.addEventListener("click", shift);

const shiftKeyL = document.querySelector(".shiftL");
const shiftKeyR = document.querySelector(".shiftR");
let rightSquare = document.getElementById("rtsq");
let leftSquare = document.getElementById("leftsq");
let backslash = document.getElementById("backslash");
let semicolon = document.getElementById("semicolon");
let quotes = document.getElementById("quotes");
let forwardslash = document.getElementById("forwardslash");
let comma = document.getElementById("comma");
let period = document.getElementById("periodpunc");

function changeInner() {
  if (shiftl.classList.contains('shift-on') || shiftr.classList.contains('shift-on')) {
    rightSquare.innerHTML = "{";
    leftSquare.innerHTML = "}";
    backslash.innerHTML = "|";
    semicolon.innerHTML = ":";
    quotes.innerHTML = "\"";
    comma.innerHTML = "&lt;";
    period.innerHTML = "&gt;";
    forwardslash.innerHTML = "?";
  } else {
    rightSquare.innerHTML = "[";
    leftSquare.innerHTML = "]";
    backslash.innerHTML = "\\";
    semicolon.innerHTML = ";";
    quotes.innerHTML = "'";
    comma.innerHTML = ",";
    period.innerHTML = ".";
    forwardslash.innerHTML = "/";
  }
};
shiftKeyL.addEventListener("click", changeInner);
shiftKeyR.addEventListener("click", changeInner);

// non-alphabetic (numbers & symbols)
const nonAlpha = document.getElementsByClassName("nonAlpha");
const amp = document.getElementById("amp");

for (let i = 0; i < nonAlpha.length; i++) {
  nonAlpha[i].addEventListener('click', e => {
    let x = cursorPosition();
    let char = e.target.innerHTML;
    if (char == '&amp;') {
      textBox.value = textBox.value.slice(0, x) + '&' + textBox.value.slice(x);
    } else if (char == '&lt;') {
      textBox.value = textBox.value.slice(0, x) + '<' + textBox.value.slice(x);
    } else if (char == '&gt;') {
      textBox.value = textBox.value.slice(0, x) + '>' + textBox.value.slice(x);
    } else {
      textBox.value = textBox.value.slice(0, x) + char + textBox.value.slice(x);
    }

    textBox.focus();
    textBox.selectionEnd = x + 1;
  })
}

// get cursor X & Y coordinates
// const navBtn = document.getElementsByClassName("navBtn");
const pageUp = document.getElementById("page-up");
const pageDown = document.getElementById("page-down");
const arrowUp = document.getElementById("uparrow");
const arrowDown = document.getElementById("downarrow");

function coords() {
  document.addEventListener('mousemove', (e) => {
    let XnY = [e.clientX, e.clientY]
    let x = XnY[0];
    let y = XnY[1];
    // console.log(y);
    return y;
  });
}

/* ==============================================================
  add nonprint keys functionality to #text-box .text-area on click
====================== */
// BACKSPACE
const backspace = document.getElementById('backspace');
const deleteKey = document.getElementById('delete');

function removeCharBehind(x) {
  x = cursorPosition();
  if (x != 0) {
    textBox.value = textBox.value.slice(0, x - 1) + textBox.value.slice(x);
    textBox.focus();
    textBox.selectionEnd = x - 1;
  } else {
    textBox.focus();
  }
}
backspace.addEventListener("click", removeCharBehind);

// DELETE
function removeCharAhead(x) {
  x = cursorPosition();

  textBox.value = textBox.value.slice(0, x) + textBox.value.slice(x + 1);
  textBox.focus();
  textBox.selectionEnd = x;
}
deleteKey.addEventListener("click", removeCharAhead);


// TAB
document
  .getElementById("tab")
  .addEventListener("click", function () {
    if (tab.classList.contains('tab')) {
      let x = cursorPosition();
      textBox.value = textBox.value.slice(0, x) + `     ` + textBox.value.slice(x);
      textBox.focus();
      textBox.selectionEnd = x + 5;
    }
  });

// SPACEBAR
document
  .getElementById("spacebar")
  .addEventListener("click", function () {
    if (spacebar.classList.contains('spacebar')) {
      let x = cursorPosition();
      textBox.value = textBox.value.slice(0, x) + " " + textBox.value.slice(x);
      textBox.focus();
      textBox.selectionEnd = x + 1;
    }
  });

// ENTER
document
  .getElementById("enter")
  .addEventListener("click", function () {
    let x = cursorPosition();
    textBox.value = textBox.value.slice(0, x) + "\n" + textBox.value.slice(x);
    textBox.focus();
    textBox.selectionEnd = x + 1;
  });

// HOME
const home = document.getElementById('homekey');

function focusAtStart(x) {
  // x = cursorPosition();
  // textBox.value = textBox.value.slice(0, x) + textBox.value.slice(x + 1);
  textBox.value = textBox.value;
  textBox.focus();
  textBox.selectionEnd = textBox.value[0];
  // console.log(x);
}
home.addEventListener("click", focusAtStart);

// END
const end = document.getElementById('end');

function focusAtEnd(x) {
  x = cursorPosition();
  textBox.value = textBox.value;
  textBox.focus();
  let length = textBox.value.length;
  textBox.selectionStart = length;
}
end.addEventListener("click", focusAtEnd);

// LEFT ARROW
const leftarrow = document.getElementById('leftarrow');

function arrowLeft(x) {
  x = cursorPosition();
  textBox.value = textBox.value;
  textBox.focus();
  textBox.selectionEnd = x - 1;
}
leftarrow.addEventListener("click", arrowLeft);

// RIGHT  ARROW
const rightarrow = document.getElementById('rightarrow');

function arrowRight(x) {
  x = cursorPosition();
  textBox.value = textBox.value;
  textBox.focus();
  textBox.selectionStart = x + 1;
}
rightarrow.addEventListener("click", arrowRight);

/* COPY the text area, Clipboard API, (2nd example Permission API) - WORKS
from https://codepen.io/mornir0/pen/LgLPjo */
const copy = document.getElementById("copy");
const emailCopy = document.getElementById("email-copy");

async function copyToClipboard(e) {
  if (!navigator.clipboard) {
    e.target.textContent = 'Copy to clipboard not supported'
    return
  }
  const textToCopy = textBox;
  try {
    await navigator.clipboard.writeText(textToCopy.value);
    textToCopy.select();
  } catch (err) {
    console.error("Failed to copy: ", err);
  }
}
copy.addEventListener("click", copyToClipboard);

// Clear out the main-text box
const close2 = document.getElementById('close2');
const open2 = document.getElementById('open2');
const modal2 = document.getElementById('modal2');
// show modal:
open2.addEventListener('click', () => modal2.classList.add('show-modal'));
// hide modal:
close2.addEventListener('click', () => modal2.classList.remove('show-modal'));

window.addEventListener('click', e =>
  e.target == modal2 ? modal2.classList.remove('show-modal') : false
);

// clear textarea
document
  .getElementById("clearText")
  .addEventListener("click", function () {
    textBox.value = '';
    textBox.focus();
    modal2.classList.remove('show-modal')
  });


// accordian for proper nouns
// https://codepen.io/craigwarren-dev/pen/vzdeoy
const accordian1 = document.getElementById("accordian1")

// add or remove class for displaying PROPER NOUNS
function displayPanel1() {
  const panel1 = document.getElementById("panel1");
  if (!panel1.classList.contains('panel1-active')) {
    panel1.classList.add("panel1-active");
    panel1.classList.remove("panel1-inactive");
  } else {
    panel1.classList.add("panel1-inactive");
    panel1.classList.remove("panel1-active");
  }
}
accordian1.addEventListener("click", displayPanel1);

/* ====== FILE UPLOAD - HOW TO PLACE CONTENT IN  VARIABLE ======= */
              
            
!
999px

Console