- Find the mistakes in the
PirateMap Exercise, which is Problem 1 of the Takehome Final Exam Practice
Problems. The corrected version is shown at the end of that exercise.
- Design an HTML form with one field fname. If this field is missing when the
form is submitted, post the error message "First name is a required field." under the
input element for fname. Then cancel the form submission. Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exercise 4</title>
<style>
#notify { color: red; display: none; }
</style>
<script>
function checkSubmit(e) {
var fname = document.getElementById("fname").value;
var notification = document.getElementById("notify");
if (fname == "") {
notification.style.display = "block"
e.preventDefault( );
}
else {
notification.style.display = "none";
}
}
function init( ) {
document.getElementById("form1").addEventListener("submit",
checkSubmit);
}
window.addEventListener("load", init);
</script>
</head>
<body>
<h1>Exercise 4</h1>
<form id="form1"
action="http://ectweb.cs.depaul.edu/sjost/receipt.php"
method="POST">
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname"><br>
<span id="notify">First name is a required field<br>.</span><br>
<input type="submit" value="Submit Form">
</form>
</body>
</html>
- What is wrong with this form?
<form action="https:www.server.com/receipt.php" method="get">
<input type="text" placeholder="Enter your name:"><br>
<input type="number" placeholder="Enter your age:">
</form>
Answer: both the name and age fields must have name attributes for these
values to be sent to the server. Also, a submit button is missing. Here is the HTML
submit button element:
<input type="submit" value="Submit Form">
- Write an HTML page that implements a square root calculator.
Use an input element with type="number" and
step="any". Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Square Root Calculator</title>
<script>
window.onload = ( ) => {
document.querySelector("#btn1").onclick = ( ) => {
var x = document.querySelector("#in1").value;
var output = document.querySelector("#out1");
output.value = Math.sqrt(x);
};
};
</script>
</head>
<body>
<h1>Square Root Calculator</h1>
<input type="number" step="any" id="in1"><br><br>
<button id="btn1">Compute Square Root</button>
<input type="text" id="out1">
</body>
</html>
- Translate the jQuery script in this application to vanilla JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<style>
* { font: 110% Geneva, sans-serif; }
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script>
$( ( ) => {
$("button").click( ( ) => {
var x = parseFloat($("#op1").val( ));
var operator = $("select").val( );
var y = parseFloat($("#op2").val( ));
var answer;
if (operator == "+") { answer = x + y; }
else if (operator == "-") { answer = x - y; }
else if (operator == "*") { answer = x * y; }
else { answer = x / y; }
$("#res").val(answer.toFixed(8));
});
});
</script>
</head>
<body>
<h1>Calculator</h1>
<label for="op1">Operand 1</label><br>
<input type="number" id="op1"><br><br>
<select>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><br><br>
<label for="op2">Operand 2</label><br>
<input type="number" id="op2"><br><br>
<button>Perform Operation</button><br><br>
<label for="res">Result</label><br>
<input type="number" id="res">
</body>
</html>
Answer: here is the jQuery script rewritten in Vanilla JavaScript:
function showAnswer( ) {
var op1Obj = document.querySelector("op1");
var x = parseFloat(op1Obj.value);
var selectObj = document.querySelector("select");
var operator = selectObj.value;
var op2Obj = document.querySelector("op2");
var x = parseFloat(op2Obj.value);
if (operator == "+") { answer = x + y; }
else if (operator == "-") { answer = x - y; }
else if (operator == "*") { answer = x * y; }
else { answer = x / y; }
var resObj = document.querySelector("#res");
resObj.value = answer.toFixed(8);
}
function init( ) {
var btnObj = document.querySelector("button");
btnObj.addEventListener("click", showAnswer);
}
document.addEventListener("DOMContentLoaded", init);