2.5 KiB
2.5 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d7fae367417b2b2512be6 | Render Images from Data Sources | 6 | Renderizar imágenes desde fuentes de datos |
Description
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
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