Hvordan lage en enkel oppgaveliste med HTML, CSS og JS

Hvis du gjør så mange ting den gangen og du ikke kan administrere tingene på riktig måte, er det nødvendig å organisere eller prioritere den daglige oppgaven basert på oppgavens prioritet. For det formålet kan du lage en oppgaveliste over oppgavene dine som enkelt kan administrere oppgaven. Videre, når du har gjort oppgaven, kan du fjerne den fra listen.

Dette innlegget handler om å lage en enkel oppgaveliste med Hjelp HTML, CSS og JavaScript.

Hvordan lage en enkel oppgaveliste med HTML, CSS og JavaScript?

For å lage en enkel oppgaveliste med HTML, CSS og JavaScript, lager du først en enkel liste i HTML ved hjelp av "

" stikkord. Få tilgang til listen i CSS og bruk forskjellige CSS -egenskaper for å style listen inkludert farge, marginer og annet. Etter det, bruk "”Merk og legg til JavaScript -koden.

For å gjøre det, prøv koden som er angitt nedenfor.

Html del

I HTML-delen, følg trinn-for-trinn-instruksjonene gitt nedenfor.

Trinn 1: Lag Main Div Container
Først må du lage en DIV -beholder og spesifisere en "id”Ved hjelp av ID -attributtet. Du kan også bruke klasseattributtet ved å spesifisere et bestemt navn.

Trinn 2: Sett inn overskrift
Bruk overskriften for å sette inn en overskrift inne i HTML -siden og legge inn teksten for overskriften.

Trinn 3: Lag inngangsfelt
Spesifiser inngangen “type" som "tekst”, Tildel en ID, og ​​bruk plassholderattributtet til å plassere teksten ved inngangsfeltet.

Trinn 4: Legg til en knapp
Bruke "”Element og legg til“ved trykk”Hendelse for å utløse funksjonen når brukeren klikker på“Sett inn”-Knappen.

Trinn 5: Lag en liste
Nå, ved hjelp av “

”Tag, vi lager en uordnet liste og legger til elementet på listen ved å bruke“
• " stikkord:
  
  
  

  Gjøremålsliste

  
  
  Sett inn
  
  
  
  
  • JavaScript
  
  
  • Java
  
  
  • HTML/CSS
  
  
  • Docker
  
  
  • Uenighet
  
  
  • Vinduer
  
  
  • Kraftskall
  
  
  
  

  Som et resultat er listen blitt opprettet med suksess:
  

  CSS -del

  I CSS -delen kan du bruke styling ved å få tilgang til elementet ved hjelp av ID eller klasse. For å gjøre det, følg instruksjonene som er nevnt nedenfor.

  Trinn 1: Stil “Main” Div
  Få tilgang til “Main” Div Container ved hjelp av den tildelte “id”Sammen med velgeren som“#hoved”:

  #hoved
  Margin: 20px 60px;
  polstring: 30px 40px;
  

  Etter tilgang til DIV -beholderen, bruk de nedenfor listede CSS -egenskapene:

  • “margin”Angir plassen utenfor det definerte elementet.
  • “polstring”Bestemmer rommet inne i den definerte grensen.

  Trinn 2: Bruk styling på listen
  Få tilgang til listen og bruk de under-nevnte egenskapene for å style listen:

  ul li
  Markør: peker;
  Posisjon: relativ;
  polstring: 12px 8px 12px 40px;
  Bakgrunn: #F1CBCB;
  Font-størrelse: 16px;
  Overgang: 0.3s;
  

  Her:

  • “markør”Bestemmer musemarkøren vises når du peker over et element.
  • “posisjon”Brukes for å sette plassering av et element. For å gjøre det settes verdien av stillingen som "relativ".
  • “bakgrunn”Angir fargen på baksiden av elementet.
  • “skriftstørrelse”CSS -egenskap bestemmer størrelsen på skriften.
  • “overgang”Tillat å endre eiendomsverdier jevnt, over en gitt varighet.

  Trinn 3: Sett farge for listeelementer
  Få tilgang til de rare elementene på listen og angi “bakgrunn”Farge:

  ul li: nth-child (odd)
  Bakgrunn: #CFEEEB;
  

  Få tilgang til listen sammen med "sveve”Som brukes når brukeren mus over elementet. Sett deretter bakgrunnsfargen. For å gjøre det er verdien satt som "#DDD”:

  ul li: hover
  Bakgrunn: #DDD;
  

  Trinn 4: Stillisteelementer med "Sjekket" klasse
  Bruk klassenavnet med listeelementet for å få tilgang til elementet der den aktuelle klasseattributtet er spesifisert:

  ul li.krysset av
  Farge: #FFF;
  Bakgrunn: #888;
  Tekstdekorasjon: Linje-gjennom;
  

  Bruk deretter de nedenfor-børsnoterte egenskapene:

  • “farge”Eiendom brukes til å stille inn fargen for skriften.
  • “tekstdekorasjon”Bestemmer stylingen for teksten å dekorere den. I dette tilfellet settes verdien som "gjennomføring”For å lage en linje med hele teksten.

  Trinn 5: Stilhodeklasse
  For å style hodeklassen, få tilgang til klassen og bruke “bakgrunnsfarge”,“farge”,“polstring”, Og“Tekstalign”CSS -egenskaper:

  .hode
  Bakgrunnsfarge: #685EF7;
  Farge: RGB (252, 186, 186);
  polstring: 30px 40px;
  tekst-align: sentrum;
  

  Som et resultat er liste og elementer på listen blitt stylet vellykket:

  JavaScript -del

  I denne delen, bruk "”Merk og legg til JavaScript -koden mellom taggene. For å gjøre det, følg de nevnte trinnene som er angitt nedenfor:

  Trinn 1: Få liste
  Bruk “getElementsByTagName ()”Metode for å få tilgang til listen og lagre den i et objekt:

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

  Erklære en variabel:

  var jeg;

  Trinn 2: vedleggselement
  Bruk for -loopen og definer lengden for å iterere elementet. Legg deretter til følgende kode:

  • Lag nye elementer ved hjelp av “CreateElement ()”Metode og lagre dem i en variabel.
  • Legg til tekst for hvert element ved hjelp av “CreateTextNode ()”Metode.
  • Legg til hvert element og lagre det opprettede elementet på listen:
  for (i = 0; i < nodeList.length; i++)
  var span = dokument.CreateElement ("Span");
  var txt = dokument.createTextNode ("\ u00d7");
  spenn.className = "Close";
  spenn.AppendChild (txt);
  Nodelist [i].vedleggsbarn (spenn);
  

  Trinn 3: Skjul gjeldende listeelement
  For å skjule gjeldende listeelement, får du tilgang til klassen ved hjelp av "getElementsByClassName ()”Metode og lagre den i en variabel:

  var lukk = dokument.getElementsByClassName ("Close");
  var jeg;

  Bruk "for" -løkken for å iterere elementet og ringe funksjonen når brukeren utfører en hendelse.

  for (i = 0; i < close.length; i++)
  Lukk [i].onClick = funksjon ()
  var div = dette.parentelement;
  div.stil.display = "ingen";
  
  

  Trinn 4: Legg til sjekket symbol
  Velg listen ved hjelp av “QuerySelector ()”Og sett den inn i en variabel:

  var liste = dokument.QuerySelector ('UL');

  Påkalle “AddEventListener ()”Metode og bruk“hvis”Uttalelse for å sjekke tilstanden. Legg til en "krysset av”Symbol når du klikker på et listeelement, ellers returner FALSE:

  liste.AddEventListener ('klikk', funksjon (ev)
  hvis (ev.mål.tagname === 'li')
  EV.mål.Klasseliste.veksle ('sjekket');
  
  , falsk);

  Trinn 5: Opprett nytt element
  For å opprette et nytt listeelement når brukeren klikker på “Sett inn”-Knappen, bruk følgende kode:

  • Først må du påkalle funksjonen "NewElement ().
  • Lag et element ved hjelp av “CreateElement ()”Metode og lagre den i en variabel.
  • Få tilgang til inndataene ved å bruke ID og legge til barn.
  • Bruk "if" -uttalelsen og sjekkbetingelsen. Hvis tekstfeltet er tomt, vil det utløse varselet til å legge til noe i tekstområdet. Ellers vil den legge til dataene på listen.
  • Bruk "for" iteratorløkken og ring funksjonen for å utløse hendelsen:
  funksjon newElement ()
  var li = dokument.CreateElement ("Li");
  var Entervalue = Dokument.getElementById ("input_data").verdi;
  var t = dokument.CreateTextNode (Entervalue);
  li.AppendChild (t);
  if (Entervalue === ")
  Varsel ("Må legge til noe");
  
  annet
  dokument.getElementById ("Liste").vedlegg (li);
  
  dokument.getElementById ("input_data").verdi = "";
  var span = dokument.CreateElement ("Span");
  var txt = dokument.createTextNode ("\ u00d7");
  spenn.className = "Close";
  spenn.AppendChild (txt);
  li.vedleggsbarn (spenn);
  for (i = 0; i < close.length; i++)
  Lukk [i].onClick = funksjon ()
  var div = dette.parentelement;
  div.stil.display = "ingen";
  
  
  

  Produksjon
  

  Som du kan se, kan vi legge til og fjerne elementer i den opprettede oppgavelisten.

  Konklusjon

  For å lage en enkel oppgaveliste, oppretter du først en liste i HTML ved hjelp av "

  ”Merk og legg til elementer ved hjelp av“
  • ”. Etter det får du tilgang til listen i CSS og bruk egenskaper inkludert "bakgrunn”,“farge" og andre. Etter det, legg til JavaScript -koden, som vil utløse en hendelse når brukeren legger til dataene i tekstfeltet og klikker på den opprettede knappen. Denne opplæringen har uttalt metoden for å lage en oppgaveliste ved å bruke HTML, CSS og JavaScript.