CSCI-E3: Project Unit3a

by Angela Baruth

HTML

<div id="OpeningText">
    <p>It’s that time of year when you clean out your closets, dust off shelves, and spruce up your floors.</p>
    <p>Once you’ve taken care of the dust and dirt, what about some digital cleaning?

</p>
    <p>Going through all your files and computers may seem like a daunting task, but we found ways to make the process fairly painless.</p>
</div>

<input type="button" id="transformButton" name="transformButton" value="Transform!" />

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%;
}

#OpeningText{
	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

function transformText() {
    
    // Get elements within the DIV tag 
    var theDiv = document.getElementById("OpeningText");
      
    // 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("transformButton").onclick = transformText;

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