<h1>My ToDos</h1>
<p class="coded-by">coded with ❤️ by <a href="https://webdeasy.de/" target="_blank">webdeasy.de</a></p>
<ul class="todos">
  <li>You need to give your browser access to your microphone!</li>
  <li class="new-todo-hint">Say 'new *YOUR TODO*' (example: 'new subscribe by newsletter')</li>
</ul>
<p class="heard"></p>

* {
  font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif;
}

html {
  background-color: #F1F1F1;
}

:root {
  --main: #3D50A7;
}

h1 {
  text-align: center;
  margin-bottom: 0;
}

a {
  color: #FFF;
}

.todos {
  background-color: var(--main);
  padding: 2rem;
  width: 30%;
  margin: 0 auto;
  color: #FFF;
  padding-left: 3rem;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.52);
  -moz-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.52);
  box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.52);
}

li.new-todo-hint {
  font-style: italic;
  font-weight: 600;
}

.heard {
  text-align: center;
  font-size: 16px;
  font-style: italic;
  margin-top: 5px;
}

@media screen and (max-width: 768px) {
  ul.todos {
    width: 80%;
  }
}


.coded-by {
  text-align: center;
  margin-top: 0;
}

.coded-by a {
  color: var(--main);
}

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

// get html elements
const todoList = document.querySelector('ul.todos');
const heard = document.querySelector('.heard');

// setup SpeechRecognation
const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = 'en-US';
  
// waiting for speech results
recognition.addEventListener('result', event => {
  const transcript = event.results[0][0].transcript;
      
  // check if the voice input has ended
  if(event.results[0].isFinal) {
    heard.innerHTML = 'I understood: ' + transcript;
    
    // check if the input starts with 'new'
    if(transcript.indexOf('new') == 0) {
      let newTodo = document.createElement('li');
      
      let todo = transcript.substring(3);
      newTodo.innerHTML = todo;
      
      todoList.append(newTodo);
    }
  }
});

recognition.addEventListener('end', recognition.start);
recognition.start();