NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!

Diskuze – Lekce 10 - Dokončení objektového diáře v JavaScriptu

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
x.listo
Tvůrce
Avatar
Odpovídá na Patrik Pastor
x.listo:15.4.2019 12:16

Dvě věci byly na čistícím tlačítku špatně. Alert nahradit confirm, aby byla návratová hodnota true nebo false pro rozhodnutí podmínky.

confirm("Opravdu si prejete vycistit Diar?")

Z localstorage se sice data odstranila, ale zůstávala ještě uložena v poli this.zaznamy. Takže řádek s this.ulozZaznamy() je zbytečný. Nahradil jsem jej vymazáním pole this.zaznamy = [];

// TATO METODA MA VYCISTIT CELY DIAR

        this.vycistitButton.onclick = () => {
        if (confirm("Opravdu si prejete vycistit Diar?")){
            window.localStorage.clear();
            this.zaznamy = [];
            this.vypisZaznamy();
            };
        };
Editováno 15.4.2019 12:19
 
Odpovědět
15.4.2019 12:16
Avatar
Lenka Mackova
Člen
Avatar
Lenka Mackova:18.10.2019 21:16

nefunguji tlacitka pro smazani, nekde je v tom kodu chyba. No jdu hledat nejaky jednoduchy reseni jak to zpravit aby mi to fungovalo.:-))

 
Odpovědět
18.10.2019 21:16
Avatar
Lenka Mackova
Člen
Avatar
Lenka Mackova:18.10.2019 21:45

this._pridejTla­citko("Smazat", () => {
if (confirm("Opravdu si přejete odstranit úkol?")) {
this.zaznamy = this.zaznamy.fil­ter(z => z !== zaznam); // Ponechá vše co není rovné proměnné zaznam

this.ulozZaznamy();
this.vypisZaz­namy();
}
delete zaznamy.regex;
});

Tak se mi povedlo ze aspon posledni polozka v seznamu ukolu se vymaze pomoci delete zaznamy.regex; ale ted premyslim jak to aplikovat na vsechny. Pokud nekdo vi muze mi poradit.

 
Odpovědět
18.10.2019 21:45
Avatar
Lenka Mackova
Člen
Avatar
Odpovídá na x.listo
Lenka Mackova:18.10.2019 22:12

no tak zaclo fungovat, problem mam s tim, ze se mi tlacitka radi vsechny dole vedle sebe, takze mam seznam ukolu a tlacitka na stridacku v jednom radku dole pod tim.

 
Odpovědět
18.10.2019 22:12
Avatar
Jakub Podskalský
Člen
Avatar
Jakub Podskalský:28.10.2019 18:58

Děkuji za skvělý program. :) Sice je ten kód v minulé a v této lekci pro funkčnost potřeba trochu přepsat, ale jinak z toho vznikne zajímavý výsledek. :P
Přidal jsem ještě tlačítko na smazání všech záznamů. V HTML ho vložil pod button potvrzení. Pak vytvořil v konstruktoru proměnnou a v metodě nastavUdalosti vložil tento kód:

this.smazatVseButton.onclick = () => {
            if (confirm("Opravdu si přeješ smazat všechy záznamy?")) {
                this.zaznamy = [];
                this.ulozZaznamy();
                this.vypisZaznamy();
            }
        };
 
Odpovědět
28.10.2019 18:58
Avatar
Pavel Blahuš
Člen
Avatar
Pavel Blahuš:11.2.2020 0:39

ahoj
stahnul jsem zaverecny diar.zip. po spusteni nefunguje, zobrazi se jen:
Diář
xx

xx
Potvrdit úkol (zadam, potvrdim ) ... a nic

kde je problém???
dik

 
Odpovědět
11.2.2020 0:39
Avatar
Filip Sáblík
Člen
Avatar
Filip Sáblík:24.2.2021 19:25

Je to pomerně nedotažené,

např:

this.vypisElement.innerHtml = `<div class="ukol">` + this.vypisElement.innerHtml  + `</div>`;

nemůže fungovat ne? Když je to Html namísto HTML......
Tlačítko akce smazání i změny stavu funguje pouze u posledního záznamu...

Editováno 24.2.2021 19:25
 
Odpovědět
24.2.2021 19:25
Avatar
Šimon Raichl
Tvůrce
Avatar
Odpovídá na Filip Sáblík
Šimon Raichl:17.11.2021 23:55

Ahoj, jak rikas, tenkrat mi myslim David docela zasadne poupravoval zdrojaky a vloudila se tam chybka. Nasledne jsem to i opravil, ale z ciste lenosti jsem to neupravil zde v clanku, tohle by melo tedy byt cele funkcni reseni:

class Diar {

    constructor(jazyk = "cs-CZ") {
        const zaznamyZeStorage = localStorage.getItem("zaznamy");
        this.zaznamy = zaznamyZeStorage ? JSON.parse(zaznamyZeStorage) : [];
        this.jazyk = jazyk;

        this.nazevInput = document.getElementById("nazev");
        this.datumInput = document.getElementById("datum");
        this.potvrditButton = document.getElementById("potvrdit");
        this.vypisElement = document.getElementById("seznam-ukolu");

        this._nastavUdalosti();
    }

    _nastavUdalosti() {
        this.potvrditButton.onclick = () => { // this zůstane nyní stále this
                                if (this.datumInput.value !== "") {
                                        const zaznam = new Zaznam(this.nazevInput.value, this.datumInput.value);
                                        this.zaznamy.push(zaznam);
                                        this.ulozZaznamy();
                                        this.vypisZaznamy();
                                } else
                                        alert("Musíte vyplnit datum!");
                                };
    }

        seradZaznamy() {
                this.zaznamy.sort(function (zaznam1, zaznam2) {
                        return (new Date(zaznam1.datum) - new Date(zaznam2.datum));
                });
        }

        vypisZaznamy() {
                this.seradZaznamy();
                this.vypisElement.innerHTML = "";
                let posledniDatum = null;
                for (const zaznam of this.zaznamy) {
                        const kartaZaznamu = document.createElement("div");

                        if (zaznam.datum !== posledniDatum) {
                                const datum = new Date(zaznam.datum).toLocaleDateString(this.jazyk, {
                                        weekday: "long",
                                        day: "numeric",
                                        month: "short",
                                        year: "numeric"
                                });
                                kartaZaznamu.innerHTML += `<h3>${datum}</h3>`
                        }
                        posledniDatum = zaznam.datum;

                        kartaZaznamu.innerHTML += `<h4>${zaznam.nazev}</h4><br>úkol ${!zaznam.splneno ? "ne" : ""}splněn`;

                        this.vypisElement.appendChild(kartaZaznamu);

                        this._pridejTlacitko("Smazat", () => {
                                if (confirm("Opravdu si přejete odstranit úkol?")) {
                                        this.zaznamy = this.zaznamy.filter(z => z !== zaznam); // Ponechá vše co není rovné proměnné zaznam
                                        this.ulozZaznamy();
                                        this.vypisZaznamy();
                                }
                        });

                        this._pridejTlacitko("Označit jako " + (zaznam.splneno ? "nesplněný" : "splněný"), () => {
                                zaznam.splneno = !zaznam.splneno;
                                this.ulozZaznamy();
                                this.vypisZaznamy();
                        });
                }
        }

        _pridejTlacitko(titulek, callback) {
                const button = document.createElement("button");
                button.onclick = callback;
                button.innerText = titulek;
                this.vypisElement.appendChild(button);
        }

        ulozZaznamy() {
                localStorage.setItem("zaznamy", JSON.stringify(this.zaznamy));
        }
}
 
Odpovědět
17.11.2021 23:55
Avatar
Martin Gaidos
Člen
Avatar
Martin Gaidos:2.6.2022 10:49

Přidal jsem tlačítko pro odstranění všech splněných úkolů.

this.smazatSplneneButton.onclick = () => {
    if (confirm("Opravdu si přejete odstranit všechny splněné úkoly?")) {
        this.zaznamy = this.zaznamy.filter(z => !z.splneno)
        console.log(this.zaznamy)
        this.ulozZaznamy()
        this.vypisZaznamy()
    }

}
 
Odpovědět
2.6.2022 10:49
Avatar
Jaroslav Drobek
Člen
Avatar
Jaroslav Drobek:22.6.2022 6:49

Hodnocení:

  • Komentář pod upraveným kódem metody _nastavUdalosti je nevýstižný.
 
Odpovědět
22.6.2022 6:49
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 29.