Jayson Reading

by dixalex

HTML

<h1>Genesis Chapter 1 verses 6 through 20 dec 6 2022</h1>
<p class="color-purple">verse 6 And God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters.</p>
<p class="color-jayson">verse 7 And God made the firmament, and divided the waters which were under the firmament from the waters which were above the firmament: and it was so.</p>
<p class="color-blue">verse 8 And God called the firmament Heaven. And the evening and the morning were the second day.</p>
<p class="color-green">verse 9 And God said, Let the waters under the heaven be gathered together unto one place, and let the dry land appear: and it was so.</p>
<p class="color-purple">verse 10 And God called the dry land Earth; and the gathering together of the waters called he Seas: and God saw that it was good.</p>
<p class="color-purple">verse 11 And God said, Let the earth bring forth grass, the herb yielding seed, and the fruit tree yielding fruit after his kind, whose seed is in itself, upon the earth: and it was so.</p>
<p class="color-jayson">verse 12 And the earth brought forth grass, and herb yielding seed after his kind, and the tree yielding fruit, whose seed was in itself, after his kind: and God saw that it was good.</p>
<p class="color-jayson">verse 13 And the evening and the morning were the third day.</p>
<p class="color-jayson">verse 14 And God said, Let there be lights in the firmament of the heaven to divide the day from the night; and let them be for signs, and for seasons, and for days, and years:</p>
<p class="color-blue">verse 15 And let them be for lights in the firmament of the heaven to give light upon the earth: and it was so.</p>
<p class="color-purple">verse 16 And God made two great lights; the greater light to rule the day, and the lesser light to rule the night: he made the stars also.</p>
<p class="color-blue">verse 17 And God set them in the firmament of the heaven to give light upon the earth,</p>
<p...

CSS

.color-blue {color: blue;}
.color-jayson {color: #202020;}
.color-green {color: green;}
.color-purple {color: purple;}
body {background-color: #ACE;}

JavaScript

$('p, h1').html(function () {
    var cont = [];
    return "<span>" + $(this).text().split(" ").join("</span> <span>") + "</span>";
  }).on("click", "span", function(evt) {
    window.speechSynthesis.cancel();
    var hoveredWord = $(this).text();
    console.log(hoveredWord);
var msg = new SpeechSynthesisUtterance();
msg.text = hoveredWord;
window.speechSynthesis.speak(msg);
      $(evt.target).addClass('color-blue');
    // translate(hoveredWord, 'en'); // function to translate a word to English Language
  });