¿Cómo crear una aplicación ToDo usando HTML, CSS, JS y Bootstrap?

Crearemos una aplicación de tareas básicas para comprender los conceptos básicos de JavaScript. En esta aplicación web, se puede crear una lista de tareas y eliminar elementos específicos de la lista.
Características o Funcionalidades a implementar:  

  • Diseño interactivo y responsivo
  • Sistema de cuadrícula sensible
  • Almacenar y eliminar elementos

Requisitos previos: conocimiento básico de HTML , CSS , JavaScript , jQuery y Bootstrap . Además, el usuario debe conocer cómo funciona el sistema de cuadrícula en Bootstrap .
Configuración: Cree tres archivos para HTML, CSS y JavaScript. Para crear estos archivos, ejecute el siguiente comando: 
 

  • Sintaxis: 
$ touch index.html index.css index.js
  •  

  • Paso 1: Ahora edite el archivo  index.html .
     

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
 
<head>
    <meta charset="utf-8">
    <title>todo</title>
    <link rel="stylesheet" href="style.css">
   
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
 
<body>
    <div class="container">
        <h1 class="row">
             
          TODO APP
             
        </h1>
        <br/><br/>
        <div class="row">
            <form class="form-inline col-sm-offset-3">
                <div class="input-group">
                    <span class="input-group-addon">
                      <i class="glyphicon glyphicon-pencil"></i>
                    </span>
                    <input type="text" class="form-control"
                           placeholder="todo-item"
                           id="box" style="width: 30vw" />
                </div>
                <div class="form-group">
                    <input type="button"
                           class="btn btn-primary form-control"
                           value="add" style="width: 10vw"
                           onclick="add_item()" />
                </div>
            </form>
        </div>
        <div class="row">
            <ul id="list_item">
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="main.js"></script>
</body>
 
</html>
  • Paso 2: ahora, agregue alguna propiedad CSS al archivo index.css
     

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: cursive;
  }
   
  body {
    background: #f2f2f2;
    overflow: auto;
  }
   
  h1{
     text-align: center;
     margin: 5%;
     font-size: 3rem;
     text-decoration: underline;
  }
   
  ul {
    text-align: left;
    padding-left: 10%;
    padding: 7%;
    font-size: 2rem;
    list-style: circle;
  }
   
  li:hover{
    color:red;
    margin: 4%;
    transition: 1.5s ease;
    cursor: pointer;
  }
  
  • Paso 3: edite el archivo  index.js y agregue alguna funcionalidad.
     

javascript

// Function called while clicking add button
function add_item() {
 
  // Getting box and ul by selecting id;
  let item = document.getElementById("box");
  let list_item = document.getElementById("list_item");
  if(item.value != ""){
 
      // Creating element and adding value to it
      let make_li = document.createElement("LI");
      make_li.appendChild(document.createTextNode(item.value));
 
      // Adding li to ul
      list_item.appendChild(make_li);
 
      // Reset the value of box
      item.value=""
       
      // Delete a li item on click
      make_li.onclick = function(){
        this.parentNode.removeChild(this);
      }
 
  }
  else{
 
    // Alert msg when value of box is "" empty.
    alert("plz add a value to item");
  }
 
}
  • Producción:

Publicación traducida automáticamente

Artículo escrito por itsvinayak y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *