digital sarah art joy

🖤 new toast button 🖤

~ 3 minutes to read

I changed my toast button to be a heart! I also removed the text that displayed the total toasts, and replaced it with as many hearts as there are toasts on a post.

What it looks like with one toast and you haven't toasted it yet: The text "Leave a like" followed but a plus sign and one heart

What it looks like with multiple toasts and after you've toasted: The text "Leave a like" followed by four hearts

Here's the JavaScript that's getting the total number of toasts and adds that number of hearts.

<script>
document.addEventListener("DOMContentLoaded", function(){
  // get the total number of toasts 
  let countText = document.querySelector('.upvote-count');
  let total = parseInt(countText.innerText);
  let count = total > 1 ? total : 1;


  // finds the upvote button and add the hearts in span elements
  let heartList = document.querySelector('.upvote-button'); 
  heartList.title = 'Thank you 🖤';

  for (let i = 0; i < count; i ++) {
    let heartspan = document.createElement('span');
    let heart = document.createTextNode('🖤');
    heartspan.appendChild(heart);
    heartList.appendChild(heartspan);
  }
});


</script>

This is what the DOM looks like after that. I tried adding all of the hearts in one span, and also outside of the button, but to get all the hearts and the plus sign aligned how I wanted them, adding them as individual spans in the button ended up working the best. A screenshot of some HTML showing a bunch of span elements with hearts inside of them

And here's the CSS:

/* lets the text and hearts sit next to each other */
#upvote-form {
  display: flex !important;
}

/* adds the text before the button */
#upvote-form::before {
  content: "Leave a like:";
  margin-right: .3rem;
  background-color: var(--second-color);
  height: 26px;
  min-width: 124px;
}

/* lays out the hearts so they're next to each other and wrap when there's a lot */
.upvote-button {
  position: relative;
  display: flex;
  font-size: 16px;
  flex-wrap: wrap;
  flex-direction: row !important;
}

/* hides the default icon and text */
.upvote-button svg,
.upvote-button small {
	display: none;
}


/* changes the button content from + to 🖤 depending on its status */
.upvote-button::before,
.upvote-button:hover::before {
  content: '+';
  display: block;
  font-size: 20px;
  margin: 0 5px;
}

.upvote-button:disabled::before,
.upvote-button.upvoted::before,
.upvote-button.upvoted:hover::before {
  content: '🖤' !important;
  display: block;
  font-size: 16px;
  margin: 0;
}

I think I also found a weird bug because after I changed the CSS for the upvote button, I was able to upvote my posts again? Kinda handy because I needed to test the button, but not sure if that's supposed to happen.

Shout out to these two posts that I referenced to change the toast button to an emoji:

#bearblog #changelog #css #js #most-liked