Show the data and loader inside carousel

amit yadav 0
Viewed 40

Before appending the loader to my page carousel works fine. But after adding loader to my page data not appending in the carousel. It appends after carousel. I want to show data inside carousel. I have tried but have not been able to figure out the problems. In this code, I am not fetching the data from the server but I have hard-coded data which is showing using local storage.

let movieData = JSON.parse(localStorage.getItem("movies"));

//console.log(movieData)

function sortLH() {
  let data = JSON.parse(localStorage.getItem('movies'));
  sort_data = data.sort(function(a, b) {
    return a.rating - b.rating;
  });
  displayDOM(sort_data);
  console.log(sort_data);
}

function sortHL() {
  let data = JSON.parse(localStorage.getItem('movies'));
  sort_data = data.sort(function(a, b) {
    return b.rating - a.rating;
  });
  displayDOM(sort_data);
}


function displayDOM(data) {
  let parent = document.querySelector('.carousel');
  parent.innerHTML = null;
  data.forEach(function(el) {

    let container = document.createElement("div");
    container.className = "carousel-cell";

    let poster = document.createElement("img");
    poster.src = el.poster;
    let name = document.createElement("p");
    name.innerText = `Movie: ${el.name}`;
    let release = document.createElement("p");
    release.innerText = `Year: ${el.release_Date}`;
    let rating = document.createElement("p");
    rating.innerText = `Rating: ${el.rating}`;

    container.append(poster, name, release, rating)
    parent.append(container);
  });
}



////Loader/////

getme_dataPromise = new Promise(function(resolve, reject) {

  setTimeout(function() {
    let data = movieData;

    if (data != null) {
      resolve(data);
    } else {
      reject(`ERR: Server could not get your data`);
    }
  }, 5000);
});

//console.log(getme_dataPromise)

getme_dataPromise.then(function(res) {

  displayDOM(res);

}).catch(function(err) {
  console.log('err:', err);
});
* {
  box-sizing: border-box;
}

div>img {
  display: block;
  margin: auto;
  margin-left: 20%;
}


/* changes seen after refresh */

body {
  font-family: sans-serif;
  background: #0c111b;
}

.carousel {
  /* background: #0c111b; */
  width: 95%;
  margin: auto;
  margin-top: 49px;
  padding: 8px 8px;
}

.carousel-cell {
  width: 24%;
  height: 500px;
  margin-right: 80px;
  margin-bottom: 40px;
  /* border: 2px solid red; */
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.flickity-page-dots {
  display: none;
}


/* cell number */

.carousel-cell>img {
  height: 80%;
  width: 100%;
  border-radius: 5px;
}

.carousel-cell>p {
  color: #fff;
  font-size: 0.8em;
  text-align: center;
}
<link rel="stylesheet" href="./body-carousel.css">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<body>
  <button onclick="sortLH()">Low to High</button>
  <button onclick="sortHL()">High to low</button>
  <div class="carousel" data-flickity='{  "cellAlign": "left", "contain": true }'>
    <!-- gif image for loader -->
    <img src="./uxplanet.gif" alt="gif">
  </div>
</body>

<script src="./data.js"></script>
<script src="./body.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

carousel javascript css html
1 Answers

Why are you calling same function three times?

1.displayDOM(sort_data);inside SortLH()

2.displayDOM(res); inside .then

3.displayDOM(sort_data); inside SortHL(). i am calling the function that generates our html one time only that is inside my .then

I am just mimicking the data with an array of objects & checked cells are appended inside .carousel.

Update:Added Loading Animation Before Promise is Resolved or Timeout Duration.

The svg will be generated(length of movieData)times.fore.g in this case we have 2 movies so there are two loading circles.

I don't think there is any other issue. feel free to respond if you think otherwise

/*let svg = `<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
  <path fill="#e72f2f" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
  <animateTransform
                attributeName="transform"
                attributeType="XML"
                type="rotate"
                dur="1s"
                from="0 50 50"
                to="360 50 50"
                repeatCount="indefinite" />
  </path> 
  </svg>`;*/
let movieData = [{
    name: "CuttPutlli",
    release_Date: "2022",
    rating: "5.9/10 ImDb",
    poster: "https://img1.hotstarext.com/image/upload/f_auto,t_web_vl_3x/sources/r1/cms/prod/6531/1326531-v-e6302c49fcd9"
  },
  {
    name: "Thor:Love & Thunder",
    release_Date: "2022",
    rating: "6.5/10 ImDb",
    poster: "https://img1.hotstarext.com/image/upload/f_auto,t_web_vl_3x/sources/r1/cms/prod/8317/1328317-v-56412010beba"
  }
];

const getme_dataPromise = new Promise(function(resolve, reject) {
  /*let parent = document.querySelector(".carousel");
  let i = 0;
  while (i < movieData.length) {
    parent.innerHTML += svg;
    i++
  }*/
  setTimeout(function() {
    let data = movieData;
    if (data != null) {
      resolve(data);
    } else {
      reject(`ERR: Server could not get your data`);
    }
  }, 2000);
});

//console.log(getme_dataPromise)

getme_dataPromise
  .then(function(res) {
    displayDOM(res); //<--------------------Calling The DisplayDom Fuction.
  })
  .catch(function(err) {
    console.log("err:", err);
  });

function displayDOM(data) {
  let parent = document.querySelector(".carousel");
  /*parent.innerHTML = "";*/
  data.forEach(function(el) {
    let container = document.createElement("div");
    container.className = "carousel-cell";
    let poster = document.createElement("img");
    poster.src = el.poster;
    let name = document.createElement("p");
    name.innerText = `Movie: ${el.name}`;
    let release = document.createElement("p");
    release.innerText = `Year: ${el.release_Date}`;
    let rating = document.createElement("p");
    rating.innerText = `Rating: ${el.rating}`;
    container.append(poster, name, release, rating);
    parent.append(container);
  });
}
* {
  box-sizing: border-box;
}


/* changes seen after refresh */

body {
  font-family: sans-serif;
  background: #0c111b;
}

.carousel {
  /* background: #0c111b; */
  width: 95%;
  margin: auto;
  margin-top: 49px;
  padding: 8px 8px;
}

.carousel-cell {
  width: min-content;
  /*let it take the size of the image*/
  /*height: 500ox; let it take the space it needs*/
  margin-right: 80px;
  margin-bottom: 40px;
  /* border: 2px solid red; */
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.flickity-page-dots {
  display: none;
}


/* cell number */

.carousel-cell>img {
  height: 60%;
  /*width: 100%; change only one of height or width to maintaint the aspect ratio*/
  border-radius: 5px;
}

.carousel-cell>p {
  color: #fff;
  font-size: 0.8em;
  text-align: center;
}

svg {
  width: 200px;
  height: 200px;
  margin-bottom: 100px;
  display: block;
}
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<div class="carousel" data-flickity='{  "cellAlign": "left", "contain": true }'></div>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

UmairFarooq0
Related