frapercanFS · idavid80 · Jun 18, 2022 · Jul 1, 2022 · Jul 1, 2022 · Jul 1, 2022
diff --git a/ejercicios/JS/teoria_5/david_tema5.html b/ejercicios/JS/teoria_5/david_tema5.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script defer src="david_tema5.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <div id="imagenRandomPerro"></div>
+    <ul id="razas"></ul>
+    <img src="" alt="">
+    <button onclick="listaPerros()">Mostrar razas de perros</button>
+
+    <button onclick="fotoRandomPerro()">Mostrar foto perros</button>
+    <button onclick="fotoRazaConcreta()">Mostrar foto perros</button>
+    <form action="false">
+        <label for="raza">Raza</label>
+        <input type="text" name="raza" id="raza">
+        <button onclick="mostrarFotoRazaEspecifica()"></button>
+    </form>
+
+</body>
+</html>
diff --git a/ejercicios/JS/teoria_5/david_tema5.js b/ejercicios/JS/teoria_5/david_tema5.js
@@ -0,0 +1,37 @@
+
+function listarPerros() {
+  fetch("https://dog.ceo/api/breeds/list/all")
+    .then((response) => response.json())
+    .then((json) => crearListaPerrosHTML(Object.keys(json['message'])));
+}
+
+function crearListaPerrosHTML(listarPerros){
+  for(let raza of listarPerros) {
+    let elemento = document.createElement("li")
+    elemento.innerHTML = raza
+    document.getElementById("razas").appendChild(elemento)
+  }
+}
+
+function fotoRandomPerro() {
+  fetch("https://dog.ceo/api/breeds/image/random")
+    .then((response) => response.json())
+    .then((json) => crearListaPerrosHTML(Object.keys(json)));
+}
+
+function crearImagenPerro(json){
+
+  let imagenURL = json['message'];
+
+
+}
+
+mostrarFotoRazaEspecifica(){
+let razaEscoogida = document.getElementById("razaEscogida")
+
+}
+function mostrarFotoRazaEspecifica() {
+  fetch("https://dog.ceo/api/breed/hound/images")
+    .then((response) => response.json())
+    .then((json) => crearListaPerrosHTML(Object.keys(json['message'])));
+}
diff --git a/ejercicios/JS/teoria_6/pokemon.david.js b/ejercicios/JS/teoria_6/pokemon.david.js
@@ -0,0 +1,40 @@
+//Utilizando la api de Pokemons https://pokeapi.co/ y usando sólo async/await:
+
+//Obtener un Pokemon de manera aleatoria (fetch)
+
+const fetch = (url) => import('node-fetch').then(({ default: fetch }) => fetch(url));
+let soluciones = [];
+async function ObtenerPokemons() {
+    let apiPokemon = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=100000&offset=0`);
+    let propiedadesPokemon = await apiPokemon.json()   // let miMap = new Map();
+    let datosPokemon = await propiedadesPokemon.results;
+
+      //let imagenPokemon
+    let NumeroPokemonAleatorio = await Math.floor(Math.random()*Object.keys(propiedadesPokemon.results).length);
+    let pokemonAleatorio = datosPokemon[NumeroPokemonAleatorio]
+    //Obtener nombre del Pokémon
+    soluciones.push(pokemonAleatorio.name)
+   // Solucion Ejercicio 1: return pokemonAleatorio
+
+ //Ejercicio 2: Obten su imágen correspondiente  
+    let fichaPokemon = await fetch (pokemonAleatorio.url)
+    let galeriaPokemon = await fichaPokemon.json()
+    let imagenPokemon = await galeriaPokemon.sprites.front_default;
+    soluciones.push(imagenPokemon)
+    // Solucion Ejercicio 2: return imagenPokemon
+
+return soluciones
+}
+ObtenerPokemons().then(pokemon => {
+    console.log("Soluciones", pokemon); 
+});
+
+
+//Dibujar nombre e imágen del Pokémon en el DOM
+function mostrarDOM(){
+
+    document.getElementsByTagName('head').innerHTML='<script>window.onload = document.write("<img src="' + imagenPokemon + 'alt="' + pokemonAleatorio.name + ' + >)</script> ';
+    }
+
+//OJO!! Te tocará estudiar cómo funciona la API de Pokémon para encontrar la imágen. Puede que tengas que hacer más de un fetch!! (depende de la ruta de consulta que uses)
+
diff --git a/ejercicios/JS/teoria_7/david_geo.html b/ejercicios/JS/teoria_7/david_geo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script defer src="david_geo.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+        crossorigin="" />
+
+</head>
+
+<body>
+    <script>
+    </script>
+
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+        crossorigin=""></script>
+    <div style="  height: 400px;
+width: 350px;
+border: 1px solid black" id="map"></div>
+</body>
+
+</html>
diff --git a/ejercicios/JS/teoria_7/david_geo.js b/ejercicios/JS/teoria_7/david_geo.js
@@ -0,0 +1,37 @@
+//Obetener ubicacion
+
+let miUbicacion = [];
+navigator.geolocation.watchPosition(position => {
+    let latitud = position.coords.latitude;
+    let longitud = position.coords.longitude;
+    miUbicacion.push(latitud, longitud)
+    console.log(latitud, longitud)
+
+
+    const mapId = 'map';
+
+    const map = L.map(mapId).setView(miUbicacion, 13);
+    const MAPBOX_API = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}'
+    const ATTRIBUTION =
+        'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
+    // Este token será el que obtengamos en la web de Mapbox
+    const ACCESS_TOKEN =
+        'pk.eyJ1IjoiY2Nhc3RpbGxvMDZtYiIsImEiOiJja2k1eXpybXU3em1mMnRsNjNqajJ0YW12In0.aFQJlFDBDQeUpLHT4EiRYg';
+
+    L.tileLayer(MAPBOX_API, {
+        attribution: ATTRIBUTION,
+        maxZoom: 18,
+        id: 'mapbox/streets-v11',
+        tileSize: 512,
+        zoomOffset: -1,
+        accessToken: ACCESS_TOKEN
+    }).addTo(map);
+
+    L.marker(miUbicacion).addTo(map);
+    // Ejemplo añadiendo otras coordenadas:
+    const ubicacionDestino = [37.3754863, -6]
+    L.marker(ubicacionDestino).addTo(map);
+}, error => {
+    console.warn(`Error! - ${error}`);
+
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "node-fetch": "^3.2.6"
+  }
+}