JSFiddle - React, Tailwind, and code Playground

by russduza

HTML

<h3>Practice Set, Week 10,  Split a block of text into individual SPANs</h3>
     <br>
    <div id="transcriptText2">Later on in the course we will learn how to take each word in a video transcript and highlight it as the matching portion of the video is playing. In order to do this, each word must be in its own HTML SPAN (or DIV). For now, your task is to add Javascript that will convert this box of text into individuals SPANS when clicking the TRANSFORM ME button. 
    </div>
    <br>
    <button id="divideTranscript" class="button">&nbsp;TRANSFORM ME!&nbsp;
    </button>
    <br>
    <p>Your output should replace the text below:</p>
    <div id="transcriptText">Later on in the course we will learn how to take each word in a video transcript and highlight it as the matching portion of the video is playing. In order to do this, each word must be in its own HTML SPAN (or DIV). For now, your task is to add Javascript that will convert this box of text into individuals SPANS when clicking the TRANSFORM ME button.
    </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;
}

#transcriptText2{
	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;
}

[id^="word"]:hover {
	background-color: #FFFF00;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    console.log('document ready');
    document.getElementById('divideTranscript').addEventListener('click', function () {
        var text = document.getElementById('transcriptText').innerHTML;
        //explode the string into an array
        var array = text.split(" ");
        console.log(array);
        var html = '';
        document.getElementById('transcriptText').innerHTML = '';
        array.forEach(function (index, value) {
            var span = document.createElement('span');
            span.textContent = index + " ";
            
            span.setAttribute('id', + value);
            document.getElementById('transcriptText').appendChild(span);
        });
    });
}, false);