displaying cards with load more functionality-CodePudding

// Fetching the data from JSON
fetch("data.json")
  .then((response) => response.json())
  .then((data) => appendData(data))
  .catch((err) => console.log(err));

// Create main container with divs inside
function appendData(data) {
  let mainContainer = document.getElementById("myData");
  for (let i = 0; i < data.length; i  ) {
    // children divs of the main div
    let div = document.createElement("div");

    // Profile picture
    let profilePic = document.createElement("img");
    profilePic.src = data[i].profile_image;
    profilePic.setAttribute("class", "profilePic");
    div.appendChild(profilePic);

    //Facebook Name

    let name = document.createElement("h3");
    name.innerHTML = data[i].name;
    name.setAttribute("class", "name");
    div.appendChild(name);

    // Date
    let date = document.createElement("h5");
    date.setAttribute("class", "date");
    let months = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ];
    let current_datetime = new Date(data[i].date);
    let formatted_date =
      current_datetime.getDate()  
      " "  
      months[current_datetime.getMonth()]  
      " "  
      current_datetime.getFullYear();
    date.innerHTML = formatted_date;

    div.appendChild(date);

    // Facebook
    let facebookicon = document.createElement("span");
    facebookicon.innerHTML = `<svg width="30" height="25" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.98371 0.0333252C3.57448 0.0333252 0 3.6078 0 8.01704C0 11.9716 2.87829 15.2467 6.65219 15.8809V9.6827H4.72629V7.45218H6.65219V5.80751C6.65219 3.89923 7.81771 2.85932 9.52029 2.85932C10.3357 2.85932 11.0365 2.92009 11.2399 2.94685V4.94151L10.059 4.94209C9.13333 4.94209 8.95486 5.3819 8.95486 6.02751V7.45104H11.1637L10.8756 9.68155H8.95486V15.9342C12.905 15.4535 15.9673 12.095 15.9673 8.01475C15.9673 3.6078 12.3929 0.0333252 7.98371 0.0333252Z" fill="#1778F2"/>
    </svg>`;
    facebookicon.setAttribute("class", "facebookicon");
    div.appendChild(facebookicon);

    // Image
    let img = document.createElement("img");
    img.src = data[i].image;
    img.setAttribute("class", "img");
    div.appendChild(img);

    // Caption under the image
    if (!!data[i].caption.length) {
      let caption = document.createElement("p");
      caption.innerHTML = data[i].caption;
      caption.setAttribute("class", "caption");
      div.appendChild(caption);
    }

    // Like heart icon
    let likeicon = document.createElement("button");
    likeicon.innerHTML = `<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M14.7617 3.26543C14.3999 2.90347 13.9703 2.61634 13.4976 2.42045C13.0248 2.22455 12.518 2.12372 12.0063 2.12372C11.4945 2.12372 10.9878 2.22455 10.515 2.42045C10.0422 2.61634 9.61263 2.90347 9.25085 3.26543L8.50001 4.01626L7.74918 3.26543C7.0184 2.53465 6.02725 2.1241 4.99376 2.1241C3.96028 2.1241 2.96913 2.53465 2.23835 3.26543C1.50756 3.99621 1.09702 4.98736 1.09702 6.02084C1.09702 7.05433 1.50756 8.04548 2.23835 8.77626L2.98918 9.52709L8.50001 15.0379L14.0108 9.52709L14.7617 8.77626C15.1236 8.41448 15.4108 7.98492 15.6067 7.51214C15.8026 7.03935 15.9034 6.53261 15.9034 6.02084C15.9034 5.50908 15.8026 5.00233 15.6067 4.52955C15.4108 4.05677 15.1236 3.62721 14.7617 3.26543V3.26543Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>`;
    likeicon.setAttribute("class", "likeicon");
    likeicon.setAttribute("id", "button"   i);
    div.appendChild(likeicon);
    let buttonfunction = (a) => {
      a;
    };
    buttonfunction("button"   [i]);

    // Number of likes
    let numberOfLikes = document.createElement("span");
    numberOfLikes.innerHTML = data[i].likes;
    numberOfLikes.setAttribute("class", "numberOfLikes");
    div.appendChild(numberOfLikes);

    // Append the children divs to the main div container
    mainContainer.appendChild(div);
  }
}

body {
  font-family: Arial, Helvetica, sans-serif;
}
#myData {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: baseline;
}
#myData div {
  width: 19.5em;
  margin: 10px 0;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.171);
  padding: 18px 5px;
}
#myData div .img {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 20px;
}
#myData div .profilePic {
  width: 3.2em;
  object-fit: cover;
  height: 3.2em;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  display: inline;
  margin-left: 0;
}
#myData div h3.name {
  display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 25px;
  left: 10px;
  font-size: 1.3em;
}
#myData div button {
  border: none;
  background-color: white;
  position: relative;
  top: 2px;
}

#myData div h5 {
  display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 5px;
  left: -105px;
  font-size: 0.8em;
  font-weight: 100;
}
#myData div span.facebookicon {
  position: relative;
  top: -12px;
  right: -36px;
}

#myData div p.caption {
  padding: 0 2px 15px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.171);
}

@media screen and (max-width: 768px) {
  #myData div {
    width: 100%;
    margin: 10px 5px;
  }
  #myData div span.facebookicon {
    position: absolute;
    top: 30px;
    right: 20px;
  }
}
button#loadmore {
  margin: 50px auto;
  display: block;
  font-size: 1.5em;
  border: none;
  background-color: #1778f2;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  padding: 15px 25px;
  cursor: pointer;
  color: azure;
}
button#loadmore:hover {
  color: rgba(65, 65, 65, 0.685);
  background-color: #177af2dc;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TASK frontendk</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <body>
      <div id="myData"></div>
      <button id="loadmore">Load More</button>
    </body>
    <script src="./js.js"></script>
  </body>
</html>

//Json file

    [
    {
        "image": "https://placekitten.com/600/400",
        "caption": "Duis in facilisis lectus. Nulla molestie erat erat, quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2018-03-12 03:00:00",
        "likes": "123",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/100/100"
    },
    {
        "image": "https://placekitten.com/600/410",
        "caption": "Quisque metus nisi, consequat et molestie eget, facilisis ac odio. Nam lorem libero, efficitur ac velit at, egestas tempor arcu. Nullam pharetra ex eget orci lobortis malesuada. Maecenas eget porta felis. Aliquam porttitor, nibh nec ullamcorper fermentum, eros velit lobortis justo, pretium consectetur turpis enim ut nunc. Fusce convallis, ex ut ultrices sodales, ante quam venenatis arcu, vitae mollis magna urna vel eros. Aliquam a sapien nisi. Nullam convallis malesuada suscipit. ",
        "type": "image",
        "source_type": "instagram",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2019-01-12 03:00:00",
        "likes": "0",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/150/100"
    },
    {
        "image": "https://placekitten.com/600/420",
        "caption": "",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2017-01-21 03:00:00",
        "likes": "9866555",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/100/150"
    },
    {
        "image": "https://placekitten.com/600/430",
        "caption": "Etiam eu blandit nisi. Aliquam rutrum faucibus mauris, sed egestas odio viverra at. In elementum sit amet sapien vitae bibendum.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-12 03:00:00",
        "likes": "2",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/120/120"
    },
    {
        "image": "https://placekitten.com/600/440",
        "caption": "Vivamus a sem sit amet nisi pretium pretium. Curabitur blandit ut lectus non bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris leo odio, consectetur a lorem vitae, aliquet placerat orci. Phasellus varius ante sit amet quam mollis, eu efficitur tortor blandit.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2018-04-12 03:00:00",
        "likes": "12343",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/50/50"
    },
    {
        "image": "https://placekitten.com/600/440",
        "caption": "Duis in facilisis lectus. Nulla molestie erat erat, quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-12 03:00:00",
        "likes": "123",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/101/101"
    },
    {
        "image": "https://placekitten.com/800/400",
        "caption": "Duis in facilisis lectus. Nulla molestie erat erat, quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-12 03:00:00",
        "likes": "12",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/150/120"
    },
    {
        "image": "https://placekitten.com/600/500",
        "caption": "Vivamus a sem sit amet nisi pretium pretium. Curabitur blandit ut lectus non bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris leo odio, consectetur a lorem vitae, aliquet placerat orci. Phasellus varius ante sit amet quam mollis, eu efficitur tortor blandit.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2017-12-12 03:00:00",
        "likes": "23",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/140/140"
    },
    {
        "image": "https://placekitten.com/700/400",
        "caption": "Pellentesque lacinia volutpat turpis non fermentum. Cras at pellentesque augue. Aliquam eget metus sit amet turpis consectetur posuere.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2017-12-08 03:00:00",
        "likes": "0",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/100/100"
    },
    {
        "image": "https://placekitten.com/700/500",
        "caption": "Duis in facilisis lectus. Nulla molestie erat erat, quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-02-12 03:00:00",
        "likes": "0",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/102/102"
    },
    {
        "image": "https://placekitten.com/800/600",
        "caption": "Aliquam odio libero, malesuada et iaculis a, facilisis bibendum dolor. Vivamus ultricies congue arcu eu porttitor. Integer libero tortor, volutpat a purus id, mattis tristique tortor. ",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-12 03:00:00",
        "likes": "2",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/103/100"
    },
    {
        "image": "https://placekitten.com/700/600",
        "caption": "Duis in facilisis lectus.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2020-12-12 03:00:00",
        "likes": "1",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/40/100"
    },
    {
        "image": "https://placekitten.com/1600/1400",
        "caption": "Nulla molestie erat erat, quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-15 03:00:00",
        "likes": "2324",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/80/100"
    },
    {
        "image": "https://placekitten.com/1600/400",
        "caption": "Aliquam odio libero, malesuada et iaculis a, facilisis bibendum dolor.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-10-12 03:00:00",
        "likes": "1223",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/80/80"
    },
    {
        "image": "https://placekitten.com/2000/4000",
        "caption": "Quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2016-12-12 03:00:00",
        "likes": "12223",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/110/110"
    },
    {
        "image": "https://placekitten.com/900/600",
        "caption": " Suspendisse finibus lorem nibh, facilisis ullamcorper nunc consequat sit amet. Curabitur ultricies magna ante, ac eleifend lorem auctor porta. Nullam volutpat aliquet lorem, et posuere ex aliquet eu. Quisque elementum sem mauris, a mattis est scelerisque vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut quis massa eget ligula euismod sagittis id congue quam. Duis vestibulum eros sed tincidunt rutrum. Pellentesque in malesuada velit.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2017-12-12 03:00:00",
        "likes": "0",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/110/100"
    },
    {
        "image": "https://placekitten.com/600/410",
        "caption": "Quisque metus nisi, consequat et molestie eget, facilisis ac odio. Nam lorem libero, efficitur ac velit at, egestas tempor arcu. Nullam pharetra ex eget orci lobortis malesuada. Maecenas eget porta felis. Aliquam porttitor, nibh nec ullamcorper fermentum, eros velit lobortis justo, pretium consectetur turpis enim ut nunc. Fusce convallis, ex ut ultrices sodales, ante quam venenatis arcu, vitae mollis magna urna vel eros. Aliquam a sapien nisi. Nullam convallis malesuada suscipit. ",
        "type": "image",
        "source_type": "instagram",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2019-01-12 03:00:00",
        "likes": "0",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/150/100"
    },
    {
        "image": "https://placekitten.com/600/420",
        "caption": "",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2017-01-21 03:00:00",
        "likes": "9866555",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/100/150"
    },
    {
        "image": "https://placekitten.com/600/430",
        "caption": "Etiam eu blandit nisi. Aliquam rutrum faucibus mauris, sed egestas odio viverra at. In elementum sit amet sapien vitae bibendum.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-12 03:00:00",
        "likes": "2",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/120/120"
    },
    {
        "image": "https://placekitten.com/600/440",
        "caption": "Vivamus a sem sit amet nisi pretium pretium. Curabitur blandit ut lectus non bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris leo odio, consectetur a lorem vitae, aliquet placerat orci. Phasellus varius ante sit amet quam mollis, eu efficitur tortor blandit.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2018-04-12 03:00:00",
        "likes": "12343",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/50/50"
    }
]

When the page is opened, four cards should be loaded and displayed. When a Load More button is clicked, it should open another four cards. Clicking the Load More button should keep loading four more cards every time until all cards are loaded, at which point the Load More button should be hidden. ● The hearth icon should be clickable. When it is clicked, the likes counter should increase and the heart icon should change color. When the heart icon is clicked once again, the ‘like’ should be removed, the likes counter should decrease and the heart icon should revert to the original color.

If someone could help me with this and explain the process. Thank you very much.

CodePudding user response：

I have replaced the fetch logic that you have and hard-coded the JSON for the purpose of the test. Once you start using this you will need to remove my hard-coded JSON and put the fetch-logic back, since this is only a proof-of-concept, where I do not care where the JSON is coming from as long as we have a JSON as input.

The data could be displayed at once, but that would violate the 4-card-rule. Instead, I created an onclick for the Load More button that will get the next four elements (or the remainder if there are no four elements) and adds that to the selection.

Then, an onclick is created for the heart icons that will toggle a class that's responsible for the coloring, the inner text of the span that contains the number of likes is converted into an integer, the corresponding operation is performed and the inner text is replaced with the result.

let json = [
    {
        "image": "https://placekitten.com/600/400",
        "caption": "Duis in facilisis lectus. Nulla molestie erat erat, quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2018-03-12 03:00:00",
        "likes": "123",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/100/100"
    },
    {
        "image": "https://placekitten.com/600/410",
        "caption": "Quisque metus nisi, consequat et molestie eget, facilisis ac odio. Nam lorem libero, efficitur ac velit at, egestas tempor arcu. Nullam pharetra ex eget orci lobortis malesuada. Maecenas eget porta felis. Aliquam porttitor, nibh nec ullamcorper fermentum, eros velit lobortis justo, pretium consectetur turpis enim ut nunc. Fusce convallis, ex ut ultrices sodales, ante quam venenatis arcu, vitae mollis magna urna vel eros. Aliquam a sapien nisi. Nullam convallis malesuada suscipit. ",
        "type": "image",
        "source_type": "instagram",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2019-01-12 03:00:00",
        "likes": "0",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/150/100"
    },
    {
        "image": "https://placekitten.com/600/420",
        "caption": "",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2017-01-21 03:00:00",
        "likes": "9866555",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/100/150"
    },
    {
        "image": "https://placekitten.com/600/430",
        "caption": "Etiam eu blandit nisi. Aliquam rutrum faucibus mauris, sed egestas odio viverra at. In elementum sit amet sapien vitae bibendum.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-12 03:00:00",
        "likes": "2",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/120/120"
    },
    {
        "image": "https://placekitten.com/600/440",
        "caption": "Vivamus a sem sit amet nisi pretium pretium. Curabitur blandit ut lectus non bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris leo odio, consectetur a lorem vitae, aliquet placerat orci. Phasellus varius ante sit amet quam mollis, eu efficitur tortor blandit.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2018-04-12 03:00:00",
        "likes": "12343",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/50/50"
    },
    {
        "image": "https://placekitten.com/600/440",
        "caption": "Duis in facilisis lectus. Nulla molestie erat erat, quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-12 03:00:00",
        "likes": "123",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/101/101"
    },
    {
        "image": "https://placekitten.com/800/400",
        "caption": "Duis in facilisis lectus. Nulla molestie erat erat, quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-12 03:00:00",
        "likes": "12",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/150/120"
    },
    {
        "image": "https://placekitten.com/600/500",
        "caption": "Vivamus a sem sit amet nisi pretium pretium. Curabitur blandit ut lectus non bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris leo odio, consectetur a lorem vitae, aliquet placerat orci. Phasellus varius ante sit amet quam mollis, eu efficitur tortor blandit.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2017-12-12 03:00:00",
        "likes": "23",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/140/140"
    },
    {
        "image": "https://placekitten.com/700/400",
        "caption": "Pellentesque lacinia volutpat turpis non fermentum. Cras at pellentesque augue. Aliquam eget metus sit amet turpis consectetur posuere.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2017-12-08 03:00:00",
        "likes": "0",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/100/100"
    },
    {
        "image": "https://placekitten.com/700/500",
        "caption": "Duis in facilisis lectus. Nulla molestie erat erat, quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-02-12 03:00:00",
        "likes": "0",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/102/102"
    },
    {
        "image": "https://placekitten.com/800/600",
        "caption": "Aliquam odio libero, malesuada et iaculis a, facilisis bibendum dolor. Vivamus ultricies congue arcu eu porttitor. Integer libero tortor, volutpat a purus id, mattis tristique tortor. ",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-12 03:00:00",
        "likes": "2",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/103/100"
    },
    {
        "image": "https://placekitten.com/700/600",
        "caption": "Duis in facilisis lectus.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2020-12-12 03:00:00",
        "likes": "1",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/40/100"
    },
    {
        "image": "https://placekitten.com/1600/1400",
        "caption": "Nulla molestie erat erat, quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-15 03:00:00",
        "likes": "2324",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/80/100"
    },
    {
        "image": "https://placekitten.com/1600/400",
        "caption": "Aliquam odio libero, malesuada et iaculis a, facilisis bibendum dolor.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-10-12 03:00:00",
        "likes": "1223",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/80/80"
    },
    {
        "image": "https://placekitten.com/2000/4000",
        "caption": "Quis tempor enim sodales vitae. Sed tempus, libero fringilla rhoncus ullamcorper, justo elit dignissim ex, nec elementum quam sem in urna.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2016-12-12 03:00:00",
        "likes": "12223",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/110/110"
    },
    {
        "image": "https://placekitten.com/900/600",
        "caption": " Suspendisse finibus lorem nibh, facilisis ullamcorper nunc consequat sit amet. Curabitur ultricies magna ante, ac eleifend lorem auctor porta. Nullam volutpat aliquet lorem, et posuere ex aliquet eu. Quisque elementum sem mauris, a mattis est scelerisque vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut quis massa eget ligula euismod sagittis id congue quam. Duis vestibulum eros sed tincidunt rutrum. Pellentesque in malesuada velit.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2017-12-12 03:00:00",
        "likes": "0",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/110/100"
    },
    {
        "image": "https://placekitten.com/600/410",
        "caption": "Quisque metus nisi, consequat et molestie eget, facilisis ac odio. Nam lorem libero, efficitur ac velit at, egestas tempor arcu. Nullam pharetra ex eget orci lobortis malesuada. Maecenas eget porta felis. Aliquam porttitor, nibh nec ullamcorper fermentum, eros velit lobortis justo, pretium consectetur turpis enim ut nunc. Fusce convallis, ex ut ultrices sodales, ante quam venenatis arcu, vitae mollis magna urna vel eros. Aliquam a sapien nisi. Nullam convallis malesuada suscipit. ",
        "type": "image",
        "source_type": "instagram",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2019-01-12 03:00:00",
        "likes": "0",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/150/100"
    },
    {
        "image": "https://placekitten.com/600/420",
        "caption": "",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2017-01-21 03:00:00",
        "likes": "9866555",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/100/150"
    },
    {
        "image": "https://placekitten.com/600/430",
        "caption": "Etiam eu blandit nisi. Aliquam rutrum faucibus mauris, sed egestas odio viverra at. In elementum sit amet sapien vitae bibendum.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://www.facebook.com/EmbedSocial/",
        "date": "2019-12-12 03:00:00",
        "likes": "2",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/120/120"
    },
    {
        "image": "https://placekitten.com/600/440",
        "caption": "Vivamus a sem sit amet nisi pretium pretium. Curabitur blandit ut lectus non bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris leo odio, consectetur a lorem vitae, aliquet placerat orci. Phasellus varius ante sit amet quam mollis, eu efficitur tortor blandit.",
        "type": "image",
        "source_type": "facebook",
        "source_link": "https://instagram.com/embedsocial/",
        "date": "2018-04-12 03:00:00",
        "likes": "12343",
        "name": "John Smith",
        "profile_image": "https://placekitten.com/g/50/50"
    }
];

// Fetching the data from JSON
/*fetch("data.json")
  .then((response) => response.json())
  .then((data) => appendData(data))
  .catch((err) => console.log(err));*/

// Create main container with divs inside
function appendData(data) {
  let mainContainer = document.getElementById("myData");
  for (let i = 0; i < data.length; i  ) {
    // children divs of the main div
    let div = document.createElement("div");

    // Profile picture
    let profilePic = document.createElement("img");
    profilePic.src = data[i].profile_image;
    profilePic.setAttribute("class", "profilePic");
    div.appendChild(profilePic);

    //Facebook Name

    let name = document.createElement("h3");
    name.innerHTML = data[i].name;
    name.setAttribute("class", "name");
    div.appendChild(name);

    // Date
    let date = document.createElement("h5");
    date.setAttribute("class", "date");
    let months = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ];
    let current_datetime = new Date(data[i].date);
    let formatted_date =
      current_datetime.getDate()  
      " "  
      months[current_datetime.getMonth()]  
      " "  
      current_datetime.getFullYear();
    date.innerHTML = formatted_date;

    div.appendChild(date);

    // Facebook
    let facebookicon = document.createElement("span");
    facebookicon.innerHTML = `<svg width="30" height="25" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.98371 0.0333252C3.57448 0.0333252 0 3.6078 0 8.01704C0 11.9716 2.87829 15.2467 6.65219 15.8809V9.6827H4.72629V7.45218H6.65219V5.80751C6.65219 3.89923 7.81771 2.85932 9.52029 2.85932C10.3357 2.85932 11.0365 2.92009 11.2399 2.94685V4.94151L10.059 4.94209C9.13333 4.94209 8.95486 5.3819 8.95486 6.02751V7.45104H11.1637L10.8756 9.68155H8.95486V15.9342C12.905 15.4535 15.9673 12.095 15.9673 8.01475C15.9673 3.6078 12.3929 0.0333252 7.98371 0.0333252Z" fill="#1778F2"/>
    </svg>`;
    facebookicon.setAttribute("class", "facebookicon");
    div.appendChild(facebookicon);

    // Image
    let img = document.createElement("img");
    img.src = data[i].image;
    img.setAttribute("class", "img");
    div.appendChild(img);

    // Caption under the image
    if (!!data[i].caption.length) {
      let caption = document.createElement("p");
      caption.innerHTML = data[i].caption;
      caption.setAttribute("class", "caption");
      div.appendChild(caption);
    }

    // Like heart icon
    let likeicon = document.createElement("button");
    likeicon.innerHTML = `<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M14.7617 3.26543C14.3999 2.90347 13.9703 2.61634 13.4976 2.42045C13.0248 2.22455 12.518 2.12372 12.0063 2.12372C11.4945 2.12372 10.9878 2.22455 10.515 2.42045C10.0422 2.61634 9.61263 2.90347 9.25085 3.26543L8.50001 4.01626L7.74918 3.26543C7.0184 2.53465 6.02725 2.1241 4.99376 2.1241C3.96028 2.1241 2.96913 2.53465 2.23835 3.26543C1.50756 3.99621 1.09702 4.98736 1.09702 6.02084C1.09702 7.05433 1.50756 8.04548 2.23835 8.77626L2.98918 9.52709L8.50001 15.0379L14.0108 9.52709L14.7617 8.77626C15.1236 8.41448 15.4108 7.98492 15.6067 7.51214C15.8026 7.03935 15.9034 6.53261 15.9034 6.02084C15.9034 5.50908 15.8026 5.00233 15.6067 4.52955C15.4108 4.05677 15.1236 3.62721 14.7617 3.26543V3.26543Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>`;
    likeicon.setAttribute("class", "likeicon");
    likeicon.setAttribute("id", "button"   i);
    div.appendChild(likeicon);
    let buttonfunction = (a) => {
      a;
    };
    buttonfunction("button"   [i]);

    // Number of likes
    let numberOfLikes = document.createElement("span");
    numberOfLikes.innerHTML = data[i].likes;
    numberOfLikes.setAttribute("class", "numberOfLikes");
    div.appendChild(numberOfLikes);

    // Append the children divs to the main div container
    mainContainer.appendChild(div);
    for (let item of document.getElementById("myData").children) {
        if (!item.classList.contains("initialized")) {
            item.classList.add("initialized");
            item.querySelector(".likeicon").onclick = function() {
                if (!this.classList.contains("liked")) {
                    this.classList.add("liked");
                    this.parentNode.querySelector(".numberOfLikes").innerText = parseInt(this.parentNode.querySelector(".numberOfLikes").innerText)   1;
                } else {
                    this.classList.remove("liked");
                    this.parentNode.querySelector(".numberOfLikes").innerText = parseInt(this.parentNode.querySelector(".numberOfLikes").innerText) - 1;
                }
            }
        }
    }
  }
}

let jsonIndex = 0;

document.getElementById("loadmore").onclick = function() {
    let collection = [];
    for (let i = 0; (i < 4) && (json.length > jsonIndex); i  ) {
        collection.push(json[jsonIndex  ]);
    }
    appendData(collection);
    if (jsonIndex >= json.length) this.style.display = "none";
}

body {
  font-family: Arial, Helvetica, sans-serif;
}
#myData {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: baseline;
}
#myData div {
  width: 19.5em;
  margin: 10px 0;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.171);
  padding: 18px 5px;
}
#myData div .img {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 20px;
}
#myData div .profilePic {
  width: 3.2em;
  object-fit: cover;
  height: 3.2em;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  display: inline;
  margin-left: 0;
}
#myData div h3.name {
  display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 25px;
  left: 10px;
  font-size: 1.3em;
}
#myData div button {
  border: none;
  background-color: white;
  position: relative;
  top: 2px;
}

#myData div h5 {
  display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 5px;
  left: -105px;
  font-size: 0.8em;
  font-weight: 100;
}
#myData div span.facebookicon {
  position: relative;
  top: -12px;
  right: -36px;
}

#myData div p.caption {
  padding: 0 2px 15px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.171);
}

@media screen and (max-width: 768px) {
  #myData div {
    width: 100%;
    margin: 10px 5px;
  }
  #myData div span.facebookicon {
    position: absolute;
    top: 30px;
    right: 20px;
  }
}
button#loadmore {
  margin: 50px auto;
  display: block;
  font-size: 1.5em;
  border: none;
  background-color: #1778f2;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  padding: 15px 25px;
  cursor: pointer;
  color: azure;
}
button#loadmore:hover {
  color: rgba(65, 65, 65, 0.685);
  background-color: #177af2dc;
}

.liked > svg {
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TASK frontendk</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <body>
      <div id="myData"></div>
      <button id="loadmore">Load More</button>
    </body>
    <script src="./js.js"></script>
  </body>
</html>

CodePudding user response：

If you need to change the color of the heart svg icon to red. You simply modify the answer slightly so that the following css is changed from

.liked > svg {
    background-color: red;
}

.liked > svg {
    color: red;
}

You also need to update the svg <path> tag that has been used to have the fill="currentColor" property. e.g

<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="" fill=currentColor stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Just note that this will change the fill color to red and the stroke will remain black. This can be changed also though using the same method. For more details on the spec you can check it out here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color