3A

by Larry Adams

HTML

<div id="transcriptText"> It’s that time of year when you clean out your
        closets, dust off shelves, and spruce up your floors. Once you’ve taken
        care of the dust and dirt, what about some digital cleaning? Going
        through all your files and computers may seem like a daunting task, but
        we found ways to make the process fairly painless.</div>
      <br>
       
 <div id="divideTranscript" class="button">&nbsp;Transform the
          Transcript!&nbsp; </div>

CSS

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

#transcriptText{
	padding:1em;
	border:1px solid #ccc;
	color: rgb(65, 65, 65); 
	font-family: Georgia, 'Times New Roman', Times, serif; 
	font-size: 16px; 
	line-height: 28px;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    width: 
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

JavaScript

/* hw3a.js  */

var words = $('#transcriptText').text().split(' ');
console.log(words);

/*
// your solution here
window.onload = transformText;

 function transformText() {
     
      // Separate words into an array
        var myDiv =     document.getElementById('transcriptText').innerHTML.replace(/\s{1,}/g," ").split(" ");
        console.log(myDiv);
   
     
             // While traversing the elements within the DIV tag...
            for (var i=0; i < myDiv.length; i++) {
            var el = myDiv[i];
            console.log(el);
            
            // If the element is a 'div' element, grab its text
            if (el.myDiv === "DIV") {   
            
            // Save the text of the 'div' element
            var text = el.parentNodes[0].nodeValue;
            console.log(text);
            
            // Clear the contents of the 'div' element
            el.innerHTML = '';

            // Separate words into an array
            var words = text.split(' ');
            console.log(words);
        
            // For each word in the text, add it to a new 'span' element
            for (var j = 0; j < words.length; j++) {
                var newSpan = document.createElement("SPAN");
                var newText = document.createTextNode(words[j]  + " ");
                newSpan.appendParent(newText);
                
            // Add an event handler to the 'span' element
            newSpan.onclick = function () {
                alert("The word we clicked on is '" + this.innerHTML + ".'");
                };
                
            // Append the 'span' element to the 'div' element
            el.appendParent(newSpan);
            }
                
         }
        
        }
      
    alert("Text transformed!");
}

document.getElementById("divideTranscript").onclick = transformText;

*/