вопросы пишите мне в телеграмм +375298176892
можно скачать офлайн версию сайта: code.mu old.code.mu

Записная книжка на JavaScript

Давайте сделаем записную книжку, позволяющую создавать записи с различным текстом. Пусть эта записная книжка представляет собой текстареа и кнопку. Слева от текстареа пусть будет список созданных записей.

В текстареа будет вводится текст. После нажатия на кнопку текст текстареа должен очистится, а в меню должна появится ссылка с текстом 'запись N', где вместо N будет порядковый номер записи.

По нажатию на ссылку меню в текстареа должен появится текст соответствующей записи. Этот текст можно поредактировать и, по нажатию на кнопку, он должен обновится.

Для лучшего понимания вами поставленной задачи я подготовил верстку, которую вы будете использовать:

<div id="wrapper"> <div id="menu"> <ul id="notes"> <li>запись 1</li> <li>запись 2</li> <li>запись 3</li> </ul> <div id="create"> <button>новая запись</button> </div> </div> <div id="text"> <textarea></textarea> <button>сохранить</button> </div> </div> #wrapper { width: 500px; margin: 0 auto; position: relative; } #menu { width: 150px; position: absolute; right: 105%; } #notes { padding: 0; margin: 0; } #notes li { padding: 5px; text-align: center; margin-bottom: 10px; border: 1px dashed gray; list-style-type: none; cursor: pointer; } #notes li:hover, #notes li.active { background: #f1f1f1; } #create button { width: 100%; padding: 5px; } #text textarea { width: 100%; height: 400px; box-sizing: border-box; padding: 10px; margin-bottom: 10px; } #text button { width: 100%; height: 30px; }

:

Обсуждение

Итак, задача поставлена. Давайте теперь обговорим алгоритм ее решения.

Будем хранить тексты записей в объекте:

let texts = [ 1: 'text1', 2: 'text2', 3: 'text3', ];

В качестве первого этапа сделаем так, чтобы по нажатию на кнопку текст из текстареа добавлялся в массив и при этом в меню добавлялась ссылка для этой записи.

Реализуйте поставленную подзадачу.