Let's make a notepad that allows you to create notes with different text. Let this notepad be a text area and a button. To the left of the textarea, let there be a list of created notes.
A text will be entered in the textarea. After
pressing the button, the text of the textarea
should be cleared, and a link should appear
in the menu with the text 'note N',
where instead of N there will be an index
number of the note.
By clicking on the menu link in textarea, the text of the corresponding entry should appear. This text can be edited and, by clicking on the button, it should be updated.
For a better understanding of your task, I have prepared a layout that you will use:
<div id="wrapper">
<div id="menu">
<ul id="notes">
<li>note 1</li>
<li>note 2</li>
<li>note 3</li>
</ul>
<div id="create">
<button>new note</button>
</div>
</div>
<div id="text">
<textarea></textarea>
<button>save</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;
}
:
Discussion
So, the task is set. Let's now discuss the algorithm for solving it.
We will store the texts of the notes in an array:
let texts = [
'text1',
'text2',
'text3',
];
As a first step, we will make it so that when the button is pressed, the text from the textarea is added to the array, and at the same time, a link for this note is added to the menu.
Implement the assigned subtask.