add finished speech text reader

Author: solygambas

71-speech text reader/script.js

@@ -64,7 +64,57 @@ function createBox(item) {
     <img src='https://github.com/bradtraversy/vanillawebprojects/blob/master/speech-text-reader/img/${image}.jpg?raw=true' alt="${text}"/>
     <p class="info">${text}</p>
     `;
+  box.addEventListener("click", () => handleSpeech(text, box));
   main.appendChild(box);
 }
 
 data.forEach(createBox);
+
+let voices = [];
+
+function getVoices() {
+  voices = speechSynthesis.getVoices();
+  voices.forEach((voice) => {
+    const option = document.createElement("option");
+    option.value = voice.name;
+    option.innerText = `${voice.name} ${voice.lang}`;
+    voicesSelect.appendChild(option);
+  });
+}
+
+function handleSpeech(text, box) {
+  setTextMessage(text);
+  speakText();
+  box.classList.add("active");
+  setTimeout(() => box.classList.remove("active"), 800);
+}
+
+const message = new SpeechSynthesisUtterance();
+
+function setTextMessage(text) {
+  message.text = text;
+}
+
+function speakText() {
+  speechSynthesis.speak(message);
+}
+
+function setVoice(e) {
+  message.voice = voices.find((voice) => voice.name === e.target.value);
+}
+
+// Event Listeners
+toggleButton.addEventListener("click", () => {
+  document.getElementById("text-box").classList.toggle("show");
+});
+closeButton.addEventListener("click", () => {
+  document.getElementById("text-box").classList.remove("show");
+});
+speechSynthesis.addEventListener("voiceschanged", getVoices);
+voicesSelect.addEventListener("change", setVoice);
+readButton.addEventListener("click", () => {
+  setTextMessage(textarea.value);
+  speakText();
+});
+
+getVoices();

71-speech text reader/style.css

@@ -22,6 +22,7 @@ body {
 
 h1 {
   text-align: center;
+  color: var(--secondary-color);
 }
 
 .container {
@@ -37,10 +38,14 @@ h1 {
   font-size: 1rem;
   font-family: inherit;
   font-weight: bold;
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 2rem;
   cursor: pointer;
 }
 
+.btn:hover {
+  opacity: 0.9;
+}
+
 .btn:active {
   transform: scale(0.98);
 }
@@ -69,21 +74,25 @@ h1 {
   transition: all 1s ease-in-out;
 }
 
+.text-box.show {
+  transform: translate(-50%, 0);
+}
+
 .text-box select {
   background-color: var(--main-color);
   color: var(--light-color);
   border-radius: var(--border-radius);
   border: 0;
   font-size: 0.75rem;
-  height: 30px;
+  padding: 0.75rem 1rem;
   width: 100%;
 }
 
 .text-box textarea {
-  border: 1px #dadada solid;
+  border: 1px var(--border-color) solid;
   border-radius: var(--border-radius);
   font-size: 1rem;
-  padding: 0.5rem;
+  padding: 0.75rem 1rem;
   margin: 1rem 0;
   height: 150px;
   width: 100%;

README.md

@@ -76,7 +76,7 @@
 | 68  | [Music Player](https://github.com/solygambas/html-css-fifty-projects/tree/master/68-music%20player)                             | [Live Demo](https://codepen.io/solygambas/full/LYbaZNG)  |
 | 69  | [Infinite Scroll Posts](https://github.com/solygambas/html-css-fifty-projects/tree/master/69-infinite%20scroll%20posts)                             | [Live Demo](https://codepen.io/solygambas/full/qBqvyEB)  |
 | 70  | [Typing Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/70-typing%20game)                             | [Live Demo](https://codepen.io/solygambas/full/wvoOQvq)  |
-| 71  | [Speech Text Reader](https://github.com/solygambas/html-css-fifty-projects/tree/master/71-speech%20text%20reader)                             | [Live Demo](#)  |
+| 71  | [Speech Text Reader](https://github.com/solygambas/html-css-fifty-projects/tree/master/71-speech%20text%20reader)                             | [Live Demo](https://codepen.io/solygambas/full/QWGPLVM)  |
 
 This repository is mostly based on 2 courses by Brad Traversy (2020):