Navigationsleiste Beispiel Todo Liste

[Nico.Milano]

Hallo an alle,

ich beschäftige mich aktuell mit HTML/CSS und JS und habe mich mal an einer kleinen einfachen Todo Liste gewagt.

Auf der linken Seite haben wir eine Navigation mit der Auswahl (als Beispiel Wichtig, Erledigt, Termine heute) und in der Mitte haben wir das Hauptfenster (anlegen von Aufgaben, löschen der Aufgaben etc.)

Ich würde jetzt hergehen und die Navigationspunkte als einzelne Seiten anlegen ich kann mir jedoch vorstellen dass es dazu eine Elegantere Lösung gibt?

Ich hoffe ich konnte soweit erklären was ich meine

 

[basti1012]

Hast du schon überlegt, wie du deine To-do-Liste speichern willst?
Zb im Browser ( localStorage ) , oder mit PHP auf den Server , bzw. in einer Datenbank?

Zeig doch mal dein Code oder Link zu der Liste , dann kann man mal sehen, was du schon hast und was du genau vor hast . deine Erklärung hat noch kleine Fragezeichen im Kopf hinterlassen

 

[Nico.Milano]

Hallo basti,

ich hatte mir überlegt die Liste in einer Datenbank (mongodb) zu speichern. Realisieren würde ich das ganze mit nodejs und express. Die Verbindung zur Datenbank funktioniert auch, ich kann auch Datensätze ablegen etc. Ging mir jetzt um das Design.


Ich hab noch nichts richtig gebaut aber ich hatte folgendes als ersten Gedanken:
Das ist jetzt nur schnell als Beispiel aufgeschrieben.

<!--Anfang der Navigationsleiste-->
<nav id="Appnavigation">
                <!-- Hier würde ich die Navigation als Liste anlegen -->
                <div class="seitenliste-links-inhalt">
                    <ul>
                        <li> <a href="/wichtig"> <div id="SymbolWichtig">  <span class="material-symbols-outlined"> priority_high </span> Wichtig markiert </div> </a></li>
                        <li> <a href="/heute"> <div id="SymbolHeute"> <span class="material-symbols-outlined"> home </span>  Todos Heute  </div> </a></li>
                        <li> <a href="/geplant"> <div id="SymbolGeplant"><span class="material-symbols-outlined"> event </span> Geplante Todos </div>  </a></li>
                        <li> <a href="/erledigt"> <div id="SymbolErledigt"> <span class="material-symbols-outlined"> done </span>   Erledigte Todos </div> </a></li>
                    </ul>
                </div>
            </div>  
        </nav>

<!-- Hier würde dann das Zentrale Fenster angelegt also wo man die Todos erstellt, löscht etc. -->
        <div class="app-fenster-center">
           
        </div>

Mir geht es da halt um die ganzen href Elemente. Mir fällt nur diese Möglichkeit ein das zu realisieren und mich würde interessieren ob es noch weitere evtl. bessere Möglichkeiten gibt.
Ich hatte mir die Quellcodes div. Anwendungen angeschaut (nicht speziell Todo listen sondern Allgemein).

Da hatte ich dann Spielchen gesehen wie z.B man klickt auf ein Symbol und dann fährt die Navigation raus, dann hat man auch erst im Sourcecode die jeweiligen <div etc, gesehen, war die Leiste ausgeblendet waren diese auch nicht vorhanden, dort hab ich jedoch kein <a href> EIntrag gefunden, deshalb kam mir die frage auf

 

[basti1012]

Ich weiß nicht, was du da genau machen willst. Wenn du deine ganzen To-dos sortieren willst in heute/morgen usw., kannst du auch Buttons nehmen.

Es wäre gut, zu sehen, wie das aussehen soll.
Unter to-do Liste verstehe ich das man z. B. einen Text speichert , wie einkaufen, dann das Datum und vielleicht noch was man einkaufen muss.
Also 3 Felder wie Betreff, Datum, Zusatz und ggf. eine Checkbox mit aktiv oder erledigt und ggf ein Nummernfeld wie wichtig die Aufgabe ist ( 1-5 oder so)
Das würde ich auf einer Seite bauen , wo du solche Sachen eintragen kannst .

Dann eine Seite wo du das alles anzeigen lassen kannst , mit Sortierfunktion (heute, morgen , erledigt, wichtig).
Das kannst du dir dann in einer Tabelle anzeigen lassen. Beim klick auf der Aufgabe geht eine Seite auf wo du den Inhalt sehen kannst und auch bearbeiten und löschen (wenn du der Ersteller der Aufgabe bist )