exercises/js/events_dom/exercise4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercise #4: Formatting text</title>
    <style>
        div {
            width: 600px;
            height: 100px;
            border: 1px solid black;
            margin-top: 10px;
            /* default options */
            font-family: Arial;
            font-size: 12pt;
        }
    </style>
</head>
<body>
<form name="form">
    <select name="font_family" id="font_family">
        <option value="Arial" selected>Arial</option>
        <option value="Verdana">Verdana</option>
        <option value="Helvetica">Helvetica</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Courier New">Courier New</option>
    </select>
    <select name="font_size" id="font_size">
        <option value="8pt">8pt</option>
        <option value="10pt">10pt</option>
        <option value="12pt" selected>12pt</option>
        <option value="14pt">14pt</option>
        <option value="16pt">16pt</option>
    </select>
    <label>Italic <input type="checkbox" name="font_italic" id="font_italic"></label>
    <label>Bold <input type="checkbox" name="font_bold" id="font_bold"></label>
    <label>Underline <input type="checkbox" name="font_underline" id="font_underline"></label>
</form>

<div id="text">The quick brown fox jumps over the lazy dog</div>
</body>
</html>