<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//unpkg.com/vue@2.1.4/dist/vue.js"></script>
    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div id="app">
      <ul>
      <li v-for="item in myxml">
        {{ item.title }} <p> {{ item.link }} </p>
      </li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>




var app = new Vue({
  el: '#app',
  data() {
    return {
      myxml: []
    }
  },
  mounted: function() {
    axios.get("https://www.tsujileaks.com/?feed=podcast", {
      timeout: 3000,
      responseType: 'document'
    }).then(function(response) {
      const xml = response.data;
      const items = xml.getElementsByTagName('item');
      for (var i = 0; i < items.length; i++) 
      {
        const line = {
          title: items[i].getElementsByTagName("title")[0].childNodes[0].nodeValue,
          link: items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue
        };
        app.myxml.push(line);
      }
    }).catch(function(error) {
      alert(error);
    });
  }
})



/* Styles go here */