So erstellen Sie eine einfache To-Do-Liste mit HTML, CSS und JS

Wenn Sie zu dieser Zeit so viele Dinge tun und die Dinge nicht angemessen verwalten können, ist es notwendig, die tägliche Aufgabe anhand der Priorität der Aufgabe zu organisieren oder zu priorisieren. Zu diesem Zweck können Sie eine To-Do-Liste Ihrer Aufgaben erstellen, die die Aufgabe problemlos verwalten können. Wenn Sie die Aufgabe erledigt haben, können Sie sie außerdem aus der Liste entfernen.

In diesem Beitrag geht es darum, eine einfache To-Do-Liste mit der Hilfe HTML, CSS und JavaScript zu erstellen.

So erstellen Sie eine einfache To-Do-Liste mit HTML, CSS und JavaScript?

Um eine einfache Aufgabenliste mit HTML, CSS und JavaScript zu erstellen, erstellen Sie zunächst eine einfache Liste in der HTML mit Hilfe des „

    " Schild. Greifen Sie dann in CSS auf die Liste zu und wenden Sie verschiedene CSS -Eigenschaften an, um die Liste zu stylen, einschließlich Farbe, Margen und anderen. Danach nutzen Sie die “Tag und fügen Sie den JavaScript -Code hinzu.

    Probieren Sie dazu den unten angegebenen Code aus.

    HTML -Teil

    Befolgen Sie im HTML-Teil die unten angegebenen Schritt-für-Schritt-Anweisungen.

    Schritt 1: Erstellen Sie den Haupt -Div -Container
    Erstellen Sie zunächst einen Div -Container und geben Sie eine an “AusweisMit Hilfe des ID -Attributs. Sie können das Klassenattribut auch verwenden, indem Sie einen bestimmten Namen angeben.

    Schritt 2: Überschrift einfügen
    Verwenden Sie das Überschriften -Tag, um eine Überschrift in die HTML -Seite einzufügen und den Text für die Überschrift einzubetten.

    Schritt 3: Eingabefeld erstellen
    Geben Sie die Eingabe an “Typ" als "Text”, Weisen Sie eine ID zu und verwenden Sie das Platzhalterattribut, um den Text im Eingabefeld zu platzieren.

    Schritt 4: Fügen Sie eine Schaltfläche hinzu
    Verwenden Sie die “Element und fügen Sie die "hinzu"ONCLICKEreignis, um die Funktion auszulösen, wenn der Benutzer auf die “klickt“Einfügung" Taste.

    Schritt 5: Erstellen Sie eine Liste
    Nun, mit Hilfe der “

      "Tag, wir erstellen eine ungeordnete Liste und fügen das Element der Liste mit der" hinzu "
    • " Schild:



      Aufgabenliste



      Einfügung


      • JavaScript

      • Java

      • HTML/CSS

      • Docker

      • Zwietracht

      • Fenster

      • Power Shell


      Infolgedessen wurde die Liste erfolgreich erstellt:

      CSS -Teil

      Im CSS -Teil können Sie das Styling anwenden, indem Sie mit Hilfe der ID oder Klasse auf das Element zugreifen. Befolgen Sie dazu die unten angegebenen Anweisungen.

      Schritt 1: Stil „Haupt“ Div
      Greifen Sie mit Hilfe des zugewiesenen “auf den" Haupt "-Div -Container zu"Ausweis"Zusammen mit dem Selektor als"#hauptsächlich”:

      #hauptsächlich
      Rand: 20px 60px;
      Polsterung: 30px 40px;

      Wenden Sie nach dem Zugriff auf den Div -Container die folgenden CSS -Eigenschaften an:

      • RandGibt den Raum außerhalb des definierten Elements an.
      • Polsterung”Bestimmt den Raum innerhalb der definierten Grenze.

      Schritt 2: Styling auf der Liste anwenden
      Greifen Sie auf die Liste zu und wenden Sie die folgenden Eigenschaften an, um die Liste zu stylen:

      ul li
      Cursor: Zeiger;
      Position: Relativ;
      Polsterung: 12px 8px 12px 40px;
      Hintergrund: #F1CBCB;
      Schriftgröße: 16px;
      Übergang: 0.3s;

      Hier:

      • Mauszeiger”Bestimmt, dass der Mauszeiger angezeigt wird, wenn er über ein Element zeigt.
      • Position”Wird verwendet, um die Position eines Elements festzulegen. Dazu wird der Wert der Position als „relativ“ eingestellt.
      • HintergrundGibt die Farbe an der Rückseite des Elements an.
      • Schriftgröße”CSS -Eigenschaft bestimmt die Größe der Schriftart.
      • Übergang”Ermöglicht die Änderung der Eigenschaftswerte reibungslos über eine bestimmte Dauer.

      Schritt 3: Farbe für Listenelemente festlegen
      Greifen Sie auf die ungeraden Elemente der Liste zu und setzen Sie die “Hintergrund" Farbe:

      Ul li: n-Kind (ungerade)
      Hintergrund: #cfeeeb;

      Greifen Sie zusammen mit der Liste auf die Liste zu “schwebenDas wird verwendet, wenn der Benutzer über das Element stand. Stellen Sie dann die Hintergrundfarbe ein. Dazu wird der Wert als "festgelegt" festgelegt "#ddd”:

      ul li: schwebe
      Hintergrund: #ddd;

      Schritt 4: Stillistenelemente mit "geprüften" Klasse
      Verwenden Sie den Klassennamen mit dem Listenelement, um auf das Element zuzugreifen, in dem das bestimmte Klassenattribut angegeben ist:

      ul li.überprüft
      Farbe: #fff;
      Hintergrund: #888;
      Textdekoration: Zeilenum;

      Wenden Sie dann die folgenden Eigenschaften an:

      • FarbeEigenschaft wird verwendet, um die Farbe für die Schriftart zu setzen.
      • TextdekorationBestimmt das Styling für den Text, um ihn zu dekorieren. In diesem Fall wird der Wert als "festgelegt" festgelegt "Zeile”Um eine Zeile des gesamten Textes zu erstellen.

      Schritt 5: Style Head Class
      Um die Hauptklasse zu stylen, greifen Sie auf die Klasse zu und wenden Sie sich an “Hintergrundfarbe","Farbe","Polsterung", Und "Textausrichtung”CSS -Eigenschaften:

      .Kopf
      Hintergrundfarbe: #685EF7;
      Farbe: RGB (252, 186, 186);
      Polsterung: 30px 40px;
      Text-Align: Mitte;

      Infolgedessen wurden die Liste und Elemente der Liste erfolgreich gestaltet:

      JavaScript -Teil

      Verwenden Sie in diesem Teil die “”Tag und fügen Sie den JavaScript -Code zwischen die Tags hinzu. Befolgen Sie dazu die unten angegebenen oben genannten Schritte:

      Schritt 1: Holen Sie die Liste
      Verwenden Sie die “GetElementsByTagName ()Methode, um auf die Liste zuzugreifen und sie in einem Objekt zu speichern:

      var nodelist = dokument.GetElementsByTagName ("li");

      Eine Variable deklarieren:

      var i;

      Schritt 2: Element anhängen
      Verwenden Sie die für die Schleife und definieren Sie die Länge, um das Element zu iterieren. Fügen Sie dann den folgenden Code hinzu:

      • Erstellen Sie neue Elemente mit dem “CreateLement ()Methode und speichern Sie sie in einer Variablen.
      • Fügen Sie den Text für jedes Element mit der "hinzu"CreateTextNode ()" Methode.
      • Gehen Sie jedes Element an und speichern Sie das erstellte Element in der Liste:
      für (i = 0; i < nodeList.length; i++)
      var span = dokument.CreateLement ("span");
      var txt = document.CreateTeXtNode ("\ u00d7");
      Spanne.className = "close";
      Spanne.appendChild (txt);
      nodelist [i].appendChild (span);

      Schritt 3: Das aktuelle Listenelement ausblenden
      Um das aktuelle Listenelement zu verbergen, greifen Sie mit Hilfe von auf die Klasse zu “, um auf die Klasse zu kommenGetElements byclassName ()Methode und speichern Sie es in einer Variablen:

      var close = document.GetElementsByClassName ("Close");
      var i;

      Verwenden Sie die Schleife "für", um das Element zu iterieren, und rufen Sie die Funktion auf, wenn der Benutzer ein Ereignis ausführt.

      für (i = 0; i < close.length; i++)
      schließen [i].onclick = function ()
      var div = this.Parantelung;
      div.Stil.display = "keine";

      Schritt 4: Überprüftes Symbol hinzufügen
      Wählen Sie die Liste mit der "aus" aus "QuerySelector ()”Und fügen Sie es in eine Variable ein:

      var list = document.QuerySelector ('ul');

      Aufrufen "AddEventListener ()Methode und verwenden Sie die “Wenn”Aussage, um die Bedingung zu überprüfen. Füge hinzu ein "überprüftSymbol beim Klicken auf ein Listenelement, andernfalls geben Sie false zurück:

      Liste.AddEventListener ('Click', Funktion (ev)
      if (ev.Ziel.tagname === 'li')
      ev.Ziel.Klasse.toggle ('checked');

      , FALSCH);

      Schritt 5: Neues Element erstellen
      So erstellen Sie ein neues Listenelement, wenn der Benutzer auf die “klickt“EinfügungSchaltfläche "Schaltfläche", verwenden Sie den folgenden Code:

      • Erstens auf die Funktion aufzurufen “NewElement ().
      • Erstellen Sie ein Element mit Hilfe des “CreateLement ()Methode und speichern Sie es in einer Variablen.
      • Greifen Sie mit der ID auf die Eingabedaten zu und appendieren Sie das Kind.
      • Verwenden Sie die Anweisung "if" und überprüfen Sie die Bedingung. Wenn das Textfeld leer ist, wird die Benachrichtigung ausgelöst, um etwas in den Textbereich hinzuzufügen. Andernfalls werden die Daten zur Liste hinzugefügt.
      • Verwenden Sie die Iteratorschleife "für" und rufen Sie die Funktion auf, um das Ereignis auszulösen:
      Funktion newElement ()
      var li = document.CreateLement ("li");
      var entervalue = dokument.getElementById ("input_data").Wert;
      var t = Dokument.CreateTextNode (Entervalue);
      li.appendChild (t);
      if (entervalue === ")
      alarm ("muss etwas hinzufügen");

      anders
      dokumentieren.GetElementById ("Liste").appendChild (li);

      dokumentieren.getElementById ("input_data").value = "";
      var span = dokument.CreateLement ("span");
      var txt = document.CreateTeXtNode ("\ u00d7");
      Spanne.className = "close";
      Spanne.appendChild (txt);
      li.appendChild (span);
      für (i = 0; i < close.length; i++)
      schließen [i].onclick = function ()
      var div = this.Parantelung;
      div.Stil.display = "keine";


      Ausgang

      Wie Sie sehen können, können wir Elemente in der erstellten To-Do-Liste erfolgreich hinzufügen und entfernen.

      Abschluss

      Um eine einfache Aufgabenliste zu erstellen, erstellen Sie zunächst eine Liste in HTML mit der “

        "Tag und fügen Sie Elemente mit Hilfe von" hinzu "
      • ”. Greifen Sie danach in CSS auf die Liste zu und wenden Sie Eigenschaften an, einschließlich “Hintergrund","Farbe" und andere. Fügen Sie danach den JavaScript -Code hinzu, der ein Ereignis auslöst, wenn der Benutzer die Daten im Textfeld hinzufügt und auf die Schaltfläche erstellt wird. In diesem Tutorial wurde die Methode zur Erstellung einer Aufgabenliste mithilfe von HTML, CSS und JavaScript angegeben.