Come creare un semplice elenco di cose da fare con HTML, CSS e JS

Se stai facendo così tante cose in quel momento e non puoi gestire in modo appropriato le cose, allora è necessario organizzare o dare la priorità al compito quotidiano in base alla priorità del compito. A tale scopo, puoi fare un elenco di cose da fare delle tue attività che possono facilmente gestire l'attività. Inoltre, quando hai svolto l'attività, puoi rimuoverlo dall'elenco.

Questo post riguarda la creazione di un semplice elenco di cose da fare con Help HTML, CSS e JavaScript.

Come creare un semplice elenco di cose da fare con HTML, CSS e JavaScript?

Per creare un semplice elenco di cose da fare con HTML, CSS e JavaScript, prima, crea un semplice elenco nell'HTML con l'aiuto di "

"Tag. Quindi, accedi all'elenco in CSS e applica varie proprietà CSS per lo styling dell'elenco tra cui colore, margini e altri. Dopodiché, utilizza il ""Tag e aggiungi il codice JavaScript.

Per fare ciò, prova il codice indicato di seguito.

Parte HTML

Nella parte di HTML, seguire le istruzioni passo-passo riportate di seguito.

Passaggio 1: creare contenitore di div principale
Innanzitutto, crea un contenitore di div e specifica un "id"Con l'aiuto dell'attributo ID. Puoi anche utilizzare l'attributo della classe specificando un nome particolare.

Passaggio 2: inserire l'intestazione
Utilizzare il tag di intestazione per inserire un'intestazione all'interno della pagina HTML e incorporare il testo per l'intestazione.

Passaggio 3: crea il campo di input
Specificare l'input "tipo" COME "testo", Assegna un ID e utilizza l'attributo segnaposto per posizionare il testo nel campo di input.

Passaggio 4: aggiungi un pulsante
Usa il ""Elemento e aggiungi il"al clic"Evento per attivare la funzione quando l'utente fa clic su"Inserire"Pulsante.

Passaggio 5: fai un elenco
Ora, con l'aiuto del "

"Tag, creeremo un elenco non ordinato e aggiungeremo l'elemento dell'elenco usando"
• "Tag:
  
  
  

  Lista di cose da fare

  
  
  Inserire
  
  
  
  
  • JavaScript
  
  
  • Giava
  
  
  • HTML/CSS
  
  
  • Docker
  
  
  • Discordia
  
  
  • finestre
  
  
  • Powershell
  
  
  
  

  Di conseguenza, l'elenco è stato creato correttamente:
  

  Parte CSS

  Nella parte CSS, è possibile applicare lo stile accedendo all'elemento con l'aiuto dell'ID o della classe. Per fare ciò, seguire le istruzioni indicate di seguito.

  Passaggio 1: Stile "Main" Div
  Accedi al contenitore di div "principale" con l'aiuto del assegnato "id"Insieme al selettore come"#principale":

  #principale
  Margine: 20px 60px;
  imbottitura: 30px 40px;
  

  Dopo aver acceduto al contenitore DIV, applicare le proprietà CSS elencate di seguito:

  • "margine"Specifica lo spazio al di fuori dell'elemento definito.
  • "imbottitura"Determina lo spazio all'interno del confine definito.

  Passaggio 2: applicare lo stile nell'elenco
  Accedi all'elenco e applica le proprietà di seguito per lo styling dell'elenco:

  ul li
  Cursore: puntatore;
  Posizione: relativo;
  imbottitura: 12px 8px 12px 40px;
  Background: #f1cbcb;
  Font-size: 16px;
  Transizione: 0.3s;
  

  Qui:

  • "cursore"Determina il cursore del mouse essere visualizzato quando si punta su un elemento.
  • "posizione"È utilizzato per l'impostazione della posizione di un elemento. Per fare ciò, il valore della posizione è impostato come "relativo".
  • "sfondo"Specifica il colore sul retro dell'elemento.
  • "dimensione del font"La proprietà CSS determina le dimensioni del carattere.
  • "transizione"Permette di cambiare senza problemi i valori delle proprietà, per una determinata durata.

  Passaggio 3: imposta il colore per elementi di elenco
  Accedi agli elementi dispari dell'elenco e imposta il “sfondo" colore:

  ul li: nth-child (odd)
  Background: #cfeeeb;
  

  Accedi all'elenco insieme al "molare"Viene utilizzato quando il mouse utente sopra l'elemento. Quindi, imposta il colore di sfondo. Per fare ciò, il valore è impostato come "#ddd":

  ul li: hover
  Background: #ddd;
  

  Passaggio 4: elenchi di stile con classe "selezionata"
  Utilizzare il nome della classe con l'elemento elenco per accedere all'elemento in cui è specificato l'attributo di classe particolare:

  ul li.controllato
  Colore: #FFF;
  Background: #888;
  DECORAZIONE DEL TESTO: linea-through;
  

  Quindi, applica le proprietà sotto l'elenco:

  • "colore"La proprietà viene utilizzata per impostare il colore per il carattere.
  • "decorazione del testo"Determina lo styling per il testo per decorarlo. In questo caso, il valore è impostato come "linea-through"Per creare una riga dell'intero testo.

  Passaggio 5: Style Head Class
  Per modellare la classe principale, accedere alla classe e applicare "colore di sfondo","colore","imbottitura", E "allineamento"Proprietà CSS:

  .Testa
  Background-color: #685EF7;
  Colore: RGB (252, 186, 186);
  imbottitura: 30px 40px;
  Testo-align: centro;
  

  Di conseguenza, elenco ed elementi dell'elenco sono stati disegnati con successo:

  Parte JavaScript

  In questa parte, utilizzare il ""Tag e aggiungi il codice JavaScript tra i tag. Per fare ciò, segui i passaggi indicati di seguito:

  Passaggio 1: Ottieni elenco
  Utilizzare il "getElementsByTagName ()"Metodo per accedere all'elenco e archiviarlo in un oggetto:

  var nodelist = documento.getElementsByTagName ("Li");

  Dichiarare una variabile:

  var i;

  Passaggio 2: elemento aggiunto
  Usa il loop e definisci la lunghezza per iterare l'elemento. Quindi, aggiungi il seguente codice:

  • Crea nuovi elementi usando il "createElement ()"Metodo e memorizzali in una variabile.
  • Aggiungi testo per ogni elemento usando "createtextNode ()" metodo.
  • Aggiungi ogni elemento e memorizza l'elemento creato nell'elenco:
  per (i = 0; i < nodeList.length; i++)
  var span = documento.createElement ("span");
  var txt = documento.createtextNode ("\ u00d7");
  arco.className = "Close";
  arco.AppendChild (txt);
  nodelist [i].AppendChild (Span);
  

  Passaggio 3: nascondi l'elemento dell'elenco corrente
  Per nascondere l'elemento dell'elenco corrente, accedi alla classe con l'aiuto di "getElementsByClassName ()"Metodo e memorizzalo in una variabile:

  var chiust = document.getElementsByClassName ("Close");
  var i;

  Usa il ciclo "per" per iterare l'elemento e chiamare la funzione quando l'utente esegue un evento.

  per (i = 0; i < close.length; i++)
  Chiudi [i].onClick = function ()
  var div = questo.parentelement;
  div.stile.display = "Nessuno";
  
  

  Passaggio 4: Aggiungi simbolo controllato
  Seleziona l'elenco utilizzando il “QuerySelector ()"E inseriscilo in una variabile:

  var list = documento.QuerySelector ('UL');

  Invocare il "addEventListener ()Metodo "e usa il"Se"Dichiarazione per verificare la condizione. Aggiungere un "controllato"Simbolo quando si fa clic su un elemento dell'elenco, altrimenti restituire false:

  elenco.addEventListener ('click', function (ev)
  Se (ev.bersaglio.tagname === 'li')
  EV.bersaglio.classlist.intervenire ('controllato');
  
  , false);

  Passaggio 5: creare un nuovo articolo
  Per creare un nuovo elemento dell'elenco quando l'utente fa clic su "Inserire"Pulsante, utilizzare il seguente codice:

  • Innanzitutto, invoca la funzione "newelement ().
  • Crea un elemento con l'aiuto di "createElement ()"Metodo e memorizzalo in una variabile.
  • Accedi ai dati di input utilizzando l'ID e aggiungi il figlio.
  • Usa l'istruzione "if" e controlla la condizione. Se il campo di testo è vuoto, attiverà la notifica per aggiungere qualcosa nell'area di testo. Altrimenti, aggiungerà i dati all'elenco.
  • Utilizza il ciclo "per" iteratore e chiama la funzione per attivare l'evento:
  funzione newElement ()
  var li = documento.createElement ("li");
  var entrovaluter = documento.getElementById ("input_data").valore;
  var t = documento.createtextNode (entrevalue);
  li.AppendChild (T);
  if (entrervalue === ")
  avviso ("deve aggiungere qualcosa");
  
  altro
  documento.getElementById ("elenco").AppendChild (Li);
  
  documento.getElementById ("input_data").value = "";
  var span = documento.createElement ("span");
  var txt = documento.createtextNode ("\ u00d7");
  arco.className = "Close";
  arco.AppendChild (txt);
  li.AppendChild (Span);
  per (i = 0; i < close.length; i++)
  Chiudi [i].onClick = function ()
  var div = questo.parentelement;
  div.stile.display = "Nessuno";
  
  
  

  Produzione
  

  Come puoi vedere, possiamo aggiungere e rimuovere correttamente gli elementi nell'elenco delle cose da fare.

  Conclusione

  Per creare un semplice elenco di cose da fare, prima, crea un elenco in HTML usando "

  "Tag e aggiungi elementi con l'aiuto di"
  • ". Successivamente, accedi all'elenco in CSS e applica proprietà tra cui "sfondo","colore" e altri. Successivamente, aggiungi il codice JavaScript, che attiverà un evento quando l'utente aggiunge i dati nel campo di testo e fa clic sul pulsante creato. Questo tutorial ha dichiarato il metodo per creare un elenco di cose da fare utilizzando HTML, CSS e JavaScript.