todo.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title>OneScript: todo app</title>
  <style>
 body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 40px auto;
            padding: 0 20px;
        }
        .input-row {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        #taskInput {
            flex: 1;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        #addBtn {
            padding: 10px 20px;
            font-size: 16px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #addBtn:hover {
            background: #45a049;
        }
        #taskList {
            list-style: none;
            padding: 0;
        }
        #taskList li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            margin-bottom: 8px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        #taskList li .task-text {
            flex: 1;
            word-break: break-word;
        }
        #taskList li.done .task-text {
            text-decoration: line-through;
            color: #888;
        }
        .delete-btn {
            padding: 5px 10px;
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .delete-btn:hover {
            background: #c0392b;
        }
  </style>
</head>
<body>
  <h2>OneScript: todo app</h2>
  <p>Пример TODO приложения на OneScript !</p>

  <div id="app"></div>

  <script src="/onescript.js"></script>

  <one-script>
    
    Перем КонтейнерПриложения;
    Перем Задачи;
    Перем ПолеВводаЗадачи;
    Перем СписокЗадач;

    Процедура Инициализация()

        КонтейнерПриложения = "app";
        Задачи = Новый ТаблицаЗначений;
        Задачи.Колонки.Добавить("Ид");
        Задачи.Колонки.Добавить("Описание");
        Задачи.Колонки.Добавить("Выполнено");

        КонтейнерВВода = Документ.СоздатьЭлемент("div");
        КонтейнерВВода.Класс = "input-row";
        КонтейнерВВода.Идентификатор = "КарточкаЗадачи";
        КонтейнерВВода.ДобавитьВ(Документ.ПолучитьЭлемент(КонтейнерПриложения));

        ПолеВводаЗадачи = Документ.СоздатьЭлемент("input");
        ПолеВводаЗадачи.Идентификатор = "taskInput";
        ПолеВводаЗадачи.ДобавитьВ(КонтейнерВВода);

        КнопкаДобавить = Документ.СоздатьЭлемент("button");
        КнопкаДобавить.Текст = "Добавить";
        КнопкаДобавить.Идентификатор = "addBtn";
        КнопкаДобавить.ДобавитьВ(КонтейнерВВода);
        КнопкаДобавить.НаСобытие("Нажатие","ДобавитьЗадачу()");

        Карточка = Документ.СоздатьЭлемент("div");
        Карточка.Идентификатор = "карточка";
        Карточка.ДобавитьВ(Документ.ПолучитьЭлемент(КонтейнерПриложения));

        Заголовок = Документ.СоздатьЭлемент("h3");
        Заголовок.Текст = "Список дел";
        Заголовок.ДобавитьВ(Карточка);

        СписокЗадач = Документ.СоздатьЭлемент("ul");
        СписокЗадач.Класс = "taskList";
        СписокЗадач.Идентификатор = "taskList";
        СписокЗадач.ДобавитьВ(Карточка);

    КонецПроцедуры

    Процедура ДобавитьЗадачу()
        НоваяЗадача = Задачи.Добавить();
        НоваяЗадача.Описание = ПолеВводаЗадачи.Значение;
        НоваяЗадача.Ид = Строка(Новый УникальныйИдентификатор);
        НоваяЗадача.Выполнено = Ложь;
        ПолеВводаЗадачи.Значение = "";
        Сообщить("Добавляем задачу " + НоваяЗадача.Описание + " " + НоваяЗадача.Ид);
        ОбновитьСписокЗадач();
    КонецПроцедуры

    Процедура УдалитьЗадачу(ИдЗадачи)
        Задачи.Удалить(Задачи.Найти(ИдЗадачи));
        Сообщить("Удален " + ИдЗадачи);
        ОбновитьСписокЗадач();
    КонецПроцедуры

    Процедура ПереключитьЗадачу(ИдЗадачи)
        Задача = Задачи.Найти(ИдЗадачи);
        Задача.Выполнено = НЕ Задача.Выполнено;
        Сообщить("Изменен " + ИдЗадачи + " " + Задача.Выполнено);
        ОбновитьСписокЗадач();
    КонецПроцедуры

    Процедура ОбновитьСписокЗадач()
        СписокЗадач.HTML = "";
        Для Каждого Задача Из Задачи Цикл

            КомандаУдалить = СтрШаблон("УдалитьЗадачу(""%1"")", Задача.Ид);
            КомандаПереключить = СтрШаблон("ПереключитьЗадачу(""%1"")", Задача.Ид);

            ЭлементСписка = Документ.СоздатьЭлемент("li");
            ЭлементСписка.ДобавитьВ(СписокЗадач);

            ЧекБокс = Документ.СоздатьЭлемент("input");
            ЧекБокс.НаСобытие("Изменение", КомандаПереключить);
            ЧекБокс.УстановитьАтрибут("type","checkbox");
            Если Задача.Выполнено Тогда
                ЧекБокс.УстановитьАтрибут("checked");
            КонецЕсли;
            ЧекБокс.ДобавитьВ(ЭлементСписка);

            Спан = Документ.СоздатьЭлемент("span");
            Спан.Класс = "task-text";
            Спан.Текст = Задача.Описание;
            Спан.ДобавитьВ(ЭлементСписка);

            КнопкаУдалить = Документ.СоздатьЭлемент("button");
            КнопкаУдалить.Текст = "Удалить";
            КнопкаУдалить.Класс = "delete-btn";
            КнопкаУдалить.ДобавитьВ(ЭлементСписка);
            КнопкаУдалить.НаСобытие("Нажатие", КомандаУдалить);
            
        КонецЦикла;
    КонецПроцедуры

    Инициализация();

  </one-script>
</body>
</html>