<div class="demoC">
<h2>Voice-activated DOM control</h2>

<p>Allow the mic and go to chrome edit and turn on start speaking. You will know it is listening if there's a red dot on your browser tab.</p>
<p><b> Only works in Chrome<b></p>

  <i>say "make change" and see what happens:</i><br/><br/>
<nav>
  <a href="#" data-word="make change" class="element changec" id="changE">Make change</a>
<!--  <a href="about-me" data-word="insert image" id="imagE" class="element">Insert image</a>
  <a href="about-me" data-word="add class" class="element" id="classE">Add class</a>
  <a href="portfolio" data-word="add element" class="element" id="addE">Add element</a>
  <a href="contact" data-word="contact" class="element">Contact</a> -->
</nav>
  
<p id="demo"></p>

<p><u>Latest word the API thinks you just said:</u> <p id="latest-word"></p></p>
  </div>
body {padding:20px 40px;
  font-family: Montserrat, sans-serif;}

.demo {
nav {
  a {
    display:inline-block;
    padding:10px 20px 10px 0px;
    font-weight: bold;
    font-size: 20px;
  }
}
}
.element {
  opacity: .8;
}

.elementQ {
background: black;
  -webkit-animation: mymove 1s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 1s infinite;
}
#myDIV {
  width: 100px;
  height: 100px;
  position: relative;
  -webkit-animation: mymove 1s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 1s infinite;
}

.mymove {
    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
  from {color: white;}
  to {color: black;}
}
body {
  background: #fff;
}

.Iam {
  padding: 2em 5em;
  font: normal 40px/50px Montserrat, sans-serif;
  color: #999;
}
.Iam p {
  height: 50px;
  float: left;
  margin-right: 0.3em;
  width: 1000px !important;
  overflow: visible;
}
.Iam b {
  float: left;
  overflow: visible;
  position: relative;
  height: 50px;
  top: 40px;
}
.Iam .innerIam {
  display: inline-block;
  color: #e74c3c;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 0;


/*animation*/
-webkit-animation:move 10s;
   -moz-animation:move 10s;
    -ms-animation:move 10s;
     -o-animation:move 10s;
        animation:move 10s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
   -moz-animation-delay:1s;
    -ms-animation-delay:1s;
     -o-animation-delay:1s;
        animation-delay:1s;
}
@keyframes move{
0%  { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}

@-webkit-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-moz-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-o-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}

h1, a {
	background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
	background-size: cover;
	color: transparent;
	-moz-background-clip: text;
	-webkit-background-clip: text;
	text-transform: uppercase;
	margin: 0px 0;
}

span {
   display: block;
  margin: -11px 0 17px 0;
  color: #f1ebe5;
  text-shadow: 0 13.36px 8.896px #c4b59d,0 -2px 1px #fff;
  letter-spacing: -4px;
}

.background {
background: black;
 padding: 20px;
  width: inherit;
  display: block;
  -webkit-transition: .4s all ease-in;
}

var para = document.createElement("p");
var node = document.createTextNode("This is new.");

// var element = document.getElementById("div1");
// element.appendChild(para);
var demoC = document.getElementsByClassName("demoC");
var allLinks = document.getElementsByClassName("element");
var strongEl = document.getElementById('latest-word');
var addE = document.getElementById('addE');
var classE = document.getElementById('classE');
var changE = document.getElementById('changE');
var imagE = document.getElementById('imagE');

// new instance of speech recognition
var recognition = new webkitSpeechRecognition();
// set params
recognition.continuous = true;
recognition.interimResults = true;
recognition.start();
recognition.onresult = function(event){
  
  // delve into words detected results & get the latest
  // total results detected
  var resultsLength = event.results.length -1 ;
  // get length of latest results
  var ArrayLength = event.results[resultsLength].length -1;
  // get last word detected
  var saidWord = event.results[resultsLength][ArrayLength].transcript;
  
  // loop through links and match to word spoken
  for (i=0; i<allLinks.length; i++) {
    
    // get the word associated with the link
    var dataWord = allLinks[i].dataset.word;
    
    // if word matches chenge the colour of the link
    if (saidWord.indexOf(dataWord) != -1) {
    //  allLinks[0].innerHTML = "<p>Here's a different element!</p>";
      changE.innerHTML = "<h1>This is a new element</h1>";
      allLinks[0].classList.add("background");
 //changE.appendChild(node);
      imagE.innerHTML = "<img src='https://media.treehugger.com/assets/images/2014/01/550x752xscootersass.jpg.pagespeed.ic.I1Ed8x1ZPq.jpg'/><h1>hi</h1>";
      
     
      allLinks[allLinks.length - 2].classList.toggle("elementQ");
      
      classE.innerHTML = "<h1>New class</h1>";
    }
    
    
  }
  
  // append the last word to the bottom sentence
  strongEl.innerHTML = saidWord;
}

// speech error handling
recognition.onerror = function(event){
  console.log('error?');
  console.log(event);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.