Transcripciones
1. INTRODUCCIÓN: Hola a todos,
y gracias por venir a este nuevo proyecto de
JavaScript. En este proyecto,
aprenderemos cómo podemos crear un convertidor de temperatura usando
HTML, CSS y JavaScript. Puedes ver aquí
tenemos dos entradas, una para los grados Celsius y otra para
los Fahrenheit Entonces, si vengo aquí y
agrego algún grado Celsius, puedes ver que se convierte
automáticamente a Fahrenheit y se muestra aquí
en la entrada Fahrenheit También note que tenemos
estas dos flechas arriba y abajo que podemos usar para aumentar
o disminuir los grados. También podemos convertir al
revés de Fahrenheit a Celsius
ingresando un
valor de Fahrenheit aquí, y puedes ver que
se convierte a Celsius
y se muestra aquí en
la entrada Celsius y se muestra aquí en Este curso es ideal para estudiantes que hayan
aprendido los fundamentos de Javascript y quieran aplicar sus conocimientos de
manera práctica Al crear una aplicación de lista de tareas simple pero
atractiva, los estudiantes
obtendrán experiencia práctica, profundizarán su comprensión
de los conceptos básicos de Javascript y aumentarán su confianza en desarrollo de proyectos del mundo real Para aprovechar al
máximo este curso, se anima a
los estudiantes a construir
el proyecto por su cuenta y subir su trabajo terminado como un archivo zip a la galería del
proyecto.
2. Diseño de interfaz de usuario con conversor de temperatura con HTML y CSS: Bien, todos, veamos cómo
podemos crear este proyecto. Voy a empezar aquí en mi
HTML agregando un div, darle una clase de wrapper. Entonces dentro de eso, agregaré otro div con una
clase de contenedor. Y este contenedor
div contendrá la entrada y la etiqueta Celsius. Entonces agregaré una etiqueta
y diré Celsius. Entonces por debajo de eso,
agregaré una nueva entrada. Dale un tipo de número porque grados de
temperatura son
obviamente números, no texto. También le voy a dar
una identificación de centígrados. Entonces iré aquí dentro de
la etiqueta y diré cuatro, luego agregaré el ID de
la entrada Celsius. Por lo que este contenedor
contendrá la entrada Celsius. Para crear
la entrada Fahrenheit,
copiaremos este dith
contenedor, copiaremos este dith
contenedor lo
pegaremos nuevamente y cambiaremos
Celsius a Y aquí. Y aquí, también. Entonces ahora puedes ver que tenemos estas dos entradas aquí en la esquina superior izquierda
del navegador. Bien, ahora voy a ir a
mi CSS para darles estilo. Primero, apuntaré al cuerpo. Y agrega color de fondo, este color naranja fresco. Entonces por debajo de eso, apuntaré al div envoltorio que contiene los dos contenedores y estableceré
su ancho en 450 píxeles. Después agrega
color de fondo, blanco, relleno, 70 píxeles
de arriba y abajo, y 40 píxeles de
izquierda y derecha. Después agregaré sombra de caja, cero como desplazamiento horizontal, 20 píxeles como desplazamiento vertical, 25 píxeles como valor de desenfoque, y este color semitransparente. Entonces para tener
algunas esquinas redondeadas, agregaré
radio de borde, ocho píxeles. Ahora queremos centrar el div
envoltorio dentro del cuerpo. Entonces iré aquí y agregaré
display flex, justificaré contenido, centro para centrarlo
horizontalmente, alinear elementos,
centrarlo para centrarlo verticalmente, y altura 100 VH. Y ahora puedes ver que
el div envoltorio está centrado dentro del cuerpo. Bien, ahora apuntemos a los divs con la
clase de contenedor Y agregar ancho, 45%. Y ahora se puede ver
que están ocupando 45% del div envoltorio. Bien, ahora apuntemos las
entradas dentro de los contenedores y agreguemos ancho 100%. Por lo que ocupará todo el
ancho del contenedor, que es 45% de la inmersión rapera. Después altura, 50 píxeles, radio de
borde, cinco píxeles,
borde, dos píxeles, sólido, este
color gris claro, luego contorno, ninguno, luego relleno, cero
desde arriba e abajo, y diez píxeles de
izquierda y derecha. Y por último, margen superior, ocho píxeles para agregar algo de espaciado entre las
entradas y las etiquetas. Y ahora queremos posicionar los dos contenedores
uno al lado del otro en la misma línea. Y podemos hacer eso
usando Flexbox. Entonces iré aquí dentro del
contenedor div y agregaré display,
flex, y justificaré el espacio de
contenido entre, así los dos contenedores estarán
separados uno del otro. Y ahora, como
pueden ver, todos, las dos entradas están mirando
exactamente de la manera que queremos. Pero lo único que
queda es cambiar el coolor de borde de la
entrada al enfocarse en él. Entonces iré aquí y diré
entrada y al enfocarme en ella, agregaré
color de fondo, nuestro color naranja. Y ahora cuando me concentro
en las entradas, se
puede ver su
color de borde cambia a naranja. Y eso es todo, todos,
para esta lección. Hemos terminado el HTML
y CSS para este proyecto, y aprenderemos a hacerlo funcionar en la siguiente lección. Entonces, ¿te ves ahí?
3. Agregar funcionalidad con JavaScript: Bien, todo el mundo. Después de terminar el HTML y CSS de nuestra aplicación de conversión de
temperatura, en esta lección,
comenzaremos a agregarle funcionalidad
usando JavaScript. Entonces, básicamente, lo que
queremos hacer es cuando agregamos un valor específico
en la entrada Celsius, queremos tomar este
valor, hacer algunas matemáticas sobre él, convertirlo a Fahrenheit,
luego mostrarlo en
la entrada Fahrenheit Y también, al ingresar
un valor Fahrenheit, queremos tomarlo y
convertirlo a Celsius, luego mostrarlo en
la entrada Celsius Entonces, antes que nada, queremos la ecuación que convierta grados
Celsius a grados Fahrenheit y la
otra que convierta
al revés de grados Fahrenheit a
grados Celsius Y como pueden ver aquí, he añadido estas dos ecuaciones. Entonces, para convertir de
Celsius a Fahrenheit, usaremos esta ecuación Tomaremos el grado Celsius, lo
multiplicaremos por 9/5, luego agregaremos 32 al resultado Y vamos a utilizar este de aquí para convertir de
Fahrenheit a Celsius. Tomaremos el grado
Fahrenheit, luego le restaremos 32
y
lo multiplicaremos por 5/9 para obtener Increíble. Ahora, comencemos a
trabajar en nuestro script Java. En primer lugar, quiero
seleccionar las dos entradas. Entonces voy a crear una nueva
variable, llamarla Celsius. Entonces voy a decir documento
Obtener elemento por ID. Entonces apuntaré la entrada
con el ID de Celsius. Entonces duplicaré eso, nombra la variable Fahrenheit Y apuntar la entrada con
el ID de Fahrenheit. Entonces por debajo de eso,
voy a decir Celsius, punto add Event Listener Y quiero que piensen
un poco aquí, todos, en el evento
que debemos escuchar. Hasta ahora,
solo nos ocupamos de eventos de
clic en botones
específicos, pero ahora no tenemos
botones en nuestro ejemplo. En realidad queremos escuchar el cambio del valor de
entrada aquí. Entonces cada vez que cambiamos el
valor dentro de esa entrada, queremos detectarlo y decirle a
JavaScript que tome alguna
acción en respuesta, que es, por supuesto,
tomar el nuevo valor y convertirlo a
Fahrenheit para mostrarlo Y veremos cómo
hacerlo en un segundo. Pero ahora volvemos al
evento que debemos usar para detectar
el cambio en la entrada, y ese evento es
simplemente llamado input. Entonces voy a agregar entrada aquí. Entonces agregaré nuestra
función de devolución de llamada que debería ejecutarse siempre que cambie el valor
de entrada Y por ahora, vamos a probar
alguna acción simple
para que podamos entender cómo funciona
el evento input. Yo solo diré consola dot log, y voy a imprimir el valor
de entrada cambiado. Después iré a ver la consola y ver lo que obtenemos en la consola al cambiar el valor de
la entrada Celsius. Puedes ver cada vez
que cambio el valor, esta frase aquí está impresa, y puedes saberlo por el número
de
la izquierda aquí. Todo bien. Ahora vamos a eliminar esta línea. Y ahora, cada vez que ingresamos un
valor en la entrada Celsius, queremos tomar este valor, multiplicarlo por 9/5, y luego sumar 32 al resultado Entonces iré aquí y diré valor del punto
Celsius para agarrar el valor dentro de
la entrada Celsius. Entonces tiempos 9/5 más 32. Al hacer eso, se
convierte a Fahrenheit. Entonces ahora es el momento de
mostrarlo en la entrada Fahrenheit. Podemos hacer eso diciendo que el valor de punto
Fahrenheit es
igual a todo Y ahora cuando voy y trato de
agregar un valor Celsius, se
puede ver que se convierte
a Fahrenheit y Y cada vez que cambiamos
el valor Celsius, el valor Fahrenheit
también se actualiza Tratemos de sumar
12 negativo aquí como un valor Celsius. Se puede ver que tenemos diez y todos estos números a la
derecha del punto decimal. Pero esto no
se ve nada bien. En cambio, queremos mostrar solo dos números después
del punto decimal, y podemos hacerlo usando
el método two fixed. Voy a ir aquí y
añadir dos fijos, y eso exceptúa el número de dígitos que queremos agregar Entonces voy a añadir dos. Y ahora, cuando vuelvo a
intentar negativo 12, de nuevo, se
puede ver que ahora está
mostrando 10.40, y todos los demás
dígitos fueron borrados Asombroso, todos. Ahora,
intentemos otra cosa. Simplemente eliminemos
este valor aquí. Se puede ver que tenemos 32
en el lado Fahrenheit, pesar de que no tenemos
valor en el lado Celsius Y 32 aquí en realidad
equivale a 0 Celsius. Entonces si agrego cero aquí, se
puede ver que no cambia. Ahora, cuando la
entrada Celsius está vacía, queremos que el Fahrenheit
también esté vacío, y podemos hacerlo muy
fácilmente en Voy a ir aquí y decir, yo exclamación valor de punto
centígrados Y ese signo de
exclamación simplemente significa que no. Entonces niega lo que
venga después de ella. Entonces este código básicamente significa que si no
hay valor para
la entrada Celsius, esto sucede cuando está vacío. Bien, dentro de eso
agregaremos el valor de punto Fahrenheit, y pondremos eso igual
a cadenas vacías Y ahora, cuando regrese
y pruebe cualquier valor,
luego lo quite, se puede ver también
se elimina
el valor Fahrenheit Y con eso, todos, hemos terminado la primera
mitad del proyecto. La buena noticia es que
no hay nada nuevo en la segunda mitad. Sólo podemos copiar ese código. Pégalo aquí y empieza
a ajustar algunas cosas. Voy a cambiar Celsius
aquí a Fahrenheit. También lo voy a cambiar aquí. Después quita esta fórmula y agrega la fórmula para
convertir Fahrenheit a Celsius. Voy a añadir
valor Fahrenheit -32 veces 5/9. Entonces agregaré dos
fijos, dos también. También voy a cambiar
Celsius aquí a Fahrenheit y Fahrenheit aquí a
Celsius Entonces, cuando el Fahrenheit no
tiene valor, la entrada Celsius también
estará vacía Y ahora, cuando voy y agrego cualquier valor en la entrada
Fahrenheit, puedes ver que se convierte a Celsius y se muestra aquí
en la entrada Celsius Y con eso, todos,
nuestra app está terminada, pero quiero agregar una
pequeña cosa aquí. Al cargar la página, queremos que la entrada
Celsius esté enfocada. Entonces iré aquí y diré
window dot add Event Listener. Cargar. Entonces este evento
se activa cuando se recarga la página Después agregaré una función de
devolución de llamada. Y dentro de él,
diré foco de punto centígrados. Y ahora se puede ver cada
vez que recargo la página,
la entrada Celsius es lo que
está enfocado. Y esto es todo. Para la lección, todos. Espero que te guste este proyecto y aprendas algo de él
que puedas usar en cualquier proyecto que puedas
hacer en el futuro. Y te veré
en la siguiente.
Ahmed Sadek, full stack web developer, freelancer & t
