Final Review Guide

IT 238 -- Takehome Final Exam Practice Problems

Find the errors in this HTML/CSS/JavaScript application. Here is map.jpg for the image.

<!-- HTML Page: map.htm -->

<DOCTYPE html>
<html lang="english">
    <head>
        <meta encoding="utf-8">
        <title>Pirates Booty<title>
        <script href="script.js">
        <link rel="stylesheet" src="../styles.css">
    </head>
    <body>
        <img id=map src="map.jpg">
        <p id="coords">Move mouse over map to 
                       find coordinates...</p>
    </body>
</html>

--------------------------------------------------
// CSS Styles: styles.css 
body { fontfamily: Verdana Tahoma sans-serif;
       background; FFFFE0 ]

--------------------------------------------------
// JavaScript Script: script.js
window.onLoad = init;
function init {
    val map = document.getElementById("#map");
    map.onmousemove = showCoords( );

function showCoords(eventObj) {
    var coords = getElementsById("coord");
    var x = e.clientX;
    let y = e.clientY;
    coords.innerHtml = 'Map coordinates: (%{x}, %{y})';
}

Here are the corrected source code files:

--------------------------------------------------
<!DOCTYPE html>
<!-- HTML Page: map.htm -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Pirates Booty</title>
        <script src="script.js"></script>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <img id="map" src="map.jpg">
        <p id="coords">Move mouse over map to 
                       find coordinates...</p>
    </body>
</html>
--------------------------------------------------
/* CSS Styles: styles.css */
body { font-family: Verdana, Tahoma, sans-serif;
       background-color: #FFFFE0; }
--------------------------------------------------
// JavaScript Script: script.js
window.onload = init;
function init( ) {
    var map = document.getElementById("map");
    map.onmousemove = showCoords;
}

function showCoords(eventObj) {
    var coords = document.getElementById("coords");
    var x = eventObj.clientX;
    let y = eventObj.clientY;
    coords.innerHTML = 
        `Map coordinates: (${x}, ${y})`;
}
--------------------------------------------------

Write an application that reads a positive angle in radians from a number box, then outputs the angle in degrees, minutes, and seconds. The conversion formula is
```
degrees = (180.0 / Math.PI) * radians;
```

Rewrite the application in Problem 4 so that the controls are created dynamically. Start with this empty body tag:

<body />

Answer:

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = ( ) => {
    var b = document.querySelector("body");
    var v = document.createElement("input");
    b.appendChild(v);
    v.setAttribute("type", "number");
    v.setAttribute("value", "0.0");

    var br = document.createElement("br");
    b.appendChild(br);
    b.appendChild(br);

    var btn = document.createElement("button");
    b.appendChild(btn)
    btn.innerHTML = "Convert to Degrees";
    b.appendChild(br);
    b.appendChild(br);

    var p = document.createElement("p");
    b.appendChild(p);

    btn.onclick = ( ) => {
        var val = v.value;
        var rad = parseFloat(val);
        var deg = rad * 180.0 / Math.PI;
        var degInt = Math.floor(deg);
        var min = (deg - degInt) * 60;
        var minInt = Math.floor(min);
        var sec = (min - minInt) * 60;
        var secInt = Math.round(sec);
        var output = `${degInt} deg ${minInt}\' ${secInt}\"`;
        p.innerHTML = output;
    };
};
</script>
</head>

<body></body>
</html>

Create a square root calculator. Read the input value from a textfield and display the result in a paragraph. Use a regular expression to validate the input value.
Write an HTML page that creates this dropdown menu dynamically, starting with an empty body:

Translate this jQuery code into vanilla JavaScript and test it:

// jQuery code.
$(( ) => {
    $("#btn").click(( ) => {
        var lbs = parseFloat($("#lbs").val( ));
        var kilos = lbs / 2.205;
        $("#kilos").val(kilos);
    });
});

Modify the W3Schools Drag and Drop Example so that the HTML, CSS, and JavaScript code is placed into separate .html, .css, and .js files:
www.w3schools.com/html/html5_draganddrop.asp