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.