{"id":268,"date":"2020-11-03T12:06:08","date_gmt":"2020-11-03T11:06:08","guid":{"rendered":"https:\/\/mtymejczyk.wordpress.com\/?p=268"},"modified":"2024-02-15T15:17:00","modified_gmt":"2024-02-15T15:17:00","slug":"todolist","status":"publish","type":"post","link":"https:\/\/tymejczyk.net\/index.php\/2020\/11\/03\/todolist\/","title":{"rendered":"TodoList"},"content":{"rendered":"\n<p><strong>W<\/strong> szkole na laboratoriach z przedmiotu <em>&#8217;Aplikacje internetowe 1&#8242;<\/em> dosta\u0142em zadanie zrobienia prostej TodoList jako nauka javascript i DOM.<br>Lista mia\u0142a obs\u0142ugiwa\u0107: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dodawanie zada\u0144,<\/li>\n\n\n\n<li>Usuwanie zada\u0144,<\/li>\n\n\n\n<li>Oznaczanie zada\u0144 jako uko\u0144czone,<\/li>\n\n\n\n<li>Wyszukiwanie zadania po podanej frazie,<\/li>\n\n\n\n<li>Obs\u0142uga localStorage.<br><\/li>\n<\/ul>\n\n\n\n<p>Na samym poczatku zbudowa\u0142em layout strony w HTML:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"581\" height=\"272\" src=\"https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/image-3.png?w=581\" alt=\"\" class=\"wp-image-281\" srcset=\"https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/image-3.png 581w, https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/image-3-300x140.png 300w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><figcaption class=\"wp-element-caption\">Widok strony<\/figcaption><\/figure>\n\n\n\n<script src=\"https:\/\/gist.github.com\/MichaelStett\/59c0de03ad6f226f1f8dc7920d91253b.js\"><\/script>\n\n\n\n<p>Do stylowania u\u017cy\u0142em <em>Bootstrap 4.1.3<\/em>, a dla ikonek plusa oraz \u015bmietnika <em>Font Awesome<\/em>.<\/p>\n\n\n\n<p>Na poczatek stworzy\u0142em sobie klase <em>Todo <\/em>oraz tablice <em>todos<\/em> kt\u00f3ra b\u0119dzie przechowywa\u0107 zadania. Odrazu doda\u0142em te\u017c obs\u0142uge localStorage \u017ceby nie bawic si\u0119 z tym p\u00f3\u017aniej a juz m\u00f3c u\u017cywa\u0107 \ud83d\ude42 <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/MichaelStett\/18972b29ce1e651e4a13a63b008aa0ac.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"535\" height=\"138\" src=\"https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/image-4.png?w=535\" alt=\"\" class=\"wp-image-285\" srcset=\"https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/image-4.png 535w, https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/image-4-300x77.png 300w\" sizes=\"auto, (max-width: 535px) 100vw, 535px\" \/><figcaption class=\"wp-element-caption\">Wydruk konsoli<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"217\" src=\"https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/image-2.png?w=569\" alt=\"\" class=\"wp-image-279\" srcset=\"https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/image-2.png 569w, https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/image-2-300x114.png 300w\" sizes=\"auto, (max-width: 569px) 100vw, 569px\" \/><figcaption class=\"wp-element-caption\">Widok strony<\/figcaption><\/figure>\n\n\n\n<p>Nie znalaz\u0142em jakiego\u015b \u0142adniejszego rozwi\u0105zania na dodawanie element\u00f3w do strony, dlatego zastosowa\u0142em wielki blok html do kt\u00f3rego podaje warto\u015bci poszcze\u00f3lnych element\u00f3w. <br>Ka\u017cdy element ma id bazuj\u0105ce na czasie stworzenia zadania jest to moim zdaniem wystarczaj\u0105co unikalne. Ten id jest u\u017cywany jako atrybut id dla danego elementu listy aby w pszysz\u0142o\u015bci \u0142atwiej mozna by\u0142o znale\u017a\u0107 o jaki element nam chodzi w trakcie np. usuwania.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/MichaelStett\/7947f9c61aea5b82fc03a6283313d5fd.js\"><\/script>\n\n\n\n<p>Dla przycisk\u00f3w usuwania oraz oznaczania zadania jako uko\u0144czone u\u017cy\u0142em jednego <em>addEventListener<\/em> jest to dobra praktyka je\u017celi mamy na stronie wiele element\u00f3w tego samego rodszaju i obs\u0142uguj\u0105cych t\u0119 sam\u0105 funkcje.<br>Dzi\u0119ki temu przy np. 100 zadaniach w li\u015bcie mamy tylko <strong>jedno <\/strong>nas\u0142uchiwanie na ca\u0142\u0105 liste zamiast 2 nas\u0142uchiwa\u0144 dla ka\u017cdego elementu listy czyli w tym przypadku by\u0142oby ich w sumie <strong>200!!!<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"573\" height=\"390\" src=\"https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/todos2.gif?w=573\" alt=\"\" class=\"wp-image-289\" style=\"width:573px;height:390px\"\/><figcaption class=\"wp-element-caption\">Test dodawania i usuwania element\u00f3w<\/figcaption><\/figure>\n\n\n\n<p>Kolejn\u0105 rzecz\u0105 z listy jest wyszukiwanie: <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/MichaelStett\/e9666ec1c8dfab3f1f96c68e0d01c0ad.js\"><\/script>\n\n\n\n<p>Zastosowa\u0142em metody <em>toLowerCase()<\/em> aby dla przypadku gdy kto\u015b szuka np. <em>&#8217;Test&#8217; <\/em>znalaz\u0142 te\u017c wszystkie zadania niezale\u017cnie od wielko\u015bci liter wi\u0119c np. <em>&#8217;tEsT&#8217; <\/em>czy <em>&#8217;test&#8217;.<\/em><br>W za\u0142o\u017ceniach by\u0142o tak\u017ce wymaganie \u017ce lista ma si\u0119 od\u015bwie\u017ca\u0107 przy wyszukiwani je\u015bli podana fraza jest d\u0142u\u017csza 2 znaki.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"573\" height=\"390\" src=\"https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/todos.gif?w=573\" alt=\"\" class=\"wp-image-288\"\/><figcaption class=\"wp-element-caption\">Test wyszukiwarki<\/figcaption><\/figure>\n\n\n\n<p>Ostatni\u0105 i najtrudniejsza dla mnie do zaimplementowania rzecz\u0105 by\u0142a edycja zada\u0144.<br>Dla uproszczenia pozwoli\u0142em na edycje jedynie pola tekstowego.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/MichaelStett\/f3cf0de26768a120c2eb2e23331ef0ad.js\"><\/script>\n\n\n\n<p>Pozwalam na edycje jednoczesnie tylko i wy\u0142acznie jednego wpisu. Po klikni\u0119ciu poza oknem do wprowadzanai zmian, zawarto\u015b\u0107 listy jest aktualizowana. <br>Po wszystkim resetuje pomocnicze zmienne.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1046\" height=\"423\" src=\"https:\/\/tymejczyk.net\/wp-content\/uploads\/2020\/11\/todos3.gif?w=1024\" alt=\"\" class=\"wp-image-294\"\/><figcaption class=\"wp-element-caption\">Test edytora<\/figcaption><\/figure>\n\n\n\n<p>W taki w\u0142a\u015bnie spos\u00f3b stworzy\u0142em swoj\u0105 liste na zaliczenie jednego z laboratori\u00f3w.<br>Mam nadzieje, \u017ce co\u015b ciekawego wynios\u0142e\u015b z tego materia\u0142u!<\/p>\n\n\n\n<p>Dzi\u0119kuj\u0119 za Twoj\u0105 uwag\u0119\u00a0\ud83d\ude04<\/p>\n","protected":false},"excerpt":{"rendered":"<p>W szkole na laboratoriach z przedmiotu &#8217;Aplikacje internetowe 1&#8242; dosta\u0142em zadanie zrobienia prostej TodoList jako nauka javascript i DOM.Lista mia\u0142a obs\u0142ugiwa\u0107: Na samym poczatku zbudowa\u0142em layout strony w HTML: Do stylowania u\u017cy\u0142em Bootstrap 4.1.3, a dla ikonek plusa oraz \u015bmietnika Font Awesome. Na poczatek stworzy\u0142em sobie klase Todo oraz tablice todos kt\u00f3ra b\u0119dzie przechowywa\u0107 zadania. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":272,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-268","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/posts\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/comments?post=268"}],"version-history":[{"count":2,"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/posts\/268\/revisions"}],"predecessor-version":[{"id":366,"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/posts\/268\/revisions\/366"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/media\/272"}],"wp:attachment":[{"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/media?parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/categories?post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tymejczyk.net\/index.php\/wp-json\/wp\/v2\/tags?post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}