JSFiddle - React, Tailwind, and code Playground

by trentHarlem

HTML

<span id='favStar' class='emptyStar'>_</span>


<!-- will look like this when clicked
<span id='favStar' class='fullStar'>_</span> -->

CSS

.emptyStar {
  
}
.fullStar {
  
}

JavaScript

let favStar = document.getElementById('favStar') 
let starred = false

favStar.addEventListener('click', favStatus)
  
function favStatus() {
//if user 'unFavorites'
 if (starred === true) {
 //change icon to empty
 favStar.classList.add(emptyStar)
 favStar.classList.remove(fullStar)
 //change status
 starred = false
 } else {
 //change icon to 
 favStar.classList.add(fullStar)
 favStar.classList.remove(emptyStar)
 // make favorite
 starred = true
 }
}



/* 
  static async toggleFavorite(evt){
    let star = (evt.target.closest('i'))
    const storyToFavoriteId = evt.target.closest('li').id
    let storyToToggle = await axios.get(`${BASE_URL}/stories/${storyToFavoriteId}`)
    storyToToggle = storyToToggle.data.story
    const isStoryAFavorite = User.checkIfFavorite(storyToToggle);
    if(isStoryAFavorite){
      //change the star to empty <i class="$far fa-star"></i>
    } else {
      //change the star to be filled: <i class="$fas fa-star"></i>
    }
  } */