# Alternate Solution using template literals

**URL:** <https://forum.freecodecamp.org/t/alternate-solution-using-template-literals/436946>\
**Category:** freeCodeCamp Contributors\
**Tags:** contributing\
**Created:** [December 23, 2020, 9:03pm UTC](https://forum.freecodecamp.org/t/alternate-solution-using-template-literals/436946 "2020-12-23T21:03:27Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MrBondx](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mrbondx/32/205219_2.png) [@MrBondx](https://forum.freecodecamp.org/u/MrBondx)\
**Post date:** [December 23, 2020, 9:03pm UTC](https://forum.freecodecamp.org/t/alternate-solution-using-template-literals/436946/1 "2020-12-23T21:03:27Z")

</div>

CHALLENGE: JSON APIs and Ajax: Render Images from Data Sources

CHALLENGE LINK:  
[https://www.freecodecamp.org/learn/data-visualization/json-apis-and-ajax/render-images-from-data-sources](https://www.freecodecamp.org/learn/data-visualization/json-apis-and-ajax/render-images-from-data-sources)

> ****
>
> ```auto
> <script>
> document.addEventListener('DOMContentLoaded', function(){
> document.getElementById('getMessage').onclick = function(){
> const req=new XMLHttpRequest();
> req.open("GET",'/json/cats.json',true);
> req.send();
> req.onload = function(){
> const json = JSON.parse(req.responseText);
> let html = "";
> json.forEach(function(val) {
> html += "<div class = 'cat'>";
> // Add your code below this line
> html += `<img src = "${val.imageLink}" alt = "${val.altText}">`;
> 
> // 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>
> 
> ```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:32pm UTC](https://forum.freecodecamp.org/t/alternate-solution-using-template-literals/436946/2 "2021-06-01T18:32:03Z")

</div>

Closed on June 1, 2021, 6:32pm UTC