Se creo una lista de tareas con VanillaJS. Utilizamos el DOM y a creamos elementos HTML con JavaScript.
El proyecto que vamos a realizar consiste en crear una lista de tareas con JavaScript vanilla. En este proyecto vamos a aprender a utilizar el DOM y a crear elementos HTML con JavaScript.
Mientras no es necesario tener conocimientos previos de HTML, CSS y JavaScript, si es recomendado tener algun tipo de fundamentos de la programación.
-
Tener un editor de código instalado, en este caso vamos a utilizar Visual Studio Code.
-
Tener instalado el plugin de Live Server en Visual Studio Code.
-
Crear una cuenta en fontawesome para poder utilizar sus iconos.
-
Crear una carpeta con el nombre del proyecto.
-
Crear un archivo index.html, styles.css y main.js
Dentro del archivo HTML vamos a crear la estructura base que despues vamos a modificar usando javascript.
⚠ Debemos incluir dentro del archivo index.html la conexión con el archivo main.js y styles.css ⚠
Dentro del archivo CSS vamos a crear los estilos que vamos a utilizar en el proyecto.
Dentro del archivo JavaScript vamos a crear las funciones que vamos a utilizar en el proyecto.
- querySelector: Nos permite seleccionar un elemento del DOM.
document.querySelector("h1");
- querySelectorAll: Nos permite seleccionar todos los elementos del DOM que coincidan con el selector.
document.querySelectorAll("li");
- createElement: Nos permite crear un elemento HTML.
document.createElement("li");
- appendChild: Nos permite agregar un elemento HTML dentro de otro elemento HTML.
document.querySelector("ul").appendChild("li");
- innerHTML: Nos permite agregar contenido HTML dentro de un elemento HTML.
document.querySelector("h1").innerHTML = "Hola Mundo";
- innerText: Nos permite agregar contenido de texto dentro de un elemento HTML.
document.querySelector("h1").innerText = "Hola Mundo";
- addEventListener: Nos permite agregar un evento a un elemento HTML.
document.querySelector("button").addEventListener("click", () => {
console.log("Hola Mundo");
});
- element.classList.add: Nos permite agregar una clase a un elemento HTML.
document.querySelector("h1").classList.add("titulo");
- funciones: Nos permite crear una función que podemos reutilizar en nuestro código.
function nombreDeLaFuncion() {
// Código de la función
}
- arreglos o arrays: Nos permite almacenar una lista de elementos.
const lista = ["elemento1", "elemento2", "elemento3"];
- metodos de array: Nos permite agregar, eliminar, modificar y recorrer los elementos de un array.
const lista = ["elemento1", "elemento2", "elemento3"];
// push: Agregar un elemento al final del array
lista.push("elemento4");
// pop: Eliminar el ultimo elemento del array
lista.pop();
// Modificar un elemento del array
lista[0] = "elementoModificado";
// forEach: Recorrer los elementos del array
lista.forEach((elemento) => {
console.log(elemento);
});
// splice: Nos permite eliminar elementos del array
lista.splice(0, 1); // Elimina el elemento en la posición 0