Учебный проект 2 - текст выходит за карточку и проблема с всплывающей подсказкой
Всем привет, друзья!
Делаю очередной учебный проект и вот опять что-то подвисла на несколько дней с двумя непонятками. 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; */
}
|
Alina Sarbu,
а можно всё целиком? [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
Что бросается в глаза. У вас задано
/* добавляем эффект движения */
button.note-edit:hover:before {
bottom: 548px;
right: 120px;
}
Но от чего вы отсчитываете координаты? От родительского элемента? Нет! Координаты отсчитываются от родительского элемента с position не static. (или от body если нет такого) А у вас родительские элементы не имеет position - значит static. Попробуйте задать им position: relative. Еще недостаток. У вас в создаваемом блоке есть элементы с заданными id. Если карточек будет несколько, то и элементов с одним и тем же id будет несколько. Это неправильно! id должен быть уникальным на странице. В данном случае это может ни на что и не влияет, но в будущем может создать неприятности. Можно идентифицировать такие элементы не с помощью id, а каким- нибудь атрибутом data- (например data-id). ну и обращаться к ним соответственно
<p data-id="note-title">${title}</p>
и
const titleEl = noteEl.querySelector('[data-id="note-title"]');
Подписи к элементам ввода обычно задаются элементом <label>. Вот так надо
<label data-id="note-title">${title}<br>
<textarea data-id="note-title-input" class="hidden">${title}</textarea>
</label>
|
Цитата:
|
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>
|
Цитата:
|
Цитата:
И спасибо также за пример вставления всего кода целиком, а то я перед этим не совсем верно поняла, но теперь буду знать :victory: |
Цитата:
|
| Часовой пояс GMT +3, время: 23:04. |