✅ Como Crear un Editor De Código con Html, Css y JavaScript ?Tutorial Completo 2021 ✅

hola en este vídeo vamos a realizar un editor de código básico utilizando html css y javascript como se observa en la pantalla vemos en la parte izquierda el contenedor en donde vamos a escribir el código y en la parte derecha se van a ver los resultados automáticamente aunque a primera vista se ve un poco complejo en realidad es un proyecto súper simple con muy pocas líneas de código y creo que es un proyecto interesante para empezar en el mundo del frontón entonces para empezar vamos a cerrar en este proyecto para realizarlo desde cero vamos a crear una carpeta y vamos a abrirlo con nuestro editor de código entonces como siempre primero vamos a crear un archivo html vamos a crear y un archivo css y por último un archivo javascript primero vamos a crear la estructura básica de una página ingresando html5 y nos creó automáticamente el visual studio code como título le vamos a poner el editor de código y acá el html es súper sencillo solamente vamos a poner bien una clase contenedor y dentro de este día vamos a poner un texto adrián esta va a ser la etiqueta en donde nosotros vamos a escribir el código entonces vamos a borrar todo esto porque lo vamos a dar estilos css le vamos a poner una clase que se va a llamar el texto ingresado una idea de igual manera texto ingresado y también un place holder que diga escribe tu código jarquín para que nos salga todo en una línea podemos ir a view y poner esta opción y vamos a ver qué sé se va a ajustar a la pantalla entonces en el texto área hacer en donde nosotros vamos a escribir el código y en donde se van a mostrar va a ser en la etiqueta iframe de igual manera vamos a quitar todo esto y le vamos a poner una clase que va a ser editor en este caso ustedes pueden poner la clase que ustedes quieran y de editor ahora vamos a poner su atributo src doc y ese atributo es importante por el momento le vamos a poner resultados aquí pero porque digo que es importante porque si nosotros vemos la definición de este atributo dice que especifica el contenido html de la página que se va a mostrar en el marco flotante entonces en otras palabras nosotros le vamos a pasar el html a ese atributo shtml debe ejecutar índice va a mostrar en el es etiqueta en la etiqueta aire de igual manera acá abajo se ve tenemos el atributo y donde lo estamos pasando un html coat y vemos que su descripción es que especifica el contenido html para mostrar en el aire es por eso que este atributo es lo que nos va a permitir realizar el editor de código y entonces eso sería todo el html pasando con el css lo primero que vamos a hacer es resetear todos los estilos entonces empezando como siempre vamos a poner un poco de cero un margin 0 y un box sightseeing border box hate es jon voight en este caso un tamaño de letra d de 20 píxeles y un color white el color de la letra va a ser blanco después al body nosotros le vamos a colocar un background color que en este caso yo tengo seleccionado que es 27 37 46 27 37 46 después a nuestra clase de texto ingresado que si recordamos es es la etiqueta tecsa área le vamos a poner un winter 45% un border de 4 píxeles en negro martín toc de 2 píxeles text decoration le decimos que ninguno un más inglés 10 píxeles y un background color de igual manera 27 37 el 46 y por último un out line en este caso decimos que en 1 y después también para el detalle a su place holder vamos a poner un posición relativo para poder mover réplic holder ya que por defecto se pone bien pegado a la esquina entonces le vamos a poner un top 10 píxeles 10 clics o sea que se vaya de izquierda para la derecha de 10 píxeles y un top significa que se vayan de arriba para abajo de mis pisos después ya al editor que sería donde se van a ver los resultados de etiquetas iframe le vamos a poner un march inglés 18 píxeles un widget de 50% un border de 4 píxeles bonito black igual que el anterior un margin top de 10 píxeles y un background color de igual manera el mismo color que hemos tranquilizando lo podemos hacer también con una opacidad para el color de fondo pero en este caso le hemos realizado de esta manera y eso sería todo el cese se les dan cuenta solamente hemos modificado el body hemos modificado el texto área y el entorno del iframe antes de ejecutarlo primero vamos a enlazar el css el link css en el hr el nombre del archivo que en este caso se llama chris kilos y cómo está todo en la misma carpeta lo ponemos directo y ahora sí ya que lanzamos los estilos vamos a ejecutar un die server y vemos ya tenemos el texto área y ya tenemos el iframe a la derecha y ese es el color de fondo que le hemos puesto entonces ahora lo único que nos queda es hacer el código javascript pasamos entonces al main js y el código javascript aunque no lo creas son solamente 4 links primero vamos a crear una función que ésta va a llamar actualizar nos dirigimos reestructura y lo que vamos a hacer acá es en una constante llamado texto ingresado nosotros vamos a obtener del html mediante el aire el texto ingresado que sería el text área de igual manera vamos a obtener el editor documents punto que el m en este caso editor lo que estamos haciendo es obtener el texto área ya que su haití es texto ingresado y de igual manera estamos obteniendo esta etiqueta por su ied y editor estamos obteniendo lo estamos jugar dando en estos constantes ahora como había dicho anteriormente lo importante acá es su atributo src doc entonces lo que vamos a hacer es acceder al editor en este caso sería la etiqueta iframe vamos a acceder a su atributo ese recelo y vamos a hacer que sea igual a la variable el texto ingresado que ya como repetía es la etiqueta text área y vamos a acceder a su propiedad value entonces eso sería todo entonces todo el código javascript y si tienen que hacer simplemente hemos obtenido las etiquetas y como había dicho en su atributo src doc es lo importante acá ya que le vamos a estar ingresando todo lo que escribamos en el texto área esta función se va a ejecutar en el texto adrián en su evento un clic vamos a ejecutarla la función actualizar entonces sabemos que el evento aunque lo que significa es un evento cada vez que nosotros soltamos una tecla entonces nosotros vamos a entre esta área y escribimos cada letra que nosotros escribamos al momento de soltar cada letra ya se va a estar ejecutando la función actualizar por ejemplo y una textura escribo la esahe ya se está obteniendo con esta función y se está guardando dentro del atributo src doc del iframe entonces así se va a hacer para todas las letras que nosotros ingresemos es por eso que cuando nosotros en el editor de código estamos escribiendo ya automáticamente a la derecha se están viendo los resultados antes de ejecutar el html tenemos que ingresar la etiqueta script para engrasar el código javascript con este html entonces le vamos a poner podemos poner punto diagonal y automáticamente nos va a mostrar todos y vamos a seleccionar me importa es que ese vértigo hígado script entonces ya les lanzamos con el archivo html que tenemos enlazado el css javascript ejecutamos y nosotros escribimos por ejemplo una etiqueta de párrafo escribimos hola cómo estás vemos que ya automáticamente en la derecha ya se están viendo los resultados al mismo tiempo entonces eso sería el editor nuevo acá podemos e ingresar ya código un poco más interesante por ejemplo acá tengo una prueba para mostrarles es lo que les apareció al principio del vídeo es un código sencillo de una animación como vemos automáticamente los resultados se van mostrando a la derecha esto es la estructura básica de un archivo html como lo hacemos en el visual studio code todo esto ya es css dentro de la etiqueta style y acá está el body no el body que dentro solamente puesto un dip con una clase de contenedor que sería el rectángulo grande verde y otro de adentro con una clase caja que sería el cuadrado que se estaba moviendo y nada el contenedor de dado algún estilo para que se haga de esa manera y a la caja quedado también tamaño color orden y ahora estará la animación de dado un nombre de animación que se llama animación horizontal la duración de animación que es un segundo la iteración de la animación que en este caso el puesto infinito para que no se detenga y la dirección que le hemos puesto alternativo para que se esté moviendo de un lado para otro acá estamos creando la animación con el mismo nombre no hemos dicho que en el inicio de la animación la caja está en cero o sea está en izquierdo al 50% este de color azul y cuando está al 100% hemos puesto que les se mueva un 80% significa que se va a mover de izquierda a derecha es por eso que vemos como el cuadrado va y viene en conclusión tú puedes escribir todo el código html css y javascript que quieras y los resultados se van a ver automáticamente en la parte derecha bueno eso sería todo el proyecto espero les haya gustado y nos vemos en un próximo vídeo [Música]