S-3: Fiddle 25

Unit 3A Project.

by Jordan Marechal

HTML

<h1>
  CSCI S-3
  <br />Introduction to Web Programming Using JavaScript
</h1>
<h2>
  Harvard Summer School
  <br />2017
</h2>
<h3>TF: Rob Frenette</h3>
<div>
  Unit 3A Project.
  <br />Open JavaScript Console to see results.
</div>
<hr />
<div id="inputText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget quam pellentesque, pellentesque ex ut, dapibus nulla. Sed blandit enim vitae quam blandit ultrices. Aenean dolor nibh, fringilla a semper eget, suscipit non urna. Nulla mollis elementum libero et commodo. In et vulputate lorem, quis elementum mauris. Quisque vulputate sem at tempor sagittis. Nam laoreet in lacus a tristique. Quisque sed arcu at est ullamcorper blandit.</div>
<div>
  <br /><button id="transform">Transform</button>
</div>
<br />
<div id="outputText"></div>

JavaScript

'use strict';
console.clear();

var transform = document.getElementById('transform');

function process(inputTextVal, outputText) {
  var words = inputTextVal.split(' ');
  console.log(words);

  
	words.forEach((word) => {
  	 var newSpan = document.createElement('span');
     var newWord = document.createTextNode(word + ' ');
     newSpan.appendChild(newWord);
     
		 newSpan.addEventListener('click', () => {
     	console.log(newSpan);
      
     });
     
     outputText.appendChild(newSpan);
  });
	console.log(outputText.innerHTML);
  
  var outputText = document.getElementById("outputText"); //color change code
  
   document.getElementById("outputText").addEventListener("mouseover", function(word) { //added evenListener to code.

   
    
    if (evt.target.style.color != 'yello'){
        evt.target.style.color = 'yello';
    }else{
        evt.target.style.color = 'blue';
   }
   
});
  
}

transform.addEventListener('click', () => {
  var inputText = document.getElementById('inputText');
  var inputTextVal = inputText.innerHTML;
  var outputText = document.getElementById('outputText');

  console.log(inputTextVal);
	process(inputTextVal, outputText);
});