CSCI-E3: Project Unit3a

Example for project unit3a.

HTML

<div class="container">
      <h1>CSCI E-3 Unit 3 Project, Part A</h1>
      <p class="whatlearn">This Unit 3 Project will cover the DOM, browser Events
        and FORM handling, with a detour into Javascript closures. Part A
        will focus on the DOM.&nbsp; </p>
      <h3 class="whatlearn">What you're learning:</h3>
      <p>Javascript is the "behavior" layer of the client-side Web experience.
        This unit covers some of the common interactions between the components
        of a Web page (structure, content, styles, forms) and Javascript, as
        exposed by the DOM and the DOM Event model. <br>
      </p>
      <ol>
      </ol>
      <h3>What you need to do:</h3>
      <ol>
        <ol>
          <li>DOM Exercise: Split a block of text into individual SPANs or DIVs</li>
        </ol>
      </ol>
      <h4>1) DOM Exercise: Split a block of text into individual SPANs or DIVs</h4>
      <p>The following exercise contains a block of text that represents the
        written transcript of a video. Often, a transcript is provided with a
        video so viewers can read along or so the video can be captioned.&nbsp;
      </p>
      <p>In this exercise, we'll be doing the first step in building an
        interface that could appear alongside a video player on a Web
        page. The idea is that each word in the transcript will highlight
        as the matching portion of the video is playing.</p>
      <p>In order to do this, each word must be in its own HTML SPAN (or DIV).
        In a real video transcript application, each SPAN would have a time
        value in seconds associated with it, and as that moment of the video
        played, we'd change the background color of the SPAN matching that time
        period. </p>
      <p> In a real application, we would also have the word be clickable, upon
        which the video would seek to the appropriate moment and play from
        there.  For this project, you don't have to make the words clickable....

JavaScript

/* hw3a.js  */

// your solution here

function transformText() {
    
    // Get elements within the DIV tag 
    var theDiv = document.getElementById("swOpeningCrawl");
      
    // While traversing the elements within the DIV tag...
    for (var i=0; i < theDiv.children.length; i++) {
        var el = theDiv.children[i];
      
        // If the element is a 'p' element, grab its text
        if (el.tagName === "P") {   
            // Save the text of the 'p' element
            var text = el.childNodes[0].nodeValue;
            console.log(text);
            // Clear the contents of the 'p' 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.appendChild(newText);
                
                // Add an event handler to the 'span' element
                newSpan.onclick = showInnerHTML;
                
                // Append the 'span' element to the 'p' element
                el.appendChild(newSpan);
            }
        }
        // Continue traversing until we're done!
    }
    
    
    alert("Text transformed!");
}

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

function showInnerHTML() {
    alert("The word we clicked on is '" + this.innerHTML + ".'");
}