<div class="frame ajax annoucements">
  <h1 id="announcements-title" class="material ajax-title">Announcements<span class="title-this-week"></span></h1>
  <div id="app" class="ajax-body material" v-html="posts[0].content.rendered">
  </div>
</div>

var tcnt = 0;

new Vue({
  el: '#app',
  data: {
    posts: []
  },
  created() {
    axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/categories/')
    .then((response) => {
      var categoryId = 0;
      response.data.forEach(function(category){
        if (category.slug == 'announcements') {
          categoryId = category.id;
          console.log('Category ID: ' + category.id);
        }
      });
      return categoryId;
    })
    .then((categoryId) => {
      console.log(categoryId);
      return axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/posts/', {
        params: {
          categories: categoryId,
          per_page: 1,
          status: 'publish'
        }
      });
    })
    .then((response) => {
      console.log(response.data);
      this.posts = response.data;
    })
    .catch((error) => {
      console.log(error.message);
    })
  },
  mounted() {
    var announcements = document.querySelectorAll('frame.ajax .ajax-body > ol > li');
    console.log(announcements.length);
    setInterval(function(){
      var target = announcements.length % tcnt;
      for (i = 0; i < announcements.length; i++) {
        if (i == target) {
          announcements[i].style.display = 'block';
        }
        else {
          announcements[i].style.display = 'initial';
        }
      }
      tcnt++;
    }, 1000);
  }
});