CS 1100: Web Development: Client-Side Coding

Setup: Files

Download the starter code from the course homepage. Unzip the file and put the folder in the place where you keep all of your class code. It contains:

• a web page in which the user will move the mouse,
• the map image used in the web page,
• a style sheet, and
• a starter file for your JavaScript code.

Open the web page in a browser and the script file in VS Code. Your development environment is ready.

In this lab, you will write code that reacts to mouse movements. We have not studied events in detail yet in the course, so the JavaScript file contains some essential code to get you started.

Take a look at the script now.

The file contains a function: showMessage(). The two lines at the bottom of the file ensure that this function is called every time the mouse pointer moves in the window. The function provides you access to the mouse's location in the form of variables mouseX and mouseY.

Setup: The Story

Welcome to Middle-earth, web developer! Your task today is simple: help travelers make it to the safe haven of Lothlorien, which is marked with a green rectangle. Middle-earth is relatively safe at this time, so travelers should be able to make it to their destination without any difficulties, as long as they don't wander into Mordor. To accomplish your task, you will write code to display the travelers' location as they move their mouse pointer to Lothlorien. The white rectangle with the dark blue border at the top of the page is a message box, where you will tell the traveler where they are and whether they have reached their destination.

Task 1: Display the Mouse's Location

The message box is defined as a div with the id message. To start, we will display only the mouse's location.

• Build the string you want to display. You want the text to show something like this:

  You are at x=1268, y=491.

  where 1268 is the current value of mouseX and 491 is the current value of mouseX. Store the string in a variable.
• Get the message div element and store it in a variable.
• Set the div's innerText property to be your string.

Now test your link to make sure it works. Save the script file, reload the web page, and start moving the mouse inside the window. The message box will be showing the mouse's current coordinates.

Task 2: Update the Message With Relative Location

Now let's check to see whether the traveler you are guiding through the perilous wilderness of Middle-earth is in Lothlorien, and update the message to inform them.

If they are in Lothlorien, the message will also say:

You have reached Lothlorien!

If not, it will also say:

You are still on your way...

Task 2(a): Get data values we need

To determine if the mouse is within the green box of Lothlorien, we will need to know the dimensions of the box.

Add this code to your script to create the variables you need:

// first, get the data properties needed for the test
let target = document.querySelector('#lothlorien');
let targetX = target.offsetLeft;
let targetY = target.offsetTop;
let targetWidth = target.clientWidth;
let targetHeight = target.clientHeight;

Task 2(b): Determine if the mouse is within Lothlorien

Write code to determine if the mouse is in the box. Here's one possible approach:

The mouse pointer is inside Lothlorien if all of these conditions are true:

1. the mouse's X coordinate is greater than Lothlorien's left border's X coordinate
2. the mouse's X coordinate is less than Lothlorien's right border's X coordinate
3. the mouse's Y coordinate is greater than Lothlorien's top border's Y coordinate
4. the mouse's Y coordinate is less than Lothlorien's bottom borders Y coordinate

We don't know the Lothlorien's coordinates for #2 and #4, but we can calculate them by adding the box's width to targetX and adding the box's height to targetX.

Hint:

• Create four variables to hold the values of these four conditions: xBigEnough, xSmallEnough, yBigEnough, and ySmallEnough.
• Create a variable whose value is true if all four conditions are true, and false otherwise. You might call it mouseInTheBox. Use the logical 'and' operator && to construct this expression.

Task 2(c): Write an if statement

Now write an if statement that users your final variable (mouseInTheBox) to determine which string to add to the message.

If the condition is true, add You have reached Lothlorien! to the message box's innerText. Otherwise, add You are still on your way....

You can do this by appending the new string to the string you constructed for Task 1, and then storing the full string in the message box's innerText.

Now test your code to make sure it works. Save the script file, reload the web page, and start moving the mouse inside the window. The message box will be showing the mouse's current coordinates as well as a helpful message to the traveler.

Submit Your Work

Submit your middle-earth.js file using the link on the course home page.

Bonus Tasks

If you get done early,or if you enjoy this exercise or want to practice more at home, here are a few more things you can add to Middle-earth:

• Try to make your message more informative by telling the traveler in which direction need to move. For example, if they are south of Lothlorien, they should move north. To do this, you definitely need to test each of the four conditions separately.
• Draw a red box around Mordor. (Do this in the CSS file, using Lothlorien's box as an example.) Display an ominous message whenever the mouse drifts into Mordor.