Likes Feature Code
The Frontend and Backend Code that I contributed to our ALAAT Gallery
<!DOCTYPE html>
<html>
<body>
<!--the header section or the top part of every page-->
<section class="header">
<nav>
<!--the logo on the header-->
<a href="{{ site.baseurl }}/"><img src ="images/ALAATlogo.png"></a>
<div class="nav-links">
<ul>
<!--the links to the other pages-->
<li><a href="{{ site.baseurl }}/">CAROUSEL</a></li>
<li><a href="{{ site.baseurl }}/gallery.html">GALLERY</a></li>
<li><a href="{{ site.baseurl }}/Comments.html">SUGGESTIONS</a></li>
<li><a href="{{ site.baseurl }}/about.html">OUR TEAM</a></li>
<li><a href="{{ site.baseurl }}/signup.html">SIGN UP</a></li>
</ul>
<!--loading screen-->
<script>
var loader = document.getElementById("loading");
window.addEventListener("load", function(){
loader.style.display = "none";
})
</script>
</div>
</nav>
</section>
</body>
</html>
- This is just a simple navbar code that I created with HTML
- You can see that at the top left it has the ALAAT logo that I designed
- That logo is clickable and takes you to the gallery
- You can see that at the top left it has the ALAAT logo that I designed
- Each link on the top right of the navbar starts with the baseURL of the site and adds /___.html to direct the user to that page.
- We used liquid for this to show up on every page
id.textContent = data.id;
name.textContent = data.name;
numLikes.textContent = data.likes ? data.likes : 0; // Check if 'likes' exists, otherwise use 0
uid.textContent = data.uid;
const img = document.createElement("img");
img.src = data.image;
img.alt = data.name;
img.style.width = "100%";
img.style.height = "100%";
likeButtonCell.appendChild(likeButton);
imageCell.appendChild(img);
tr.appendChild(id);
tr.appendChild(name);
tr.appendChild(likeButtonCell);
tr.appendChild(numLikes);
tr.appendChild(uid);
tr.appendChild(imageCell);
resultContainer.appendChild(tr);
- Set the text content of the element with id id to the value of data.id.
- Set the text content of the element with id name to the value of data.name.
- Set the text content of the element with id numLikes to the value of data.likes if it exists, otherwise use 0.
- Set the text content of the element with id uid to the value of data.uid.
- Create an img element and set its source (src) attribute to the value of data.image.
- Set the alt attribute of the img element to the value of data.name.
- Set the width and height styles of the img element to 100%.
- Append the likeButton to the likeButtonCell.
- Append the img to the imageCell.
- Append the id, name, likeButtonCell, numLikes, uid, and imageCell elements to the tr element.
- Append the tr element to the resultContainer.
// Find all the image elements
var imageElements = document.querySelectorAll('.my-gallery img');
// Loop through each image element
imageElements.forEach(function(image) {
// Create a container div for the image and like button
var container = document.createElement('div');
container.className = 'image-container';
// Clone the image element
var clonedImage = image.cloneNode(true);
// Create a new like button element
var likeButton = document.createElement('button');
likeButton.className = 'like-button';
likeButton.textContent = 'Like';
// Create a new like count element
var likeCount = document.createElement('span');
likeCount.className = 'like-count';
likeCount.textContent = 0 ;
// Append the cloned image, like button, and like count to the container
container.appendChild(clonedImage);
container.appendChild(likeButton);
container.appendChild(likeCount);
// Replace the original image element with the container
image.parentNode.replaceChild(container, image);
});
// Add event listener to all like buttons
var likeButtons = document.querySelectorAll('.like-button');
likeButtons.forEach(function(button) {
button.addEventListener('click', function() {
var countElement = this.parentNode.querySelector('.like-count');
var currentCount = parseInt(countElement.textContent);
countElement.textContent = currentCount + 1;
});
});
- Find all the img elements with the class name "my-gallery" and store them in the imageElements variable.
- Loop through each image element.
- Create a container div element with the class name "image-container".
- Clone the image element using cloneNode(true).
- Create a new likeButton element with the class name "like-button" and the text content "Like".
- Create a new likeCount element with the class name "like-count" and the initial text content of 0.
- Append the cloned image, likeButton, and likeCount elements to the container.
- Replace the original image element with the container.
- Find all the likeButton elements and add an event listener to each one.
- When a likeButton is clicked, update the corresponding likeCount by incrementing its value by 1.
<div>
<button id="object1" class="like-button">Like</button>
<span id="object1-count">0</span>
</div>
<div>
<button id="object2" class="like-button">Like</button>
<span id="object2-count">0</span>
</div>
<script>
$(document).ready(function() {
$('.like-button').click(function() {
var objectId = $(this).attr('id');
incrementLikeCount(objectId);
});
function incrementLikeCount(objectId) {
var countElement = $('#' + objectId + '-count');
var count = parseInt(countElement.text());
count++;
countElement.text(count);
// Send an AJAX request to update the backend with the new like count
$.ajax({
url: 'backend.php',
type: 'POST',
data: { objectId: objectId, count: count },
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.error(error);
}
});
}
});
- Create two div elements with a button and span inside each one.
- Each button has a class name "like-button" and a unique id.
- Each span has an id that matches the button id and ends with "-count".
- When a like-button is clicked, the incrementLikeCount function is called with the button's id as an argument.
- The incrementLikeCount function updates the like count by retrieving the corresponding count element, parsing its text content as an integer, incrementing it, and updating the text content.
- It also sends an AJAX request to update the backend with the new like count, using the object's id and the updated count.
def patch(self):
body = request.get_json()
id = body.get('id')
image = Images.query.filter_by(id=id).first()
try:
name = body.get('name')
uid = body.get('uid')
likes = body.get('likes')
image.update(uid=uid, likes=likes, name=name)
return jsonify(image.get())
except:
print(f"error with {id}")
</head>
<body>
<div id="post-container">
<!-- Posts will be added dynamically here -->
</div>
<script>
// Data structure to hold posts
let posts = [];
// Function to add a post
function addPost(title, content) {
let post = {
title: title,
content: content,
likes: 0,
comments: []
};
posts.push(post);
renderPosts();
}
// Function to add a comment to a post
function addComment(postIndex, commentContent) {
let comment = {
content: commentContent,
likes: 0
};
posts[postIndex].comments.push(comment);
renderPosts();
}
// Function to like a post
function likePost(postIndex) {
posts[postIndex].likes++;
renderPosts();
}
// Function to like a comment
function likeComment(postIndex, commentIndex) {
posts[postIndex].comments[commentIndex].likes++;
renderPosts();
}
// Function to render posts and comments
function renderPosts() {
let postContainer = document.getElementById("post-container");
postContainer.innerHTML = "";
posts.forEach(function(post, postIndex) {
let postElement = document.createElement("div");
postElement.className = "post";
postElement.innerHTML = `
<h3>${post.title}</h3>
<p>${post.content}</p>
<button class="like-btn" onclick="likePost(${postIndex})">Like</button>
<span>Likes: ${post.likes}</span>
`;
post.comments.forEach(function(comment, commentIndex) {
let commentElement = document.createElement("div");
commentElement.className = "comment";
commentElement.innerHTML = `
<p>${comment.content}</p>
<button class="like-btn" onclick="likeComment(${postIndex}, ${commentIndex})">Like</button>
<span>Likes: ${comment.likes}</span>
`;
postElement.appendChild(commentElement);
});
postContainer.appendChild(postElement);
});
}
</script>
</body>
</html>
- There is a route handling a PATCH request to update an image's likes count.
- The request payload is expected to contain the image's id, name, uid, and likes values.
- The code tries to update the image's properties with the new values and returns the updated image as JSON.
- If an error occurs during the update, it prints an error message.