Давайте сделаем записную книжку, позволяющую создавать записи с различным текстом. Пусть эта записная книжка представляет собой текстареа и кнопку. Слева от текстареа пусть будет список созданных записей.
В текстареа будет вводится текст. После нажатия
на кнопку текст текстареа должен очистится,
а в меню должна появится ссылка с текстом
'запись 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',
];
В качестве первого этапа сделаем так, чтобы по нажатию на кнопку текст из текстареа добавлялся в массив и при этом в меню добавлялась ссылка для этой записи.
Реализуйте поставленную подзадачу.