JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<html>
<head>
<title></title>
</head>
<body onload="listLoad();">
     <div id="header">
         <h1>Блокнот</h1>
     </div>
     <div id="notes">
         <h3>Список записей</h3>
          <ol id="notelist"></ol>
     </div>
 
     <div id="note">
        <form id="formnote">
               <fieldset>
                    <table>
                         <tr>
                              <td><label class="notefield">Наименование
                                   </label></td>
                              <td colspan=2>
                                   <input id="notename" type="text"
                                        class="notefield"></input>
                              </td>
                         </tr>
                         <tr>
                              <td><label class="notefield">Текст записи
                                   </label></td>
                              <td colspan=2>
                                   <textarea id="notecontent" rows=10></textarea>
                              </td>
                         </tr>

                         <tr>
                             <td></td>
                             <td class="notebtn"><button id="save"
                                     type="submit" onclick="saveNote(); "
                                     >Сохранить</button></td>
                             <td class="notebtn"><button id="delete"
                                     type="button" onclick="deleteNote();"
                                     >Удалить</button></td>
                             </tr>
                         </table>
                     </fieldset>
                 </form>
             </div>

             <div id="footer">
                     <p class="footertext">2015 г.</p>
             </div>
             </body>
</html>

CSS

<!-- Цвет фона для всего документа: -->
body
{
         background-color:#F7F7F7;
}
<!-- Выравнивание и размещение контейнера для списка записей: -->
#notes
{
          float:left;
          width:250px;
}
<!-- Выравнивание контейнера с элементами управления: -->
#note
{
          float:left;
          margin-left:20px;
}
<!-- Размещение и атрибуты стиля текста для контейнера footer: -->
#footer
{
          clear:left;
          text-align:center;
          font-style:italic;
}
<!-- Отступ для формы с элементами управления: -->
#formnote
{
          margin-top: 30px;
}
<!-- Для заголовков, текстовых полей, кнопок и ячеек таблицы: -->
#formnote
{
          margin-top: 30px;
}

#notecontent, #notename
{
          width:450px;
}
.notebtn
{
          text-align:center;
}
td
{
          vertical-align:top;
}
h1, h3
{
          font-style:italic;
          text-align:center;
}
<!-- Рамка вокруг fieldset: -->
fieldset
{
          border:1px dashed #CCC;
          padding:10px;
}
<!-- Надписи и формы ввода текста: -->
label
{
          width:142px;
          height:32px;
          background-color:#CCCCCC;
          float:left;
          display: block;
          font-family:Arial, Helvetica, sans-serif;
          font-size: 100%;
          letter-spacing: -1px;
          font-weight: normal;
          line-height: 1.1;
          color:#666;
}
.notefield
{
          margin-top:3px;
          margin-right:2px;
          padding-top:11px;
          padding-left:6px;
          height:32px;
}
<!-- Для ссылок: -->
a:link, a:visited
{
          color:#666;
          font-style:italic;
          font-weight:500;
          text-decoration:none;
          font-family:Arial, Helvetica, sans-serif;
}
a:hover, li:hover
{
          color:#666;
          font-style:italic;
          font-weight:bolder;
          cursor: pointer;
}

JavaScript

function saveNote()
{
          var name = document.getElementById('notename').value;
          /* создание переменной, хранящей значение введенное в поле Наименование.*/
          var content = document.getElementById('notecontent').value;
          /* создание переменной для хранения текста самой записи*/
          if(content == '')
          {
                   alert('enter valid note text');
                   /* выводим предупреждающее сообщение, в случае, если не задан текст записи*/
          }
          else
          {
                   if (name == 0)
                            {
                                     alert('enter valid note name');
                                     /* вывод предупреждающего сообщения, если не задано наименование записи*/
                            }
                            else {localStorage[name] = content;}
function listLoad()
{
          var list = document.getElementById('notelist');
          /* получаем доступ к элементу - списку нашей веб - страницы*/
          for(var i in localStorage)
          /* цикл для перебора каждого значения, сохраненного в localStorage,  при этом i, принимает значение идентификатора хранимых данных,  переменная i содержит наименование записи*/
          {
                   var a = document.createElement('a'); /* создаем новый html - */
                   a.setAttribute('onclick', "loadNote('"+i+"'); return false;");
                        /*определяем атрибут onclick, при клике вызовется функция  loadNote с параметром Наименования записи*/
                   a.innerText = i;
                       /* задаем значение текста ссылки эквивалентным наименованию записи*/
                   var element = document.createElement('li');
                       /* создаем новый html - элемент, а именно пункт списка*/
                   element.appendChild(a);
                       /* добавляем пункту списка дочерний элемент – ссылку*/
                   list.appendChild(element);
     ...