100 días de código en Javascript... 2da parte

Continuando el anterior post.

20. Obtener una imagen desde una API pública. En este caso https://randomuser.me/api/ nos servirá para obtener una imagen.

//Creamos botón con id 'btn'
const btn = document.getElementById("btn");

//Creamos un div con id 'contenedor'
const contenedor = document.getElementById("contenedor");

Ahora creamos un evento click para el botón (btn):

btn.addEventListener("click",()=>{
 fetch('https://randomuser.me/api/')
 .then( resp => resp.json())
 .then( data => {
             //Ruta de la imagen
  contenedor.innerHTML = "Imagen: "+data.results[0].picture.large;
  
//Colocamos la imagen en el atributo src de img
document.querySelector("#img").src = data.results[0].picture.large;
  
 });
});

Es necesario precisar que empleamos  fetch que es muy similar a $.ajax() de jQuery aunque difiere en algunos aspectos. Por default emplea el método GET para solicitar un recurso.

Una petición básica puede ser:

fetch('http://servidor/programadores.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(Json) {
    console.log(Json);
  });

21. Si quieres ocultar/mostrar un elemento (por ejemplo, una sección o bloque div) podrías usar esto:

//Creamos botón con id 'btn'
const btn = document.getElementById("btn");
//Creamos un div con id 'seccion'
const seccion = document.getElementById("seccion");

btn.addEventListener("click",()=>{
  if(seccion.style.display=="block"){
   seccion.style.display='none';
  }else{
   seccion.style.display="block";
  }
 });

22. ¿Usar let o var?
He aquí algunas respuestas: https://es.stackoverflow.com/questions/79809/cual-es-la-diferencia-de-usar-let-en-vez-de-var-en-javascript

Conclusión:
var, para ámbito global.
let, para ámbito local.

23.Colocar una imagen en un div.

//div con id 'contenedor'
const contenedor = document.getElementById("contenedor");
//botón con id 'btn'
const btn = document.getElementById("btn");


//función para colocar imagen
var colocaImagen = ()=>{
 var imagen = document.createElement("img");
 imagen.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCgTTYU2dsbDavHU3MuT_aW-WyWKStTMnB0gD1rQSi3fqjfwgYHIB3x8uTVH9zFq-rMW5V7QAQOSpMnaxjDiGeLN9ex_Tc914Ht4tKJ_76JU5Yvi68Gs8uIB2EOmYCJzaaDddgBIV5zG3G/s1600/craftsmen-3094035_960_720.jpg";
 contenedor.appendChild(imagen); 
};

//Creamos evento y colocamos la función 'colocaImagen'
btn.addEventListener("click",colocaImagen);

24. Conocer que tecla presiono o libero:

//Tecla presionada
window.addEventListener("keyup",(event)=>{
   
   if(event.key == "A"|| event.key == "a"){
     //...
   }
   //...

});

//Tecla liberada
window.addEventListener("keydown",(event)=>{
   if(event.key == "A"|| event.key == "a"){
     //...
   }
   //...
});

25. El juego de lanza monedas en javascript.

let moneda = ["AGUILA","SOL"];
  let hugo,paco,luis;
  let result ="";
  const btn = document.getElementById("btn");
  const resultado = document.getElementById("resultado");
  
  var label = document.getElementById("texto");
  
  btn.addEventListener("mousedown",()=>{
      label.innerHTML ="";
  });

  btn.addEventListener("mouseover",()=>{
      label.innerHTML="<br/><b>Reglas:</b><br/> Tres jugadores lanzan una moneda.<br/>Si una moneda es diferente a las otras dos, el lanzador gana.<br/>Si las monedas son todas iguales, nadie gana.";
  });
  
  btn.addEventListener("click", ()=>{
  
      
  hugo = moneda[Math.floor(Math.random()*2.0)];
  paco = moneda[Math.floor(Math.random()*2.0)];
  luis = moneda[Math.floor(Math.random()*2.0)];

  console.log("Hugo:",hugo);
  console.log("Paco:",paco);
  console.log("Luis:",luis);
  
  result += "<br/>Hugo: "+hugo;
  result += "<br/>Paco: "+paco;
  result += "<br/>Luis: "+luis;

  if(hugo!=paco && hugo!=luis){
    console.log(hugo," : Hugo gana!!");
    result +="<br/> <br/>"+hugo+" : Hugo gana!!";
  }else if(paco!=hugo && paco!=luis){
    console.log(paco," : Paco gana!!");
    result +="<br/> <br/>"+paco+" : Paco gana!!";
  }else{
    if(luis!=hugo && luis!=paco){
      console.log(luis," : Luis gana!!");
      result +="<br/> <br/>"+luis+" : Luis gana!!";
    }else{
      console.log("Empate: nadie gana!!");
      result +="<br/><br/> Empate: nadie gana!!";
    }
  }  
  
  resultado.innerHTML = "<br/>"+result;
  result = "";
  
  });

Continuaremos... Links:
https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Utilizando_Fetch
https://www.geeksforgeeks.org/difference-between-var-and-let-in-javascript/
https://es.stackoverflow.com/questions/82929/eventos-keypress-keydown-keyup