Diskusia – 8. diel - Dokončenie objektového diáre v JavaScripte

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Posledné komentáre sú na spodnej časti poslednej stránky.

x.listo

Tvůrce

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();
            };
        };

Editované

Odpovedať

Lenka Mackova

Člen

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.:-))

Odpovedať

Lenka Mackova

Člen

Lenka Mackova:18.10.2019 21:45

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();
}
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.

Odpovedať

Lenka Mackova

Člen

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.

Odpovedať

Jakub Podskalský

Člen

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ř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();
            }
        };

Odpovedať

Pavel Blahuš

Člen

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

Odpovedať

Filip Sáblík

Člen

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...

Editované

Odpovedať

Šimon Raichl

Tvůrce

Š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));
        }
}

Odpovedať

Martin Gaidos

Člen

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()
    }

}

Odpovedať

Jaroslav Drobek

Člen

Jaroslav Drobek:22.6.2022 6:49

Hodnocení:

Komentář pod upraveným kódem metody _nastavUdalosti je nevýstižný.

Odpovedať

Posledné komentáre sú na spodnej časti poslednej stránky.

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 31.

Najčastejšie vyhľadávané

Diskusia – 8. diel - Dokončenie objektového diáre v JavaScripte