JSFiddle - React, Tailwind, and code Playground

by Reem Al Dossary

HTML

<body class="hw">
    <div class="container">
      <h1>CSCI E-3 Project Unit #3a</h1>
      <p class="whatlearn">Unit 3 Projects will cover the DOM, browser Events
        and FORM handling, with a detour into Javascript closures.This 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.&nbsp; 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.&nbsp; We will do this in Unit 4 if this...

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:hover {
	cursor: pointer;
	background-color: #ccc;
}

JavaScript

/* hw3a.js  */
"use strict";

// your solution here
	var button = document.getElementById("divideTranscript");

	button.addEventListener("click", function (){
	
	var words = document.getElementById("transcriptText");

    var textArray = words.innerHTML.split(" ");
    
    document.getElementById("transcriptText").innerHTML = " ";
    
	for (var i = 0; i < textArray.length; i++){	
		console.log(textArray[i]);
		//window.document.innerHTML(textArray[i]);//

		
	var textSpan = document.createElement("span");
	
	var newText = document.createTextNode(textArray[i] + " ");
	
  textSpan.setAttribute("class", "word");
  textSpan.setAttribute("id", "word" + i);
  
	textSpan.appendChild(newText);
	words.appendChild(textSpan);
    
	
	textSpan.addEventListener("mouseover", function(event) {
	
	event.target.style.backgroundColor = "palegreen";
	
	setTimeout (function() {
		event.target.style.backgroundColor = " ";
		});
	}, false);	
	}

	});