js-html-cs/comment.html at main · subho-dev/js-html-cs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>News</title>
    <link rel="stylesheet" href="./custom.css" />
  </head>
  <body>
    <div class="container">
      <div class="row1">
        <p style="margin-left: 40px;">
          <span style="font-size: 20px;"
            ><strong
              ><a href="index.html">Hacker News</a>&nbsp; &nbsp; &nbsp;</strong
            ></span
          ><span class="tab"><a href="index.html">News</a>&nbsp; </span
          ><span style="font-size: 16px;">&nbsp;|</span
          ><span class="tab"
            >&nbsp; &nbsp;<a href="analytics.html">Analytics</a>&nbsp;
            &nbsp;</span
          ><span style="font-size: 16px;">|&nbsp;</span
          ><span class="tab">
            &nbsp;<a href="notes.html">Notes</a>&nbsp; &nbsp;</span
          ><span style="font-size: 16px;">|</span
          ><span class="tab"
            >&nbsp; &nbsp;<a href="submit.html">Submit</a></span
          >
        </p>
      </div>
      <div class="row2">
        <form onsubmit="addEntry(event)">
          <textarea
            name="cmt"
            id="cmt"
            class="cmt"
            rows="4"
            cols="50"
            placeholder="Enter what you want to note down...."
          ></textarea
          ><br />
          <button class="submit">
            Submit
          </button>
        </form>
      </div>
      <hr class="comment_hr" />
      <div class="row2">
        <h2 id="heading"></h2>
        <div class="row2">
          <div id="comment_area"></div>
        </div>
      </div>
    </div>

    <script src="./custom.js"></script>
    <script>
      addEntry = (e) => {
        e.preventDefault();
        let entries = [];
        let cmt = document.getElementById("cmt").value;
        var id = localStorage.getItem("id");
        var cmt_ls = "cmt_ls" + id;
        let timestamp = Date.now();
        var cmt_ls_time = "cmt_ls_time" + id;
        if (localStorage.getItem(cmt_ls)) {
          entries = JSON.parse(localStorage.getItem(cmt_ls));
          entries.push(cmt);
          localStorage.setItem(cmt_ls, JSON.stringify(entries));
        } else {
          entries.push(cmt);
          localStorage.setItem(cmt_ls, JSON.stringify([cmt]));
        }
        entries = [];
        if (localStorage.getItem(cmt_ls_time)) {
          entries = JSON.parse(localStorage.getItem(cmt_ls_time));
          entries.push(timestamp);
          localStorage.setItem(cmt_ls_time, JSON.stringify(entries));
        } else {
          entries.push(timestamp);
          localStorage.setItem(cmt_ls_time, JSON.stringify([timestamp]));
        }
        document.getElementById("cmt").value = "";
        location.reload();
        //  document.getElementById("guestview").innerHTML= html
      };

      var id = localStorage.getItem("id");
      var cmt_ls = "cmt_ls" + id;
      var cmt_ls_time = "cmt_ls_time" + id;
      if (localStorage.getItem(cmt_ls)) {
        var retrievedData = localStorage.getItem(cmt_ls);
        var comment = JSON.parse(retrievedData);
        retrievedData = localStorage.getItem(cmt_ls_time);
        var timestmp = JSON.parse(retrievedData);
        var comment_html = "";
        var curr = Date.now();

        var x = comment.length;
        for (i = 0; i < x; i++) {
          var elsp = timeDifference(timestmp[i], curr);
          comment_html += '<p class="cmt_time">' + elsp + "</p>";
          comment_html += '<p class="cmts">' + comment[i] + "</p>";
        }
        if (document.getElementById("comment_area")) {
          document.getElementById("comment_area").innerHTML += comment_html;
          document.getElementById("heading").innerHTML = "Comment Section";
        }
      }
    </script>
  </body>
</html>