Alina Sarbu,
целиком, это так )))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: blanchedalmond;
font-family: 'Courier New', Courier, monospace;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
display: flex;
align-items: center;
}
.note-header {
width: 210px;
display: flex;
justify-content: space-between;
margin: 8px auto;
}
.notes {
display: flex;
flex-direction: row;
}
.note {
background-color: fuchsia;
padding: 16px;
margin: 8px;
border-radius: 10px;
height: 300px;
width: 240px;
box-shadow: 2px 2px 5px 2px blueviolet;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.note-add {
padding: 8px;
margin: 8px;
cursor: pointer;
}
.note-edit {
padding: 4px;
cursor: pointer;
height: 32px;
margin-right: 4px;
}
.note-delete {
padding: 4px;
cursor: pointer;
height: 32px;
}
.hidden {
display: none;
}
button.note-add:before {
position: absolute;
opacity: 0;
visibility: hidden;
}
button.note-add:before {
content: attr(data-tooltip);
width: 40px;
height: 22px;
line-height: 25px;
left: calc(25% - 40px);
}
button.note-add:hover:before,
button.note-add:hover:after {
opacity: 10;
visibility: visible;
background-color: lightpink;
border: 1px solid black;
}
button.note-add:hover:before {
bottom: 570px;
right: 1200px;
}
button.note-add:hover:after {
bottom: 550px;
position: static;
}
button.note-edit:before {
content: 'Edit';
width: 22px;
height: 22px;
line-height: 25px;
top: -3px;
right: 48px;
position: absolute;
opacity: 0;
}
button.note-edit:hover:before {
opacity: 10;
}
.note-title,
.note-text {
width: 200px;
word-break: break-all;
}
.txt{
flex-grow: 1;
height: 70%;
}
.note-title-input, .note-textarea{
width: 100%;
}
</style>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&family=Open+Sans&family=Prosto+One&family=Roboto:wght@100&family=Rowdies:wght@300&family=Teko:wght@300&family=Unbounded:wght@200&family=Yeon+Sung&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<title>Notes App</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Notes App</h1>
<button class="note-add" data-tooltip="Add" type="button">
<i class="fa-sharp fa-solid fa-heart-circle-plus"></i>
</button>
</div>
<div class="notes"></div>
</div>
<script>
const notesEl = document.querySelector(".notes");
const addBtn = document.querySelector(".note-add");
function createNote(title, text) {
const noteEl = document.createElement("div");
noteEl.classList.add("note"); // adding a style
noteEl.innerHTML = `
<button class="note-edit"><i class="fa-solid fa-cat"></i></button>
<button class="note-delete"><i class="fa-solid fa-trash"></i></button>
<div class="note-header">
<p class="note-title">${title}</p>
<textarea class="hidden note-title-input">${title}</textarea>
</div>
<div class="txt" >
<p class="note-text">${text}</p>
<textarea class="note-textarea hidden">${text}</textarea>
</div>
`;
const editBtn = noteEl.querySelector(".note-edit");
const deleteBtn = noteEl.querySelector(".note-delete");
const titleEl = noteEl.querySelector(".note-title");
const textEl = noteEl.querySelector(".note-text");
const titleInputEl = noteEl.querySelector(".note-title-input");
const textInputEl = noteEl.querySelector(".note-textarea");
editBtn.addEventListener("click", (e) => {
titleEl.classList.toggle("hidden");
textEl.classList.toggle("hidden");
titleInputEl.classList.toggle("hidden");
textInputEl.classList.toggle("hidden");
titleInputEl.textContent = "";
textInputEl.textContent = "";
titleInputEl.placeholder = "Header";
textInputEl.placeholder = "Your text";
});
deleteBtn.addEventListener("click", (e) => {
noteEl.remove(); //udalit opredelennij dom uzel
});
titleInputEl.addEventListener("input", (e) => {
titleEl.innerText = e.target.value;
});
textInputEl.addEventListener("input", (e) => {
textEl.innerText = e.target.value;
});
return noteEl;
}
addBtn.addEventListener("click", (e) => {
const el = createNote("Header", "Your text");
notesEl.append(el);
});
</script>
</body>
</html>