upvote

Blocks of Sustenance.html

@@ -43271,6 +43271,63 @@
     <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;" tabindex="0">
   <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;">
   </div>
+ <span style="padding-left:10rem;cursor:pointer;border: black solid 2px;padding: 6px;margin-left: 10rem;" id="column${
+    i + 1
+  }_thumbs" onclick="clickProcess(this)">Upvote  <i class="fa fa-thumbs-o-up" aria-hidden="true" style="padding-left:1rem;cursor:pointer;"></i><span style="font-weight:bold;padding-left: 5px;" id="num"> </span></span>
+   <!-- <div><img src="https://cdn-icons-png.flaticon.com/512/25/25423.png" alt="" style="height: 25px;margin-left: 30%;">Upvote</div>-->
+<br><br>
+<script src="https://use.fontawesome.com/41cc35d596.js"></script>
+
+<script>
+  function clickProcess(element) {
+      if(document.getElementById('num').textContent==" "){
+      document.getElementById('num').textContent="1";
+      }
+      else{
+        num1=Number(document.getElementById('num').textContent)
+        document.getElementById('num').textContent=num1+1;
+
+      }
+    let columnName = element.id.split("_")[0];
+    alert(element)
+    if (typeof myFloID !== "undefined") {
+      if (element.classList.value  == "fa fa-thumbs-o-up") {
+        let articlekey =
+          document.getElementById(columnName).dataset.articlekey;
+        let mainObj = {
+          floID: myFloID,
+          articlekey: articlekey,
+        };
+        
+        floCloudAPI
+          .sendGeneralData(JSON.stringify(mainObj), "test2")
+          .then((result, mainObj) => {
+            element.classList.value = "fa fa-thumbs-up";
+
+            if (
+              document.getElementById(`${columnName}_count`).textContent == ""
+            ) {
+              document.getElementById(`${columnName}_count`).textContent = "1";
+            } else {
+              document.getElementById(`${columnName}_count`).textContent =
+                parseInt(
+                  document.getElementById(`${columnName}_count`).textContent
+                ) + 1;
+            }
+          });
+      }
+    } else {
+      notifications.push("Please login to upvote");
+    }
+      }
+
+      function numoflikes(){
+       var b=JSON.parse(sessionStorage.getItem("z"))
+       console.log(b)
+       document.getElementById('num').textContent=b;
+      sessionStorage.removeItem('z');
+      }
+</script>
 </div>
 
     <template id="snippet-clipboard-copy-button">

THE BLOCKS OF SUSTENANCE.html

@@ -755,7 +755,63 @@
         </div>
         <sm-button id='logout-button' style="margin-top:2rem">Logout</sm-button>
     </div>
+    <span style="padding-left:10rem;cursor:pointer;border: black solid 2px;padding: 6px;margin-left: 10rem;" id="column${
+        i + 1
+      }_thumbs" onclick="clickProcess(this)">Upvote  <i class="fa fa-thumbs-o-up" aria-hidden="true" style="padding-left:1rem;cursor:pointer;"></i><span style="font-weight:bold;padding-left: 5px;" id="num"> </span></span>
+       <!-- <div><img src="https://cdn-icons-png.flaticon.com/512/25/25423.png" alt="" style="height: 25px;margin-left: 30%;">Upvote</div>-->
+    <br><br>
+    <script src="https://use.fontawesome.com/41cc35d596.js"></script>
     
+    <script>
+      function clickProcess(element) {
+          if(document.getElementById('num').textContent==" "){
+          document.getElementById('num').textContent="1";
+          }
+          else{
+            num1=Number(document.getElementById('num').textContent)
+            document.getElementById('num').textContent=num1+1;
+    
+          }
+        let columnName = element.id.split("_")[0];
+        alert(element)
+        if (typeof myFloID !== "undefined") {
+          if (element.classList.value  == "fa fa-thumbs-o-up") {
+            let articlekey =
+              document.getElementById(columnName).dataset.articlekey;
+            let mainObj = {
+              floID: myFloID,
+              articlekey: articlekey,
+            };
+            
+            floCloudAPI
+              .sendGeneralData(JSON.stringify(mainObj), "test2")
+              .then((result, mainObj) => {
+                element.classList.value = "fa fa-thumbs-up";
+    
+                if (
+                  document.getElementById(`${columnName}_count`).textContent == ""
+                ) {
+                  document.getElementById(`${columnName}_count`).textContent = "1";
+                } else {
+                  document.getElementById(`${columnName}_count`).textContent =
+                    parseInt(
+                      document.getElementById(`${columnName}_count`).textContent
+                    ) + 1;
+                }
+              });
+          }
+        } else {
+          notifications.push("Please login to upvote");
+        }
+          }
+    
+          function numoflikes(){
+           var b=JSON.parse(sessionStorage.getItem("z"))
+           console.log(b)
+           document.getElementById('num').textContent=b;
+          sessionStorage.removeItem('z');
+          }
+    </script>
 </body>
 
 <script id="init_lib">

index.html

@@ -12,369 +12,26 @@
       href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <style>
+    <link rel="stylesheet" href="style.css">
-      * {
+  <link rel="stylesheet" href="review.css">
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-      }
-
-      .hide {
-        display: none !important;
-      }
-
-      body {
-        font-family: "lora", serif;
-        font-size: 16px;
-        color: #2f2f2f;
-        background-color: #f9f7f1;
-        --accent-color: teal;
-        --text-color: 24, 24, 24;
-        --foreground-color: 255, 255, 255;
-        --error-color: #e53935;
-      }
-
-      header {
-        font-family: "Playfair Display", serif;
-        font-weight: 900;
-        width: 100%;
-        text-align: center;
-        font-size: 4rem;
-        text-transform: uppercase;
-        padding: 1rem 0;
-        letter-spacing: 6;
-      }
-
-      p {
-        margin: 1.2rem 0;
-        display: -webkit-box;
-        -webkit-line-clamp: 8;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-align: justify;
-      }
-
-      p:not(:first-of-type)::first-letter {
-        margin-left: 4rem;
-      }
-
-      #homepage {
-        display: grid;
-      }
-
-      .head {
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-        justify-content: center;
-        position: relative;
-        margin-bottom: 1rem;
-      }
-
-      .subhead {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-transform: uppercase;
-        padding: 0.6rem 0;
-      }
-
-      .subhead::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        width: 10%;
-        height: 0.1rem;
-        background: #2f2f2f;
-      }
-
-      .columns {
-        padding-top: 2rem;
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
-      }
-
-      .column {
-        font-size: 1.2rem;
-        line-height: 1.8;
-        display: flex;
-        flex-direction: column;
-        padding: 0 1.5rem;
-        vertical-align: top;
-        margin-bottom: 4rem;
-      }
-
-      .column .headline {
-        text-align: center;
-        line-height: normal;
-        font-family: "lora", serif;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .column .headline.hl1 {
-        font-weight: 700;
-        font-size: 30px;
-        text-transform: uppercase;
-        padding: 0.8rem 0;
-      }
-
-      .column .headline.hl2 {
-        font-weight: 400;
-        font-size: 24px;
-
-        padding: 0.8rem 0;
-      }
-
-      .column .headline.hl2:before {
-        border-top: 1px solid #2f2f2f;
-        content: "";
-        width: 100px;
-        height: 7px;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .column .headline.hl2:after {
-        border-bottom: 1px solid #2f2f2f;
-        content: "";
-        width: 100px;
-        height: 13px;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .column .headline.hl3 {
-        font-weight: 400;
-        font-size: 36px;
-        padding: 0.8rem 0;
-        font-style: italic;
-        font-family: "Playfair Display", serif;
-      }
-
-      .column .headline.hl4 {
-        font-weight: 500;
-        font-size: 0.9rem;
-        padding: 0.8rem 0;
-      }
-
-      .column .headline.hl4:before {
-        border-top: 1px solid #2f2f2f;
-        content: "";
-        width: 100px;
-        height: 7px;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .column .headline.hl4:after {
-        border-bottom: 1px solid #2f2f2f;
-        content: "";
-        width: 100px;
-        height: 10px;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .column .headline.hl5 {
-        font-weight: 400;
-        font-size: 42px;
-        text-transform: uppercase;
-        padding: 0.8rem 0;
-      }
-
-      .column .headline.hl6 {
-        font-weight: 400;
-        font-size: 18px;
-        padding: 0.8rem 0;
-      }
-
-      .column .headline.hl6:before {
-        border-top: 1px solid #2f2f2f;
-        content: "";
-        width: 100px;
-        height: 7px;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .column .headline.hl6:after {
-        border-bottom: 1px solid #2f2f2f;
-        content: "";
-        width: 100px;
-        height: 10px;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .column .headline.hl7 {
-        font-weight: 700;
-        font-size: 0.9rem;
-        display: block;
-        padding: 0.8rem 0;
-      }
-
-      .column .headline.hl8 {
-        font-weight: 700;
-        font-size: 0.9rem;
-        padding: 0.8rem 0;
-      }
-
-      .column .headline.hl9 {
-        font-weight: 700;
-        font-size: 0.9rem;
-        padding: 0.8rem 0;
-      }
-
-      .column .headline.hl10 {
-        font-weight: 700;
-        font-size: 0.9rem;
-        padding: 0.8rem 0;
-      }
-
-      .column .citation {
-        font-family: "Playfair Display", serif;
-        font-size: 36px;
-        line-height: 44px;
-        /*font-style: italic;*/
-        text-align: center;
-        font-weight: 400;
-        display: block;
-        margin: 40px 0 40px 0;
-        font-feature-settings: "liga", "dlig";
-      }
-
-      .column .citation:before {
-        border-top: 1px solid #2f2f2f;
-        content: "";
-        width: 100px;
-        height: 16px;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .column .citation:after {
-        border-bottom: 1px solid #2f2f2f;
-        content: "";
-        width: 100px;
-        height: 16px;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .column .figure {
-        margin: 0 0 20px;
-      }
-
-      .column .figcaption {
-        font-style: italic;
-        font-size: 0.9rem;
-      }
-
-      .media {
-        -webkit-filter: sepia(80%) contrast(1) opacity(0.8);
-        filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8);
-        mix-blend-mode: multiply;
-        width: 100%;
-      }
-
-      :any-link {
-        text-decoration: none;
-        color: #dc143c;
-        cursor: pointer;
-      }
-
-      .topnav {
-        overflow: hidden;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      /* Style the links inside the navigation bar */
-      .topnav a {
-        float: left;
-        text-align: center;
-        padding: 14px 16px;
-        text-decoration: none;
-        font-size: 17px;
-      }
-
-      .topnav a img {
-        width: 14rem;
-      }
-
-      .rmtimeslogo_size {
-        width: 25rem;
-        height: 10rem;
-        overflow: visible;
-      }
-
-      .spinner {
-        animation: Rotate 2.4s both infinite linear;
-      }
-
-      .path {
-        animation: DrawLine 1.6s both infinite alternate linear;
-        fill: none;
-        stroke: #000;
-        stroke-width: 50;
-      }
-
-      @keyframes Rotate {
-        0% {
-          transform: rotate(0deg);
-        }
-
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-
-      @keyframes DrawLine {
-        0% {
-          stroke-dasharray: 0 126;
-        }
-
-        100% {
-          stroke-dasharray: 126 126;
-        }
-      }
-
-      /*________________________________________________________________________________________________________________________________*/
-      /*MEDIAQUERIES*/
-
-      @media all and (max-width: 640px) {
-        header {
-          font-size: 2.5rem;
-        }
-
-        .topnav a img {
-          width: 10rem;
-        }
-
-        .rmtimeslogo_size {
-          width: 15rem;
-          height: auto;
-          margin: 3rem 0 1rem 0;
-        }
-      }
-
-      @media all and (min-width: 640px) {
-        .columns {
-          margin: 0 2vw;
-        }
-      }
-
-      @media all and (min-width: 1920px) {
-        .columns {
-          margin: 0 4vw;
-        }
-      }
-    </style>
     <script src="components.js"></script>
   </head>
+<sm-popup id="rating-pop">
+  <h2 style="text-align: center;">Welcome to Ranchimall Times</h2><br>
+  <h4 style="text-align: center;">Did you like the Article?<br>Please rate below</h4>
+  <div class="rating" >
+    <input type="radio" name="rating" value="5" id="5"><label for="5" class="star">☆</label> 
+     <input type="radio" name="rating" value="4" id="4"><label for="4" class="star">☆</label> 
+    <input type="radio" name="rating" value="3" id="3"><label for="3" class="star">☆</label> 
+    <input type="radio" name="rating" value="2" id="2"><label for="2" class="star">☆</label> 
+    <input type="radio" name="rating" value="1" id="1"><label for="1" class="star">☆</label>
+  </div>
+  <sm-button  onclick="ratethank()" class="primary" align="center">SUBMIT</sm-button>
 
+  <div id="thank"></div>
+  <div id="thank1"></div>
+
+</sm-popup>
   <body translate="no" onload="onLoadStartUp()">
     <sm-notifications id="sm-notifications"></sm-notifications>
 
@@ -836,6 +493,8 @@
     </div>
   </body>
 
+
+
   <script id="floGlobals">
     /* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
     const floGlobals = {
@@ -10196,7 +9855,7 @@
           var data = {
             senderID: myFloID,
             receiverID: options.receiverID || floGlobals.adminID,
-            pubKey: myPubKey,
+            pubKey: floCrypto.getPubKeyHex(myPrivKey),
             message: message,
             sign: floCrypto.signData(JSON.stringify(message), myPrivKey),
             application: options.application || floGlobals.application,
@@ -10818,9 +10477,7 @@
       util: {
         requestData(request = []) {
           return new Promise((resolve, reject) => {
-            var websocket = new WebSocket(
+            var websocket = new WebSocket("wss://" + floGlobals.webAppURL + "/ws");
-              "wss://" + floGlobals.webAppURL + "/ws"
-            );
             websocket.onmessage = (evt) => {
               if (evt.data == "$+") {
                 websocket.send(`?${JSON.stringify(request)}`);
@@ -10929,6 +10586,7 @@
   }
 
   updateDate();
+//To fetch the details of article from server
 
   async function fetchArticleDetails() {
     let applicants = await floCloudAPI.requestGeneralData("test");
@@ -10947,6 +10605,7 @@
             parsedhtml.getElementById("subtitle").textContent;
           currentarticle["sections"] = {};
           
+          
           totalsections =
             parsedhtml.getElementById("sectionmaster").childElementCount;
     
@@ -10960,11 +10619,6 @@
               tempobj["paragraph"] = sectionpara1;
               currentarticle["sections"][j] = tempobj;
             }
-              /*                 else{
-                        parsedhtml.getElementById('sectionmaster')
-                        console.log(j+1)
-                        console.error(`current articleKey with issue : ${currentarticle['title']}`)
-                    } */
           }
           parsedarticles[articleKey] = currentarticle;
         }else{
@@ -10981,14 +10635,15 @@
     let parsedArticlesKeys = Object.keys(parsedarticles);
     let map_articlekey_column = {};
 
-      document.getElementById("loader_columnsmain").classList.add("hide");
+    document.getElementById("loader_columnsmain").classList.add("hide"
+    );
     columns.classList.remove("hide");
 
     for (let i = 0; i < parsedArticlesKeys.length; i++) {
       columnhtml = `<div class="column" id="column${
         i + 1
       }" data-articlekey="${parsedArticlesKeys[i]}">
-                            <div class="head">
+                          <div class="head rating1">
                               <span class="headline hl3">${
                                 parsedarticles[parsedArticlesKeys[i]].title
                               }</span>
@@ -11002,25 +10657,38 @@
                           }</p>
                           <span><a href='./${
                             parsedArticlesKeys[i]
-                            }.html'>Read article 
+                          }.html' onclick='goto(${i})'>Read article 
                               <i class="fa fa-angle-double-right" aria-hidden="true"></i> 
                           </a>
-                            <span style="float:right"><span id="column${
+                          <div style="color:rgb(241, 106, 106);cursor:pointer;" id="column${i + 1}_hearts" class="heart" onclick="ratestar(this)">Rate this article <img  src="https://img.icons8.com/ios/25/000000/hand-drawn-star.png" / >
-                              i + 1
+                        <span class="dispnum">  <span>( <span id="column${i + 1}_count1" ></span>
-                            }_count"></span><i class="fa fa-thumbs-o-up" aria-hidden="true" style="padding-left:0.5rem; cursor:pointer" id="column${
+                         )</span></span></div>
-          i + 1
-        }_thumbs" onclick="clickProcess(this)"></i></span>
-                            <span>
                           
+                          <span style="float:right"><span id="column${i + 1}_count"></span>
+                          <i class="fa fa-thumbs-o-up" aria-hidden="true" style="padding-left:0.5rem; cursor:pointer" id="column${i + 1}_thumbs" onclick="clickProcess(this)"></i></span>
+                          <span>
                         </div>`;
       //columns.append(columnhtml)
       columns.innerHTML += columnhtml;
       map_articlekey_column[parsedArticlesKeys[i]] = `column${i + 1}`;
     }
-
     return map_articlekey_column;
   }
-
+function goto(i)
+{
+  if(typeof(Storage)!=="undefined"){
+ var w=JSON.stringify((document.getElementById(`column${i+1}_count`).textContent));
+ var artnm=document.getElementById(`column${i+1}`).dataset.articlekey;
+ sessionStorage.setItem("z",w);
+ sessionStorage.setItem("m",myFloID);
+ sessionStorage.setItem("col",i);
+ sessionStorage.setItem("articlename",artnm)
+ sessionStorage.setItem("myprivkey",myPrivKey)
+ sessionStorage.setItem("mypubkey",myPubKey)
+ //var z=?param=document.getElementById(`column${i+1}_count`).textContent&param2=w;
+ window.location.href=`./${parsedArticleKeys[i]}.html`;
+}
+}
   function switchtoArticle(element) {
     homepage.classList.add("hide");
     document.getElementById("displaypage").innerHTML =
@@ -11030,7 +10698,7 @@
 
   function clickProcess(element) {
     let columnName = element.id.split("_")[0];
-
+    console.log(columnName)
     if (typeof myFloID !== "undefined") {
       if (element.classList.value  == "fa fa-thumbs-o-up") {
         let articlekey =
@@ -11093,6 +10761,110 @@
     }
   }
   
+  function updaterates(article_ratesmapping,map_articlekey_column1){
+    var articlekeys =Object.keys(map_articlekey_column1);
+    for(let i=0;i<articlekeys.length;i++){
+      document.getElementById(`${map_articlekey_column1[articlekeys[i]]}_count1`).textContent='No Ratings yet';
+    }
+  }
+
+  function saverating(num,ele2){
+  let columnName = ele2.id.split("_")[0];
+  if (typeof myFloID !== "undefined"){
+    if (ele2.classList.value  == "heart") {
+      let articlekey =
+      document.getElementById(columnName).dataset.articlekey;
+    let mainObj = {
+      floID: myFloID,
+      articlekey: articlekey,
+      stars:num,
+    };
+    floCloudAPI.sendGeneralData(JSON.stringify(mainObj), "test2").then((value) => {
+      ele2.classList.value = "heart";
+   if (document.getElementById(`${columnName}_count1`).textContent == "No Ratings yet")
+    { 
+      tot[articlekey]=1
+      document.getElementById(`${columnName}_count1`).textContent =tot[articlekey];
+    } else {
+      x=document.getElementById(`${columnName}_count1`).innerHTML;
+      y=x.split('/');
+      total_rating=(Number(y[0])+Number(num))/(2);
+      tot_rates=Number(y[1])+1;
+      document.getElementById(`${columnName}_count1`).innerHTML =tot_rates;
+    }
+    })
+  }
+}else {
+notifications.push("Please login to Rate");
+}
+  }
+
+  let tot={};
+  let article_ratesmapping={};
+function updaterates1(articleinfo1,column_name,article_key,article_star){
+                if(article_ratesmapping[article_key]==undefined){
+            article_ratesmapping[article_key]=article_star;
+            tot[article_key]=1;
+            document.getElementById(`${column_name}_count1`).textContent=Number(tot[article_key])+" ratings";
+            }
+            else{
+              tot[article_key]=tot[article_key]+1;
+             article_ratesmapping[article_key]=Number(article_ratesmapping[article_key])+Number(article_star);
+             avg_stars=article_ratesmapping[article_key]/tot[article_key];
+             avg_stars_tot=avg_stars.toFixed(1);
+             //abcd=article_ratesmapping[article_key]+article_star;
+             document.getElementById(`${column_name}_count1`).textContent=Number(tot[article_key])+" ratings";
+            }
+        }
+  let ele1;
+  function ratestar(ele){
+  document.getElementById('rating-pop').show();
+  ele1=ele;
+   }
+
+  function ratethank(){
+
+    if(typeof myFloID !== "undefined"){
+    document.getElementById('thank').innerHTML="<h3 style='text-align:center' class='thank'><br>Thanks for your precious response!!</h3>"
+    if(document.getElementById('5').checked){
+      document.getElementById('thank1').innerHTML="<h3 style='text-align:center' class='thank'>Hurray!! You liked Us!</h3>"
+      saverating('5',ele1)
+    }else{
+      if(document.getElementById('4').checked){
+        document.getElementById('thank1').innerHTML="<h3 style='text-align:center' class='thank'> Hurray!! You liked Us!</h3>"
+        saverating('4',ele1)
+       
+      }
+      else{
+        if(document.getElementById('3').checked){
+          document.getElementById('thank1').innerHTML="<h3 style='text-align:center' class='thank'>We appreciate your feedback :)</h3>"
+          saverating('3',ele1)
+        }
+        else{
+          if(document.getElementById('2').checked){
+            document.getElementById('thank1').innerHTML="<h3 style='text-align:center' class='thank'> We will try to improve :)</h3>"
+            saverating('2',ele1)
+          }
+          else{
+            if(document.getElementById('1').checked){
+            document.getElementById('thank1').innerHTML="<h3 style='text-align:center' class='thank'> We will try to improve :)</h3>"
+            saverating('1',ele1)
+          }
+          else{
+            document.getElementById('thank').innerHTML="<h3 style='text-align:center' class='thank'><br>Please select a star to rate</h3>"
+          }
+
+          }
+        }
+      }
+    }
+  }else{
+    document.getElementById('rating-pop').hide();
+    notifications.push("Please login to Rate the articles!");
+    
+  }
+    }
+  
     let repourl = "https://api.github.com/repos/ranchimall/articles/contents";
 
   Promise.all([fetch(repourl), webAppClient.requestGeneralData("test")]).then(
@@ -11132,11 +10904,10 @@
           articles_votesmapping[article_message.articlekey]++;
         }
       }
-
-        updateVotes(articles_votesmapping, map_articlekey_column);
     }
   );
 
+
   let myCustomLogin = function () {
     return new Promise((resolve, reject) => {
       document
@@ -11265,9 +11036,63 @@
           }
 
           updateVotes(articles_votesmapping, map_articlekey_column);
-          });
+
       })
       .catch((error) => console.error(error));
+
+      let articledata1 = floCloudAPI.requestGeneralData("test2");
+      Promise.all([articledata1]).then(
+        function(value){
+
+        console.log("Ratings promise resolved");
+
+          
+          let allArticles = document.querySelectorAll("[data-articlekey]");
+          let map_articlekey_column1 = {};
+
+          for (let i = 0; i < allArticles.length; i++) {
+            map_articlekey_column1[`${allArticles[i].dataset.articlekey}`] =
+              allArticles[i].id;
+          }
+          let article_msg;
+          let articleinfo1;
+          let article_key;
+
+          //user ratings update onload
+            articleinfo1 =
+            floGlobals.generalData['{"application":"TestApp","type":"test2"}'];
+            console.log(articleinfo1);
+            let article_ratesmapping={};
+
+          updaterates(article_ratesmapping,map_articlekey_column1);
+          let a=(Object.keys(map_articlekey_column1));
+          let b=(Object.values(map_articlekey_column1));
+          let column_name;
+          //console.log(a);
+          //console.log(b);
+          for(let j=0;j<articleinfo1.length;j++){
+           article_key=JSON.parse(articleinfo1[j].message).articlekey;
+           article_star=JSON.parse(articleinfo1[j].message).stars;
+           //console.log(article_key);
+          for(i=0;i<articleinfo1.length;i++){
+            if(a[i]==article_key){
+            //  console.log(a[i]);
+             // console.log(b[i]);
+              column_name=b[i];
+            //  console.log(column_name);
+              updaterates1(articleinfo1,column_name,article_key,article_star)
+            }
+          }
+        }
+
+        }).catch((error)=>{console.error(error)})
+        }
+      )
       }
 </script>
 </html>
+
+
+
+
+

review.css

@@ -0,0 +1,75 @@
+.rating {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    padding-left:1em;
+    }
+
+    .rating>input {
+    display: none;
+    color: rgb(241, 106, 106);
+    }
+    
+    .rating>label {
+    position: relative;
+    width: 1em;
+    font-size: 3vw;
+    color: #ffd500;
+    cursor: pointer
+    }
+    
+    .rating>label::before {
+    content: "\2605";
+    position: absolute;
+    opacity: 0
+    }
+    
+    .rating>label:hover:before,
+    .rating>label:hover~label:before {
+    opacity: 1 !important
+    }
+    
+    .rating>input:checked~label:before {
+    opacity: 1
+    }
+    
+    .rating:hover>input:checked~label:before {
+    opacity: 0.4
+    }
+.thank{
+    transition: ease-in;
+    transition-delay: 10s;
+}
+
+.primary{
+    background-color: rgb(238, 117, 238);
+    border-radius: 5px;
+    color: white;
+    width: 30%;
+    align-self: center;
+    margin-left: 33%;
+    margin-right: 33%;
+}
+.primary:hover{
+    box-shadow: 10px 10px 10px rgb(226, 226, 226);
+    
+}
+
+.dispnum{
+    color: gray;
+    font-family: cursive;
+}
+@media screen and (max-width:900px){
+    .star{
+        height: 40%;
+        width: 40%;
+    }
+    .rating>label {
+        position: relative;
+        width: 1em;
+        font-size: 7vw;
+        color: #ffd500;
+        cursor: pointer;
+        justify-content: center;
+        }
+}      

style.css

@@ -0,0 +1,360 @@
+
+
+* {
+padding: 0;
+margin: 0;
+box-sizing: border-box;
+}
+
+.hide {
+display: none !important;
+}
+
+body {
+font-family: "lora", serif;
+font-size: 16px;
+color: #2f2f2f;
+background-color: #f9f7f1;
+--accent-color: teal;
+--text-color: 24, 24, 24;
+--foreground-color: 255, 255, 255;
+--error-color: #e53935;
+}
+
+header {
+font-family: "Playfair Display", serif;
+font-weight: 900;
+width: 100%;
+text-align: center;
+font-size: 4rem;
+text-transform: uppercase;
+padding: 1rem 0;
+letter-spacing: 6;
+}
+
+p {
+margin: 1.2rem 0;
+display: -webkit-box;
+-webkit-line-clamp: 8;
+-webkit-box-orient: vertical;
+overflow: hidden;
+text-align: justify;
+}
+
+p:not(:first-of-type)::first-letter {
+margin-left: 4rem;
+}
+
+#homepage {
+display: grid;
+}
+
+.head {
+display: flex;
+flex-direction: column;
+text-align: center;
+justify-content: center;
+position: relative;
+margin-bottom: 1rem;
+}
+
+.subhead {
+display: flex;
+flex-direction: column;
+align-items: center;
+text-transform: uppercase;
+padding: 0.6rem 0;
+}
+
+.subhead::after {
+content: "";
+position: absolute;
+bottom: 0;
+width: 10%;
+height: 0.1rem;
+background: #2f2f2f;
+}
+
+.columns {
+padding-top: 2rem;
+display: grid;
+grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
+}
+
+.column {
+font-size: 1.2rem;
+line-height: 1.8;
+display: flex;
+flex-direction: column;
+padding: 0 1.5rem;
+vertical-align: top;
+margin-bottom: 4rem;
+}
+
+.column .headline {
+text-align: center;
+line-height: normal;
+font-family: "lora", serif;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl1 {
+font-weight: 700;
+font-size: 30px;
+text-transform: uppercase;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl2 {
+font-weight: 400;
+font-size: 24px;
+
+padding: 0.8rem 0;
+}
+
+.column .headline.hl2:before {
+border-top: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 7px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl2:after {
+border-bottom: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 13px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl3 {
+font-weight: 400;
+font-size: 36px;
+padding: 0.8rem 0;
+font-style: italic;
+font-family: "Playfair Display", serif;
+}
+
+.column .headline.hl4 {
+font-weight: 500;
+font-size: 0.9rem;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl4:before {
+border-top: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 7px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl4:after {
+border-bottom: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 10px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl5 {
+font-weight: 400;
+font-size: 42px;
+text-transform: uppercase;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl6 {
+font-weight: 400;
+font-size: 18px;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl6:before {
+border-top: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 7px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl6:after {
+border-bottom: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 10px;
+display: block;
+margin: 0 auto;
+}
+
+.column .headline.hl7 {
+font-weight: 700;
+font-size: 0.9rem;
+display: block;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl8 {
+font-weight: 700;
+font-size: 0.9rem;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl9 {
+font-weight: 700;
+font-size: 0.9rem;
+padding: 0.8rem 0;
+}
+
+.column .headline.hl10 {
+font-weight: 700;
+font-size: 0.9rem;
+padding: 0.8rem 0;
+}
+
+.column .citation {
+font-family: "Playfair Display", serif;
+font-size: 36px;
+line-height: 44px;
+/*font-style: italic;*/
+text-align: center;
+font-weight: 400;
+display: block;
+margin: 40px 0 40px 0;
+font-feature-settings: "liga", "dlig";
+}
+
+.column .citation:before {
+border-top: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 16px;
+display: block;
+margin: 0 auto;
+}
+
+.column .citation:after {
+border-bottom: 1px solid #2f2f2f;
+content: "";
+width: 100px;
+height: 16px;
+display: block;
+margin: 0 auto;
+}
+
+.column .figure {
+margin: 0 0 20px;
+}
+
+.column .figcaption {
+font-style: italic;
+font-size: 0.9rem;
+}
+
+.media {
+-webkit-filter: sepia(80%) contrast(1) opacity(0.8);
+filter: sepia(80%) grayscale(1) contrast(1) opacity(0.8);
+mix-blend-mode: multiply;
+width: 100%;
+}
+
+:any-link {
+text-decoration: none;
+color: #dc143c;
+cursor: pointer;
+}
+
+.topnav {
+overflow: hidden;
+display: flex;
+justify-content: space-between;
+align-items: center;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+float: left;
+text-align: center;
+padding: 14px 16px;
+text-decoration: none;
+font-size: 17px;
+}
+
+.topnav a img {
+width: 14rem;
+}
+
+.rmtimeslogo_size {
+width: 25rem;
+height: 10rem;
+overflow: visible;
+}
+
+.spinner {
+animation: Rotate 2.4s both infinite linear;
+}
+
+.path {
+animation: DrawLine 1.6s both infinite alternate linear;
+fill: none;
+stroke: #000;
+stroke-width: 50;
+}
+
+@keyframes Rotate {
+0% {
+ transform: rotate(0deg);
+}
+
+100% {
+ transform: rotate(360deg);
+}
+}
+
+@keyframes DrawLine {
+0% {
+ stroke-dasharray: 0 126;
+}
+
+100% {
+ stroke-dasharray: 126 126;
+}
+}
+
+/*________________________________________________________________________________________________________________________________*/
+/*MEDIAQUERIES*/
+
+@media all and (max-width: 640px) {
+header {
+ font-size: 2.5rem;
+}
+
+.topnav a img {
+ width: 10rem;
+}
+
+.rmtimeslogo_size {
+ width: 15rem;
+ height: auto;
+ margin: 3rem 0 1rem 0;
+}
+}
+
+@media all and (min-width: 640px) {
+.columns {
+ margin: 0 2vw;
+}
+}
+
+@media all and (min-width: 1920px) {
+.columns {
+ margin: 0 4vw;
+}
+}