# Записная книжка на 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 = [ 'text1', 'text2', 'text3', ];`

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

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

↑
en ru