Transcripciones
1. 1 Introducción a la aplicación de calculadora de depósitos financieros: Vuelve a este módulo.
Entonces en este módulo, construiremos la aplicación
de calculadora. Déjame primero mostrarte
la versión final
del proyecto que construiremos
en este módulo en particular. Entonces este será el
proyecto que
construiremos en este módulo en
particular. Se puede ver que tiene esta bonita tarjeta
rojiza como estructura. Entonces tenemos estos deslizadores. Entonces, al cambiar estos controles deslizantes
ya sea a la izquierda o a la derecha, en realidad
podemos
actualizar el valor de este elemento en particular
si realmente invierto uno Y si cambio la
tasa de interés a este seis en particular
pero mi incremento, o puedo decir la disminución
el periodo de tiempo, si hago clic en el botón ahora
invertir ahora, entonces se puede ver
cantidad invertida es como una pieza cro. Y luego los rendimientos estimados, va a ser triple 60. Por lo que el valor total
será de 16660 rupias. Todo bien. Entonces este es
en realidad un valor perfecto porque el Apdcalculator en línea también
se va a
calcular los mismos Si te muestro aplicaciones, puedes ver que este es el
grow dotin que es el sitio web más famoso utilizado en la
India con fines de inversión Entonces si realmente estoy aquí, se
puede ver que he agregado los mismos valores y los valores son en realidad
totalmente iguales. Si actualizo la página web, entonces se puede ver sobre la
inversión de una groupies, sobre la tasa de interés del 6.5% Si disminuyo la tasa de interés significa el periodo de tiempo,
no la tasa de interés, entonces se puede ver
que en realidad nos va a dar un mismo valor, que es de 6,660 rupias Ahora si en realidad
actualizo el valor aquí, como 6.8 interés, y ahora si realmente
aumento la cantidad a como algo diez crpies Entonces si realmente ingreso
los valores manualmente, diez crupiosAsí que en realidad
hago lo mismo aquí también, como diez acrops tasa de
interés va a ser 6.8 Entonces puedes ver que en realidad nos
da 69,754 icono, entonces puedes ver también nos
da el valor Ahora bien, los resultados son
totalmente los mismos. Al igual que en la versión
final de la aplicación significa esta aplicación en tiempo
real, se
puede ver, en realidad es una aplicación más profesional construida por un
sitio web completamente grande o una empresa. Entonces exactamente nos va a
dar los mismos valores, igual que puedes
verlo aquí. Todo bien. Entonces este será el
proyecto que
vamos a construir en este módulo en
particular. Entonces, en la próxima conferencia,
vamos a comenzar con la
parte estimada del proyecto.
2. 2 Aplicación de calculadora de depósitos financieros HTML: Para ahorrar
tiempo, he creado los archivos requeridos dentro
del código de Visual Studio,
que es
el índice Pt trial
CSS y scripted JSFile Puedes ver que ya he
lanzado la versión final de la aplicación que queremos construir en este módulo en
particular, y este será el proyecto que
he lanzado dentro del navegador chrome usando la extensión
del servidor de golf. Esta será la versión
de la aplicación que queremos construir en
este módulo en particular. Muy bien,
lo primero es que necesitamos crear realmente una etiqueta de una división
principal. Ese nombre de clase de etiqueta en particular
va a ser calculadora, y luego necesitamos colocar todos estos
elementos particulares uno por uno. La inversión total,
el tipo de entrada y este lapso
en particular van a ser envueltos dentro de la
etiqueta de una división. Todo bien. Entonces empecemos a
hacerlo uno por uno. Volviendo al índice
EstiML debajo del cuerpo diez, lo primero es, voy a
estar plateando una etiqueta de división Y en realidad, voy a
dar una calculadora de nombres de clase. Muy bien, entonces este
sería el nombre de la clase, asegúrate de que sea en minúscula. Después de eso, creo colocar una rúbrica que va
a ser como calculadora FT. Todo bien. Yo controlo
guardar entonces se puede ver que obtenemos el encabezado calculadora
FD. Entonces voy a
colocar la etiqueta de división. Esa
etiqueta de división en particular
se usa básicamente para crear este
tipo de división, que es la
sección de entrada, derecha. Bajo esa sección
de entrada en particular
va a tener una etiqueta de una etiqueta. Entonces tenemos el tipo de entrada, que va a ser range,
el tipo de entrada, y luego tenemos
el elemento span para mostrar realmente el valor
del control deslizante range, right. Volviendo a la versión
de la aplicación, aquí necesito especificar
el nombre de la clase, que va a ser
como sección de entrada. Entrada sección iPhone. Entonces necesito
especificar la etiqueta. El sello cuatro va
a ser como inversión. Entonces necesito especificar
la inversión total. Muy bien, entonces va
a la inversión total. Todo bien. Y luego necesito
especificar el tipo de entrada, que va a ser
etiqueta, no etiqueta, es como rango porque label es la
etiqueta que hemos usado para mostrar la etiqueta en
la parte superior del rango leve. Ese es este rango
de tipo de entrada particular. Entonces aquí especifico el ID, que va a ser
como invertir cantidad, o simplemente puedo usar
la inversión. Entonces necesito especificar
el valor mínimo. El valor mínimo
que puede en realidad sube a 10,000, bien. Y luego necesito especificar
el valor máximo. El máximo que puede sube
hasta diez rupias lac. Así que asegúrate de que he
agregado como seis ceros, y el valor de paso
que se utilizará para el cambio del Snider
va a ser como 10,000 Todo bien. Y el valor
predeterminado, cada vez que iniciemos
la aplicación, el valor de esta diapositiva L en
particular permanecerá, que es el valor. Entonces voy a estar aquí usando
los grupos de uno falta. Así que asegúrate de que tengo
aquí cinco ceros. Entonces si lo
controlo guardo, entonces obtenemos este deslizador de rango en particular, significa la entrada de rango. Después de eso, necesito aquí
especificar la etiqueta span, así que etiqueta span, o puedo
decir que span elementos. Entonces necesito especificar el ID,
que es el valor de inversión, por lo que el valor del guión de inversión Bien, si yo controlo guárdalo, no
pudimos ver nada. Aquí necesito usar
el símbolo de la rupia. Si en realidad escribo aquí
y símbolo de rupias, y simplemente puedo copiar este
símbolo en particular desde el Simplemente puedo copiar ese símbolo
en particular y subir aquí dentro del
s radical y pegarlo. Todo bien. Este es nuestro símbolo de
Rupi y lo voy a cerrar. Aquí voy a estar sumando los
valores como falta uno, que es el valor por defecto, uno falta Así que aquí voy a estar sumando los
tres ceros control Savin, entonces se puede ver que
obtenemos el símbolo de Rupi junto con el valor, Eso es lo que queremos mostrar. Entonces de manera similar, voy a copiar esta división de sección de
entrada particular, copiándola y
pegándola una vez más aquí Ahora necesito cambiar algo de valor. El nombre de clase principal de este tiempo de división en particular
va a seguir siendo el mismo, que es la sección de entrada, y luego necesito
cambiar el valor de la etiqueta. Valor de etiqueta aquí,
estaré usando el interés. Tasa de guión de interés. Y entonces necesito cambiar la etiqueta que
queremos mostrar, que va a ser
como tasa de interés. Tasa de interés, en realidad
necesito usar el por NMP. Y no está haciendo eso. Necesito considerarlo
como un PA, P tout, A, que va a ser por M.
Entonces ahora es el momento de actualizar los valores
del rango de tipos de
entrada Lo primero es que
necesitamos actualizar el ID, el ID va a la
tasa de interés. Todo bien. Entonces necesitamos cambiar
el valor principal y máximo. Entonces el valor mínimo
, puede tomar hasta uno. El valor máximo,
puede sport hasta 15. Ni uno, 15, es como 15. Entonces el valor del paso, así que el valor del
paso va
a ser como 0.1. Y luego el valor que
quiero mostrar, que va a ser 6.5. Todo bien. Y después de eso, necesitamos cambiar el
valor del elemento span. Entonces aquí, en lugar de usar
el valor de inversión, estaré usando el valor de la tasa de
interés. Se puede ver que es como
el valor de
la tasa de interés y la tasa de interés que
quiero mostrar acuerdo con el
valor que está aquí, que va a gustar 6.5% Queremos nombrar un 6.5%. Símbolo. Para que veas, obtenemos la tasa de
interés anual 6.5% A continuación, nuevamente, voy a copiar esta sección de
entrada en particular y desperdiciarla una vez más por
el periodo de tiempo en años. Voy a copiar esto aquí, y aquí voy a estar
cambiando el valor, que va a ser periodo de
tiempo en años. Y aquí, necesito
cambiar el valor
a periodo de tiempo en lugar
de tasa de interés. Entonces estaré usando el periodo de
tiempo del guión de tiempo. Y luego también necesito
cambiar la idea del periodo de tiempo
de
rango de tipo de entrada. Entonces necesitamos cambiar el valor
mínimo y máximo. Por lo que el valor mínimo,
puede soportar hasta uno. Máximo puede llegar hasta 20. Paso valor aquí, voy a estar usando el uno y el valor que
quiero mostrar por defecto, que va a ser cinco. Y luego necesito
cambiar el ID de span. Entonces, en lugar de usar
la tasa de interés, estaré usando aquí un periodo de
tiempo, valor de guión Y entonces necesito cambiar el valor de este traje de elemento
fan va a ser de cinco años. Si lo guardo, entonces se puede
ver periodo de tiempo en años, que es cinco, ¿verdad? Ahora tenemos jugadas
primeras tres secciones, que es inversión total. Eso es sólo una tasa de
interés y periodo de tiempo. Es hora de especificar el
resto de los elementos TML. Aquí, después del final de
esta división en particular, necesito especificar el botón. Botón Necesito llamar a un método al hacer clic de un
botón. Este es el click. Aquí voy a estar usando
el calcular FD. Esta será la función. Llamaremos cada vez que
hagamos clic en el botón, y luego estaré aquí
usando el invest Invest now. Si yo controlo,
guárdalo, entonces puedes ver conseguimos el botón, invierto ahora. Después de eso, necesitamos
crear otro botón tv, aquí necesito crear la clase, que va a la sección de
salida de nueve salidas. Una sección cose, y luego
necesito especificar la etiqueta P, que es para el elemento de
párrafo. Esta será nuestra cantidad
invertida. Entonces si en realidad
copio el valor de aquí para ahorrar un poco
de tiempo, monto invertido. De nuevo, voy a crear
un duplicado de éste. Entonces esta nuestras rentabilidades estimadas. Ahora voy a copiar
este valor total. No hay devoluciones estimadas,
por qué no se copia. Ahora tenemos esto de ellos. Después de eso, en lugar de eso, voy a especificar
la etiqueta
span, span luego necesito especificar
el ID de la etiqueta span, se
invierte cantidad invertida hi fun amount, y luego necesito especificar
el símbolo hi fun, y luego necesito
cerrar la etiqueta span. Bien. De igual manera, voy a copiar este tanque de gasto
en particular, pegándolo aquí, y
también dentro de él Entonces necesito
simplemente cambiar la identificación. Entonces, en lugar de usar el monto de inversión para este elemento de
párrafo en particular, estaré aquí usando
los rendimientos del método ST. Y luego para esta
en particular, estaré usando el valor total de la
pluma. Todo bien. Control sat, llevamos
guiones junto con estos como un elemento de párrafo para esta sección de
salida en particular Así que ahora he colocado
todos los elementos HTML. En la siguiente conferencia,
vamos a comenzar con el CSS para
que se vea como a esta versión
calculada en FD particular de la aplicación. Todo bien. Así que todas estas cosas vamos a hacer en
la próxima conferencia.
3. 3 Calculadora de depósitos financieros en CSS: Ahora a partir de esta conferencia, vamos a comenzar con
la parte CSS del proyecto. Entonces para eso, necesitamos
usar el estilo CSS spie. En lugar de esta en particular, primera vez voy a seleccionar
el selector de cuerpo, body, y luego voy
a iniciarlo bloque
del código, e insertarlo, primera vez voy a
cambiar la familia de fuentes
a realmente SensF después de eso, voy a especificar
el color de fondo Así que al color de fondo le va
a gustar un anuncio, ¿de acuerdo? Y entonces la pantalla
va a ser flex. Después de eso, estaré aquí
usando el contenido justificado, que va a ser
centro, luego alinear elementos, que va a
ser centro también, y luego estaré
usando la altura, que va a
100 pH después de eso, estaré aquí usando
el margen a cero. Entonces puedes ver que el
contenido en realidad se desplaza al centro de
la pantalla del navegador. Entonces voy a especificar que la clase es el encabezado de
clase principal de la etiqueta de división en
la que los elementos completos están
realmente envueltos. Voy a copiar este nombre de clase
en particular volviendo al CSS tdard Aquí voy a especificar
el nombre de la clase. Entonces voy a especificar
el color de fondo, o simplemente puedo usar el
fondo y aquí voy a estar usando la función de degradado
lineal. Entonces esto va a
ser como 120 grados, luego tiene símbolo, y luego
estaré usando la F cinco,
seis, cuatro, cinco, seis,
luego tiene símbolo, y aquí
voy a estar usando el f55 76c Y entonces voy a
especificar el borde, que va a un
pixel boder solid, y voy a ser error usando el símbolo hash tres
veces D, ¿verdad Entonces necesito especificar
el radio del borde, que va a ser
como ocho píxeles. Y entonces estaré
aplicando el pedaleo. El pading va a
ser como 28 pixeles. Después de eso, estaré usando
la propiedad width. El ancho va a ser como
520 píxeles, 520 píxeles. Y entonces seré error
usando la sombra de caja, así que la sombra de caja es cero, cero ,
20 píxeles, y luego
seré error usando
el cero, cero, cero,
cero del RGPA y el
Alfa va a 0.1 Entonces Posion va a ser un pariente y voy a
estar usando el desbordamiento, que va a quedar en blanco, oculto Y entonces estaré
usando la animación, esa es esta, que
se va a desvanecer. Entonces como uno que se está relajando. Bien, así que ahora puedes
ver que la división está realmente mejorada
un poco. Después de eso, estaré
agregando un poco más de código a la división principal de la calculadora
usando el antes. Por lo que básicamente se usa para agregar algo de código CSS antes de
que lo real vaya a suceder. Primero voy a
configurar el contenido para vaciar uno, bien. Después de eso, estaré especificando la posición a absoluto. Entonces tengo que
especificar la parte superior al -50% y la izquierda al -50% también,
derecha, y el ancho
va a ser como 200% y luego estaré
aplicando la altura al Después de eso, estaré
agregando el fondo, que va a
ser gradiente lineal. Nuevamente, estaré
en el grado 120. Entonces aquí voy a estar
agregando el f039. En realidad no nueve, es F 093fb. Después de eso, estaré
sumando la F cinco, seis, cuatro, cinco, seis. Control guardado, entonces se puede ver, obtenemos este tipo de color. Pero necesitamos usar esta propiedad index y aquí necesito especificar
el menos uno. Entonces en realidad va detrás la calculadora y después de eso, necesito agregar la animación,
que es como rotar. Rotar, que va a
diez un infinito lineal. Ahora necesitamos crear
los fotogramas clave de todos estos dos, que es rotar y desvanecerse. Agregue fotogramas clave de velocidad, nombre de
identificador, que se va a desvanecer
para el primero Por otra parte, necesito
crear otro fotograma clave. Este es para el giro. Dentro del fade in, pasado estaré usando el cromo. A partir de entonces iniciando
esta pendiente del frío y poniéndola a
opacidad a cero Después de eso, estaré sumando
la línea apretada de dos tex. Es como dos y aquí para poner la opacidad a uno. Todo bien. Y ahora puedes ver antes se aplique lo particular realmente se aplique lo particular,
si lo refresco, entonces puedes ver primero que
puntúa para que sea un poco rosa, y luego en realidad
se vuelve a convertir en su color rojo de la división. Cuál es la principal división
calculadora D. Después de eso, necesitamos
agregar la rotación. Aquí voy a razonar el de iniciar su bloque del código, luego transformar la función porque
queremos transformarlo,
aquí voy a pesing la rotación Quiero rotarlo
desde el grado cero y simplemente voy a
crear un duplicado de ellos y aquí necesito
eliminarlo usándolo para transformar rotar y quiero
girarlo a 360 grados. Derecha. Entonces ahora si lo refresco, se puede ver que
en realidad es realizar ese
pedacito particular de la rotación. Bien, entonces ahora necesitamos agregar el código para el encabezado de la
calculadora. En realidad
se hace lo primero, que es este tipo
de efecto de animación en forma rotacional. Después de eso, estaré
agregando aquí una calculadora. Cada uno y después para
iniciar bloque del código. Entonces aquí tengo que cambiar el tamaño de
fuente. No así. Primero, necesito cambiar
el tamaño de fuente a 34 píxeles. Y luego necesito
cambiar el margen, como un fondo a 20 píxeles. Y luego necesito
cambiar la propiedad text align para que
realmente centre, y luego necesito cambiar
el color a blanco. Controla, guárdala, entonces podrás ver que el color está
realmente cambiado. Después de eso, necesitamos
agregar el código para la sección de entrada, esta toda la sección de entrada. Voy a copiar este nombre de clase
en particular. Volviendo al estilo punto
CSS y aquí en especificar el punto y pegar el nombre del nombre de
la sección de entrada nombre de clase Entonces primero necesito cambiar
la propiedad
margin bottom que haya algunos espacios
entre estos elementos, así margin bottom, que
va a ser como 25 pixel. Después de eso, estaré agregando la posición a
realmente relativa, y luego voy a agregar esta propiedad index
a realmente una. Entonces como ahora hay un
margen que en realidad se aplica. Ahora es el momento de agregar los
códigos para la etiqueta. Así sección de entrada, y luego
tenemos que apuntar a las
etiquetas o la etiqueta etiqueta. Entonces etiqueta primero, necesitamos
cambiar la pantalla al elemento de nivel de
bloque. Si hago eso, entonces puedes ver el control deslizante de entrada y el span en realidad se
desplaza a la siguiente línea. Después cambio el tamaño a 24 píxeles. Por lo que ahora se incrementa el
tamaño de la fuente. Después la propiedad margin bottom, para que haya
algunos espacios entre el tipo de entrada y la etiqueta, que va a ser de cinco píxeles. Después de eso, estaré agregando el color al
blanco en realidad, no a la hierba. Es como el blanco. Ahora puedes ver que el color está
realmente cambiado. Todo bien. Ahora el siguiente va a
apuntar al rango de tipos de entrada. Así que de nuevo, sección de entrada, y luego necesito
apuntar a la entrada. Entonces también querrás
especificar el tipo. No tipo F, es como tipo. Y aquí, necesito
especificar el tipo, que va a ser rango. Entonces necesitamos iniciar
una pendiente del código. En lugar de eso, y para establecer
el ancho en realidad al 100%. Entonces después de eso, necesito
cambiar el cursor
dos puntero uno. Ahora puedes ver el
rango de entrada para que se modifique el estilo. Después de eso, necesitamos apuntar al elemento span de
la sección de entrada. Así que de nuevo, necesito apuntar a
la clase de sección de entrada. Entonces tenemos que apuntar a los elementos
span. Todo bien. Entonces aquí primero,
estaré en la pantalla para
bloquear el elemento de nivel, bloque. Entonces necesito cambiar
el color a blanco. Después de eso,
voy a aumentar el tamaño de la fuente a 20 píxeles. Entonces voy a cambiar el
margen a top a cinco píxeles. Entonces puedes ver ahora
también está modificada. Bien, así que ahora es el
momento de agregar el código para el botón porque en este
momento es muy sencillo. Entonces aquí voy a
apuntar el botón, luego comenzando como
bloque del código. Dentro del botón, primera
vez voy a cambiar el ancho a realmente 100%. Entonces voy a
cambiar el relleno a realmente diez píxeles. Después de eso, voy a
cambiar el color de fondo. Esto va a 28a7 45. Lo controla y se puede ver el color del botón está
realmente modificado. Después de eso, es momento de
cambiar el color a blanco. Entonces necesito
sacar la botella, así que el borde va a ser ninguno. Después de eso, voy a cambiar el radio del borde a
realmente cuatro píxeles, donde puedo ir con
los seis píxeles. Entonces voy a cambiar
el cursor a puntero uno. Después de eso, voy a cambiar el tamaño del teléfono a 16 píxeles. Después de eso, voy a
cambiar el índice a uno. Ahora puedes ver que el
código del botón está realmente modificado. Después de eso, necesitamos agregar
el efecto Hover a botón, así botón, y hover, que es una cosa básica, color de
fondo, voy a cambiarlo a símbolo de
prisa dos, uno, 88, 38 Guárdala, si pongo el cursor sobre ella, entonces puedes ver que en realidad se
vuelve un poco más oscura Ahora es el momento de
agregar el código para la sección de salida. Todo bien. Entonces aquí voy a simplemente usar el símbolo de punto y volver
en índice para probar tabla. Voy a copiar la sección de salida
del nombre de clase, ¿verdad? Después iniciando su
bloque del código. Primero, voy a
cambiar el margen una propiedad a 20 píxeles. Entonces voy a usar el
texto align property center. Después de eso, estaré aquí
usando la deposición, que va a ser relativa, y luego necesito
usar el índice Z uno. Veo ahora que
en realidad se ha desplazado a esta fila central Muy bien. Ahora es el momento de agregar
la sección de salida. Agregue esta
sección de salida en particular , luego el elemento de párrafo. Entonces aquí, necesito cambiar
el margen de como una parte superior e inferior a cinco píxeles y de izquierda y derecha,
va a ser cero. Después de eso, voy a
especificar el tamaño de fuente, que va a
ser de ocho píxeles. Entonces voy a
especificar el color, que va a ser el blanco. En sbin, se puede ver que en realidad se cambia el
color. Ahora es el momento de agregar
otra cosa aquí, como sección de salida,
luego el Spentag y luego inicio del núcleo Entonces la sección de salida va
al peso de la fuente de vida. Esto es como el peso del teléfono,
que va a ser audaz. Ya puedes ver que
en realidad se enfría. Ahora, en
realidad todo es ponerse de pie. Lo único que queda
es en realidad cuando se debe
modificar el estilo
del deslizador de entrada, para eso, aquí necesitamos
agregar algún código extra que
pueda verse como a esta
versión final del proyecto. Aunque parece muy útil en las
versiones básicas, puedes ver aquí. Se puede cambiar el valor e incluso
se puede cambiar el
valor de éste también. Como este tipo. Necesitamos
modificar el código. Aquí, primera vez que
queremos hacer eso, necesito usar la entrada porque cuando hay que
apuntar al rango de tipos de entrada, así que aquí para especificar
el tipo de entrada es igual y comenzó a
bloquear el código. Aquí para especificar el rango. Entonces primero al webkit,
luego aparece esta apariencia
particular de webkit, y va a ser nu Después de eso, voy a errar usando el ancho, este en particular El ancho va a gustar al 100%. Hay un símbolo porcentex. Lo siguiente, me
equivocaré usando la altura, no la altura media, le
va a gustar la altura En realidad, voy a estar aquí
usando la altura 28 pixel. Eso en realidad es quejarse. Bien, entonces necesito
quitar esta,
creo, la apariencia está funcionando. No es necesario
especificar el webkit. Entonces necesito usar
el fondo. Entonces fondo tiene símbolo DD, y después de eso, estaré aquí usando la propiedad outline. El esquema va a ser ninguno. Después de eso, voy a
establecer la opacidad en 0.9. Entonces necesito agregar la transición con esta
en particular,
que va a ser como 0.2 es entonces necesito establecer
la opacidad de transición Prosity y w 0.2 S. Bien. Después de todo, guárdala.
Entonces puedes Z. Ahora entonces poner deslizador se
cambia un poco Todo bien. A continuación, necesitamos cambiar el hover porque si te
muestro la versión final, ahí se aplica
realmente el hover, lo que básicamente
cambió un
poco el color a la versión más
blanca Entonces para eso, necesito de
nuevo nosotros la entrada, entonces aquí en especificar
el tipo Entonces otra vez, aquí yo para especificar el rango. Es hora de iniciar su
bloqueo hasta el código. Entonces voy a poner
la oposición a uno. Ahora bien, si pongo el cursor sobre él, lo refresco, básicamente
va a cambiar un poco
el color Ahora es el momento de modificar realmente el Ahora es el momento de
modificar realmente estos deslizadores, es
decir estos
pulgares, no deslizador, este pulgar del rango de entrada Voy a hacer frente a esta
primera línea del código e iniciar su
bloque del código. Bien. Y aquí, especifico
dos columnas, luego un kit web. No subir archivos,
es como el kit y aquí intro deslizador
pulgar. Ese es éste. Después de eso, necesito establecer la apariencia en realidad a ninguno. Entonces voy a
aquí establecer el ancho, que es como este
en particular,
que va a ser de 20 píxeles. Entonces necesito establecer la
altura también en 20 pixeles. Y entonces voy a cambiar
el color de fondo, que es como el verde a ocho, un siete, cuatro, cinco. No al ritmo,
es como símbolo. Después de eso, voy a cambiar el cursor
a puntero uno, y finalmente, la última propiedad, estaré usando el
boradio al 50% Control guardar ahora
puedes ver que obtenemos los pulgares verdes del rango de
entrada, ¿verdad Entonces esto es lo que
realmente queremos hacer. Bien, así que eso
marca la finalización de la parte CSS para este proyecto
en particular, que es la calculadora FT. Entonces, a partir de la próxima conferencia, vamos a agregar la
parte lógica dentro del Javascript. Entonces, cuando interactuamos
con estos liners, el valor debe cambiarse y reflejarse de nuevo a
los elementos span. Y cuando hacemos clic
en el invertir ahora, queremos calcular estos
tres valores de elementos de salida, que es el monto de la inversión, que es el monto invertido, rendimientos
estimados
y el valor total. Así que todas estas cosas
vamos a hacer en la próxima conferencia.
4. 4 Calculadora de depósitos financieros en JS: Temp para comenzar con la parte
Javascript del proyecto. Entonces para eso, necesitamos
usar archivos de scripts. Dentro de este archivo en particular, primera vez que va a aquí,
usa el contenido dom cargado. Entonces es como documento
Dd agregar eventis. Entonces voy a agregar el
oyente al contenido dom cargado significa que voy
a escuchar el contenido
dom cargado Y aquí, necesitamos especificar
una función anónima. Después para iniciar un
muelle del código. Bien. Y dentro un poco, voy a empezar a crear
una variable const, que es como insumo de inversión Entonces esto va a ser para
documentar a no esto
es como es como este
en particular, documento para Obtener elemento por ID, y entonces aquí necesito
especificar el nombre de ID. Entonces si vuelvo al IndexM, entonces aquí tenemos la inversión, simplemente cópiala y volviendo a Script dogs, y aquí la
voy a pegar Entonces esta es nuestra variable
de inversión. Entonces voy a crear una copia
de esta en particular y pegarla a más tiempo Entonces esta es como
la tasa de inversión. Por lo que el nombre variable de este
en particular va a ser la entrada de la tasa de
interés. La idea de este particular
si vuelvo a los índices tML este
es el nombre de identificación Necesito copiar este nombre
en particular, volviendo al script dg, y aquí voy a
reemplazar el nombre de identificación. Entonces necesito crear
una tercera variable. Esta en particular va
a ser entrada de periodo de por vida. Entonces ven a indexar totes
TML aquí voy a simplemente voy a pegar el nombre de identificación de
este en particular Copia comp a script dogs, y aquí voy
a pasar el nombre de identificación. Así que ahora tenemos las
referencias a todos estos tres deslizadores de entrada
variable dentro de ella. Ahora es el momento de escuchar a los oyentes
de entrada de estos tres Así que cada vez que escuchamos
a los oyentes de entrada, necesitamos llamar a la función para actualizar el valor de
estos elementos span, que es el siguiente paso para
implementar este tipo de lógica Entonces aquí, voy a usar la inversión que es
esta en particular,
que es la primera,
agregar el oyente de eventos, así agregar el listener, así queremos escuchar
al oyente de entrada Y luego aquí y para
especificar la función, que va a una función
anónima. En lugar de eso, necesito llamar
al código, que es el valor de
inversión de actualización de inversión. Y luego necesito
especificar el valor dtaut. Todo bien. De igual manera,
voy a copiar esta y
pegarla dos veces más Entonces voy a cambiar
el nombre de la variable en tasa de
interés de entrada de inversión a entrada de tasa de
interés, y esta es para la entrada de periodo de tiempo,
que es una tercera. Y luego necesito actualizar
el nombre de la función también. Entonces este en particular
va a ser como actualización. Tasa de interés, valor. Y este en particular
va a ser como actualización, T PE ROD valor de periodo. Todo bien. Entonces yo controlo Guárdalo, no
va a pasar nada. Ahora aquí, este
valor de punto en realidad está representando el tipo de entrada, que son estas tres variables de
entrada, que son los deslizadores ¿Bien? Entonces ahora es el momento de crear estas
funciones para que podamos actualizar los valores cuando arrastramos estos deslizadores ya sea a la
izquierda o a la derecha Entonces es el momento de crear todas estas tres
funciones una por una. Así que aquí, en realidad voy a
especificar la función,
así función actualizar la inversión
o el valor de la tasa de interés. Entonces primero está el valor de la
inversión de actualización. Y esta función en particular va a aceptar
un valor de parámetro. Entonces lo voy a copiar dos veces más,
y aquí
lo voy a cambiar para actualizar el valor de la tasa de interés, y esta es actualizar el valor del
periodo de tiempo.
Todo bien. Y ahora así que necesito realmente aquí proporcionar las actualizaciones de valor
iniciales. También necesito llamar a
estas funciones fuera de ella para
que dentro de ella, cuando en realidad estamos llamando a estas funciones al hacer clic
de los botones deslizantes, pero también necesito llamar a estas tres funciones al
click del botón de
inversión ahora, sea cual sea el valor que esté presente
dentro de los elementos span, necesito llamar a todas estas tres funciones en
esa situación también. Entonces aquí necesito proporcionar la actualización de valores
iniciales también. Entonces es como actualizar o
simplemente puedo hacer lo que voy a escuchar realmente copiando y
pegando los nombres de las funciones Entonces cópielo y pégalo aquí. Entonces éste también lo está
copiando y pegando. Ahora dentro de él, necesito
cambiar el parámetro, que va a ser
como insumo de inversión, sin valor de punto de entrada de inversión. Aquí mismo, también necesito
hacer eso como el valor de entrada de la tasa de interés, y este es como el valor de entrada del período de
tiempo. Todo bien. Entonces ahora si realmente
lo cambio, no va
a pasar nada porque dentro de este código en particular, necesito actualizar la propiedad
de texto
interno del elemento span. Entonces empecemos a
hacerlo uno por uno. Entonces primero dentro de
este en particular, necesito obtener la referencia
del elemento span porque
ahora mismo tengo la referencia
de estos deslizadores, pero no hay
forma de que pueda
actualizar el valor
del elemento span Entonces para eso, necesito obtener la referencia de los
elementos span dentro de estas funciones. Entonces aquí voy a estar agregando el documento punto
get elemento por ID, y ahora necesito
especificar el nombre de ID. Entonces si puedo volver
al índice para probar y aquí tenemos el tipo de entrada. Esto es para la
inversión, entonces estos son los valores que
necesito especificar aquí, regresarlo, y aquí lo
voy a pegar. Y luego necesito proporcionar la propiedad de texto interno
en esta en particular. Entonces esto va a ser igual a la letra del templo literal. Entonces aquí voy a estar usando
el símbolo del dólar. Entonces voy a usar
el corchete rizado. Intead voy a usar la función
parse float porque voy a convertir
los valores en float Y luego necesito pasar el valor dentro de este
particular parse float, que va a ser valor. Entonces el valor es en realidad, necesito
convertirlo en dos locales para que obtengamos los valores en
forma de estándar indio. Aquí estaré usando
las dos cadenas locales, y luego necesito pasar
el valor del parámetro, que es EN, que
básicamente se basa en
el estándar indio. Esto es solo para
convertir el texto sobre la base de la cadena local. No es necesario. Incluso en realidad se puede
ignorar esta parte. Totalmente, es porque podemos hacer el cálculo usando
el valor float parse. Bien para que pueda
copiarlo y
pegarlo aquí dos
veces más dentro de él, y luego
simplemente necesito hacer qué Aquí, necesito cambiar los
valores de los IDs, ¿verdad? Este en particular es en realidad
el valor de la tasa de interés. Ese es este valor particular del elemento
span para los ScriptJS aquí necesito
cambiar el valor al valor de la tasa de
interés,
y este es como
nuestro valor de período de tiempo Cópialo, vuelve a ScriptJS y aquí
voy a cambiar Cámbielo al valor hypon del
periodo de tiempo. Entonces ahora si realmente
actualizo estos controles deslizantes, entonces puedes ver que
el valor ahora se está actualizando dentro
del elemento span, todos los tres valores ahora
se están actualizando Entonces nuestra cosa básica
está realmente hecha, que es básicamente con el
uso del control deslizante, necesitamos actualizar los valores. Buen momento para calcular el FD, que es un depósito fijo sobre la base del
clic del botón. Entonces aquí, ya hemos agregado la función dentro
del clic del botón, así que necesito crear
esta
función en particular dentro del Javascript. Entonces aquí voy a estar
usando la función, luego tasando en el
nombre de la función, luego iniciando su código Doc upta Entonces primero, necesito
obtener los tres valores, que es la tasa principal
de interés y periodo de tiempo. Así que todos estos valores
se almacenan en realidad dentro de estos en particular
como estas tres entradas. Entonces necesito obtener los valores
de estas tres cosas. Entonces lo que voy a hacer aquí, simplemente
voy a copiar este
documento obtener elemento por ID. Y luego necesito almacenar estos valores dentro de
la variable. Entonces la primera variable
va a ser aquí costo costo, y este es en realidad
nuestro principio. Principio entonces esto va
a ser igual a analizar float, así que necesito convertir
el valor en float, parse float y luego aquí para pasar el documento punto
get elemento por ID, inversión y luego
eliminar realmente el terminador, y luego especificar el
terminador fuera de él, y aquí necesito usar punto
valor porque queremos
realizar el cálculo sobre los valores, no en las cuerdas. Entonces voy a
pegarlo dos veces más. Esta va
a ser nuestra tasa de interés, y esta va
a ser nuestro periodo de tiempo. Todo bien. Y luego
necesito cambiar las identificaciones. Entonces aquí ya he especificado el ID, que
es la inversión, luego la tasa de interés, así que necesito reemplazar el nombre
de identificación la tasa de interés aquí. Y entonces necesito
cambiar los valores como periodo de
tiempo y
cambiarlo aquí también periodo de tiempo. Todo bien. Entonces ahora tenemos la inicialización
de las variables, es momento de agregar la lógica Entonces, para sumar la lógica,
hay una fórmula. Entonces aquí voy a estar usando la
const y es igual a cuatro. Esto básicamente se utiliza para calcular la tasa de interés por completo para que podamos obtener el resultado
más preciso Entonces necesito usar la
fórmula como cantidad total. El monto total es igual
al monto principal. Entonces necesitamos multiplicar el
principio como este, y aquí tenemos que
multiplicarlo con la tasa de interés junto
con el periodo de tiempo. Entonces es como las matemáticas. Esta es la fórmula
que
la consigo con Internet para que para hacer que
la aplicación funcione, entonces tengo realmente modificar la fórmula de acuerdo
a mis valores de variables. Entonces aquí, necesito
agregar realmente la tasa de interés. Entonces necesito
dividir la tasa de interés con la
100 y después de eso, necesito
dividirla con la tasa de
interés trimestral. Entonces necesito especificar aquí coma y luego multiplicarlo con el valor de la tasa de hecho con el
valor del periodo de tiempo. Bueno, así no. Necesito especificarlo dentro de
los códigos dobles. Bien. Así que aquí estamos consiguiendo algunos problemas en el código. En realidad, aquí, necesito
cerrar el soporte. Por eso en realidad está
dando el problema. Entonces ahora los corchetes
no están perfectamente punto arriba. Se puede ver aquí y
estos son los corchetes. Todo bien. Entonces ahora
se agrega la lógica. Ahora es el momento de calcular
realmente el total y los intereses, ¿verdad? Entonces para poder calcular
el interés y, que es un interés total
y por el depósito del FD así para calcularlo, necesitamos menos el monto
principal
del monto total Entonces aquí voy a nombrar
la variable interés, y entonces esto
va a ser igual al monto
total menos
con el principal. Entonces ahora tenemos obtener
todos los valores. Así que ahora el siguiente paso es
que necesitamos establecer realmente estos valores dentro de estos
tres elementos de salida. Entonces empecemos a
hacerlo uno por uno. Entonces aquí voy
a usar el documento para obtener elemento por ID. Y entonces aquí necesito
especificar el nombre de la identificación. Entonces quiero actualizar la propiedad de texto
interno porque es un elemento span, así que necesito actualizar su propiedad de texto
interno, y luego
estaré aquí usando el literal de plantilla
dentro de él, voy a especificar
el símbolo del dólar, y
a partir de ahí, quiero obtener el valor. Entonces quiero obtener el valor de
la variable principal que en realidad
está en la parte superior. Entonces monto principal, esa es la cantidad principal que así
vamos a mostrar este valor
particular frente a
la cantidad invertida, ¿verdad? Entonces aquí va
a ser como enseñado a cadena
local que es
esta en particular. Dentro de ella, voy a pasar
los dobles grumos EN
guión IN. Todo bien. De igual manera, voy
a copiar esto y pegarlo dos veces más Entonces comencemos a modificar los códigos de estas
líneas del código. También aquí voy a
especificar el nombre de identificación. Así que volviendo a los índices tML si realmente
vuelvo aquí, es como cantidad invertida, copia el nombre de identificación comparado con Scriptojs aquí voy
a pegar el De igual manera, copie los
rendimientos estimados, pegándolos aquí. Entonces voy a
copiar el valor total, copiarlo y pegarlo aquí Todo bien. Ahora hemos
pegado todos los ID, es momento de modificar el código dentro de estos en particular. Este en particular va
a tener el símbolo más alto. Entonces el par de corchetes dentro de él,
voy a usar las matemáticas, eso es esto particular cuando
las matemáticas enseñaron la función redonda, y luego voy a especificar
los valores debajo de esto, que es el interés
y no oms es como interés y luego de
manera similar aquí, ese es este valor
total particular. Estamos inicializando los valores bajo el monto principal Así que voy a
quitar estas cosas principio cadena local. Aquí, necesito simplemente
especificar los valores bajo
la función de ronda enseñada matemática. Dentro de ella, voy a especificar el valor, que
va a ser total. Monto. Y también, necesito
agregar el símbolo de Rupis Si le hago clic, entonces ya pueden
ver, obtenemos el símbolo rupis. Entonces voy a copiar
el símbolo de Rupis. Frente al dólar,
voy a agregarlo. Bien. Entonces este es monto invertido o frente
al monto invertido, también
voy a editar. Ahora, antes de hecho aquí tengo algunos
errores delante de él. Aquí, se elimina el
carácter de inclinación. Por eso en realidad está
dando el error. Ahora el error en realidad se vende. Bien, entonces antes de
ejecutar realmente la aplicación, también volviendo a la
versión A del proyecto. Aquí en realidad hemos definido
el valor investal de actualización. Necesito realmente proporcionar
aquí algunas cosas más porque esta cadena de dos locales no
es necesaria para el valor de la tasa de
interés. En cambio, necesito definir la tasa de interés en forma
de símbolo porcentual. Entonces aquí necesito anexar el símbolo
de porcentaje. Una vez que realmente obtengo el valor, tasa de
interés es igual al
análisis flotante y el valor enseñado. Así que aquí necesito
usar los dos fijos en lugar de los dos cadenas locales. Quiero mostrar dos fijos
y después de los dos fijos, quiero mostrar un solo valor junto con el símbolo de
porcentaje. Después del paréntesis, nu niveles especifican el símbolo de porcentaje. De igual manera para este
en particular, que es el
periodo de tiempo, necesito
mostrar un solo dígito. Por lo que estas dos
cadenas locales no se requieren. Entonces dentro del flotador de piezas,
necesito quitar esta cosa. Esto no es obligatorio. En cambio,
necesito simplemente mostrar los datos usando el valor. Ese es éste en particular, que es el valor del parámetro. Si controlo guardo, ahora
obtenemos el símbolo de porcentaje
junto con el valor único. Si lo actualizo, ahora también
existe el símbolo de porcentaje. Ahora si hago clic en el invertir, obtenemos la inversión y también la tasa de interés
en este formato en particular. Por lo que no está debidamente formateado. Aquí puedes ver
este en particular,
que son los rendimientos estimados
y también el valor final. Entonces aquí, esto es porque
necesito usar las dos
cadenas locales para estas dos también. Es por eso que no estamos obteniendo los comas perfectamente
como este. Aquí las dos
cadenas locales son útiles. En este caso en particular,
voy a copiarlo. Después del interés, junto con el tot,
voy a copiarlo. Después del interés, voy
a probarlo aquí y arriba. Este control también lo guarda. Ahora bien, si hago clic en invertir reduciéndolo
periodo de tiempo a uno, entonces
ya se puede ver que la cadena está formateada de acuerdo
con las monedas indias, o se puede decir eso
según las cifras indias. Si en realidad hago clic en
la inversión aquí, entonces puedes ver si
obtenemos esta tasa de interés, 6.5 sobre inversión de 140000 Yo invierto una rupias de rezago, entonces obtenemos una tasa de interés
de seis rezago 6,060 Todo bien. Así que la replicación
ahora está funcionando perfectamente bien. Eso marca la finalización
de este módulo en particular. Lo único que en realidad
puede ser un poco complicado es esta lógica
particular, que es el
cálculo de la FD, que se basa en la cantidad total. Entonces esta es en realidad una fórmula, que es básicamente
un cálculo, cómo
se calcula realmente la tasa de interés. Así que en realidad puedes explorar
Internet para conocer algunos tutoriales básicos
porque esto no es parte de la explicación
de la tasa de interés porque puede ser un
poco complicado de explicar. Tomará toda una gran
conferencia para explicar
todos y cada uno de los conceptos del cálculo de la tasa de
interés. En su lugar, puede usar
Internet para averiguar la fórmula y luego convertir esa fórmula
en particular en su código. Al igual que lo hice, en realidad almaceno las
variables del principal, luego lo multiplique por
la tasa de intral, lo
divido en base
a lo trimestral, y luego lo multiplique
por el periodo de tiempo Entonces finalmente pude
calcular el monto total, luego para calcular
los intereses ganados en
realidad resté el valor
del monto principal
del monto total Entonces obtengo los intereses
ganados, y después de eso, simplemente
muestro esos valores dentro del elemento UI que estos elementos en particular abarcan para obtener el resultado impreso en la pantalla en el clic del patrón, que
es el invertir ahora. Entonces te doy el panorama
básico de la aplicación, cómo
está funcionando realmente. Entonces creo que te gusta
este módulo en particular. Entonces, si te gusta este módulo, entonces deja tu opinión porque tu reseña
me motiva a crear proyectos
más increíbles y únicos como este Así que gracias por ver, y
me voy a dar la siguiente conferencia.
Muchas gracias.
Vijay Kumar, Just Do! Do!
