• Почему у меня не получается учиться, даже когда я все делаю все в точности как в видеоуроках?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    S0wB1hC.gif

    Начинайте с фундаментальных знаний, и постепенно двигайтесь к более узкоспециализированному и более сложному. Освойте навык поиска информации, и вообще работы с информацией. Научитесь тому, как учиться (гугл в помощь). Не ждите быстрых результатов. Легко не будет.
    Ответ написан
    Комментировать
  • Как удалять div элемент в проекте todolist?

    Big_Trouble
    @Big_Trouble
    Программист недосамоучка
    Что то типа этого
    <div class="app" id="app">
            <input class="type" type="search"placeholder="Добавить дело">
            <button id="add"> add</button>
            <button id="clear"> clear</button>
            <div class="out">
            </div>
        </div>

    <script>
            let input = document.querySelector('.type'),
                out = document.querySelector('.out'),
                add = document.getElementById('add'),
                clear = document.getElementById('clear'),
                list = {}; // Объект в котором будет храниться наш todo-список
            // Функция рендера, каждый раз после изменения объекта list будет заново перерисовывать контент
            const renderList = () => {
                out.innerHTML = ''// Очищаем блок out
                for(let i in list){
                    // Через цикл пробегаемся через объект, и создаем соотвественные чекбоксы с класом и data-id
                    // data-id мы создаем когда добавляем новый todo элемент в функции addToList
                    let comp = document.createElement('div')
                    if(list[i].checked){
                        comp.innerHTML = `<input type="checkbox" class="checkbox-item" data-id="${i}" checked/> ${list[i].value}`
                    } else {
                        comp.innerHTML = `<input type="checkbox" class="checkbox-item" data-id="${i}"/> ${list[i].value}`
                    }
                    out.appendChild(comp)
                }
            }
            const toggleCheckbox = (e) => {
                // Изменяем статус чекбокса в объекте list
               if(!e.target.classList.contains('checkbox-item')) return;
               const todoId = e.target.getAttribute('data-id');
               list[todoId].checked = !list[todoId].checked 
            }
    
            // Функция для добавления элемента todo    
            const addToList = () => {
                const todoId = '_' + Date.now() // Генерируем уникальный айдишник
                
                // Это конкретный todo элемент по умолчанию checked:false
                list[todoId] = {
                    value: input.value,
                    checked: false
                }
                input.value = ''// Очищаем форму ввода
                renderList()
            }
            
            // Функция для очистки списка
            // Через цикл бежим по объекту, если todo элемент имеет статус checked значит мы удаляем его из объекта
            const clearList = () => {
                for(let i in list){
                    if(list[i].checked){
                        delete list[i]
                    }
                }
                renderList()
            }
    
            // Слушатели событий
            add.addEventListener('click', () => addToList())
            clear.addEventListener('click', () => clearList())
            out.addEventListener('click', () => toggleCheckbox(event))
    
        </script>
    Ответ написан
    1 комментарий
  • Как прижать текст к низу блока?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    1) https://jsfiddle.net/webirus/tkp9dr6L/1/
    #main {
        display: flex;
        align-items: flex-end;
    }

    2) https://jsfiddle.net/webirus/tkp9dr6L/2/
    #main {
        display: table-cell;
        vertical-align: bottom;
    }

    3) https://jsfiddle.net/webirus/tkp9dr6L/3/
    #block1, #block2 {
        display: flex;
        align-items: flex-end;
    }
    Ответ написан
    5 комментариев