Come creare un semplice elenco di cose da fare con HTML, CSS e JS
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":
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:
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:
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: hoverBackground: #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:
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:
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:
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:
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 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:
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:
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.