✅ Convertir Número Decimal a Binario con Html, Css y JavaScript 💻Tutorial Completo 2022

hola en este vídeo vamos a realizar una página que convierte número de base 10 a binario utilizando html css y javascript como se observa es un proyecto muy simple pero creo que está bien para ir familiarizándose con esas tecnologías entonces para empezar vamos a crear la carpeta del proyecto no vamos a llamar decimal el binario no vamos a abrir con nuestro editor y vamos a crear un archivo index html con estilos css y lo principal js en el html vamos a crear la estructura básica de una página de lenguaje le ponemos en español y como título decimal a binaria dentro vamos a crear un dit con una clase título dentro de ese día vamos a crear el h1 que digas decimal al final para el dip vamos a crear otro contenedor con la clase contenedor y llega un h 2 con la clase título que entrada y con el texto número decimal después único equipo texto bueno ni de entrada para obtenerlo en el javascript en la clase importa entrada y con un page holder que diga ingrese el número dentro del contenedor vamos a crear otro día édgar contenedor entrada y acá en el hd2 solamente va a tener un guión bajo dentro de este contenedor de entrada vamos a colocar el hd2 y el input que hemos creado después de este contenedor entrada vamos a crear otro día con la clase contenedor de salida de igual manera un h 2 el número binario con una clase de título de salida con un input de tipo de texto una vez de esa vida y con una clase de vida y además un page holder que diga respuesta entonces estos dos contenedores están dentro del contenedor general y después de este contenedor de salida vamos a crear un botón y digo convertir y el botón para tener una independencia y una clase portón la estructura del ejercicio y última vamos a crear el script para enlazar con el archivo script de igual manera en el que vamos a crear el enlace por el css estilos css y además le vamos a poner un tipo de letra que si vamos a por el fondo y buscamos la fuente the way vamos a seleccionar recordar 400 le damos en seleccionar este estilo obviamos estos link y nos pegamos dentro del general y en los estilos con el selector general le decimos que tenemos [Música] badín un marginal 0 26 singular books el tipo de letra le vamos a poner la letra que acabamos de importar antes de continuar con los estilos css he hecho una corrección en el html ya que tanto al tiempo de entrada como a limpio de salida he colocado mismos estilos entonces ya no necesario colocarle a una clase diferente a cada uno por lo tanto para ambos le he puesto la clase input para poder aplicarlo en el css entonces continuando ahora el título le vamos a colocar un texto life centre martín 2 mil 800 píxeles el contenedor de 500 píxeles un géiser 400 píxeles para durán world of white un margen de 80 píxeles y auto borde radios de 20 píxeles y un border de 4 píxeles solid y el color de ese 371 pop pasando con el contenedor de entrada con with 300 píxeles aunque hay de 100 píxeles y un patrón color blanco voz y tan relativo punto de 30 píxeles y un 87 píxeles además un margen botón de 50 píxeles pues el título de entrada le colocamos un texto de iu center un patín botón de 20 fricciones a los inputs vamos a colocar un split un text align center en vez de 200 píxeles a frei de 45 píxeles posición relativa desde 50 píxeles online de 20 kilos border el 4 sólido y el color de ese 3 714 tamaño de letra de 15 píxeles después el contenedor de salida un bus de 300 píxeles la dirección píxeles va tranquila en blanco por qué punto de 20 píxeles 16 píxeles y después antich un servidor text align center un panel botón de 20 prisiones y por último los estilos para el botón [Música] para poner un west de 150 píxeles desde 40 píxeles la posición relativa porque 50 773 borde reyes de 20 píxeles un border de 4000 se les olvida y el color es de 3 714 [Música] white con honor en 93 se roben por último o no [Música] entonces ya terminamos los estilos ahora antes de pasar al javascript hay que tener en cuenta que necesitamos el input de entrada el input de salida y el botón para agregar elemento de clic entonces antes vamos a definir la lógica que vamos a utilizar para hacer la conversión y vamos a realizar lo que se llama las divisiones sucesivas es el método más utilizado para transformar decimal a binario entonces por ejemplo vamos a tener un 10 lo vamos a dividir entre 2 va a ser 5 de cociente y de residuos cero ahora este consciente lo vamos a volver a dividir entre 2 vas a ir a todos este 2 otra vez lo dividimos iba a ser 1 y 0 el 1 como es menor que el 2 ya no lo vamos a poder dividir ahí va a quedar y entonces vamos a obtener los valores de la siguiente manera vamos a tener primero el 1 el 0 1 y el 0 el ser no hay que confundirse que esté uno en sí es el último cociente y este 0-1 y 0 con residuos entonces este es el valor de 10 pero en binario y lo que nosotros vamos a hacer es realizar las divisiones sucesivas con un bucle while y dentro de un string vamos a ir concatenando todos los residuos pero no va a tener un string que nunca tiene este cero después el 1 después el 0 y así hasta que termine las divisiones entonces cuando termine las divisiones al district le vamos a concatenar el último conscientes que sería uno cuando obtengamos ya el valor lo vamos a pasar por una función para invertir una cadena y lo vamos a invertir entonces nos estaría dando el 10 el 1 0 ya invirtiendo la cadena nos estaría otorgando el valor del número en binario y eso es lo que vamos a hacer en código entonces vamos a ir al main y como había dicho antes vamos a tener primero el input de entrada obteniendo por su ied y recuerda que le habíamos puesto mi entrada vale montón no tenemos esports hoy de igual manera la constante y la más salida tenemos por el aire vamos a definir las siguientes variables el número decimal el divisor sería el 2 y lo vamos a ir dividiendo entre 2 el resultado ordinario donde vamos a almacenar el resultado el consciente y recibe al botón un evento de click y vamos a realizar los siguientes primero vamos a llamar a la función marina de entrada y después dentro de la variable resultado urinario vamos a ser igual al metro convertir decimal a binario es el método que tiene la lógica para realizar la conversión eso nos va a dar para devolver un string lo vamos a almacenar dentro del resultado binario y después en salida y en el input en el impulsa lidad su propiedad de valor a ser igual para el método invertir cadenas y le vamos a pasar resultado vinagre hace resultado binario va a tener el string de las divisiones sucesivas y después cuando ese string lo pasemos a la función invertir cadena nos va a devolver la cadena invertida y eso lo vamos a pasar como valor a limpio de salida entonces vamos a crear la función validar entrada y podemos utilizar el operador alternaria para preguntar si el valor que tiene el tiempo de entrada es un estímulo ha sido se han ingresado nada entonces muestra una alerta que dirá ingrese datos en caso contrario puesto que más tirón con sólo llegar todo bien pero ustedes lo pueden modificar el frob usted después la función para convertir decimal también año empezamos diciendo que el número decimal el valor de limpio de entrada lo que ingresamos en el tiempo lo vamos a almacenar en la variable número decimal el divisor pero todos los que lo vamos a vivir entre 2 vamos a crear una variable dentro de esta función que se va a llamar número de salida lo vamos a iniciar con un stream vacío acá vamos a ir almacenando el string y entonces empezamos con un bucle while pasándole el número decimal y que este bucle se va a repetir siempre cuando el número decimal sea mayor o igual que 2 entonces el paciente punto pero vamos a provocar la división entre el número decimal y el divisor en este caso nosotros es 10 10 el número decimal el divisor sería 2 y el truncado nos estaría dando el entero quesería 5 entonces después en el residuo vamos a poner como dice la variable residuos utilizando el operador y vamos a hacer la división entre números decimales divisor o sea 10 entre 2 y con ese operador nos va a otorgar el recibo el número de salida que es el string le vamos a concatenar el residuo pero en formato 25 en formato de cadena y después al número de firmar le vamos a decir que va a ser el cociente entonces esto funcionaba el número decimal al principio va a servir se va a dividir y el consciente en este caso resulta ser cinco después vamos a hacer que el número decimal sea igual al cociente para que no me lo décima la voracidad 5 y vuelve a entrar al bucle y ahora se divide a 5 entre 2 para realizar en esta división y así sucesivamente vamos a ir haciendo las divisiones entonces después de que termine el bucle y se va a ir concatenando todo esta variable número de salida vamos a crear aparte una variable auxiliar lo que va a hacer es concatenar es string que tenemos de los residuos lo vamos a concatenar por último con el último cociente el número decimal junto a tu string en auxiliar vamos a obtener el último cociente lo vamos a transformar a string lo guardamos en auxiliar y a la cadena número de salida y concatenados de valor y entonces retornamos y [Música] estaríamos retornando a la cadena completa y después vamos a crear una función para invertir la tarea y como parámetros va a recibir una cadena de texting y vamos a retornar la ciencia esta cree en el texto primero con el método split es un método nativo para las cadenas en javascript lo vamos a separar por su parte en este caso como el parámetro que estamos poniendo solamente 2 dos comillas dobles entonces la cadena se va a separar en caracteres en un array de caracteres desarrollo de caracteres para métodos rivers lo vamos a invertir después con el método joint lo vamos a volver a unir y se va a transformar en una cadena nuevo entonces la cadena lo vamos a separar en un array de caracteres invertimos de ese raid y lo volvemos a unir y eso sería todo el código para ejecutar este ejercicio validamos las entradas realizamos la conversión y el valor que me retorne esta conversión lo pasamos por la función para invertirlo y ese valor lo vamos a mostrar dentro del limbo de salida y ahora cerramos el ejemplo que teníamos y ya vamos a nuestro html y lo abrimos con die server para comprobar presentación ingresamos el 10 que habíamos hecho como ejemplo nos muestra 10 10 es el valor que habíamos obtenido le pasamos un 50 la muestra 1100 días para comprobarlo acá tengo un la palma que también realiza la conversión y si le pasamos de igual manera el 50 gramos conversión vemos como una muestra 1100 10 1100 días y por último si lo pasamos un 45 un 10 11 0 1 y comprobamos en la siguiente página 10 11 0 1 el código está funcionando solamente hemos creado una estructura básica en html unos estilos básicos en ccs ya que ni siquiera hemos utilizado flex box y bueno en javascript ya está el evento del botón y las diferentes funciones para para ingresarlo dentro del evento eso sería todo el proyecto ya está terminado espero les haya gustado y nos vemos en un próximo vídeo [Música]