- Create a template that generates html in the format below, but allowing for dynamic values to be inserted for the img tag's
srcattribute, as well as the text of the span tag:
<div class="match clearfix">
<img src="http://api.randomuser.me/portraits/women/2.jpg" alt=""><span>Sarana</span>
</div>- Use this template to generate a string of HTML, passing in a hardcoded image URL and name.
- Append this new html to the div with the class of
"matches-container". - Once your template works as expected--i.e. a match appears in the left-hand column--add a click event listener to the heart button, so that whenever it's clicked, the rando on the screen is added to the match column, and a new rando takes their place on the iPhone.