Aplicación Web: Una lista de tareas pendientes usando JavaScript

Aquí, vamos a crear una aplicación web para administrar una lista de tareas pendientes usando HTML y JavaScript .

Este artículo trata sobre todo el aspecto de JavaScript en esta aplicación web. Utilizamos HTML, CSS (opcional) y JavaScript.

Nuestra idea básica class esta aplicación web es crear y borrar nuestra tarea / trabajo según nuestra elección . Vamos a utilizar HTML para estructurarlo y CSS (de nuevo es totalmente opcional) y javascript para proporcionar una funcionalidad como la adición o eliminación de las tareas de la lista. Hemos creado 3 archivos: index.html , style.css , todo.js

Empecemos con index.html:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>IncludeHelp is Awesome</title>
</head>
<body>
<div id="container">
<div class="controls">
<h1>My Awesome To-do</h1>
<input type="text" name="" id="input"><br>
<button type="button" id="add">Add Task</button>
<button type="button" id="remove">Remove Task</button>
</div>
<ul id="list">
<li class="mycheck"><input type="checkbox" id="check"><label >
Go to Gym</label></li>
<li class="mycheck"><input type="checkbox" id="check"><label >
Read Articles on IncludeHelp</label></li>
<li class="mycheck"><input type="checkbox" id="check"><label >
Learn JavaScript</label></li>
</ul>
</div>
<script src="todo.js"></script>
</body>
</html>

Explicación:

hemos creado este código HTML documento, con el título “IncludeHelp es impresionante” que se mostrará en nuestra cuenta. Ahora vamos al cuerpo del HTML, hemos creado una división de contenedores (id) que tiene dos hijos a la otra división que tiene la entrada textBox , añadir y botones remove andofcourse, nuestras aplicaciones Nombre “Mi impresionante todo” y segundo hijo del recipiente es & lt; ul & gt; que es lista desordenada. Dentro lista desordenada, que predefinida tres tareas como “Ir al gimnasio” , “Leer un artículo sobre IncludeHelp” y “Aprender JavaScript” .

En cada lista bajo lista desordenada, tenemos una casilla de verificación tipo de entrada y una etiqueta. Y en la última línea, que vinculó nuestro archivo JavaScript con el documento HTML.

Ahora vamos a ver parte CSS, [nuevo chicos … esto es totalmente opcional y se puede prescindir de él también]:

style.css:

Lo que hicimos en esta hoja de estilo que se nos propusimos atributos for vuelo estacionario y el foco en los botones y huelga, aunque el texto de la etiqueta de cheques abierta ellas y descansar se puede ver.

body{
background-color: #34495e
}
#container {
width: 350px;
height: auto;
margin: 0 auto;
text-align: center;
background: white;
height: 800px;
overflow: auto;
color: black;
border: 10px solid #01a3a4;
border-radius: 10px;
}
#container h1 {
margin-top: 50px;
margin-bottom: 50px;
text-transform: uppercase;
}
#container ul{
margin-top: 50px;
padding-left: 0;
}
#container ul li{
list-style: none;
border: 2px solid #b5c5dd;
width: 80%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
height: 40px;
margin: 5px auto;
text-align: left;
}
#container ul li label{
margin: 0 auto;
vertical-align: middle;
height: 100%;
line-height: 40px;
font-size: 18px;
}
#container ul li #check{
float: left;
width: 30px;
height: 30px;
margin: 5px;
-webkit-appearance: none;
border: 2px solid #b5c5dd;
position: relative;
outline: 0;
}
#container ul li #check:checked::after {
content: '14';
font-size: 20px;
position: absolute;
top: 0px;
left: 7px;
color: black;
}
#container ul li input[type='checkbox']:checked+label{
text-decoration: line-through;
color: rgba(0, 0, 0, 0.3);
}
#container .controls {
width: 60%;
margin: auto;
}
#container .controls #input{
width: 100%;
height: 30px;
font-size: 20px;
padding-left: 5px;
box-sizing: border-box;
margin-bottom: 20px;
border: 2px solid #b5c5dd;
border-radius: 10px;
}
#container .controls #input:focus {
outline: 0;
}
#container .controls button{
width: 100%;
background: white;
border: none;
height: 30px;
margin-top: 2px;
cursor: pointer;
color: white;
}
#container .controls button:focus{
outline: 0;
}
#container .controls button:hover{
transform: scale(1.05);
}
#container .controls #add{
background-color: #2980b9;
border-radius: 10px;
}
#container .controls #remove {
background-color: #c0392b;
border-radius: 10px;
}
#container .mycheck {
opacity: 1;
border-radius: 10px;
}
.visual {
opacity: 1 !important;
border-radius: 10px;
}

Ahora vamos a cubrir la parte JavaScript.

todo.js:

var ul = document.getElementById('list')    //line 1
var li;
var addButton = document.getElementById('add') //line 2
addButton.addEventListener("click",addItem)
function addItem(){ //line 3
var input = document.getElementById('input') //line 4
var item = input.value; //line 5
var textNode = document.createTextNode(item) //line 6
if (item == '') { //line 7
msg= "Enter your Task"
alert(msg)
return false
} else { //line 8
li = document.createElement('li') //line 9
let checkbox = document.createElement('input') //line 10
checkbox.type = 'checkbox' //line 11
checkbox.setAttribute('id','check') //line 12
let label = document.createElement('label') //line 13
ul.appendChild(label) //line 14
li.appendChild(checkbox)
label.appendChild(textNode)
li.appendChild(label)
ul.insertBefore(li, ul.childNodes[0])
setTimeout(()=>{
li.className = 'visual'
},5)
input.value = " " //line 15
}
}
var removeButton = document.getElementById('remove') //line 16
removeButton.addEventListener("click",removeItem) //line 17
function removeItem(){ //line 18
li=ul.children
for (let index = 0; index < li.length; index++) { //line 19
const element = li[index]; //line 20
while(li[index] && li[index].children[0].checked){ //line 21
ul.removeChild(li[index])
}
}
}

Explicación:

En la línea 1, 2 y 16 que simplemente creamos dos objetos class nuestra lista desordenada, botón de añadir y quitar el botón de getElemenById () método. Después de la línea 2 que vinculó addButton con un eventListener .

En la línea 3, creamos una función addItem que usamos con el detector de eventos anteriores. Cuando creamos un objeto de entrada class y se almacena cualquier valor dentro de él en otra partida nombre de variable, también almacenamos el contenido del texto del artículo en textNode usando createTextNode () método.

En la línea 7, simplemente se comprueba si el valor de la entrada ( cuadro de texto ) está vacía, si va a ser vaciarlo se abrirá una alerta diciendo “introduzca su tarea” de lo contrario, se ejecutará la parte en otro lugar se agregará una nueva tarea en la lista.

línea De 8 a 13 creamos elementos como li (lista), etiqueta , casilla de verificación de entrada, en la línea 11 se utilizó el setAttribute método para configurar la entrada como una casilla de verificación. Hasta el momento se crea el nuevo elemento, pero no se ha añadido a la lista hasta el momento, en la línea 14 en adelante añadimos niño en ul , li y etiqueta .

Dado que, queremos añadir una nueva tarea en la parte superior de la lista existente, se utilizó insertBefore () método. Si se ha saltado la parte CSS a continuación, no es necesario el setTimeout () función, pero si lo agregó continuación, utiliza setTimeout () función de transición lenta, que a su vez, la opacidad de la nueva lista a 1 ( visible ). En la línea 18, creamos una función removeItem que fue llamado en el ligada eventListener de RemoveButton . Lo que hicimos dentro de esta función es simplemente guardaron los hijos de ul (lista no ordenada) en li que está en la forma de una matriz . En esa matriz que acceder a ella con bucle for for cada índice y luego bucle nido utiliza para comprobar el insideof el elemento de la matriz si se comprueba o no también hemos comprobado si el índice es válido o no con li [índice] , satisface la condición anterior simplemente retirarla.

Imágenes (Salida):

Hemos hecho un trabajo maravilloso aquí, que se ve así:

Web Application: A To-do List using JavaScript - 4
Web Application: A To-do List using JavaScript - 5

descarga Para hacer Aplicación (Zip archivo)


Deja un comentario

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