Hours I Worked

Task #	Date	Task	Hours
1	05/05/23	Plan out group project + Canva Model Here	1 Hour
2	05/08/23	Research and collaboration on implementing the likes feature on each photo and determining what the best way to implement it will be	1 hour
3	05/09/23	Clean up repo to make it only our code	0.5
4	05/15-16/23	Develop a few prototype like systems (with multiple deigns)	1.5 hours
5	05/18/23	Research backend likes saving from last tri full stack lessons and write the code in the backend	1.5 Hours
6	05/19/23	Recall how to call an API backend to the frontend (this took me a whole week to learn last tri)	0.5 hours
7	05/20/23	Design and add logo to the top left of the frontend on the navbar make it clickable as a home button and make agile manifesto	1
8	05/21/23	Spent 2 hours trying to figure out how to code a comment board where you can comment on posts and like them	2 hours
9	05/22/23	In class I finally figured out the comment board	1 hour
10	05/23/23	Research with Taiyo on how to connect the backend for the comment board	0.5 hour
11	05/24/23	Figure out how to attatch a like button to every image on the gallery	1 hour
12	05/25/23	Research and Create a Javascript loop in the gallery file that automatically puts a like button on every image file	3.5 hours
13	05/26/23	Make the team logo and figure out how to place it on the navbar and click it as a home button	0.5 hours
14	05/28/23	Try to save likes to backend. It’s hard because each like button is assigned to every image file because of my javascipt loop, so saving them to backend is very hard (I was unsuccessful in completing this)	3 hours

16	05/29/23	Change up the frontend likes code so the post requests from the backend work	0.5 hours
17	05/30/23	Make Frontend and Backend Read.me and build instructions	0.5 hours

Feature Overview

Like and comment system
- The images will sort based on amount of likes and comments
Make a button with a count request that adds +1 everytime the button is clicked.
- Save amount of likes on each photo to backend

Some Demo Code

<!DOCTYPE html>
<html>
<head>
    <title>Forum Demo</title>
    <style>
        .post {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f2f2f2;
        }
        .comment {
            margin-left: 20px;
            margin-bottom: 5px;
        }
        .like-btn {
            color: blue;
            cursor: pointer;
        }
    </style>
</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>

<!DOCTYPE html>

Alaat Gallery Talk

Comments and Likes

--- toc: true layout: post description: Planning for our tri 3 Final Project categories: [Notes] title: Group ALAAT Photo Site Planning --- Submit your thoughts & comments on each of the photos!

Like System Design 1

Like System Design 2

Sprite Animation