title: Iterate class through div's, while page is loaded
body: <p>I have a seven portfolio items on a page, and only one of them has a class of "featured", as you may guess, that one is in focus. It's bigger and has more details. </p>
  
  <p>Now, I want to change that class, to iterate through all portfolio items, after every  5sec. let's say. 
  How would that be done? Bare in mind that I'm not that good with JS yet. Still learning, so I would appreciate your help on this one.</p>
  
  <p>So, recap. I want when a visitor comes on page, for featured portfolio item to change, to go through all the items. </p>
  
  <p>I'm interested in doing it with vanilla JS ES6, so no jQuery. But, if you know how it could've be done with jQuery as well, be free to post it. </p>
  
  <p>Here's an example of the html for individual items.</p>
  
  <pre><code>&lt;div class="portfolio-items"&gt;
                  &lt;!-- Portfolio item 1 --&gt;
                  &lt;figure class="portfolio-item "&gt;
                      &lt;img src="img/portfolio-1.jpg" alt="portfolio-item"&gt;
                      &lt;figcaption&gt;
                          &lt;h2 class="portfolio-title"&gt;Project Name&lt;/h2&gt;
                          &lt;p class="portfolio-desc"&gt;A short description could go right here&lt;/p&gt;
                          &lt;a href="#" class="portfolio-link"&gt;More info&lt;/a&gt;
                      &lt;/figcaption&gt;
                  &lt;/figure&gt;
  </code></pre>
  
  <p>class "featured" is being added to a figure tag. </p>
  
  <p>Thanks :)</p>