freeCodeCamp

2.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fae367417b2b2512be6	Render Images from Data Sources	6		Renderizar imágenes desde fuentes de datos

Description

Los últimos desafíos mostraron que cada objeto en la matriz JSON contiene una clave imageLink con un valor que es la URL de la imagen de un gato. Cuando recorre estos objetos, puede usar esta propiedad imageLink para mostrar esta imagen en un elemento img . Aquí está el código que hace esto: html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";

Instructions

Agregue código para usar las propiedades imageLink y altText en una etiqueta img .

Tests

tests:
  - text: Debe usar la propiedad <code>imageLink</code> para mostrar las imágenes.
    testString: 'assert(code.match(/val\.imageLink/g), "You should use the <code>imageLink</code> property to display the images.");'

Challenge Seed

<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick=function(){
      req=new XMLHttpRequest();
      req.open("GET",'/json/cats.json',true);
      req.send();
      req.onload=function(){
        json=JSON.parse(req.responseText);
        var html = "";
        json.forEach(function(val) {
          html += "<div class = 'cat'>";
          // Add your code below this line


          // Add your code above this line
          html += "</div><br>";
        });
        document.getElementsByClassName('message')[0].innerHTML=html;
      };
     };
  });
</script>
<style>
  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  }
  h1 {
    font-size: 2em;
    font-weight: bold;
  }
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  }
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;
  }
</style>
<h1>Cat Photo Finder</h1>
<p class="message box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

Solution

// solution required

2.5 KiB Raw Blame History