ToDoList – vícekrokové úkoly

V tomto článku si procvičíme používání čistého JavaScriptu na příkladu vytvoření programu „Todo List“. Při psaní kódu budeme používat moderní syntaxi, ale zprovozníme ji i ve starších prohlížečích, včetně Internet Exploreru 11.

Co je seznam úkolů?

Seznam úkolů je seznam věcí, které musíte udělat nebo chcete udělat.

Tradičně jsou napsány na kus papíru a uspořádány podle priority. Po dokončení úkolu se obvykle ze seznamu odškrtne.

Ale takový seznam lze vést nejen na papíře, ale také v elektronické podobě například v prohlížeči.

Zdrojové kódy SimpleTodoList

SimpleTodoList je název projektu, který v tomto článku vytvoříme, abychom udrželi seznam úkolů. Napíšeme to v HTML, CSS a čistém JavaScriptu.

Postup jeho vytvoření je uveden v další části tohoto článku a zde je jeho ukázka a zdrojové kódy.

Zdrojové kódy SimpleTodoList jsou umístěny v odpovídající složce projektu „ui-components“ na GitHubu.

SimpleTodoList se skládá ze 3 souborů: „index.html“ (rozvržení), „simple-todo-list.css“ (styly) a „simple-todo-list.js“ (script).

SimpleTodoList používá k ukládání úkolů localStorage. To vám umožní číst data z webového úložiště, když znovu otevřete tuto stránku nebo ji obnovíte a použijete je k opětovnému vytvoření posledního stavu seznamu.

K ukládání dat do úložiště dochází vždy, když se stav tohoto seznamu změní. To je nezbytné k zajištění toho, aby localStorage vždy obsahoval aktuální informace.

• přidat nové úkoly do seznamu;
• označit splněné úkoly (v tomto případě jsou okamžitě vyřazeny ze seznamu aktivních úkolů a převedeny na dokončené);
• odstranit položky do koše;
• trvale odstranit úkoly v koši a v případě potřeby je také obnovit;
• přepínání mezi úkoly (aktivní, dokončené a smazané);
• automaticky ukládat seznamy úkolů do localStorage (nutné pro obnovení posledního stavu seznamu při opětovném otevření stránky).

Popis procesu vytváření SimpleTodoList

Vývoj SimpleTodoList dokončíme v 5 krocích.

Krok 1: Vytvořte strukturu souborů

Struktura souboru projektu:

Krok 2: Přidejte základní strukturu do index.html

Otevřeme „index.html“, přidáme k němu základní označení a zahrneme také soubory se styly a JavaScriptem.

Krok 3: Označte samotný úkol

Označme blok úkolů:

• textové pole (s třídou todo__text) pro zadání nového úkolu;
• .todo__add tlačítko pro přidání nového úkolu do .todo__items;
• ovládací prvek s rozevíracím seznamem úloh pro přepínání mezi nimi;
• seznam úkolů .todo__items , přidáme je do něj pomocí JavaScriptu.

Screenshot toho, co jsme dostali:

HTML kód samotné úlohy:

Vytvoříme jej a pomocí JavaScriptu vložíme do .todo__items.

Hodnota atributu data-todo-state určí stav úlohy:

• aktivní – aktivní;
• dokončeno – dokončeno;
• smazáno – smazáno.

.todo__task je prvek, který obsahuje text úkolu, a .todo__action jsou tlačítka pro provádění akcí na úkolu. Pomocí nich můžeme obnovit úkol (převést jej do aktivního stavu), označit úkol jako dokončený a smazat. Akce, kterou tlačítko .todo__action provede, je určena hodnotou atributu data-todo-action.

Krok 4. Styly psaní

Styly lze psát různými způsoby. Příklad toho, co se stalo:

Finální kód CSS lze zobrazit na GitHubu.

Podívejme se na některé zajímavé body v tomto kódu.

1. Přepneme zobrazení úkolů v .todo__items v závislosti na zvolené možnosti. K tomu jsou ve výše uvedeném souboru zapsány následující styly:

[data-todo-option="active"] .todo__item:not([data-todo-state="active"]), [data-todo-option="completed"] .todo__item:not([data-todo-state="completed"]), [data-todo-option="deleted"] .todo__item:not([data-todo-state="deleted"])

Hodnotu atributu data-todo-option prvku .todo__items nastavíme pomocí JavaScriptu při změně vybrané možnosti.

2. Skrytí tlačítek pro úlohy, které by se pro určité stavy neměly zobrazovat, se provádí následovně:

[data-todo-state="active"] .todo__action_restore, [data-todo-state="completed"] .todo__action_complete, [data-todo-state="deleted"] .todo__action_complete

Například u aktivních úloh [data-todo-state=“active“] nebudeme zobrazovat tlačítko obnovení .todo__action_restore. Protože Proč převádět úlohu do aktivního stavu, když je již aktivní.

Krok 5. Napíšeme JavaScript

Začněme psát kód vytvořením objektu úkolu:

const todo = <>;

Je to potřeba pouze pro lepší organizaci našeho kódu a ne pro vytváření hromady samostatných funkcí.

Udělejme do úkolu následující metody:

const todo = < action(e) <>, add() <>, create(text) <>, init() <>, update() <>, save() <> >;

Začněme s init() . Tato metoda inicializuje seznam úkolů.

Dělá následující věci:

• získá uložený seznam úkolů z localStorage a pokud existuje, vloží jej do .todo__items ;
• přiřadí obsluhu události změny prvku .todo__options; update se používá jako handler;
• přiřadí obsluhu události kliknutí dokumentu; akce působí jako handler.

kód metody init():

init() < const fromStorage = localStorage.getItem('todo'); if (fromStorage) < document.querySelector('.todo__items').innerHTML = fromStorage; >document.querySelector('.todo__options').addEventListener('change', this.update); document.addEventListener('click', this.action.bind(this)); >

Když zadáváme funkci nebo metodu objektu jako handler, musíme jednoduše předat odkaz, ne volání.

Při zadávání this.action to nastavíme na aktuální kontext pomocí bind. To je nezbytné, abychom mohli získat objekt úkolu v akci() pomocí tohoto .

Metoda create() je velmi jednoduchá, jednoduše vrátí HTML kód samotné úlohy se zadaným textem:

save() získá obsah .todo__items a nastaví jej na localStorage:

save()

update() se používá jako handler:

update()

Při volání nastaví atribut data-todo-option prvku .todo__items na hodnotu vybrané možnosti a také na hodnotu zakázané vlastnosti prvku .todo__text:

add() po kliknutí na tlačítko přidá úkol do seznamu .todo__items. Chcete-li vytvořit kód HTML pro úlohu, použijte create() :

add() const elemText = document.querySelector('.todo__text'); if (elemText.disabled document.querySelector('.todo__items').insertAdjacentHTML('beforeend', this.create(elemText.value)); elemText.value = ''; >

akce se volá, když v dokumentu dojde k události kliknutí:

action(e) < const target = e.target; if (target.classList.contains('todo__action')) < const action = target.dataset.todoAction; const elemItem = target.closest('.todo__item'); if (action === 'deleted' && elemItem.dataset.todoState === 'deleted') < elemItem.remove(); >else < elemItem.dataset.todoState = action; >this.save(); > else if (target.classList.contains('todo__add')) < this.add(); this.save(); >>

Parametr e je objekt události. Prohlížeč jej vytvoří a předá jej jako první argument k akci.

V kódu je e.target prvek, na který bylo kliknuto. Protože nepotřebujeme žádná kliknutí, ale pouze na určité prvky, používáme následující podmínky:

if (target.classList.contains('todo__action')) < // . >else if (target.classList.contains('todo__add')) < // . >

Pokud uživatel klikl na .todo__add , provedeme následující akce:

this.add(); this.save();

add() přidá novou úlohu do seznamu .todo__items a save() uloží všechny úlohy (obsah .todo__items) do localStorage.

Když uživatel klikne na .todo__action, spustí se následující kód:

const action = target.dataset.todoAction; const elemItem = target.closest('.todo__item'); if (action === 'deleted' && elemItem.dataset.todoState === 'deleted') < elemItem.remove(); >else < elemItem.dataset.todoState = action; >this.save();

Nejprve získáme akci, kterou je třeba provést. Máme to v atributu data-todo-action. Dále najdeme element .todo__item a uložíme jej do proměnné elemItem. Tento prvek budeme potřebovat jako další. Poté, pokud je akce delete a stav úlohy je delete , pak prvek odstraníme. V opačném případě nastavte atribut data-todo-state prvku .todo__item na action . Nakonec uložte všechny změny do localStorage pomocí save() .

Poslední věc, kterou musíte udělat, aby Todo fungovalo, je zavolat init:

todo.init();

Převod JavaScriptu na spouštění v aplikaci Internet Explorer 11

1. Provedeme transpilaci, tzn. Pojďme převést původní syntaxi na takovou, která je srozumitelná starším prohlížečům, včetně Internet Exploreru 11.

K tomu použijeme online nástroj Babel REPL:

Uvedené cíle: výchozí, tj. 11 .

Výsledný kód zkopírujeme a vložíme do souboru simple-todo-list.es5.js.

Nyní výsledné syntaxi rozumí Internet Explorer 11. To ale nestačí, protože. V kódu máme ještě dvě metody, které tento prohlížeč nepodporuje. Tito jsou nejblíže a odstranit .

2. Proveďme polyfiling, tzn. Dodejme tyto chybějící metody do starších prohlížečů tím, že jim poskytneme jejich vlastní verzi.

// polyfill closest if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector if (!Element.prototype.closest) Element.prototype.closest = function(s) < var el = this; do < if (Element.prototype.matches.call(el, s)) return el; el = el.parentElement while (el !== null && el.nodeType === 1); return null; >; > // polyfill remove if (!('remove' in Element.prototype)) < Element.prototype.remove = function() < if (this.parentNode) < this.parentNode.removeChild(this); >>; >

Výsledkem byl následující kód: simple-todo-list.es5.js .

úkoly

1. Přidejte možnost vytvořit úkol stisknutím klávesy Enter.

2. Přepište kód tak, aby se úlohy ukládaly do localStorage nikoli jako HTML kód, ale ve formátu pole objektů:

3. Přidejte do kódu možnost třídit úkoly pomocí drag and drop.

4. Přidejte vyskakovací zprávy informující uživatele o provádění akcí na úkolech.

5. Pro milovníky jQuery přepište veškerý kód pomocí funkcí této knihovny.

Todolist – rychlý správce úloh konzole v konceptu GTD na Golangu

Todolist vám pomůže spravovat vaše úkoly v terminálu. Todolist je založen na metodě Getting Things Done a umí pracovat s projekty, kontexty a termíny úkolů.

Seznamy úkolů závisí na adresáři, ve kterém s nimi pracujete – stačí mít různé seznamy úkolů v různých složkách.

Instalace

Vyberte si jakoukoli pohodlnou metodu:

• brew install todolist – pokud máte OSX s nainstalovaným homebrew.
• Stáhněte si nejnovější verzi pro vaši platformu a zkopírujte spustitelný soubor seznam úkolů na libovolné místo v $PATH.
• Pokud máte nainstalovaný Golang, spusťte příkaz přejděte na github.com/gammons/todolist.

Rychlý start

1: Vytvořte úložiště úkolů
Běh todolist init vytvořit seznam úkolů v souboru .todos.json v aktuálním adresáři.

~ todolist init
Úložiště úkolu inicializováno.
2: Přidejte nějaké úkoly
Pomocí příkazu můžete přidat úkol přidat nebo a:

~ todolist add Chatujte s @bobem o +currentProject due tom
Todo přidal.
~ todolist a +devops aktualizuje mé hlavní heslo v pátek
Todo přidal.
3: Seznam úkolů
Toto je srdce celého systému. Své úkoly můžete filtrovat a seskupovat. A pokud vestavěné filtrování nesplňuje vaše potřeby, můžete výstup dokonce vést potrubím grep!

~ seznam úkolů
všechno
1 [ ] zítra Promluvte si s @bob o +bigProject
2 [ ] Pá 13. května +devops aktualizuje mé hlavní heslo

seznam todolistů přijímá různé argumenty. Úkoly si můžete vybrat podle termínu:

~ seznam todolistů kvůli tom
všechno
1 [ ] zítra Promluvte si s @bob o +bigProject

Lze seskupit podle projektu nebo kontextu.

~ seznam todolistů podle projektu

velký Projekt
1 [ ] zítra Promluvte si s @bob o +bigProject

devops
2 [ ] Pá 13. května +devops aktualizuje mé hlavní heslo
4: Dokončete úkol
Pomocí příkazu můžete označit úkol jako dokončený todolista kompletní nebo todolista c.

~ todolista dokončil 1
Úkol dokončen.
~ todolista c 2
Úkol dokončen.
Nyní, když zobrazíte seznam úkolů, uvidíte, že jsou všechny dokončeny:

~ seznam úkolů
všechno
1 [x] zítra Promluvte si s @bob o +bigProject
2 [x] Pá 13. května +devops aktualizuje mé hlavní heslo
5: Archivujte dokončené úkoly
Po dokončení úkolů je můžete archivovat, aby se při zobrazení seznamu nezobrazovaly.

Každý úkol můžete archivovat jednotlivě s týmem todolista ar [id], ale jelikož máme dnes spoustu splněných úkolů, můžeme běžet todolista ak, který odešle všechny dokončené úkoly do archivu.

~todolistac
Všechny dokončené úkoly jsou archivovány.
To je vše! Nyní znáte 90 funkcí Todolist.

Pracovní proces

Úkoly mohou mít 3 stavy:

• Nedokončeno — Nedokončené úkoly
• Complete – Dokončené úkoly
• Archived – Archivované úkoly, nejsou zobrazeny v seznamu úkolů a lze je zobrazit pomocí příkazu seznam todolistů archivován.

Obvykle vytvoříme úkol, dokončíme jej a na konci dne archivujeme.

Přidávání úkolů

Úkoly se přidávají příkazem todolista přidat nebo todolista a, poté můžete vyplnit podrobnosti úkolu.

• +projekty и @kontexty lze vložit do textu úkolu.
• Na konci úkolu je nutné uvést termín dokončení.

Formát data splatnosti

• Pro dnešní nebo zítřejší úkoly můžete zadat splatný dnes и do zítřka. Nebo zkratkové příkazy kvůli tod nebo kvůli tom.
• U úkolů s uzávěrkou během aktuálního týdne můžete napsat první 3 písmena dne (v angličtině). Například, splatný po nebo splatný čt. Todolist vždy hledá dny v budoucnosti, takže pokud je dnes středa a nastavíte splatný po, pak bude uzávěrka úkolu příští pondělí.
• Chcete-li zadat konkrétní datum, můžete zadat splatný 2. května nebo splatný 2. května. Měsíc musí být napsán malými písmeny třemi písmeny.

~ todolist a aktualizujte pracovní databázi pomocí @frank due tom
Todo přidal.
~ todolist a @pomodoro Musím se zamyslet nad naší strukturou pracovních vrstev kvůli svatbě
Todo přidal.
~ todolist a setkejte se s @jake a @adrian o projektu +importImprovement s termínem 23. června
Todo přidal.
~todolista

1 [ ] zítra aktualizujte pracovní databázi pomocí @frank
2 [ ] St Jun 22 @pomodoro Musím přemýšlet o naší struktuře pracovních míst
3 [ ] Čt 23. června setkání s @jake a @adrian o projektu +importImprovement

Dokončení úkolů a návrat k nesplněným

todolista kompletní [id] nebo todolista c [id] — dokončí úkol se zadaným číslem.

todolist neúplný [id] nebo todolista uc [id] — označí úkol jako nedokončený.

Archivace a vrácení z archivu

archiv todolistů [id] nebo todolista ar [id] — umístí úkol do archivu.

todolist vyjmout z archivu [id] — vrátí úlohu z archivu.

Výpis, filtrování a seskupování úkolů

seznam todolistů nebo todolista l — seznam všech nearchivovaných úloh

todolista l archivován — seznam úkolů v archivu

Poznámka: Ve výchozím nastavení Todolist vždy skryje archivované úkoly. Můžete je vidět pouze jako tým seznam úkolů archivován.

Výběr do termínu
todolista l agenda — Seznam úkolů na dnešek + po splatnosti

todolista l po splatnosti — Seznam zpožděných úkolů

todolista má být dnes nebo todo l kvůli tod — Seznam úkolů na dnešek

todolista má přijít zítra nebo todo l due tom — Seznam úkolů na zítřek

Výběr podle dne v týdnu
todolista l kvůli po — Seznam úkolů na pondělí

todolist má přijít tento týden — Seznam úkolů na celý týden

seskupení
Úkoly lze seskupit podle projektu nebo kontextu.

todolista l by p — Seznam úkolů seskupených podle projektu

todolist l by c — Seznam úkolů seskupených podle kontextu

Úpravy úkolů

Todolist vám zatím umožňuje pouze upravit termín dokončení úkolu. Chcete-li úkol úplně upravit, je lepší jej smazat a vytvořit znovu.

todolist e [id] splatný [splatný] — upraví termín úkolu.

• todolist e 133 kvůli tod — upravte úkol číslo 133 a nastavte konečný termín na dnešek.
• todolist e 56 splatný 20. června — upravit úkol číslo 56 a stanovit termín na 20. června.

Rozšíření stávajících úkolů

Todolist podporuje rozšíření stávajících seznamů úkolů přidáním chybějících podrobností. Syntaxe je:

todolista ex [id] +[projekt]: todo1[,todo2…]

Pokud seznam obsahuje následující úkol:

13 [ ] So 28. ledna Napsat práci

Zkusme to rozšířit přidáním podrobností:

• todolista ex 13 +teze: získat latexovou šablonu do 22. ledna, seznámit se s prof. datum splatnosti 23. ledna, data zorganizujte do 24. ledna, Úvod a Abstrakt do 27. ledna

Seznam bude vypadat takto:

14 [ ] Ne 22. ledna získat latexovou šablonu
15 [ ] po 23. ledna setkání s prof.
16 [ ] Út 24. ledna organizovat data
17 [ ] St 25. ledna Úvod a abstrakt

Mazání úkolů

todolista smazat [id] nebo todolista d [id].

Webové zobrazení

Tento příkaz spustí odlehčený webový server na adrese http://localhost:7890, kde můžete spravovat své úkoly v krásném zobrazení.

Demoverzi si můžete prohlédnout zde.

formát souboru .todos.json

.todos.json ukládá všechny úlohy z aktuálního adresáře ve velmi jednoduchém formátu. Příklad souboru .todos.json:

[„id“: 110,
„subject“: „+toVerify zavedl @scott upozornění zuora?“,
„projekty“: [
„ověřit“
],
„kontexty“: [
„scott“
],
„splatnost“: „2016“,
„dokončeno“: nepravda,
„archivováno“: nepravdivé
>]

Závěr

Miluji nástroje, které se řídí filozofií Unixu. Jako sebevědomý uživatel Wunderlistu jsem plánoval přepsat 30 funkcí Wunderlistu a ponechat pouze ty, které jsem používal v jednoduché konzolové utilitě.

Jak se to liší od todo.txt?
todo.txt je vynikající nástroj se skvělým ekosystémem, ale nefungoval mi. Potřeboval jsem data v úkolech a některé další parametry, ale ve výchozím nastavení todo.txt takovou funkčnost neměl. Domnívám se, že Todolist se koncepčně blíží tomu, jak to dělají „velké“ todo společnosti jako Wunderlist, Todoist atd.