john/runtimeterror
1
0
Fork 0
mirror of https://github.com/jbowdre/runtimeterror.git synced 2024-09-19 15:45:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up kudos.js

Browse source
This commit is contained in:
John Bowdre 2024-06-24 21:58:22 -05:00
parent 751eb9b03c
commit 2075caf0d0
1 changed files with 15 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
assets/js/kudos.js
View file

@ -1,24 +1,25 @@
// disables kudos button after click // manipulates the post upvote "kudos" button behavior
document.addEventListener('DOMContentLoaded', () => { window.onload = function() {
const kudosButton = document.querySelector('.kudos-button'); // get the button and text elements
const kudosText = document.querySelector('.kudos-text'); var kudosButton = document.querySelector('.kudos-button');
const emojiSpan = kudosButton.querySelector('.emoji'); var kudosText = document.querySelector('.kudos-text');
var emojiSpan = kudosButton.querySelector('.emoji');
kudosButton.addEventListener('click', () => { kudosButton.addEventListener('click', function(event) {
// send the event to Cabin
cabin.event('kudos') cabin.event('kudos')
// disable the button
kudosButton.disabled = true; kudosButton.disabled = true;
kudosButton.classList.add('clicked'); kudosButton.classList.add('clicked');
// change the displayed text
kudosText.textContent = 'Thanks!'; kudosText.textContent = 'Thanks!';
kudosText.classList.add('thanks'); kudosText.classList.add('thanks');
// spin the emoji
// Rotate the emoji
emojiSpan.style.transform = 'rotate(360deg)'; emojiSpan.style.transform = 'rotate(360deg)';
// change the emoji to celebrate
// Change the emoji after rotation setTimeout(function() {
setTimeout(() => {
emojiSpan.textContent = '🎉'; emojiSpan.textContent = '🎉';
}, 150); // Half of the transition time for a smooth mid-rotation change }, 150); // half of the css transition time for a smooth mid-rotation change
}); });
}); }