Stack Exchange
How can I prevent the app from adding the same text each time add favourite icon is clicked?


// GET
const getAdviceNumber = document.querySelector('#adviceNumber');
const adviceResultsDiv = document.querySelector('#adviceResults');
const diceBtn = document.querySelector('#spinDice');
const staticText = document.querySelector('#static');
const favouriteSection = document.querySelector('.favouriteSection')

diceBtn.addEventListener('click', () => {
  const getAPI = async () => {
    // Call API
    /* eslint-disable */ 
    const res = await axios.get('https://api.adviceslip.com/advice');

    // remove static text
    staticText.remove();

    // Generate spin on btn
    const element = document.querySelector('#spinDice');
    element.classList.add('rotateMe');
    setTimeout(() => element.classList.remove('rotateMe'), 800);

    // generate unique id number
    const header = document.createElement('h1');
    header.className = 'title';
    header.append(` ADVICE # ${res.data.slip.id}`);
    while (getAdviceNumber.childElementCount > 0) {
      getAdviceNumber.firstChild.remove();
    }

    getAdviceNumber.append(header);

    // generate unique advice
    const para = document.createElement('p');
    para.className = 'para';
    para.append(`"${res.data.slip.advice}"`);
    while (adviceResultsDiv.childElementCount > 0) {
      adviceResultsDiv.firstChild.remove();
    }
     adviceResultsDiv.append(para);
    

    //generate add to favourites button 
    const addFavourite = document.createElement('p');
    addFavourite.className = 'fav';
    addFavourite.innerHTML = `<p>Add to Favourites<i class="fa-solid fa-folder-plus"></i></p>`;
    while (favouriteSection.childElementCount > 0) {
      favouriteSection.firstChild.remove();
    }
    favouriteSection.append(addFavourite)
  };
  getAPI();

  favouriteSection.addEventListener('click', () => {
    const favouriteItem = document.createElement('p');
    favouriteItem.innerHTML = `<p class="icons"><i class="fa-solid fa-magnifying-glass"></i> <i class="fa-solid fa-trash-can"></i></p>`
    favouriteItem.className = 'favouriteItemBorder';
    favouriteSection.append(favouriteItem)
    favouriteItem.append(`${getAdviceNumber.textContent}: ${ adviceResultsDiv.textContent}`)
  })
});
body {
  background-color: hsl(218, 23%, 16%);
  font-family: Arial, Helvetica, sans-serif;
}

#advice-container {
  background-color: hsl(217, 19%, 38%);
  border-radius: 20px;
  position: absolute;
  -ms-transform: translateY(-50%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding-bottom: 40px;
}

h2 {
  color: hsl(193, 38%, 86%);
  text-align: center;
}

.title {
  color: hsl(150, 100%, 66%);
  font-size: 15px;
  text-align: center;
  margin-top: 20px;
}

.para {
  color: hsl(193, 38%, 86%);
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  margin: 20px 20px 0 20px;
}

.btn {
  margin-top: 40px;
  margin-bottom: -75px;
}

.dice-container {
  background-color: hsl(150, 100%, 66%);
  border: solid 2px hsl(193, 38%, 86%);
  border-radius: 33px;
  margin: 20px 110px 0 110px;
}

.dice-container:hover {
  box-shadow: 0 0 30px -2px #52ffa8;
}

.fa-dice-five {
  font-size: 50px;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;

  /* transform: rotate(90deg); */
}

.rotate {
  transition: all 0s ease;
  transform: rotate(0deg);
}

.rotateMe {
  transition: all 0.3s ease;
  transform: rotate(90deg);
}

#icons {
  color: hsl(193, 38%, 86%);
}

.icon-container {
  padding: 20px 120px 0 120px;
  width: 100%;
}

.fa-grip-lines-vertical {
  margin: 0 10px 0 10px;
}

.line {
  width: 100%;
}

.favouriteSection {
  position: absolute;
  top: 70%;
}

.fav {
  color: #52ffa8;
  font-size: 32px;
  margin: 20px;
}

.fa-folder-plus {
  margin-left: 10px;
}

.favouriteItemBorder {
border: 2px solid white;
width: 300px;
height: 60px;
margin: 20px;
padding: 10px;
text-align: center;
}

.icons {
  position:absolute;
  bottom:10px;
  left: 40%;
  font-size: 20px;
}

/* desktop ..................................................................................... */

@media screen and (min-width: 720px) {
  #advice-container {
    display: flex;
    width: 900px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->  
  <title>Oshane| Advice generator app</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/030a66e167.js" crossorigin="anonymous"></script>
</head>
<body>

  <section id="advice-container">

    <div id="static">
      <h2>Click the Dice Button <br><br> below <br><br> to get advice</h2>
    </div>
    <div id="adviceNumber">  </div>

    <div id="adviceResults"></div>

    <div class="btn" id="getDataBtn">
      <button id="spinDice" class="dice-container rotate" type="submit"><i class="fa-solid fa-dice-five"></i></button>
    </div>

  </section>

  <section class="favouriteSection">

  </section>

  <!-- <script src="./node_modules/axios/dist/axios.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
</body>
</html>




]2]2how can I prevent this from adding the same text each time the add favourite icon is clicked? It should just add it once and if the add favourite btn is selected again and the quote already exists it should not repeat adding the same ones. I tried a few stuff but as I am a beginner those did not work.
Please anyone can assist?

create a working snippet , add the html also

"and the quote already exists" - It sounds like you have the logical basis for the if condition you want to employ, have you tried modifying your code to do that?  How are you checking if "the quote already exists" and what isn't working as expected?

I am a beginner i tried a if statement which did not work , can a senior help me quickly please??

@david Help please i pasted the snippet

@dippas Help please i pasted the snippet

You can check for something before adding/pushing into favorites array.
Check if something like id(best) or string exists in the arrray and if so - return, else push

WHat is the code for that ?

Step by step, this is what you are missing:

Create an empty object.
Each time the user clicks the "Add to Favourites" button, you should check if it's already in that object.
If it is, you are done handling that click event.
If it is not, you should add it to the object and then proceed with the logic you currently have to update the UI.

Simplified example:


const rollButton = document.getElementById('roll');
const numberElement = document.getElementById('number');
const addToFavouritesButton = document.getElementById('addToFavourites');
const favouritesElement = document.getElementById('favourites');

let number = null;

rollButton.addEventListener('click', () => {
  numberElement.textContent = number = Math.floor(Math.random() * 10);
  
  addToFavouritesButton.removeAttribute('disabled');
});

const favourites = {};

addToFavouritesButton.addEventListener('click', () => {
  if (favourites[number]) return;
  
  favourites[number] = true;
  
  favouritesElement.textContent = Object.keys(favourites).sort((a, b) => a - b).join(', ');
  
  if (Object.keys(favourites).length === 10) {
    numberElement.textContent = '';
    rollButton.setAttribute('disabled', true);
    addToFavouritesButton.setAttribute('disabled', true);
  }
});
body,
button {
  font-family: monospace;
}

p {
  text-align: center;
}

button {
  border: 3px solid black;
  border-radius: 4px;
  background: transparent;
  padding: 8px 16px;
}
  
button:hover {
  background: yellow;
}
  
button:disabled {
  border-color: #CCC;
  color: #CCC;
  background: transparent;
}

#number {
  border: 3px solid black;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

#favourites {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid black;
  border-radius: 4px;
  background: transparent;
  padding: 8px 16px;
}
<p>
  <button id="roll"> Roll Dice</button>
  <button id="addToFavourites" disabled>⭐ Add to Favourites</button>
</p>

<p>
  <span id="number">?</span>
</p>

<p>
  <span id="favourites">&nbsp;</span>
</p>



