Comment créer une liste de tâches simples avec HTML, CSS et JS

Si vous faites tellement de choses à l'époque et que vous ne pouvez pas gérer de manière appropriée les choses, il est nécessaire d'organiser ou de hiérarchiser la tâche quotidienne en fonction de la priorité de la tâche. À cette fin, vous pouvez faire une liste de tâches de vos tâches qui peuvent facilement gérer la tâche. De plus, lorsque vous avez fait la tâche, vous pouvez le supprimer de la liste.

Ce message consiste à créer une simple liste de tâches avec l'aide HTML, CSS et JavaScript.

Comment créer une liste de tâches simples avec HTML, CSS et JavaScript?

Pour faire une liste de tâches simples avec HTML, CSS et JavaScript, faites d'abord une liste simple dans le HTML avec l'aide du «

" étiqueter. Ensuite, accédez à la liste dans CSS et appliquez diverses propriétés CSS pour styliser la liste, y compris la couleur, les marges et autres. Après cela, utilisez le «»Tag et ajoutez le code JavaScript.

Pour ce faire, essayez le code indiqué ci-dessous.

Partie HTML

Dans la partie HTML, suivez les instructions étape par étape ci-dessous.

Étape 1: Créer un conteneur principal Div
Tout d'abord, faites un conteneur div et spécifiez un «identifiant"Avec l'aide de l'attribut ID. Vous pouvez également utiliser l'attribut de classe en spécifiant un nom particulier.

Étape 2: insérer une tête
Utilisez la balise d'en-tête pour insérer une rubrique à l'intérieur de la page HTML et intégrer le texte pour le titre.

Étape 3: Faire le champ de saisie
Spécifiez l'entrée "taper" comme "texte», Affectez un ID et utilisez l'attribut d'espace réservé pour placer le texte au champ de saisie.

Étape 4: Ajouter un bouton
Utilisez le "”Element et ajoutez le"sur clic»Événement pour déclencher la fonction lorsque l'utilisateur clique sur le«Insérer" bouton.

Étape 5: Faire une liste
Maintenant, avec l'aide du «

”Tag, nous ferons une liste non ordonnée et ajouterons l'élément de la liste à l'aide du«
• " étiqueter:
  
  
  

  Liste de choses à faire

  
  
  Insérer
  
  
  
  
  • Javascrip
  
  
  • Java
  
  
  • HTML / CSS
  
  
  • Docker
  
  
  • Discorde
  
  
  • les fenêtres
  
  
  • Powershell
  
  
  
  

  En conséquence, la liste a été créée avec succès:
  

  Partie CSS

  Dans la partie CSS, vous pouvez appliquer le style en accédant à l'élément à l'aide de l'ID ou de la classe. Pour ce faire, suivez les instructions indiquées ci-dessous.

  Étape 1: Style «Main» Div
  Accédez au conteneur div «principal» à l'aide du affecté «identifiant«Avec le sélecteur comme«#principal»:

  #principal
  marge: 20px 60px;
  rembourrage: 30px 40px;
  

  Après avoir accédé au conteneur DIV, appliquez les propriétés CSS répertoriées ci-dessous:

  • "marge»Spécifie l'espace en dehors de l'élément défini.
  • "rembourrage»Détermine l'espace à l'intérieur de la limite définie.

  Étape 2: Appliquer le style sur la liste
  Accédez à la liste et appliquez les propriétés mentionnées ci-dessous pour styliser la liste:

  ul li
  curseur: pointeur;
  Position: relative;
  rembourrage: 12px 8px 12px 40px;
  Contexte: # F1CBCB;
  taille de police: 16px;
  transition: 0.3S;
  

  Ici:

  • "le curseur»Détermine que le curseur de la souris doit être affiché lorsqu'il pointe un élément.
  • "position”Est ​​utilisé pour définir la position d'un élément. Pour ce faire, la valeur de la position est définie comme «relative».
  • "arrière-plan»Spécifie la couleur à l'arrière de l'élément.
  • "taille de police»La propriété CSS détermine la taille de la police.
  • "transition»Permet de changer les valeurs des propriétés en douceur, sur une durée donnée.

  Étape 3: Définissez la couleur des éléments de liste
  Accédez aux éléments étranges de la liste et définissez le «arrière-plan" couleur:

  ul li: nth-child (Odd)
  Contexte: #cfeeeb;
  

  Accédez à la liste avec le «flotter"C'est utilisé lorsque l'utilisateur souris sur l'élément. Ensuite, définissez la couleur d'arrière-plan. Pour ce faire, la valeur est définie comme «#ddd»:

  ul li: Hover
  Contexte: #ddd;
  

  Étape 4: Éléments de liste de style avec classe «vérifiée»
  Utilisez le nom de classe avec l'élément de liste pour accéder à l'élément où l'attribut de classe particulier est spécifié:

  ul li.vérifié
  Couleur: #FFF;
  Contexte: # 888;
  Décoration du texte: ligne;
  

  Ensuite, appliquez les propriétés ci-dessous:

  • "couleur»La propriété est utilisée pour définir la couleur de la police.
  • "textaine-décoration»Détermine le style du texte pour le décorer. Dans ce cas, la valeur est définie comme «ligne à travers”Pour faire une ligne de l'ensemble du texte.

  Étape 5: Classe de tête de style
  Pour styliser la classe Head, accéder à la classe et postuler "Couleur de l'arrière plan","couleur","rembourrage", et "alignement de texte»Propriétés CSS:

  .diriger
  Color en arrière-plan: # 685EF7;
  Couleur: RVB (252, 186, 186);
  rembourrage: 30px 40px;
  Texte-aligne: Centre;
  

  En conséquence, la liste et les éléments de la liste ont été stylisés avec succès:

  Partie javascript

  Dans cette partie, utilisez le «”Tag et ajoutez le code javascript entre les balises. Pour ce faire, suivez les étapes mentionnées indiquées ci-dessous:

  Étape 1: obtenez la liste
  Utilisez le «getElementsByTagName ()«Méthode pour accéder à la liste et la stocker dans un objet:

  var nodelist = document.getElementsByTagName ("li");

  Déclarer une variable:

  var i;

  Étape 2: Élément annexe
  Utilisez la boucle pour et définissez la longueur pour itérer l'élément. Ensuite, ajoutez le code suivant:

  • Créez de nouveaux éléments en utilisant le «CreateElement ()«Méthode et les stocker dans une variable.
  • Ajoutez du texte pour chaque élément à l'aide du "CreateTextNode ()" méthode.
  • Ajoutez chaque élément et stockez l'élément créé dans la liste:
  pour (i = 0; i < nodeList.length; i++)
  var span = document.CreateElement ("Span");
  var txt = document.CreateTextNode ("\ u00d7");
  portée.className = "close";
  portée.APPENDCHILD (TXT);
  nodelist [i].APPEDCHILD (SPAN);
  

  Étape 3: Masquer l'élément de liste actuelle
  Pour masquer l'élément de liste actuel, accédez à la classe à l'aide de «getElementsByClassName ()”Méthode et le stocker dans une variable:

  var close = document.getElementsByClassName ("close");
  var i;

  Utilisez la boucle «pour» pour itérer l'élément et appeler la fonction lorsque l'utilisateur effectue un événement.

  pour (i = 0; i < close.length; i++)
  Fermer [i].onClick = function ()
  var div = ceci.parentement;
  div.style.affiche = "aucun";
  
  

  Étape 4: Ajouter un symbole vérifié
  Sélectionnez la liste à l'aide du "QuerySelector ()”Et insérez-le dans une variable:

  Var List = Document.queySelector ('ul');

  Invoque le «addEventListener ()«Méthode et utilisez le«si»Déclaration pour vérifier la condition. Ajouter un "vérifié”Symbole Lorsque vous cliquez sur un élément de liste, sinon renvoyez false:

  liste.addEventListener ('click', fonction (ev)
  si (ev.cible.tagname === 'li')
  EV.cible.liste de classe.toggle («vérifié»);
  
  , FAUX);

  Étape 5: Créez un nouvel élément
  Pour créer un nouvel élément de liste lorsque l'utilisateur clique sur le «Insérer”Bouton, utilisez le code suivant:

  • Tout d'abord, invoque la fonction "newelement ().
  • Créez un élément avec l'aide du «CreateElement ()»Méthode et le stocker dans une variable.
  • Accéder aux données d'entrée en utilisant l'ID et ajouter l'enfant.
  • Utilisez la déclaration «IF» et vérifiez la condition. Si le champ de texte est vide, il déclenchera la notification pour ajouter quelque chose dans la zone de texte. Sinon, cela ajoutera les données à la liste.
  • Utilisez la boucle d'itérateur «pour» et appelez la fonction pour déclencher l'événement:
  fonction newelement ()
  var li = document.CreateElement ("li");
  var entervalue = document.getElementById ("input_data").valeur;
  var t = document.CreateTextNode (Entervalue);
  li.appenchild (t);
  if (entervalue === ")
  alert ("doit ajouter quelque chose");
  
  autre
  document.getElementByid ("liste").appenchild (li);
  
  document.getElementById ("input_data").value = "";
  var span = document.CreateElement ("Span");
  var txt = document.CreateTextNode ("\ u00d7");
  portée.className = "close";
  portée.APPENDCHILD (TXT);
  li.APPEDCHILD (SPAN);
  pour (i = 0; i < close.length; i++)
  Fermer [i].onClick = function ()
  var div = ceci.parentement;
  div.style.affiche = "aucun";
  
  
  

  Sortir
  

  Comme vous pouvez le voir, nous pouvons ajouter et supprimer avec succès des éléments dans la liste de tâches créée.

  Conclusion

  Pour créer une liste de tâches simples, créez d'abord une liste en HTML en utilisant le «

  "Tag et ajouter des éléments à l'aide de"
  • ". Après cela, accédez à la liste dans CSS et appliquez des propriétés, notamment «arrière-plan","couleur" et d'autres. Après cela, ajoutez le code JavaScript, qui déclenchera un événement lorsque l'utilisateur ajoute les données dans le champ de texte et clique sur le bouton créé. Ce tutoriel a indiqué la méthode pour faire une liste de tâches en utilisant HTML, CSS et JavaScript.