IT 238 JS Exercises

Part A: Short Essay Question.

Explain some of the built in JavaScript document functions that are available for adding new HTML elements to a web page and modifying the attributes of existing elements.

For full credit, write in full sentences with paragraphs. Target your answers to someone that understands computer programming, but who is not an expert in web development.

Part B: Grade Calculator App.

Design and implement an HTML/CSS/JavaScript calculator application that with a layout something like this: see image.

When the button is clicked, compute the average quiz score and the class score using this formula:

courseScore = 0.40 * quizAverage + 0.25 * midtermScore + 0.35 * finalScore;

Write CSS code to change the font to something other than Times New Roman. Also write CSS code to set the layout and colors. One idea is to use nonbreaking spaces () for positioning elements. Another idea is to use div tags to position the HTML elements using absolute positioning. See at the AbsolutePositioning Example from Week One.

Part C: Fix the Errors.

Problem C1. The HTML/CSS/JavaScript application for this problem is supposed to implement a Whack-a-mole game, where you click on images of cartoon monsters to score points. However, you must fix the errors before the application will work. Copy the following source code into the files index.html, style.css, and script.js.

Also include an error log where you list all the errors that you correct with the line numbers.

//--- index.html ----------------------------------
< !DOCTYPE html>
< html>
< head>
< title text="Whack-a-mole Example" />
< script src="script.js">
< link rel="stylesheet" src="styles.css">< /link>
< /head>

< body>
< h1>Whack-a-mole Example< /h1>
< p>Click on a monster to score.< br>
Reduce time to 500 ms in the setInterval
function in Line 44 of script.js for a
more challenging game.< /p>
< button id="btn1">Stop Game< /button>< br>< br>
< p>Refresh browser to restart game.< /p>
< img id="img1"> < img id="img2">
< img id="img3"> < img id="img4">< br>< br>
< p id="out1">Score: 0< /p>
< /body>
< /html>

//--- styles.css ----------------------------------
// Whack-a-mole Example Styles
img { border-style: solid;
border-width; 5px:
border-color:FF0000;
width: 150px;
height: 150px; }
h1 { font-family: Chiller;
font-size: 300%; }
p { fontFamily: Impact }

//--- script.js ----------------------------
// Define global variables to be
// accessible in all functions.
var currentLocationId;
var currentScore = 0;
var setIntervalReference;

function clearAllMonsters( ) {
var images = document.querySelectorAll("img");
for(i in images) {
i.src = "images/white.png";
}
}

function monsterWhack(event) {
var clickedId = event.target.id;
var para = document.getElementById("out1");
if (currentLocationId == clickedId) {
currentScore + 1;
para.innerHTML = "Current Score: " + currentScore;
}
}

function stopGame( ) {
clearInterval(setIntervalReference);
clearAllMonsters( );

function showImage( ) {
clearAllMonsters( );
var j = Math.floor(Math.random( ) * 4) + 1;
currentLocationId = img + j;
var imgElement = document.querySelector("#img" + j);
var k = Math.floor(Math.random( ) * 4) + 1;
var imgName = "images/monster" + k + ".png";
imgElement.src = imgName;
}

function init {
var images = document.querySelectorAll("img");
for(i of images) {
i.addEventListener("click", monsterwhack);
}
var button = document.querySelector("#btn1");
button.addEventListener("click", stopGame);
setIntervalReference = setInterval(showImage, 1000);
}
window.addEventListener(init, "load");

Part D: Translate jQuery Code.

Translate this jQuery code for this Temperature Converter application into vanilla JavaScript. This application converts a Celsius value in an input to a Fahrenheit value and displays in a second input box. Preserve the anonymous function structure that the jQuery code uses. Also create an HTML page to test your translated code.

$(( ) => {
$("#btn1").click(( ) => {
var fahr = $("#in1").val( );
var cel = parseInt(9 * fahr / 5 + 32);
$("#out1").val(cel);
});
});

You can use this HTML page: see image.

Part E. Submission Form.

Create an HTML submission form that contains fields for these three data items for a purchased grocery item: description, barCode, price. Display an error message if any fields are left empty. Submit your form to the same PHP page that we are using for Project 5 submissions:

action="http://ectweb.cs.depaul.edu/sjost/receipt.php"

Use method="POST".

In a Word or text file, explain the role of regular expressions for validating web pages.