Показать сообщение отдельно
  #1 (permalink)  
Старый 19.06.2022, 17:42
Интересующийся
Отправить личное сообщение для bizunowvova Посмотреть профиль Найти все сообщения от bizunowvova
 
Регистрация: 18.04.2022
Сообщений: 15

Первый блокнот
Всем привет! Пишу первый блокнот, уже сделал кое-какой функционал, но теперь хочу, что бы по клику на какой-то из элементов li высвечивалось поле для ввода с текстом введенным в li для его редактирования. Тут сразу первый вопрос: как лучше это будет сделать? Через "div contenteditable=true" или "textarea"? И второй вопрос, немного запутался в логике создания самой функции. На данный момент хочу по клику через тугл добавить классы, где и будет отображаться поля для ввода и кнопка, которые по минимуму застилизованы в css. Собственно с последним хотел попросить помочь.
'use strict'

function myNote() {
    const ul = document.querySelector('ul.main_card');
    const input = document.querySelector('input.input_string');
    
    let notes = [];

    let list = document.querySelectorAll('ul.main_card > li');
    notes.push(...list);

    ul.querySelectorAll('li').forEach(n => {
        elementDeleteBtn(n.querySelector('.main_delete'), n)
    });

    function noteAdd() {
        const li = document.createElement('li');
        li.classList.add('main_text');
        const newNote = input.value;
        li.append(newNote);

        
        const deleteBtn = document.createElement('button');
        deleteBtn.classList.add('main_delete');
        deleteBtn.type = 'text';
        li.prepend(deleteBtn);

        notes.push(li);

        ul.appendChild(li, deleteBtn);
        input.value = "";
        input.focus();
        elementDeleteBtn(deleteBtn, li);
        editNote(document.querySelector('li'));
    }

    input.addEventListener('keydown', (e) => {
        if (input.value.trim().length && e.keyCode === 13) {
            noteAdd();
        }
    })

    function elementDeleteBtn(button, i) {
        button.addEventListener('click', (event) => {
            event.preventDefault();
            i.remove();
            notes.splice(notes.indexOf(i), 1);
        })
    }

    function editNote(i) {
        i.addEventListener('click', (e) => {
            e.stopPropagation();
            let area = document.createElement('div.main_edit_input');
            let text = i.querySelector('.main_text');
            let eddBtn = document.createElement('button');
            // area.classList.add('main_edit_input_v');
            // eddBtn.classList.add('main_edit_btn_v');
            if (???) {
                area.classList.toggle("main_edit_input_v");
                eddBtn.classList.toggle("main_edit_btn_v");
            }
        })
    }
}

document.addEventListener("DOMContentLoaded", myNote);

<!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">
    <title>Noote</title>
    <link rel="stylesheet" href="/style/bootstrap-grid.min.css">
    <link rel="stylesheet" href="/style/bootstrap-reboot.min.css">
    <script src="https://kit.fontawesome.com/12b812bef7.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/style/style.css">
</head>
<body>
    <section class="header">
        <div class="container">
            <div class="row">
                <div class="header_text">
                    Noote
                </div>
            </div>
        </div>
    </section>

    <section class="input">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <input type="text" placeholder="Печатай" class="input_string">
                    <!-- <div contenteditable="true" class="input_string"></div> -->
                </div>
            </div>
        </div>
    </section>

    <section class="main">
        <div class="container">
            <div class="row">
                <ul class="main_card">
                    <div class = 'main_edit_input' contenteditable=true></div>
                    <button class="main_edit_btn">Изменить</button>
                    <li class="main_text">
                        <button class="main_delete"></button>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure error eveniet vel laborum omnis maxime, vitae non quis rerum iste voluptatum beatae quaerat, aut eum sunt magni dolores voluptatem consequatur.
                    </li>
                    <li class="main_text">
                        <button class="main_delete"></button>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus debitis omnis sapiente autem natus, modi perspiciatis cumque! 
                    </li>
                    <li class="main_text">
                        <button class="main_delete"></button>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nemo id impedit, saepe placeat ipsam dolorum reprehenderit quae quod maiores quasi asperiores consequuntur vero dolorem culpa repellendus quos optio expedita?
                    </li>
                    
                </ul>
            </div>
        </div>
    </section>

    <script src="script.js"></script>
</body>
</html>

Код:
.header {
    height: 42px;
    background-color: #fff475;
    padding: 5px 0 5px 0;
    margin: 0;
}

.header .header_text {
    padding: 0;
    margin: 0;
    font-size: 20px;
}

.input {
    padding: 0;
}

.input .input_string {
    display:inline-block;
    margin-top: 120px;
    width: 100%;
    min-height: 20px;
    border: none;
    border-bottom: 2px solid #535353;
}

.main {
    padding: 0;
    margin-top: 40px;
    min-height: 500px;
}

.main .main_card {
    display: flex;
    justify-content: space-evenly;
}

.main .main_text {
    position: relative;
    width: 200px;
    padding: 10px;
    min-height: 50px;
    list-style-type: none;
    border: 1px solid rgb(179, 179, 179);
    border-radius: 3%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    cursor: pointer;
    z-index: 1;
}

.main .main_text:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

.main .main_delete {
    position: absolute;
    height: 20px;
    width: 20px;
    z-index: 2;
    margin-left: 160px;
    border-radius: 100%;
    border: none;
    background-color: #9999;
}

.main_edit_input {
    display: none;
}

.main_edit_btn {
    display: none;
}

.main_edit_input_v {
    display: block;
    position: absolute;
    min-height: 20px;
    min-width: 200px;
    z-index: 2;
    background-color: #fff475;
}

.main_edit_btn_v {
    display: block;
    position: absolute;
    height: 20px;
    width: 100px;
    z-index: 2;
    border-radius: 100%;
    border: none;
    background-color: #9999;
}
Ответить с цитированием