r3dm1ke/Todo.pas

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Project1</title>
  <script src="Todo.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="Todo.css" />
</head>
<body>
  <script>
  window.addEventListener("load", rtl.run);

  </script>
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-md-auto">
        <h1 class="title">Pascal TODO App</h1>
        <form class="form-inline">
          <input type="text" class="form-control mb-2 mr-sm-2" id="newTaskInput" placeholder="New task">
          <button type="submit" id="submitButton" class="btn btn-primary mb-2">Add</button>
        </form>
        <div class="list-group" id="list">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

## Todo.pas
program Todo;

{$mode objfpc}

uses
  JS, Classes, SysUtils, Web;

type
  task = record
    name: String;
    completed: Boolean;
  end;

var
  newTaskName: String;
  tasks: array[0 .. 100] of task;
  numberOfTasks: Integer;
  listElement, inputElement, submitButton: TJSElement;

procedure SortByCompleted();
var result: array[0 .. 100] of task;
    cur, i: Integer;
begin
  cur := 0;
  for i := 0 to numberOfTasks do
  begin
    if tasks[i].completed then
    begin
      result[cur] := tasks[i];
      Inc(cur);
    end;
  end;
  for i := 0 to numberOfTasks do
  begin
    if not tasks[i].completed then
    begin
      result[cur] := tasks[i];
      Inc(cur);
    end;
  end;
  for i := 0 to numberOfTasks do tasks[i] := result[i];
end;

procedure Blit();
var taskElement: TJSElement;
    i: Integer;
function ToggleTask(Event: TEventListenerEvent): Boolean;
var index: Integer;
begin
    index := integer(Event.target.Properties['id']);
    tasks[index].completed := not tasks[index].completed;
    Blit();
    ToggleTask := true;
end;
begin
  SortByCompleted();
  listElement.innerHTML := '';
  for i := 0 to numberOfTasks - 1 do
  begin
    taskElement := document.createElement('a');
    taskElement.textContent := tasks[i].name;
    taskElement.classList.add('list-group-item');
    taskElement.classList.add('list-group-item-action');
    taskElement.setAttribute('id', IntToStr(i));
    taskElement.addEventListener('click', @ToggleTask);
    if tasks[i].completed then
       taskElement.classList.add('disabled');
    listElement.insertBefore(taskElement, listElement.firstChild);
  end;
end;

function AddTask(Event: TEventListenerEvent): Boolean;
begin
  tasks[numberOfTasks].name := newTaskName;
  tasks[numberOfTasks].completed := false;
  Inc(numberOfTasks);
  Blit();
  AddTask := true;
end;

function OnTextChange(Event: TEventListenerEvent): Boolean;
begin
  newTaskName := string(Event.target.Properties['value']);
  inputElement.setAttribute('value', newTaskName);
end;

begin
  listElement := document.querySelector('#list');
  inputElement := document.querySelector('#newTaskInput');
  inputElement.addEventListener('input', @OnTextChange);
  submitButton := document.querySelector('#submitButton');
  submitButton.addEventListener('click', @AddTask);
  Blit();
end.
	<!doctype html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Project1</title>
	<script src="Todo.js"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<link rel="stylesheet" href="Todo.css" />
	</head>
	<body>
	<script>
	window.addEventListener("load", rtl.run);

	</script>
	<div class="container">
	<div class="row justify-content-md-center">
	<div class="col-md-auto">
	<h1 class="title">Pascal TODO App</h1>
	<form class="form-inline">
	<input type="text" class="form-control mb-2 mr-sm-2" id="newTaskInput" placeholder="New task">
	<button type="submit" id="submitButton" class="btn btn-primary mb-2">Add</button>
	</form>
	<div class="list-group" id="list">
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	program Todo;

	{$mode objfpc}

	uses
	JS, Classes, SysUtils, Web;

	type
	task = record
	name: String;
	completed: Boolean;
	end;

	var
	newTaskName: String;
	tasks: array[0 .. 100] of task;
	numberOfTasks: Integer;
	listElement, inputElement, submitButton: TJSElement;

	procedure SortByCompleted();
	var result: array[0 .. 100] of task;
	cur, i: Integer;
	begin
	cur := 0;
	for i := 0 to numberOfTasks do
	begin
	if tasks[i].completed then
	begin
	result[cur] := tasks[i];
	Inc(cur);
	end;
	end;
	for i := 0 to numberOfTasks do
	begin
	if not tasks[i].completed then
	begin
	result[cur] := tasks[i];
	Inc(cur);
	end;
	end;
	for i := 0 to numberOfTasks do tasks[i] := result[i];
	end;

	procedure Blit();
	var taskElement: TJSElement;
	i: Integer;
	function ToggleTask(Event: TEventListenerEvent): Boolean;
	var index: Integer;
	begin
	index := integer(Event.target.Properties['id']);
	tasks[index].completed := not tasks[index].completed;
	Blit();
	ToggleTask := true;
	end;
	begin
	SortByCompleted();
	listElement.innerHTML := '';
	for i := 0 to numberOfTasks - 1 do
	begin
	taskElement := document.createElement('a');
	taskElement.textContent := tasks[i].name;
	taskElement.classList.add('list-group-item');
	taskElement.classList.add('list-group-item-action');
	taskElement.setAttribute('id', IntToStr(i));
	taskElement.addEventListener('click', @ToggleTask);
	if tasks[i].completed then
	taskElement.classList.add('disabled');
	listElement.insertBefore(taskElement, listElement.firstChild);
	end;
	end;

	function AddTask(Event: TEventListenerEvent): Boolean;
	begin
	tasks[numberOfTasks].name := newTaskName;
	tasks[numberOfTasks].completed := false;
	Inc(numberOfTasks);
	Blit();
	AddTask := true;
	end;

	function OnTextChange(Event: TEventListenerEvent): Boolean;
	begin
	newTaskName := string(Event.target.Properties['value']);
	inputElement.setAttribute('value', newTaskName);
	end;

	begin
	listElement := document.querySelector('#list');
	inputElement := document.querySelector('#newTaskInput');
	inputElement.addEventListener('input', @OnTextChange);
	submitButton := document.querySelector('#submitButton');
	submitButton.addEventListener('click', @AddTask);
	Blit();
	end.