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