Exercise : Font Manipulation (by Rishi Goutam)

Using the browser's Javascript console, modify font.html by changing the following in the paragraph #text:

1. the text of the paragraph to something of your choice
2. the font, font size, and color of the text

Once you have achieved these modifications, add your code to the page so that clicking the "Prettify" button will apply them. A runnable solution is located here (Don't peek at the code!).

Now, make it so that the JavaScript code is unobtrusive - ie there is no onclick handler in the HTML file

Exercise Solution

<div>
	<button id="prettify" onclick="prettify();">Prettify</button>
</div>

function prettify() {
   var text = document.getElementById("text");
   text.innerHTML = "Look! It's pretty!";
   
   // font styles added by JS:
   text.style.fontSize = "13pt";
   text.style.fontFamily = "Comic Sans MS";
   text.style.color = "red";
}