notes app

by Abdul Ahmad

HTML

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

<div class='body-background'>

</div>
<div class='notes-page-box'>

<div class='notes-page'>
  <div class='background'></div>
  <section class='notes-text'>
  
  
    <div class='notes-block-box'>
      <div class='background'></div>
      <div class="hover-left-indicator-bar"></div>
      <div class="delete-icon-box">
        <div class="delete-icon"></div>
      </div>
        <div class='content'>
          <article class='notes-text'>
            llorem ipsum dolor sit, lsow nimasd wenrw skdmas. dolor sd wenrw skdmas alksd asdk llorem ipsum dolor sit", lsow nimasd wenrw skdmas. ipsum dolor sit, lsow nimasd wenrw skdmas. 
          </article>
        </div>
    </div>


    <div class='notes-block-box'>
      <div class='background'></div>
      <div class="delete-icon-box">
        <div class="delete-icon"></div>
      </div>
      <div class="hover-left-indicator-bar"></div>
      <div class='content'>
        <div class='quote block'>
          <article class='notes-text'>
            
            llorem ipsum dolor" sit, lsow nimasd wenrw skdmas. dolor sd wenrw skdmas alksd asdk llorem iaspsum dolor sit, lsow nimasd wenrw skdmas. ipsum dolor sit, lsow nimasd wenrw skdmas. llorem ipsum dolor sit, lsow nimasd wenrw skdmas. dolor sd wenrw skdmas alksd asdk llorem ipsum dolor sit, lsow nimasd wenrw skdmas. ipsum dolor sit, lsow nimasd wenrw skdmas.
          </article>
        </div>
      </div>
    </div>
    
    <div class='column-box'>
    
      <div class='notes-block-box'>
        <div class='background'></div>
        <div class="delete-icon-box">
          <div class="delete-icon"></div>
        </div>
        <div class="hover-left-indicator-bar"></div>
        <div class='content'>
          <div class=''>
            <article class='notes-text'>

              llorem ipsum dolor" sit, lsow nimasd wenrw skdmas. dolor sd wenrw skdmas alksd asdk...

CSS

html, body {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 18px;
      color: #424242;
      margin: 0;
    }
.body-background {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -50;
  background-color: #eee;
}
    ::selection {
    background-color: #FFECC2;
    background-color: #FFE08A;
    background-color: #FFE373;
    color: #424242;
}

/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: #352e7e;
    color: #fff;
}

/***For Other Browsers ***/
::-o-selection {
    background-color: #352e7e;
    color: #fff;
}

::-ms-selection {
    background-color: #352e7e;
    color: #fff;
}

/*** For Webkit ***/
::-webkit-selection {
    background-color: #352e7e;
    color: #fff;
}
    
    .notes-page-box {
      margin: 10px;
    }
    .notes-page {
      max-width: 1000px;
      box-shadow: 0 0 5px -2px;
      min-height: 300px;
      position: relative;
      margin: 0 auto;
      padding: 30px 0;
    }
    .notes-page .background {
      position: absolute;
      z-index: -10;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: white;
    }
    .red-background {
      background-color: red;
    }
    .content {
      width: 90%;
      margin: 0 auto;
      height: 100%;
    }
    .new-note-line-input-box {
      text-align: center;
      margin: 20px 0;
    }
    .new-note-line-input-box .new-note-line-input {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 16px;
      color: #424242;
      color: gray;
      display: inline-block;
      vertical-align: top;
      padding: 5px;
      width: 90%;
      min-height: 50px;
      height: auto;
      resize: none;
      outline: none;
      border: 1px solid #eee;
      background-color: #eee;
      transition: all 0.1s linear;
      border-radius: 2px;
    }
    .new-note-line-input:hover {
      border-color: #ddd;
      transition: all 0.1s linear;
    }
    .new-note-line-input:focus...

JavaScript

$(function() {
    workArea = $('.notes-page section.notes-text');
    newInputArea = $('.notes-page .new-input');
    inputExists = false;
    lastInputValue = '';
    commandExists = false;
    commandString = '';
    emptyInput = false;
    commandCheckedFor = false;
    $(document).on("keypress", function (e) {
        // use e.which
        //console.log(e.which);
        var enterKey = 13;
        var slashKey = 47;
        if(e.which === slashKey) {
          addNewNoteLineInputToPage(newInputArea);
        } else if(e.which === enterKey) {
          if(inputExists) {
                removeInputBox();
                lastInputValue = '';
                if(emptyInput) {
                  $('.temp').remove();
                } else {
                  $('.temp').removeClass('temp');
                }
                resetInputChecking();
          } else {
            addNewNoteLineInputToPage(newInputArea);
          }
        }
    });
    $('.notes-page').on('click', 'button.ok', function() {
      addNewNote(this, workArea, true);
    });
    $('.notes-page').on('click', '.delete-icon', function() {
      $(this).parent().parent().remove();
    });
    $('.notes-page').on('input', '.new-note-line-input', function(e) {
      handleNewNoteInput($(this).val());
      console.log(inputExists);
    });

  });

  function addNewNoteLineInputToPage(workArea) {
    if(!inputExists) {
      $(workArea).append(getNewNoteLineInput());
      inputExists = true;
      setTimeout(focusNewNoteLineInput, 10);
    }
  }
  function getNewNoteLineInput() {
    return '<div class="new-note-line-input-box">'
    + '<textarea class="new-note-line-input" placeholder="Add some notes">'
    + '</textarea>'
    //+ '<button class="ok">Ok</button>'
    + '</div>';
  }
  function focusNewNoteLineInput() {
    $('.new-note-line-input').focus();
  }
  function getNewNoteLine(params) {
    return '<div class="notes-block-box temp">'
    + '<div class="background"></div>'
    + '<div...