EXPLICACIÓN BLOQUE CÓDIGO API DEL TIEMPO.pptx

EXPLICACIÓN BLOQUE CÓDIGO API DEL TIEMPO.pptx

1. EXPLICACIÓN BLOQUE CÓDIGO API DEL TIEMPO GRADO 11

2. HTML Para trabajar la interfaz de nuestra aplicación en html , debemos implementar el uso de: Etiqueta Div : mediante la cual se busca crear contenedores o divisiones que contengan la información o datos que muestra la api al usuario. Clases: mediante las cuáles se dará formato o estilos al texto de la api a través de CSS. Id (Selector): los cuáles son utilizados en javascript en la creación de funciones.

3. EJEMPLO El anterior bloque de código nos ayuda a crear el área de trabajo de nuestra aplicación, por otra parte se crea una caja de texto donde el usuario puede digitar su búsqueda (localización o ciudad) y un botón con le cuál se invocará los datos de la Api principal.

4. Este es el contendor o división del dato “Temperatura actual de la localización que digito el usuario”.

5. Este bloque contiene el icono que se mostrará en relación al estado de tiempo actual de la ubicación.

6. Este bloque contiene los datos de temperatura máxima y mínima de la localización o ciudad elegida por el usuario.

7. Finalmente con esta instrucción se enlaza el archivo javascript .

8. CSS El bloque de código anterior permite configurar con el selector * universal las propiedades o atributos para todo el documento y el cuerpo del mismo.

9. Con este bloque de código se crea el borde o área de trabajo de nuestra aplicación

10. Este bloque de código permite establecer imagen de fondo de día según localización elegida por el usuario.

11. Este bloque de código permite dar estilo al texto de la aplicación para los grados centígrados y el estado “Nuboso”. Los datos varían según localización elegida por usuario.

12. Permite que el cuadro de búsqueda tenga el atributo display flex con el cuál se puede alterar el ancho, alto y posicionamiento de este elemento de la mejor manera con el espacio del que disponemos.

13. Bloques que permite dar estilo al botón ubicado al lado derecho de la caja de texto, que después quedará invisible.

14. Estos bloques de código dan formato o estilo a la temperatura que aparece en la parte superior.

15. Bloque que permite dar estilo al texto donde aparece el nombre de la ubicación de la ciudad y la fecha actual.

16. Código que da estilo al texto descriptivo del tiempo “Nuboso” y al texto de la localización “London”.

17. Bloques de código que da formato al texto de la parte inferior en la aplicación.

18. JAVASCRIPT El anterior bloque de código de JavaScript permite crear las funciones principales, en donde se asigna a través del método getElementById las clases de los elementos presentes en el documento html . Si observamos a través de consola en el navegador aún no se visualiza cambios. Capturar todos los elementos del Documento.

19. Este bloque de código permite hacer el llamado de los datos de la API a la cuál nos hemos suscrito. Este código lo podemos encontrar en la documentación de la API de la siguiente forma: API KEY

20. Debemos registrarnos en la API https://rapidapi.com/ después digitamos en la barra de búsqueda de esta página OPEN WEATHER MAP que es la API del tiempo que vamos a utilizar. Aparece el siguiente entorno, en el cual damos clic en el botón azul para suscribirnos y elegimos la opción que es gratis, recuerda que hasta opción solo valida 50 intentos de prueba:

21. Posteriormente, se busca al lado derecho la opción javascript y de esta se elige fetch .

22. Finalmente se copia el código que nos proporcionan, en el centro de esta ventana se encuentran los parámetros los cuáles se pueden modificar según la necesidad del usuario:

23. Este código permite que al cargar nuestra aplicación en el navegador siempre aparezcan los datos de una ciudad que en este caso sería Pasto, además de permitir visualizar por consola los datos que se están llamando de la API.

24. Este bloque de código permite que se tome del imput o caja de búsqueda el dato que ingresa el usuario, en este caso una ciudad.

25. En este caso se digito Londres

26. Este bloque de código hace llamado del objeto que contiene todos los datos solicitados de la ciudad desde la API.

27. El anterior bloque de código permite convertir los datos traídos de la API a lenguaje español, además de convertir los datos de fecha y hora a nuestro formato estándar, por ello se multiplica por 1000. Las últimas instrucciones nos muestra un condicional que permite establecer o cambiar la imagen según la hora ya sea de día o noche.

28. Este bloque de código permite convertir los datos traídos de la temperatura a número entero mediante la función matemática Math.floor , y también hace el llamdo del icono que va acorde al estado del tiempo, además de la descripción del estado del tiempo.