Final Project - Racoon-it

.gitignore

@@ -0,0 +1,7 @@
+*.DS_Store
+node_modules/
+package-lock.json
+.gitconfig
+.glitch-assets
+shrinkwrap.yaml
+db.json

README.md

@@ -1,49 +1,34 @@
-# Final Project
-*Due October 13th (final day of the term)*
+## Final Project: Raccoon-it 
+by Ananya Gopalan, Neha Kuchipudi, Jack Leserman, Jacquelyn Lopez, and Tia Mehta.
 
-For your final project, you'll implement a web application that exhibits understanding of the course materials. 
-This project should provide an opportunity to both be creative and to pursue individual research and learning goals.
+Application Using Glitch: https://racoonit.glitch.me/
 
-## General description
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
+Youtube Video: https://youtu.be/aPL3spn2Ngg
 
-- Static web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript (TypeScript is also allowed if your group wants to explore it).
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data (database), authentication, and possibly server-side computation. 
-- A video (less than five minutes) where each group member explains some aspect of the project. An easy way to produce this video is for you all the groups members to join a Zoom call that is recorded; each member can share their screen when they discuss the project or one member can "drive" the interface while other members narrate (this second option will probably work better.) The video should be posted on YouTube or some other accessible video hosting service. Make sure your video is less than five minutes, but long enough to successfully  explain your project and show it in action. There is no minimum video length.
+Code on Glitch: https://glitch.com/edit/#!/racoonit?path=views%2Fmeme_maker.html%3A1%3A0
 
-## Project ideation
-Excellent projects typically serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. 
+(I am sharing the code on glitch because we forgot to pull request our final project on the last day of the term. Since we are on break, I forgot my laptop at home when I went on vacation and I've been using a non-cs person's laptop (lol) that doesn't have vsc.. or git... and I'm having trouble pushing code bc of how git was downloaded... so the easiest way I thought to show our code was just manually copying and pasting it in the repo... sorry.... that this happened. The prof should know about this)
 
-### Deliverables
+## Description
+For our project, we made a reddit inspired raccoon meme page that allows users to generate raccoon memers with edit, comment, and rate functionalities. Our app provides users with a fun and entertaining outlet to interact with popular raccoon memes found across the internet currently. Users are able to create their own raccoon meme by uploading an image and adding a caption. Users are able to change the font size, type and location. Users can also rate memes using an upvote or downvote rating system, and the cumulative rating for that meme will be shown. Instead of using MongoDB for the database, we created our own. When users login to the site, their previous rating will be shown on the corresponding memes.
 
-#### Form Team (due 9/25)
-Students are will work in teams of 3-5 students for the project; teams of two can be approved with the permission of the instructor. Working in teams should help enable you to build a good project in a limited amount of time.  Use the `#project-logistics` channel in Discord to pitch ideas for final projects and/or find fellow team members as needed.
+The purpose of our web app is to rate and comment on raccoon memes created by users. Memes are an integral aspect of our global community, as it aids in the culture and communication exchange in our modern world. The point of the app is to bring a community of raccoon memes together. It is a safe space that engenders the creativity of its users. Memes bring together users of all genders, races and backgrounds, and unite us. Our website is an ethical platform that does not sell the souls of its users (cough cough, Facebook). Not only can our app be used by anyone (any time, any place) but it also updates in real-time. You can also edit and delete your raccoon memes as you see fit or just keep creating more!
 
-Teams must be in place by end of day on Sunday, September 25th. If you have not identified a team at this point, you will be assigned a team. You will be given some class time on Monday to work on your proposal, but please plan on reserving additional time outside of class as needed.
+## Login 
 
-#### Proposal (due 9/27) 
-Provide an outline of your project direction and the names of associated team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline. Please include a general description of a project, and list of key technologies/libraries you plan on using (e.g. React, Three.js, Svelte, TypeScript etc.). Two to four paragraps should provide enough level of detail. Name the file proposal.md and submit a pull request by Tuesday, September 27th at 11:59 PM (end of day). Only one pull request is required per team.
+Before using the application, users must already have an account made or make a new one. Once an account is made, users will not have to make a new account as their login information is stored in our database.
 
-There are no other scheduled checkpoints for your project. 
+## Technologies Used
 
-#### Turning in Your Project
-Submit a second PR on the final project repo to turn in your app and code. Again, only one pull request per team.
+To create the application, we used 5 Express middleware packages: Body-Parser, Passport, Express-Session, Serve-favicon, and Timeout. Body-Parser was used to read JSON objects. Passport was used as an authentication tool to facilitate the login process and find the login info for users that already have accounts. Express-session was used to allow the server to keep track of the user’s state. Serve=favicon was used to give our site an icon when the user has the tab open, so they know which tab is our application. Timeout ensures that a response is sent to the client on a timeout event. 
 
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service; it is critical that the application functions correctly wherever you post it.
+## Challenges
 
-The README for your second pull request doesn’t need to be a formal report, but it should contain:
+We faced challenges with storing the voting values even after the site had been refreshed, as well as marking the voting change for each image. We also struggled with changing small aspects of the UI design, such as centering text in a button. The raccoon memes also slowed our ability to focus and debug as we were too busy laughing at them. 
 
-1. A brief description of what you created, and a link to the project itself (two paragraphs of text)
-2. Any additional instructions that might be needed to fully use your project (login information etc.)
-3. An outline of the technologies you used and how you used them.
-4. What challenges you faced in completing the project.
-5. What each group member was responsible for designing / developing.
-6. A link to your project video.
+## Responsibilities
 
-Think of 1,3, and 4 in particular in a similar vein to the design / tech achievements for A1—A4… make a case for why what you did was challenging and why your implementation deserves a grade of 100%.
+Jackie and Ananya worked on implementing the downvote/upvote feature of the application. Jack implement the meme generator ability, and Neha did the UI for the site. Tia worked on whatever was needed and also wrote the ReadME.
 
-## FAQs
-
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use Node.js. Your client-side scripting language should be either JavaScript or TypeScript.
+## Project Video
+(p.s. check out the assets sections for some fun raccoon memes made with our meme generator :)

chat-client.js

@@ -0,0 +1,270 @@
+let slideIndex = 1;
+showSlides(slideIndex);
+
+// Next/previous controls
+function plusSlides(n) {
+  showSlides(slideIndex += n);
+}
+
+// Thumbnail image controls
+function currentSlide(n) {
+  showSlides(slideIndex = n);
+}
+
+
+function showSlides(n) {
+  let i;
+  let slides = document.getElementsByClassName("mySlides");
+  let dots = document.getElementsByClassName("dot");
+  if (n > slides.length) {slideIndex = 1}
+  if (n < 1) {slideIndex = slides.length}
+  for (i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";
+  }
+  for (i = 0; i < dots.length; i++) {
+    dots[i].className = dots[i].className.replace(" active", "");
+  }
+  slides[slideIndex-1].style.display = "block";
+  dots[slideIndex-1].className += " active";
+}
+
+
+var clicks1 = 0;
+function onClick1() {
+  clicks1 += 1;
+  document.getElementById("clicks1").innerHTML = clicks1;
+};
+
+var clicks2 = 0;
+function onClick2() {
+  clicks2 += 1;
+  document.getElementById("clicks2").innerHTML = clicks2;
+};
+
+var clicks3 = 0;
+function onClick3() {
+  clicks3 += 1;
+  document.getElementById("clicks3").innerHTML = clicks3;
+};
+
+
+
+
+
+
+
+
+
+
+/* -- INIT -- */
+let lastUpdatedTime
+
+/* -- FETCH CHAT INFORMATION -- */
+
+const fetchChats = function(first) {
+  fetch("/getchats",
+  {
+    "method": "POST",
+    "credentials": "include"
+  })
+  .then(res =>
+  {
+    //console.log(res)
+    if (res.status !== 200)
+    {
+      alert("Authentication failed, please log in!")
+      window.location.href="/"
+      return
+    }
+
+    return res.json()
+  })
+  .then(resJson =>
+  {
+    //console.log(resJson)
+
+    lastUpdatedTime = new Date()
+
+    buildChatTable(resJson.chats, resJson.username)
+
+    // Fetch for new chats every second
+    if (first === true)
+      setTimeout(updateChats, 1000)
+  })
+}
+
+fetchChats(true)
+
+
+/* -- UPDATE CHATS EVERY SECOND -- */
+
+const updateChats = function()
+{
+  //console.log("updating") // commented because it was getting annoying
+
+  const currentDate = new Date()
+
+  fetch("/updatechats",
+  {
+    "method": "POST",
+    "credentials": "include"
+  })
+  .then(res =>
+  {
+    //console.log(res)
+    if (res.status !== 200)
+    {
+      alert("Authentication failed, please log in!")
+      window.location.href="/"
+      return
+    }
+
+    return res.json()
+  })
+  .then(resJson =>
+  {
+    //console.log("lastUpdatedData: ", resJson.lastUpdatedData)
+
+    // See if there are any more chats than there were before:
+    if (new Date(resJson.lastUpdatedData).getTime() > lastUpdatedTime.getTime())
+      fetchChats(false)
+  })
+
+  // Continue the loop
+  setTimeout(updateChats, 1000)
+}
+
+
+
+
+
+
+/* -- SEND OVER A NEW CHAT -- */
+
+// define variables that reference elements on our page
+const newChatForm = document.forms[0]
+const newChatContents = newChatForm.elements["contents"]
+
+// listen for the form to be submitted and add a new dream when it is
+newChatForm.onsubmit = function(event)
+{
+  // stop our form submission from refreshing the page
+  event.preventDefault();
+
+  fetch("/newchat",
+  {
+    "method": "POST",
+    "credentials": "include",
+    "body": JSON.stringify(
+    {
+      "contents": newChatContents.value,
+    }),
+    headers: {"Content-Type": "application/json"}
+  })
+  .then(res => res.json())
+  .then(json =>
+  {
+    //console.log(json)
+    newChatContents.value = ""
+  })
+  .catch(err =>
+  {
+    alert("Failed to send message")
+  })
+}
+
+
+/* -- PUT CHATS IN FANCY TABLE -- */
+
+const chatContents = document.getElementById("chat-contents")
+
+const buildChatTable = function(chats, username)
+{
+  let htmlStr = ""
+
+  for (const n in chats)
+  {
+    const chat = chats[n]
+
+    let lineStr = ""
+    lineStr += "<tr>"
+
+    lineStr += "<th class=\"chat-username\">" + chat.username + "</th>"
+    lineStr += "<th class=\"chat-contents\">" + chat.contents + "</th>"
+
+    const timeDate = new Date(chat.time)
+    const timeStr = timeDate.toLocaleDateString() + "<br/>" + timeDate.toLocaleTimeString()
+
+    lineStr += "<th class=\"chat-timestamp\">" + timeStr + "</th>"
+
+    if (chat.username === username)
+    {
+      lineStr += "<th>"
+      lineStr += "<button style='width:10px;  padding: 0px 90px; margin-left:-5px' onclick=\"deleteMessage('" + chat.uuid + "')\">Delete</button>"
+      lineStr += "<button style='width:10px;  padding: 0px 90px; margin-left:-5px' onclick=\"editMessage('" + chat.uuid + "')\">Edit</button>"
+      lineStr += "</th>"
+    }
+    else
+    {
+      lineStr += "<th></th>"
+    }
+
+    lineStr += "</tr>"
+
+    // NOTE: this is done backwards so that newer chats appear on the top
+    htmlStr = lineStr + htmlStr
+  }
+
+  chatContents.innerHTML = htmlStr
+}
+
+
+/* -- FUNCTIONS CALLED ON MESSAGE MODIFICATION BUTTONS -- */
+
+const deleteMessage = function(uuid)
+{
+  fetch("/deletechat",
+  {
+    "method": "POST",
+    "credentials": "include",
+    "body": JSON.stringify(
+    {
+      "uuid": uuid,
+    }),
+    headers: {"Content-Type": "application/json"}
+  })
+  .then(res =>
+  {
+    //console.log(res)
+    if (res.status !== 200)
+      alert("Failed to delete message")
+  })
+}
+
+const editMessage = function(uuid)
+{
+  const newContents = window.prompt("What are the new contents of the message?")
+  if (newContents === null)
+    return
+
+  if (newContents.length > 500)
+    newContents = newContents.substr(0, 499)
+
+  fetch("/editchat",
+  {
+    "method": "POST",
+    "credentials": "include",
+    "body": JSON.stringify(
+    {
+      "uuid": uuid,
+      "contents": newContents,
+    }),
+    headers: {"Content-Type": "application/json"}
+  })
+  .then(res => res.json())
+  //.then(console.log)
+  .catch(err =>
+  {
+    alert("Failed to edit message")
+  })
+}