Простой список дел

Question 1

Я работаю над простым списком дел, и я надеялся, что опытный человек сможет просмотреть мой код в надежде на обратную связь. Я не использую никаких библиотек, потому что не удосужился разобраться в них. Я решил придерживаться простого js.

Спасибо за уделенное время.

Изменить: спасибо за ответ, теперь я изучаю семантику в html и исправляю свой код. 😉

let i = 1;
function myFunction(){
    n = i.toString();
    let theInput = document.getElementById('input').value;
    if(theInput == ""){
         return false;
}
    else{
    let input = `<li class = list id = div${n}>` + theInput +`  <button onclick = myFunction2("div${n}")>Done</button>`;
    newDiv = document.createElement(`div${n}`);
    newDiv.innerHTML = input;
    const currentDiv = document.getElementById("div0");
    currentDiv.insertBefore(newDiv, currentDiv.nextSibling);
    i++;
    }
}

    const myFunction2 = function(id){
        let dou = document.getElementById(id)
        dou.remove();
    }


    const myFunction3 = function(className){
    let elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

    
    h1{ 
        font-family: Kufam;
        font-size: 50px;
        border-color: black;
        border-style: solid;
        border-width: 12px;
        border-radius: 8px;
        text-align:  center;
    }


    .list{
        font-family: Kufam;
        font-size: 25px;
        text-align: center;
    }

<!DOCTYPE html>
<html>
<title>To do List</title>
<header>
    <link href="https://fonts.googleapis.com/css?family=Kufam" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="todoliststyle.css">
    <script type="text/javascript" src="functionList.js"></script>
    <h1>
        <br>To do List <br>
        <input id="input" type="text" placeholder="what to do" required maxlength="50">
            <button onclick="myFunction()" >Add</button>
            <button onclick="myFunction3(`list`)">Clear All</button> <br><br>
        </h1>

    <div id="div0">

</header>
</html>

Question 2

Кажется, ваше приложение работает 🙂 Хорошая работа, продолжайте! Взгляните на примечания ниже. Попробую добавить чуть позже.

Относитесь к своему имени переменной как к инструкциям для других разработчиков (и для себя из будущего). Они должны быть описательными. Функция с именем, например Function2 не приемлемы
Ваши входы HTML не имеют связанных ярлыков
Ты используешь h1 неправильно. Это неправильный тег для размещения ввода. Используйте div вместо. H1 используется для определения (только одного) основного заголовка на Вашей странице. Красный о семантике html и значении каждого тега
некоторые из ваших let переменные могут быть изменены на consts. Правило таково — используйте const когда это возможно, а если нет — используйте let
Не стилизуйте элементы по именам их тегов, например h1{} добавьте соответствующий класс к элементу и стилизуйте его с помощью .className синтаксис в вашем CSS
Вместо onCLick встроенный прослушиватель событий в вашем HTML Вы можете добавить эту обработку в файл js, используя element.addEventListener('typeOfEvent', callback)
Добавить описательный ID's к элементам — div0 абсолютно ничего не значит
Вся ваша логика в if/else утверждение. Попробуйте переместить его наружу
Заголовок To DO не должен быть в br тег. Используйте заголовок или p вместо
Логика вашего скрипта также может быть улучшена -> я постараюсь описать больше чуть позже
Вы также можете использовать ярлык для стилей границ border: 12px solid black

Похожие записи:

Добавить комментарий Отменить ответ