Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 20.12.2020
Сообщений: 23

Приложение todo app на javascript

12.07.2021, 20:07. Показов 5048. Ответов 0

Студворк — интернет-сервис помощи студентам
Как добавить к функции createTodoApp третий опциональный аргумент с массивом дел, которые должны быть в списке сразу после загрузки приложения. Каждое дело должно быть объектом вида { name: 'Название дела', done: false/true }. При этом список дел сразу добавляется в DOM.

А так же чтобы при добавлении несколько дел и перезагрузки страницы всё выглядело так же, как и до перезагрузки.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="ru">
<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="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script defer src="todo-app.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            createTodoApp(document.getElementById('todo-app'), 'Мои дела');
        })
    </script>
    <title>TODO</title>
</head>
<body>
 
    <div class="container mb-5">
        <nav class="nav">
            <a class="nav-link" href="index.html">Мои дела</a>
            <a class="nav-link" href="mom.html">Дела мамы</a>
            <a class="nav-link" href="dad.html">Дела папы</a>
        </nav>
    </div>
    
    <div id="todo-app" class="container"></div>
 
</body>
</html>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
(function () {
  // Создаём и возвращаем заголовок приложения
  function createAppTitle(title) {
    let appTitle = document.createElement('h2');
    appTitle.innerHTML = title;
    return appTitle;
  }
 
  // Создаём и возвращаем форму для создания дела
  function createTodoItemForm() {
    let form = document.createElement('form');
    let input = document.createElement('input');
    let buttonWrapper = document.createElement('div');
    let button = document.createElement('button');
 
    form.classList.add('input-group', 'mb-3');
    input.classList.add('form-control');
    input.placeholder = 'Введите название нового дела';
    buttonWrapper.classList.add('input-group-append');
    button.classList.add('btn', 'btn-primary');
    button.textContent = 'Добавить дело';
    button.disabled = true;
 
    buttonWrapper.append(button);
    form.append(input);
    form.append(buttonWrapper);
 
    input.addEventListener('input', function (e) {
      e.preventDefault();
      if (input.value.length > 0) {
        button.disabled = false;
      } else if (input.value.length == 0) {
        button.disabled = true;
      }
    });
 
    return {
      form,
      input,
      button,
    };
  }
 
  // Создаём и возвращаем список элементов
  function createTodoList() {
    let list = document.createElement('ul');
    list.classList.add('list-group');
    return list;
  }
 
  function createTodoItem(name) {
    let item = document.createElement('li');
    // Кнопки помещаем в элемент, который красиво покажет их в одной группе
    let buttonGroup = document.createElement('div');
    let doneButton = document.createElement('button');
    let deleteButton = document.createElement('button');
 
    // Устанавливаем стили для элемента сиписка, а так же для размещения кнопок
    // в его правой части с помощью flex
    item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
    item.textContent = name;
 
    buttonGroup.classList.add('btn-group', 'btn-group-sm');
    doneButton.classList.add('btn', 'btn-success');
    doneButton.textContent = 'Готово';
    deleteButton.classList.add('btn', 'btn-danger');
    deleteButton.textContent = 'Удалить';
 
    // Вкладываем кнопки в отдельный элемент, чтобы они объединились в один блок
    buttonGroup.append(doneButton);
    buttonGroup.append(deleteButton);
    item.append(buttonGroup);
 
    // Приложению нужен доступ к самому элементу и кнопкам, чтобы обрабатывать события нажатия
    return {
      item,
      doneButton,
      deleteButton,
    };
  }
 
  function createTodoApp(container, title = 'Список дел', arrayCases) {
 
    let todoAppTitle = createAppTitle(title);
    let todoItemForm = createTodoItemForm();
    let todoList = createTodoList();
 
    // let arrayCases = [
    //   {name: 'Сходить в магазин', done: false},
    //   {name: 'Купить хлеб', done: false},
    // ]
 
    container.append(todoAppTitle);
    container.append(todoItemForm.form);
    container.append(todoList);
 
    // Браузер создаёт событие submit на форме по нажатию на Enter или на кнопку создания дела
    todoItemForm.form.addEventListener('submit', function (e) {
      // Эта строчка необходима, чтобы предотвратить стандартное действие браузера
      // В данном случае мы не хотим, чтобы страница перезагружалась при отправке формы
      e.preventDefault();
 
 
      // Игнорируем создание элемента, если пользователь ничего не ввел в поле
      if (!todoItemForm.input.value) {
        return;
      }
 
 
      let todoItem = createTodoItem(todoItemForm.input.value);
 
      // Добавляем обработчики на кнопку
      todoItem.doneButton.addEventListener('click', function () {
        todoItem.item.classList.toggle('list-group-item-success');
      });
      todoItem.deleteButton.addEventListener('click', function () {
        if (confirm('Вы уверены?')) {
          todoItem.item.remove();
        }
      });
 
      // Создаём и добавляем в список новое дело с названием из поля для ввода
      todoList.append(todoItem.item);
 
      // Обнуляем значение в поле, чтобы не пришлось стирать его вручную
      todoItemForm.input.value = '';
    });
  }
 
  window.createTodoApp = createTodoApp;
 
})();
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
12.07.2021, 20:07
Ответы с готовыми решениями:

ToDo приложение
Решил написать под свои нужды приложение, но так как я 0 в языке то сразу возникли вопросы. 1. Для ToDo приложения(менеджер задач, список...

После загрузки Windows сразу вылетает ошибка: todo: file description обнаружена ошибка. Приложение будет закрыто.
После загрузки Виндовса сразу вылетает ошибка: todo: file description обнаружена ошибка. Приложение будет закрыто. Помогите...

Mobile App Developer (Titanium, Ionic, React native| JavaScript). Удаленно
Требуются специалисты для кроссплатформенной разработки мобильных приложений на фреймворке Titanium или React native, Ionic framework (iOS,...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
12.07.2021, 20:07
Помогаю со студенческими работами здесь

Rate my app - оцените мое приложение
Добрый день. везде в интернете один и тот же исходник. openURL:]; 1. вопрос что за Purple Software, на который никто не...

Приложение не читает настройки из app.exe.config
Здравствуйте! Такое вопрос: скомпиленое приложение , не мое, настройки должны считаться из конфиг файла, который лежит рядом. Изменяются...

Добавление и сохранение текста в приложение (Win Form App)
Добрый день! Подскажите мне пожалуйста... Есть форма, есть ссылка на интернет-страницу. Любую. Так вот, допустим, я работаю в...

DirectX и Windows8.1 приложение магазина (metro style app)
Здравствуйте у меня проблема с приложением на DX (универсальное приложение магазина для 8.1). На экране отображается только фон(цвет в...

Возможно ли загрузить свои приложение в play market/app store
Если я создам свое приложение насколько сложно его загрузить в app store/ play market или магазин приложений windows(не знаю как он...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru