Added Like Icon for Confessions

scripts.js

@@ -12,29 +12,42 @@ request.onload = function () {
   // Begin accessing JSON data here
   var data = JSON.parse(this.response)
   if (request.status >= 200 && request.status < 400) {
-    data.forEach(movie => {
+    console.log(data)
+    data.forEach((movie,index) => {
       const card = document.createElement('div')
+      card.setAttribute('id', index)
       card.setAttribute('class', 'card')
+      card.setAttribute('ondblclick', 'setLikeDislike(this)')
 
       const h1 = document.createElement('h1')
       h1.textContent = '<Name for whom this is>'
 
       const p = document.createElement('p')
       p.textContent = movie.title
+
+      const cardBut = document.createElement('div')
+      cardBut.setAttribute('class', 'card-buttons')
 
       const span = document.createElement('i')
-      span.setAttribute('class','fa fa-eye')
+      span.setAttribute('class','fa fa-eye icon')
       span.textContent=(' 111')
-      var t = document.createElement('j')
+      const span2 = document.createElement('i')
+      span2.setAttribute('class','fa fa-heart icon heart-icon')
+      span2.textContent=('')
+      span2.setAttribute('onclick', 'setIconLikeDislike(this)')
+      var t = document.createElement('div')
+      t.setAttribute('class','date')
       var timestamp = Date.now();
       var d = new Date(timestamp);
       t.textContent=(d)
-
+      cardBut.appendChild(span)
+      cardBut.appendChild(span2)
+
       container.appendChild(card)
       card.appendChild(h1)
       card.appendChild(p)
-      card.appendChild(span)
       card.appendChild(t)
+      card.appendChild(cardBut)
 
     })
   } else {
@@ -45,3 +58,13 @@ request.onload = function () {
 }
 
 request.send()
+
+function setLikeDislike(obj){
+  var t1 = document.getElementById(obj.id).childNodes;
+  var t2 = t1[3].childNodes;
+  t2[1].classList.toggle("liked");
+}
+
+function setIconLikeDislike(obj){ 
+  obj.classList.toggle("liked");
+}

style.css

@@ -9,6 +9,7 @@ html {
     line-height: 1.6;
     color: #666;
     background: #f6f6f6;
+    user-select: none;
 }
 
 #root {
@@ -50,11 +51,19 @@ p {
     transition: all 0.2s linear;
     position: relative;
 }
+.card-buttons
+{
+    display: flex;
+    justify-content: space-between;
+}
 
 .card:hover {
     box-shadow: 2px 8px 45px rgba(0, 0, 0, 0.15);
     transform: translate3D(0, -2px, 0);
 }
+.date{
+    margin: 10px;
+}
 
 @media screen and (min-width: 600px) {
     .card {
@@ -129,3 +138,14 @@ fieldset{
     position: absolute;
     color: #8f8e8e;
 }
+
+.icon{
+    margin: 5px;
+    position: unset;
+}
+.heart-icon{
+    font-size: 20px;
+}
+.liked{
+    color: #fb3958;
+}