Всем привет, друзья!
Делаю очередной учебный проект и вот опять что-то подвисла на несколько дней с двумя непонятками.
1. У меня есть карточка заметки, textarea, и когда я пишу одну сплошную строку, например qwertyqwertyqwertyqwerty без пробелов, оно не переносится автоматически, а просто выталкивает рядом стоящую кнопку Edit и в итоге текст с кнопкой вылазят да пределы карточки. Понятно, что вряд ли кто-то в заметке будет писать такие слова без пробелов, но все же очень интересно, можно ли как-то поменять это поведение? Перепробовала кучу вариантов сделать это при помощи CSS. А вот на JS вообще нет идей, как это сделать.
2. При помощи CSS навесила на кнопку Edit всплывающую подсказку при наведении на кнопку. На первой кнопке вке ок, она появляется, а вот на последующих карточках, когда навожу на Edit, подсказка все-равно продолжает появляться на первой кнопке Edit. Как сделать чтоб именно возле каждой кнопки она появлялась? Ниже выложу JS и CSS коды.
<!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" />
<link rel="stylesheet" href="style.css" />
<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 src="app.js"></script>
</body>
</html>
const notesEl = document.querySelector(".notes");
const addBtn = document.querySelector(".note-add");
// 1) Write a function createNote
// 2) Add button and handler on adding the card
// 3) Add styles
// 4) Make the redaction possible
function createNote(title, text) {
const noteEl = document.createElement("div");
noteEl.classList.add("note"); // adding a style
noteEl.innerHTML = `
<div class="note-header">
<p id="note-title">${title}</p>
<textarea id="note-title-input" class="hidden">${title}</textarea>
<div>
<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>
</div>
<p id="note-text">${text}</p>
<textarea id="note-textarea" class="hidden">${text}</textarea>
`;
//lowim knopki, naweschiwaem obrabotchiki dlja edit i delete
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"); // dobawlenie i udalenie klassow
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; // tut lezhit zna4enie na to, 4to wwodim pri inpute
}); //naweschiwaem obrabot4iki na textarea
textInputEl.addEventListener("input", (e) => {
textEl.innerText = e.target.value;
}); //naweschiwaem obrabot4iki na textarea
return noteEl;
}
addBtn.addEventListener("click", (e) => {
const el = createNote("Header", "Your text"); //wiziwaet funkciju createNote
notesEl.append(el);
});
* {
margin: 0px;
padding: 0px;
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 {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.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;
}
.note-add {
padding: 8px;
margin: 8px;
cursor: pointer;
}
.note-edit {
padding: 4px;
cursor: pointer;
}
.note-delete {
padding: 4px;
cursor: pointer;
}
.hidden {
display: none;
resize: none;
}
/* делаем подсказку прозрачной и убираем её со страницы, чтобы она не появлялась при наведении на место, где она должна появиться */
button.note-add:before, button.note-add:after{
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, button.note-edit:after{
position: absolute;
opacity: 0;
visibility: hidden;
}
/* стили для всплывающего блока с текстом */
button.note-edit:before{
content: "Edit";
width: 22px;
height: 22px;
line-height: 25px;
left: calc(21% - 25px);
}
button.note-edit:hover:before, button.note-edit:hover:after {
opacity: 10;
visibility: visible;
}
/* добавляем эффект движения */
button.note-edit:hover:before {
bottom: 548px;
right: 120px;
}
button.note-edit:hover:after {
bottom: 550px;
/* position:-webkit-sticky; */
}