manit2004.github.io/blog2.html at main · manit2004/manit2004.github.io · 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
<!DOCTYPE html>
<html>
<head>
  <title>Blog 2</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="script.js" ></script>
  <meta name="google-site-verification" content="0dabyVooNMI5gMBX1x2Q_luQoUemA6Ps4JZCJQXQrBk" />
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3785670724469744"
     crossorigin="anonymous"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&family=Josefin+Sans:wght@500&family=Ubuntu&display=swap" rel="stylesheet">
 <link rel="icon" type="image/x-icon" href="me.ico">
 <script>
    function like(blogId) {
        let likes = localStorage.getItem(`likes_${blogId}`) || 0;
        likes = parseInt(likes) + 1;
        document.getElementById(`likes_${blogId}`).innerText = likes;
        localStorage.setItem(`likes_${blogId}`, likes);
    }

    function addComment(blogId) {
        const commentText = document.getElementById(`comment_${blogId}`).value;
        if (commentText.trim() !== '') {
            let comments = JSON.parse(localStorage.getItem(`comments_${blogId}`)) || [];
            comments.push(commentText);
            localStorage.setItem(`comments_${blogId}`, JSON.stringify(comments));
            displayComments(blogId);
            document.getElementById(`comment_${blogId}`).value = '';
        }
    }

    function displayComments(blogId) {
        const comments = JSON.parse(localStorage.getItem(`comments_${blogId}`)) || [];
        const commentsContainer = document.getElementById(`comment_list_${blogId}`);
        commentsContainer.innerHTML = '';
        comments.forEach(comment => {
            const li = document.createElement('li');
            li.classList.add('comment');
            li.textContent = comment;
            commentsContainer.appendChild(li);
        });
    }
    function loadInitialValues() {
        displayComments('blog1');
        const likes_blog1 = localStorage.getItem('likes_blog1') || 0;
        document.getElementById('likes_blog1').innerText = likes_blog1;
    }

    window.onload = loadInitialValues;
</script>
</head>
<body>
  <header>
    <h1 style="text-align:center; padding-top: 25px;">Manit Roy<h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="education.html">Education</a></li>
        <li><a href="acheivement.html">Acheivements</a></li>
        <li><a href="photos.html">Photography</a></li>
        <li><a href="poems.html">Blog</a></li>
        <li><a href="skills.html">Skills</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <div class="blog" id="blog1">
    <div class="blog-title">What if</div>
    <div class="blog-content">
        <pre>
Why to bother about melody if nobody can hear
Jokes won't work when sense of humour is rare
Why should fragrance exist if nobody can smell
Everyone wants heaven then why should there be hell
Why would flavour matter if we all have lost taste
Why to clean when our mind is full of waste
Why to care about beauty if everyone's blind
What's the point of love where all are heartless & unkind
Why should there be life if everyone has to die
Why do you came to my life when you have to say goodbye</pre>
    </div>
    <div class="blog-actions">
        <div>
            <button onclick="like('blog1')">Like</button>
            <span class="blog-like-count" id="likes_blog1">0</span> Likes
        </div>
    </div>
    <div class="blog-comments">
        <h3>Comments</h3>
        <input type="text" class="comment-input" id="comment_blog1" placeholder="Add a comment...">
        <button onclick="addComment('blog1')" style="margin-bottom: 10px; margin-top: 6px;">Add Comment</button>
        <ul class="comment-list" id="comment_list_blog1"></ul>
    </div>
</div>


</body>
</html>