Module 4

In Module 4, you will learn JavaScript, the dominant client-side web language. JavaScript is the second programming language you will learn in CSE 3300.

This article contains your assignments for Module 4.

Warning:

This module takes students a while. It is strongly recommended that you start early and ask questions as they come up.

Learning Goals

• JavaScript
• DOM Events
• AJAX
• JSON

Reading

The following articles on the online class wiki textbook contain information that will help you complete the assignments.

• JavaScript
• AJAX and JSON
• jQuery
• Web Application Security, Part 3
• FAQ - Mod 4
• FAQ - Mod 5

Individual Assignments

IMPORTANT: The individual assignments must be completed without using a JavaScript library like jQuery. However, you may use jQuery for the group portion.

JavaScript Calculator

In Module 2, you made a calculator using PHP. Now you will be making one using JavaScript.

• The web page should have two input fields and a radio button group for the operation, with the 4 basic math operations represented (add, subtract, multiply, divide).
• JavaScript should monitor all three fields and display the current result whenever the user changes any value in any field, without refreshing the page.

  Tip 1: Consider using either the change or the keyup event on the text fields, and either the change or the click event on the radio buttons.

  Tip 2: Re-read the JavaScript guide if you need help figuring our how to bind callback functions to events, or how to determine which radio button is currently selected. (There are examples for both of these!)

• The calculator should be completely self-contained; i.e., you should not be making any requests to any other server-side or client-side scripts or web pages after the initial page load.

Tip: You can embed JavaScript code into an HTML document like this:

<script>
// your code here
</script>

Tip: If your code isn't working the way you expect, use a JavaScript error console. In Chrome, for example, press Ctrl-Shift-I (or Cmd-Option-I) to open the WebKit inspector.

Important: It is best practice to fully separate the content, appearance, and behavior. In previous modules, you may have lost points for using HTML tags that change the appearance of things (like <center> and <font>). In this module, make sure that you define your event listeners in JavaScript as in document.getElementById("xyz").addEventListener(...) and not in the HTML like <button onclick="badExample();">Bad Example</button>.

Weather Widget

In this section, you will make a web page that displays the weather forecast using AJAX requests to a weather server.

1. Make an empty HTML document; name it weather.html

   Refer to the HTML and CSS guide for the skeleton of an HTML document

2. Define a function in JavaScript; call it fetchWeather(). You may write your JavaScript in an embedded script in your HTML document.
3. Inside your fetchWeather() function, make an AJAX request to the weather server.

   We have a server that outputs the current weather in JSON format. The format is documented in the #JSON Structure section below.

1. URL: https://classes.engineering.wustl.edu/cse330/content/weather_json.php

   • IMPORTANT: Under normal circumstances, AJAX requests cannot be performed cross-domain for security reasons. We have set the Access-Control-Allow-Origin header on our server to allow requests from your EC2 instances, or from localhost. You will therefore need to upload your code to your EC2, or access it via localhost, in order for the AJAX requests to work. This means that you cannot, for example, complete this part of the individual portion in JSFiddle.
2. In your callback, process the JSON and use JavaScript to manipulate the HTML DOM to display the following information on your page:
   • Location
     • City, in a <strong> tag
     • State, not in any tag
   • Humidity
   • Current Temperature
   • Image for Tomorrow's Forecast (see #Weather Condition Images below for more information)
   • Image for the Day After Tomorrow's Forecast
3. Finally, bind fetchWeather() to the DOMContentLoaded event so that your weather widget is automatically initialized when the page is loaded:

   document.addEventListener("DOMContentLoaded", fetchWeather, false);
   

4. In addition, add a button that runs your fetchWeather function when clicked. This should update your widget with the current weather conditions.

Use the following HTML:

<div class="weather" id="weatherWidget">
	<div class="weather-loc"></div>
	<div class="weather-humidity"></div>
	<div class="weather-temp"></div>
	<img class="weather-tomorrow" />
	<img class="weather-dayaftertomorrow" />
</div>

Include the CSS file from here: https://classes.engineering.wustl.edu/cse330/content/weather.css

When everything is working, the weather widget should look something like this:

Important: The widget in this section needs to work in only Firefox and Chrome. It does not need to work Internet Explorer.

Tips

JSON Structure

The JSON from our server looks like this:

{
   "updated": "Thu, 11 Oct 2025 5:54 pm CDT",
   "location": {
      "city": "St. Louis",
      "state": "MO"
   },
   "wind": {
      "chill": "62",
      "direction": "150",
      "speed": "3 mph"
   },
   "atmosphere": {
      "humidity": "50",
      "visibility": "10",
      "pressure": "30.12 in"
   },
   "current": {
      "code": "28",
      "text": "Mostly Cloudy",
      "temp": "62°F",
      "date": "Thu, 11 Oct 2025 5:54 pm CDT"
   },
   "tomorrow": {
      "code": "29",
      "text": "Clouds Early/Clearing Late",
      "low": "45°F",
      "high": "61°F"
   },
   "dayafter": {
      "code": "30",
      "text": "Partly Cloudy",
      "low": "53°F",
      "high": "65°F"
   },
   "credit": "http://us.rd.yahoo.com/dailynews/rss/weather/St._Louis__MO/*http://weather.yahoo.com/forecast/USMO0170_f.html"
}

Weather Condition Images

Each day's forecast has a code. There are images associated with these codes.

One place to get the images is from here: http://us.yimg.com/i/us/nws/weather/gr/##ds.png

Replace the ## with the forecast code. For example, for code 32, the URL would be: http://us.yimg.com/i/us/nws/weather/gr/32ds.png

Connect Four Debugging Exercise

As a short debugging exercise for Module 4, you will be given a broken Connect Four implementation (located in the repository and named `connect4`). You may also download the files here.

The goals of this assignment are to complete the following:

• Run the provided program and observe failures or incorrect behavior.
• Produce a list of all bugs you find. For each bug include:
  • The file and function (or approximate line) where it appears
  • A short description of why it is a bug and what symptom it causes (crash, wrong output, missing feature)
  • A suggested fix (one or two sentences)
• Use GitHub Copilot in "Agent" mode to assist you in writing and testing fixes. When you use Copilot Agent, document the prompts you issued, any code the agent generated, and what changes you applied or rejected after code review.
• Produce a corrected version of the program that can demonstrate the following:
  • A horizontal, vertical, or diagonal win is detected correctly
  • A draw (full-board) is detected correctly

A video of the working Connect Four app can be found here

Documentation to include in your repository:

• The bug list (as described above) is inserted as a comment at the top of the connect4.js file
• The Copilot Agent prompts you used and a short evaluation of the suggestions (what was helpful, what you changed) in the AI Reflection
• The corrected file(s) committed to your GitHub repo

To receive full credit, you must complete the following:

• Identifying and explaining each real bug
• Correct fixes that produce a working game (wins + draw)
• Proper documentation of Copilot Agent usage and critical review

This exercise is intended to teach debugging, careful code review, and responsible use of AI coding assistants (reviewing and accepting/rejecting suggestions). Keep your commits small and descriptive so the instructor can follow your reasoning.

Group Project

Calendar

Build a simple calendar that allows users to add and remove events dynamically.

You will use JavaScript to process user interactions at the web browser, without ever refreshing the browser after the initial web page load. You may use a JavaScript library of your choice, so long as that JavaScript library does not defeat the purpose of the assignment. If you have questions about this, ask. In particular, libraries like FullCalendar are unacceptable.

Your application should utilize AJAX to run server-side scripts that query your database to save and retrieve information, including user accounts and events.

We have also written some functions to help you get started: JavaScript Calendar Library

Examples

• https://calendar.google.com/
• http://www.zoho.com/calendar/

Server Side Language

Additionally, you may use a database of your choice. MySQL is probably the logical choice since you have been using it since Module 2, but you are free to explore other databases if you like.

Calendar Requirements

• Support a month-by-month view of the calendar.

  Show one month at a time, with buttons to move forward or backward.

  There should be no limit to how far forward or backward the user can go.

• Users can register and log in to the website.

  You may leverage your MySQL project code and database from module 3 to get started.

• Unregistered users should see no events on the calendar.
• Registered users can add events.

  All events should have a date and time, but do not need to have a duration.

  You do not need to support recurring events (where you add an event that repeats, for example, every Monday).

• Registered users see only events that they have added.

  Your AJAX should not ask the server for events from a certain username. Instead, your AJAX should ask the server for events, and the server should respond with the events for only the currently-logged-in user (from the session). Can you think of why?

• Registered users can edit and delete their own events, but not the events of others.

  Again, the server should edit and delete events based on the username present in the session, not based on a username or event ID provided by the user. (If it deletes only based on an Event ID, an attacker could feed any arbitrary Event ID to your server, even if he/she didn't own that event.)

• All user and event data should be kept in a database.
• At no time should the main page need to be reloaded.

  User registration, user authentication, event addition, and event deletion should all be handled by JavaScript and AJAX requests to your server.

• Your page needs to work in the versions of Firefox and Chrome installed on the lab computers.

Tip: Run your database schema by a TA before implementing it.

Web Security and Validation

Your project needs to demonstrate that thought was put into web security and best practice. For more information, see this week's Web Application Security guide: Web Application Security, Part 3

In particular:

• Your application needs to prevent XSS attacks. Be careful when transmitting data over JSON that will be reflected in an event title! (Note: JSON data should be sanitized on the client side, not the server side.)
• Perform precautionary measures to prevent session hijacking attacks.

  You should specify your session cookie to be HTTP-Only. However, for the means of this module, you need not test for user agent consistency.

You should continue the practices that you have learned in past weeks:

• Pass tokens in forms to prevent CSRF attacks.

  Hint: You will need to send your CSRF tokens in your AJAX requests. Remember that AJAX still submits forms and runs server-side scripts, just like the vanilla forms you've been using in Modules 2 and 3.

• Use prepared queries to prevent SQL Injection attacks.
• If storing passwords in a database, always store them salted and encrypted.
• Your page should validate with no errors or warnings through the W3C validator.

AI Security Audit with GitHub Copilot

For this module, you will use GitHub Copilot to perform a security audit of your calendar application. This exercise is designed to help you learn how to leverage AI tools for code security analysis while maintaining critical thinking about the results.

• Code Generation: Use GitHub Copilot to help implement core calendar features if needed
• Security Review: Use Copilot's code analysis capabilities to:
  • Identify potential security vulnerabilities in your JavaScript and PHP code
  • Check for common web security issues (XSS, CSRF, SQL injection, etc.)
  • Review authentication and authorization logic
• Vulnerability Assessment: Ask Copilot to analyze specific security aspects:
  • Input validation and output escaping
  • Session management security
  • AJAX request security
  • Database query safety

Required Tasks:

1. Use GitHub Copilot to generate at least 3 security-focused code reviews for different parts of your application
2. Implement fixes for at least 2 identified security issues (real or potential)
3. Document the security audit process and findings

• Documentation Requirements
  • Examples of security-focused prompts you used with Copilot
  • Security issues identified (both real and false positives)
  • Changes made based on the security audit
  • Your assessment of Copilot's effectiveness as a security review tool

Grading

We will be grading the following aspects of your work. There are 125 points in total.

Assignments (including code) must be committed to Github by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.

If you do not include a link to your individual and group portion running on your instance in the respective README.md, you will receive a 0 for the missing portion

_________

1. JavaScript Calculator (10 Points):
   • Calculator successfully adds, subtracts, multiplies, and divides numbers (3 points)
   • The result is automatically computed when a value in either field is changed (3 points)
   • Calculator is written entirely in pure, conventional JavaScript with no external libraries (4 points)*

     Note: be sure to fully separate content, appearance, and behavior. This means that you should not use the event attributes on the HTML elements like onclick, onchange, and onkeyup.

2. Weather Widget (15 Points):
   • Widget performs an AJAX request to fetch the current weather (4 points)
   • The HTML template is filled with the correct information, including an image (4 points)
   • Button to reload the weather widget (2 points)
   • Widget is written entirely in pure, conventional JavaScript with no external libraries (5 points)*
3. Connect Four Debugging Exercise (15 Points):
   • Identify and explain bugs in the provided `connect4.js` (5 points)
     • For each bug, include location (function/lines), description of the symptom, and the root cause.
   • Correct the program so it reliably detects wins and draws and handles invalid input (5 points)
   • Completion of the AI Reflections for the individual portion of the assignment following the AI Best Practices (5 points)
     • Include the prompts used, what Copilot suggested, and what you changed or rejected.
4. AJAX Calendar (60 Points):
   • Calendar View (10 Points):
     • The calendar is displayed as a table grid with days as the columns and weeks as the rows, one month at a time (5 points)
     • The user can view different months as far in the past or future as desired (5 points)
   • User and Event Management (25 Points):
     • Events can be added, modified, and deleted (5 points)
     • Events have a title, date, and time (2 points)
     • Users can log into the site, and they cannot view or manipulate events associated with other users (8 points)

       Don't fall into the Abuse of Functionality trap! Check user credentials on the server side as well as on the client side.

     • All actions are performed over AJAX, without ever needing to reload the page (7 points)
     • Refreshing the page does not log a user out (3 points)
   • Best Practices (20 Points):
     • Code is well formatted and easy to read, with proper commenting (2 points)
     • If storing passwords, they are stored salted and hashed (2 points)
     • All AJAX requests that either contain sensitive information or modify something on the server are performed via POST, not GET (3 points)
     • Safe from XSS attacks; that is, all content is escaped on output (3 points)
     • Safe from SQL Injection attacks (2 points)
     • CSRF tokens are passed when adding/editing/deleting events (3 points)
     • Session cookie is HTTP-Only (3 points)
     • Page passes the W3C validator (2 points)
   • Usability (5 Points):
     • Site is intuitive to use and navigate (4 points)
     • Site is visually appealing (1 point)
5. Creative Portion & AI Security Audit (25 Points)
   • AI Security Audit Implementation (15 Points):
     • Used GitHub Copilot for security analysis of at least 3 different code components (4 points)
     • Documented security audit process and findings in README.md (3 points)
     • Completion of the AI Reflections for the group portion of the assignment following the AI Best Practices (5 points)
     • Implemented fixes for identified security issues (3 points)
     • We recommend you to use "Agent" Mode of Copilot to implement this feature
     • Be sure to create a new branch before implement this in case any of your original code being changed.
   • Additional Calendars Features (worth 10 points): Develop some additional features for the calendar, a few examples are provided below.
     • Users can tag an event with a particular category and enable/disable those tags in the calendar view. (5 points)
     • Users can share their calendar with additional users. (5 points)
     • Users can create group events that display on multiple users calendars (5 points)
     • Feature enhances user experience and calendar functionality
   • Make sure to save a description of your creative portion, AI security audit process, and a link to your server in your README.md file.

* These points can be earned only if at least 3 other points have been earned in that category. This is to prevent these points from being "free."