Testimonial Section - Vue and Fetch

index.html

<section id="app">
  
  <div class="review__container">
    <div v-for="review in reviews">
     
      <div class="review__item">
        <p class="review__review">{{ review.review }}</p>
      
        <div class="review__user">
          <img :src="review.status">
         
          <div class="review__username">
            <div class="review__name">{{ review.name }}</div>
            <div class="review__date">{{ review.date }}</div>
          </div>
        </div>
        
      </div>
      
    </div>
  </div>
 
<!-- End Copying -->
</section>

script.js

let json = [
  {
    "name": "Little Kapp",
    "review": "Pretty decent",
    "date": "☆☆☆☆☆ • December 8, 2019"
  },
  {
    "name": "Michelle B",
    "review": "Great app! Nice to have everything in one place",
    "date": "☆☆☆☆☆ • December 8, 2019"
  },
  {
    "name": "Lilly Reese",
    "review": "Very helpful",
    "date": "☆☆☆☆☆ • December 9, 2019"
  },
  {
    name: "Feature_Unlocker",
    review: "Overall, this app is quite literally the embodiment of everything good about modern technology. From a stylish look to quick and simple features, it is evident that BobcatNotify will be utilized by several students at Brookings High School for updates on weather, upcoming school events, and so much more. If there was an option to give more than 5 stars you bet I would. This app is more than worthy of recognition and overall, in terms of quality and usefulness, it ranks as high with the best reminder apps there are. 11/10 would/will recommend to a friend :)",
    "date": "☆☆☆☆☆ • December 5, 2019"
  },
  {
    name: "Pretty dang great",
    review: "I downloaded Bobcat Notify just to get snow day notifications, but was very impressed by the app overall. All the added features are great and don’t take away at all from the app’s initial purpose. Major respect to Samyok for taking the time to make this so polished. 10/10 would recommend.",
    "date": "☆☆☆☆☆ • December 5, 2019"
  },
  {
    name: "4BE4BCC22B",
    date: "☆☆☆☆☆ • December 5, 2019",
    review: "Very useful and well designed"
  }
];
json = shuffle(json);
const app = new Vue({
  el: '#app',
  data: {
    reviews: json
  },
});


setInterval(()=>{
  if($(".review__container")[0].scrollLeft + 504 === $(".review__container")[0].scrollWidth) {
        $('.review__container').animate({
        scrollLeft: '0'
    }, 1000, 'easeOutQuad');

  } else {
        $('.review__container').animate({
        scrollLeft: '+=504'
    }, 1000, 'easeOutQuad');

  }
}, 30000)
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

body{ background-color: black; }
.review__container {
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  width: 504px;
  border: 1px solid black;
}

.review__item {
  background: white;
  border-radius: 8px;
  width: 400px;
  height: 200px;
  padding: 10px 30px;
  margin: 0 20px;
}
.review__item img {
  height: 50px;
}
.review__item .review__review {
  height: 130px;
  overflow: hidden;
  font-size: 13px;
}
.review__item .review__user {
  display: flex;
  align-items: center;
}
.review__item .review__username {
  margin-left: ;
}
.review__item .review__name {
  font-weight: 600;
}
.review__item .review__date {
  color: rgba(0, 0, 0, 0.75);
}
.review__item .review__name,
.review__item .review__twitter {
  line-height: 1.25;
}

testimonial-section-vue-and-fetch.markdown

Testimonial Section - Vue and Fetch

Review section using Vue, Fetch API, myJson, and Mockaroo

A Pen by Samyok on CodePen.

License.