En este artículo verás el fichero index.html en una app de to do, un gran ejemplo del proceso que conlleva completar un archivo de HTML, el cual es necesario para lograr los objetivos de un programa de desarrollo web.
En este caso, te encontrarás con un ejercicio práctico, en el que programamos una aplicación de to do o de tareas por hacer. Si quieres ejercitar tus habilidades, te contaremos qué tiene el fichero index.html en una app de to do, para que puedas integrarlo con los ficheros de JavaScript, donde ejecutamos las clases.
¿Cómo luce el index.html en una app de to do?
El archivo o fichero index.html en una app de to do es el lugar en el que realizamos la estructuración de los los componentes de un sitio. Allí puedes encontrar elementos como tablas, títulos o párrafos, entre otros componentes de un sitio web. En este caso, vas a encontrar los textos que vamos a pasar y que se pintarán en el sitio web. Además, deberás enlazar el script que desarrolla los elementos interactivos y dinámicos de los archivos de JavaScript, donde se definen cada una de las clases.
Si quieres conocer más acerca de estos procesos, puedes echarle un ojo a la definición de las clases input action, list item e items list en JavaScript.
Ejecutar el script de input action y list item
A continuación, te mostramos el HTML en el que vamos a importar el script de input action y list item. Como puedes observar, primero tendrás que ejecutar el head o cabecera del archivo, donde vas a posicionar el título del sitio web. Esto irá acompañado de la escritura del cuerpo del sitio web, donde podrás instanciar las clases, así como el script de JavaScript que vas a enlazar. Aquí, por ejemplo, puedes ver el texto que se pasa dentro de la clase del input action.
Por otro lado, lograremos ver cómo importamos el script de list-item, que es otra de las clases que desarrollamos en los ficheros de JavaScript. A su vez, aquí también tendrás que definir el escuchador de los eventos que se han desarrollado en otros archivos del programa.
A continuación, vas a encontrar el extracto de texto en HTML del fichero index.html en una app de to do, donde se importará la clase que determinará las clases de un programa de desarrollo de una aplicación web.
<DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF -8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name "viewport" content = "width-device-width, initial-scale = 1.0">
<title> Document </title>
</head>
<body>
<input-action icon "🔎" placeholder = "cositas para hacer"></input-action>
<list.item text = "hola mundo!!"></list-item>
<script type = "module" src" ./input-action.js"></script>
<script>
<script type = "module" src" ./list-item.js"></script>
<script>
const inputActionElement = document.querySelector ("input-action");
inputActionElement.addEventListener ('sendText', (event) => {
console.log (event.detail);
inputActionElement.addEventListener ('removeItem', (event) => {
console.log ('elemento borrado');
})
</script>
</body>
Ejecutar el script de items list
Si no quieres integrarlo en el mismo archivo, puedes desarrollar otro index.html, que sirve para enlazar el script de items list de JavaScript. En primer lugar, vas a definir el head o cabecera de HTML y a situar el título del sitio web. Después, vamos a empezar a formar el body o cuerpo del fichero de index.html, donde ejecutaremos la clase de items-list-component y, después, vamos a importar el fichero en el que se instancia la clase de items.list.componet desarrollada en JavaScript.
A continuación, puedes encontrar el fichero de HTML en el que se desarrolla la función de items-list-component:
<DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF -8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name "viewport" content = "width-device-width, initial-scale = 1.0">
<title> TODO LIST </title>
</head>
<body>
<items-list-component></items-list-component>
<script type = "module" src= './items-list-component.js'></script>
</html>Como has podido ver en este artículo, el fichero index.html en una app de to do es uno de los elementos más importantes dentro del desarrollo de una app web, ya que es el lugar en el que se importan todos los ficheros de JavaScript.
¿Quieres aprender más de este lenguaje de etiquetas? Únate a nuestro Desarrollo Web Full Stack Bootcamp y aprende todo lo relacionado con este sector de la programación. A través de una formación de alta intensidad y con la guía de expertos en el mundillo, podrá aprender a nivel tanto teórico como práctico para triunfar en el mercado laboral IT en cuestión de meses. ¡Atrévete a cambiar tu futuro y pide más información ya mismo!
