mercredi 1 septembre 2021

Message generator (NO REPEAT) conditions

I need a message generator that generates a Quote included in array. But I have to :

  1. Make sure that each randomly displayed message is displayed only 1x until all messages have been displayed / there are no duplicates until all have been displayed.

  2. When all messages have been displayed, allow all messages again and repeat 2.

This is what I have come up so far:

let btn = document.getElementById('btn');
let output = document.getElementById('output');

let quotes = [
  'No one is perfect - that’s why pencils have erasers. - Wolfgang Riebe',
  'Have no fear of perfection - you will never reach it. - Salvador Dali',
  'The tallest mountain started as a stone. - One Punch Man Intro',
  'Make it work. Make it nice. Make it fast. Always obey this order! - kiraa',
  'A good programmer is someone who always looks both ways before crossing a one-way street. – Doug Linder',
  'If debugging is the process of removing software bugs, then programming must be the process of putting them in. - Edsger W. Dijkstra',
];

btn.addEventListener('click', function() {
  let randomQuote = quotes[Math.floor(Math.random() * quotes.length)]
  output.innerHTML = randomQuote;
})
#container {
  background-color: mediumpurple;
  border: 5px solid white;
  height: 300px;
  width: 700px;
  margin: 0 auto;
  text-align: center;
  border-radius: 25px;
}
#btn {
  margin:  50px auto;
  height: 50px;
  width: 250px;
  font-size: 20px;
  background-color: white;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  border-radius: 30px;
}

output {
  margin: 25px auto;
  font-size: 20px;
  color: white
}
<div id="container">
  <button id="btn">Get your message of the day</button>

  <div id="output"> Press it :)</div>
</div>



Aucun commentaire:

Enregistrer un commentaire