-
Notifications
You must be signed in to change notification settings - Fork 84
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #142 from Yash-Ainapure/patch7
Feature: upvote or downvote the secrets
- Loading branch information
Showing
3 changed files
with
262 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,191 @@ | ||
| <%- include('partials/header') %> | ||
|
|
||
| <div class="secrets-container jumbotron text-center"> | ||
| <div class="container"> | ||
| <i class="fas fa-key fa-6x"></i> | ||
| <h1 class="display-3">You've Discovered My Secret!</h1> | ||
|
|
||
| <% usersWithSecrets.forEach(function(user){ %> | ||
| <% user.secret.forEach(function(secret){ %> | ||
| <p class="secret-text"><%= secret %></p> | ||
| <% }) %> | ||
| <% }) %> | ||
|
|
||
|
|
||
| <hr /> | ||
| <div class="d-flex justify-content-center"> | ||
| <a class="button_all_white" href="/logout" role="button" | ||
| ><button class="secondary" style="font-size: 1em; margin: 10px"> | ||
| Log Out | ||
| </button></a | ||
| > | ||
| <a class="button_all_black" href="/submit-secret-form" role="button" | ||
| ><button style="font-size: 1em; margin: 10px"> | ||
| Submit a Secret | ||
| </button></a | ||
| > | ||
| <div class="secrets-container jumbotron text-center"> | ||
| <div class="container"> | ||
| <i class="fas fa-key fa-6x"></i> | ||
| <h1 class="display-3">You've Discovered My Secret!</h1> | ||
|
|
||
| <% usersWithSecrets.forEach(function(user){ %> | ||
| <% user.secret.forEach(function(secret,index){ %> | ||
| <div class="card"> | ||
| <div class="card-body" style="display: flex;justify-content:flex-start;"> | ||
| <p class="secret-text"> | ||
| <div class="inner-secret-text"> | ||
| <%= secret.title %> | ||
| </div> | ||
| <div class="vote-container" id="vote-container-<%= index %>"> | ||
| <img class="vote-image" alt="Upvote" data-index='<%= index %>' data-value='<%= user.username %>' | ||
| id="upvote-image-<%= index %>" data-upvotecount='<%= secret.upvote %>' | ||
| data-downvotecount='<%= secret.downvote %>' onclick="handleUpvote(this ,<%= index %>)" width="24" | ||
| height="24" | ||
| src="<%= upvoted ? 'https://img.icons8.com/material-rounded/24/thumb-up.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-up-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png' %>" /> | ||
| <span class="vote-count" id="upvote-count-<%= index %>"> | ||
| <%= secret.upvote %> | ||
| </span> | ||
| <img class="vote-image" width="24" height="24" data-index='<%= index %>' | ||
| id="downvote-image-<%= index %>" data-value='<%= user.username %>' | ||
| data-upvotecount='<%= secret.upvote %>' data-downvotecount='<%= secret.downvote %>' | ||
| onclick="handleDownvote(this, <%= index %>)" | ||
| src="<%= downvoted ? 'https://img.icons8.com/material/24/thumbs-down--v1.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-down-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png' %>" | ||
| alt="Downvote" /> | ||
| <span class="vote-count" id="downvote-count-<%= index %>"> | ||
| <%= secret.downvote %> | ||
| </span> | ||
| </div> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <% }) %> | ||
| <% }) %> | ||
| <style> | ||
| .card { | ||
| margin: 10px 0px; | ||
| background-color: #315B9A; | ||
| transition: transform 0.3s ease-in-out; | ||
| font-size: 20px; | ||
| } | ||
| .card:hover { | ||
| transform: scale(1.05); | ||
| box-shadow: 0 0 15px #64a9db; | ||
| } | ||
| .card-text { | ||
| color: #A7DAFF; | ||
| } | ||
| </style> | ||
| <script> | ||
| let upvoted = <%= upvoted %>; | ||
| let downvoted = <%= downvoted %>; | ||
| function handleUpvote(element, index) { | ||
| let upvoteCount = element.getAttribute("data-upvotecount"); | ||
| let downvoteCount = element.getAttribute("data-downvotecount"); | ||
| //let index = element.getAttribute('data-index'); | ||
| let username = element.getAttribute('data-value'); | ||
| //console.log("index: " + index + " username : " + username); | ||
| if (!upvoted) { | ||
| upvoted = true; | ||
| upvoteCount++; | ||
| if (downvoted) { | ||
| downvoted = false; | ||
| } | ||
| } else { | ||
| upvoted = false; | ||
| } | ||
| updateVotes(upvoteCount, downvoteCount, index, username); | ||
| // // Update the image source and count on the page | ||
| //console.log("upvoted: " + upvoted); | ||
| //console.log("downvoted: " + downvoted); | ||
| updateUI(upvoted, downvoted, upvoteCount, downvoteCount, index); | ||
| } | ||
| function handleDownvote(element, index) { | ||
| let upvoteCount = element.getAttribute("data-upvotecount"); | ||
| let downvoteCount = element.getAttribute("data-downvotecount"); | ||
| //let index = element.getAttribute('data-index'); | ||
| let username = element.getAttribute('data-value'); | ||
| //console.log("index: " + index + " username : " + username); | ||
| if (!downvoted) { | ||
| downvoted = true; | ||
| //upvoted = false; | ||
| downvoteCount++; | ||
| if (upvoted) { | ||
| upvoted = false; | ||
| //upvoteCount--; | ||
| } | ||
| } else { | ||
| downvoted = false; | ||
| //downvoteCount--; | ||
| } | ||
| updateVotes(upvoteCount, downvoteCount, index, username); | ||
| // Update the image source and count on the page | ||
| //console.log("upvoted: " + upvoted); | ||
| //console.log("downvoted: " + downvoted); | ||
| updateUI(upvoted, downvoted, upvoteCount, downvoteCount, index); | ||
| } | ||
| function updateVotes(upvoteCount, downvoteCount, index, username) { | ||
| // Implement logic to send an AJAX request or use fetch to update the server-side vote counts | ||
| // You would typically send a POST request to your server here | ||
| // Example using fetch: | ||
| fetch('/api/votes', { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify({ | ||
| upvoteCount, | ||
| downvoteCount, | ||
| index, | ||
| username, | ||
| }), | ||
| }) | ||
| .then(response => response.json()) | ||
| .then(data => console.log('Votes updated:', data)) | ||
| .catch(error => console.error('Error updating votes:', error)); | ||
| } | ||
| function updateUI(upvoted, downvoted, upvoteCount, downvoteCount, index) { | ||
| // Update the image sources and vote counts on the page for the specific secret | ||
| const containerId = `vote-container-${index}`; | ||
| const upvoteImageId = `upvote-image-${index}`; | ||
| const downvoteImageId = `downvote-image-${index}`; | ||
| const upvoteCountId = `upvote-count-${index}`; | ||
| const downvoteCountId = `downvote-count-${index}`; | ||
| const upvoteImage = document.getElementById(upvoteImageId); | ||
| const downvoteImage = document.getElementById(downvoteImageId); | ||
| const upvoteCountElement = document.getElementById(upvoteCountId); | ||
| const downvoteCountElement = document.getElementById(downvoteCountId); | ||
| //getting wrong values -- null | ||
| //console.log(upvoteImage) | ||
| //console.log(downvoteImage) | ||
| //getting correct values below | ||
| //console.log(upvoteCountElement) | ||
| //console.log(downvoteCountElement) | ||
| if (upvoteImage && downvoteImage && upvoteCountElement && downvoteCountElement) { | ||
| upvoteImage.src = upvoted ? 'https://img.icons8.com/material-rounded/24/thumb-up.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-up-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png'; | ||
| downvoteImage.src = downvoted ? 'https://img.icons8.com/material/24/thumbs-down--v1.png' : 'https://img.icons8.com/external-royyan-wijaya-detailed-outline-royyan-wijaya/24/external-thumbs-down-interface-royyan-wijaya-detailed-outline-royyan-wijaya.png'; | ||
| upvoteCountElement.innerText = upvoteCount; | ||
| downvoteCountElement.innerText = downvoteCount; | ||
| } else { | ||
| console.error(`One or more elements not found for secret at index ${index}`); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
|
|
||
| <hr /> | ||
| <div class="d-flex justify-content-center"> | ||
| <a class="button_all_white" href="/logout" role="button"><button class="secondary" | ||
| style="font-size: 1em; margin: 10px"> | ||
| Log Out | ||
| </button></a> | ||
| <a class="button_all_black" href="/submit-secret-form" role="button"><button | ||
| style="font-size: 1em; margin: 10px"> | ||
| Submit a Secret | ||
| </button></a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <a href="#navbar" id="goToTopBtn" title="Go to top"> | ||
| <img | ||
| src="https://img.icons8.com/ios-filled/50/000000/long-arrow-up.png" | ||
| style="width: 70%; height: 70%; color: white" | ||
| /> | ||
| </a> | ||
| <%- include('partials/footer') %> | ||
| <a href="#navbar" id="goToTopBtn" title="Go to top"> | ||
| <img src="https://img.icons8.com/ios-filled/50/000000/long-arrow-up.png" | ||
| style="width: 70%; height: 70%; color: white" /> | ||
| </a> | ||
| <%- include('partials/footer') %> |