Explore add comments

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules/

assets/scripts/explore.js

@@ -2,6 +2,72 @@
 
 window.addEventListener('DOMContentLoaded', init);
 
+/*
+Initializes the aspects of the synthesizer 
+*/
 function init() {
   // TODO
+
+  const voiceSelect = document.getElementById('voice-select');
+  const speakButton = document.querySelector('#explore button');
+  const textArea = document.getElementById('text-to-speak');
+  const faceImage = document.querySelector("img");;
+  let listOfVoices = [];
+
+  /*
+  fills the voice list from .getVoices
+  properly formats it on the explore.html
+  */
+  function fillVoiceList(){
+    listOfVoices = speechSynthesis.getVoices();
+    voiceSelect.innerHTML ='';
+
+    listOfVoices.forEach(voice => {
+      const option = document.createElement('option');
+      option.textContent = `${voice.name} (${voice.lang})`;
+      if (voice.default){
+        option.textContent += ' (default)';
+        option.selected = true;
+      }
+      option.setAttribute('data-name', voice.name);
+      voiceSelect.appendChild(option);
+    });
+
+    if (!voiceSelect.querySelector('option[selected]') && voiceSelect.options.length > 0) {
+      voiceSelect.options[0].selected = true;
+    }
+  }
+
+  if(speechSynthesis.onvoiceschanged !== undefined){
+    speechSynthesis.onvoiceschanged = fillVoiceList;
+  }
+
+  fillVoiceList();
+
+  /*
+    When the button is clicked, it creates the textToSpeech
+    from the text area
+  */
+  speakButton.addEventListener('click', () => {
+    const voiceName = voiceSelect.selectedOptions[0].getAttribute('data-name');
+    const selectedVoice = listOfVoices.find(voice => voice.name === voiceName);
+
+
+    // console.log(textArea.value);
+    let textToSpeech = new SpeechSynthesisUtterance(textArea.value);
+    textToSpeech.voice = selectedVoice;
+
+    textToSpeech.onstart = () => {
+
+      faceImage.src = 'assets/images/smiling-open.png';
+      // console.log(faceImage); for my personal testing
+    };
+
+    textToSpeech.onend = () => {
+      faceImage.src = 'assets/images/smiling.png';
+    };
+
+    speechSynthesis.speak(textToSpeech);
+
+  });
 }

assets/scripts/expose.js

@@ -1,7 +1,84 @@
 // expose.js
 
+let confetti;
+
 window.addEventListener('DOMContentLoaded', init);
 
+/*
+Initializes all the elements from the html file to JS
+Calls the functions to make the page cohesive
+*/
 function init() {
   // TODO
-}
+  const imageElement = document.querySelector('section#expose img');
+  const soundElement = document.querySelector('audio');
+  const volumeSlider = document.querySelector('#volume');
+  const volumeIcon = document.querySelector('#volume-controls img');
+  const audioButton = document.querySelector('section#expose button');
+  const hornSelect = document.querySelector('#horn-select');
+  confetti = new JSConfetti();
+
+  setupHornChanges(hornSelect, imageElement, soundElement);
+  setupVolumeControl(volumeSlider, volumeIcon, soundElement);
+  setupAudioButton(audioButton, soundElement);
+}
+
+/*
+sets the horn based on the drop down menu
+*/
+function setupHornChanges(selectElement, imgElement, soundElement){
+  selectElement.addEventListener('change', () =>{
+    const hornType = selectElement.value;
+
+    switch (hornType){
+      case 'air-horn':
+        imgElement.src = 'assets/images/air-horn.svg';
+        soundElement.src = 'assets/audio/air-horn.mp3';
+        break;
+      case 'car-horn':
+        imgElement.src = 'assets/images/car-horn.svg';
+        soundElement.src = 'assets/audio/car-horn.mp3';
+        break;
+      case 'party-horn':
+        imgElement.src = 'assets/images/party-horn.svg';
+        soundElement.src = 'assets/audio/party-horn.mp3';
+        break;
+    }
+  });
+}
+
+
+/*
+ Chooses the icon for the volume control based on the slider
+*/
+function setupVolumeControl(sliderElement, iconElement, soundElement){
+  sliderElement.addEventListener('input', () =>{
+    const volume = parseInt(sliderElement.value, 10);
+    soundElement.volume = volume / 100;
+
+    if (volume === 0) {
+      iconElement.src = 'assets/icons/volume-level-0.svg';
+    } else if (volume < 33) {
+      iconElement.src = 'assets/icons/volume-level-1.svg';
+    } else if (volume < 67) {
+      iconElement.src = 'assets/icons/volume-level-2.svg';
+    } else {
+      iconElement.src = 'assets/icons/volume-level-3.svg';
+    }
+  });
+}
+
+/*
+Sets up the audio button and will play based on the parameters
+if its a party horn then add confetti
+*/
+function setupAudioButton(buttonElement, soundElement){
+  buttonElement.addEventListener('click', () =>{
+
+    const hornSelect = document.querySelector('#horn-select');
+    if(hornSelect.value === 'party-horn'){
+      confetti.addConfetti();
+    }
+    soundElement.play();
+  });
+}