Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.01.2023, 11:43
Интересующийся
Отправить личное сообщение для Alina Sarbu Посмотреть профиль Найти все сообщения от Alina Sarbu
 
Регистрация: 28.04.2020
Сообщений: 11

Учебный проект 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, 28.01.2023 в 00:31.
Ответить с цитированием
  #2 (permalink)  
Старый 27.01.2023, 11:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alina Sarbu,
а можно всё целиком?
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 27.01.2023, 13:21
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Сообщение от Alina Sarbu
а вот на последующих карточках, когда навожу на Edit, подсказка все-равно продолжает появляться на первой кнопке Edit. Как сделать чтоб именно возле каждой кнопки она появлялась?
Без кода всего понять трудно. Да и средствами разработчика надо пользоваться в таких случаях.
Что бросается в глаза.
У вас задано
/* добавляем эффект движения */
  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>

Последний раз редактировалось voraa, 27.01.2023 в 13:29.
Ответить с цитированием
  #4 (permalink)  
Старый 28.01.2023, 00:34
Интересующийся
Отправить личное сообщение для Alina Sarbu Посмотреть профиль Найти все сообщения от Alina Sarbu
 
Регистрация: 28.04.2020
Сообщений: 11

Сообщение от рони Посмотреть сообщение
Alina Sarbu,
а можно всё целиком?
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Извиняюсь, теперь я исправила и вставила весь код, использовав [html], [css] и [js]. Теперь весь проект виден целиком, вместе с комментами.
Ответить с цитированием
  #5 (permalink)  
Старый 28.01.2023, 02:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #6 (permalink)  
Старый 28.01.2023, 02:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Alina Sarbu
текст выходит за карточку и проблема с всплывающей подсказкой
смотрите код выше
Ответить с цитированием
  #7 (permalink)  
Старый 30.01.2023, 11:53
Интересующийся
Отправить личное сообщение для Alina Sarbu Посмотреть профиль Найти все сообщения от Alina Sarbu
 
Регистрация: 28.04.2020
Сообщений: 11

Сообщение от рони Посмотреть сообщение
смотрите код выше
Огромное вам спасибо, внесла необходимые изменения, изучила ваш вариант и все осознала. Теперь поведение какое нужно
И спасибо также за пример вставления всего кода целиком, а то я перед этим не совсем верно поняла, но теперь буду знать
Ответить с цитированием
  #8 (permalink)  
Старый 30.01.2023, 11:56
Интересующийся
Отправить личное сообщение для Alina Sarbu Посмотреть профиль Найти все сообщения от Alina Sarbu
 
Регистрация: 28.04.2020
Сообщений: 11

Сообщение от voraa
А у вас родительские элементы не имеет position - значит static. Попробуйте задать им position: relative.

Еще недостаток. У вас в создаваемом блоке есть элементы с заданными id. Если карточек будет несколько, то и элементов с одним и тем же id будет несколько. Это неправильно!
И вам тоже спасибо большое за советы
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменяющийся блок clor Элементы интерфейса 9 22.08.2014 14:25
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 14:46
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30
Резиновые дивы с прокруткой Java Script Mary-Jay Элементы интерфейса 10 24.07.2013 17:51
Прокрутка; Изменение координат картинки (Sandr) Общие вопросы Javascript 12 31.12.2011 04:34