Lab 4: Client Side Javascript

Overview

In this lab, you will use JavaScript to add interactions to a weekly calendar. Users will be able to create events through a Bootstrap modal and display those events in the appropriate weekday column.

To receive credit for this lab, you MUST show your work to the TA during the lab, and push it to the github before the deadline. Please note that submissions will be due on Wednesday at 11:59 p.m. in the following week. You are required to complete interview grading for this lab within the week after your submission.

Learning objectives

By the end of this lab, you should be able to:

LO1. Understand the concept of Client side scripting using Javascript
L02. Organize HTML, CSS, and JavaScript resources in a web project
L03. Use browser developer tools to inspect output and debug errors
L04. Read form values and store structured data in an array of JavaScript objects
L05. Respond to browser events and update the DOM
L06. Combine JavaScript, HTML, CSS, and Bootstrap to implement interactive features
L07. Evaluate and revise code suggested by generative AI

GenAI use expectations

You may use generative AI for this lab under the following conditions:

1. Before prompting, write a short plan, prediction, pseudocode, or partial implementation.
2. Request explanations, hints, starter structures, test cases, or help with one function at a time. Do not ask a tool to complete the entire lab.
3. Do not submit code you cannot explain.
4. Use the browser, console, breakpoints, and multiple inputs to verify behavior.
5. Make at least one meaningful change to generated code.
6. Record the tool/model, prompt, relevant response, evaluation, tests, and changes in genAI_usage.md.

You will find the GenAI documentation expectations below. You are required to fill out all the information listed there for every instance of Gen AI usage.

danger

Undocumented or partially documented generative AI use will result in the lab being marked with a Not Attempted. Please remember to upload a filled out genAI_usage.md file.

Part A

Clone your GitHub repository

info

You need to accept the invite to the GitHub classroom assignment to get a repository.

Github Classroom Assignment

For the next two steps, make sure to edit the name of the repository after the copying the command into your terminal.

Using an SSH key

git clone git@github.com:CUBoulder-CSCI-3308-Fall2026/cu-csci3308-fall2026-lab-4-client-side-scripting-<YOUR_USER_NAME>.git

Using a Personal Access Token (PAT)

git clone https://github.com/CUBoulder-CSCI-3308-Fall2026/cu-csci3308-fall2026-lab-4-client-side-scripting-<YOUR_USER_NAME>.git

Navigate to the repository on your system.

cd cu-csci3308-fall2026-lab-4-client-side-scripting-<YOUR_USER_NAME>

Directory Structure and Website Overview

The website directory structure contains the HTML, CSS and javascript files for this lab.

├─submission
│  ├─ genAI_usage.md
│  ├─Calendar/
│  │  ├─index.html
│  │  └─resources/
│  │    ├─js/
│  │       ├─ script.js
│  │    ├─css/
│  │       ├─ style.css
├─Demo/
│  ├─test.html
|  ├─test.js

Starting with the calendar implementation, edit files only within the Calendar folder.

Debug JavaScript in the browser

Before implementing the calendar, practice debugging with the files in Demo.

1. Open test.html in a browser.
2. Open the browser's Developer Tools and select the Console tab.

3. Click the button on the page, enter your name, and observe the console output.
4. Add another console.log() statement to test.js and verify its output.
5. Introduce a small error, read the browser's error message, identify the file and line number, and then repair it.
6. Recommended: watch this browser debugger walkthrough

🎥Recording output

Record the following in `genAI_usage.md`, even if you did not use GenAI:

1. The error you introduced
2. Your prediction about what would happen
3. The browser's error message
4. How you located and repaired the problem

If you use GenAI to interpret an error, provide the exact error message and ask for an explanation before asking for a fix.

Calendar

Build a weekly calendar that allows a user to create events. Each event must include:

• Event name
• Weekday
• Time
• Modality: In Person or Remote
• Location or remote URL, depending on modality
• Attendees
• Category

When an event is saved, it must appear in the correct weekday column. Its color must reflect its category.

1. Create and connect the project files

The starter project contains:

• Calendar/index.html for the interface
• Calendar/resources/css/style.css for custom styles
• Calendar/resources/js/script.js for client-side behavior

Bootstrap and style.css are already included in index.html. Add script.js at the end of the <body> using a relative path.

<!-- Replace file.js with the correct relative path. -->
<script src="file.js"></script>

danger

Do not use absolute paths such as C:\... or /Users/.... Your project must work on another computer.

2. Create the event modal

Use the Bootstrap Modal documentation to add a modal to index.html.

You may ask GenAI for a barebones Bootstrap modal, but your prompt must include the requirements below and must explicitly request no additional functionality.

i. Modal requirements

• Set the modal ID to event_modal.
• Include a form in the modal body.
• Add Close and Save Event buttons.
• The Save Event button must call saveEvent().

<div class="modal-body">
  <form id="event_form">
    <!-- Add the required form controls. -->
  </form>
</div>

Use the Bootstrap Forms documentation as a reference.

ii. Required form controls in the Modal

Field	Control and requirements	Required ID
Event Name	Text input	event_name
Weekday	Select containing the days of the week	event_weekday
Time	Input with type="time"	event_time
Event Modality	Dropdown with in-person and remote options	event_modality
Location	Text input shown for in-person events	event_location
Remote URL	Input shown for remote events; provide helpful placeholder text	event_remote_url
Attendees	Text input; names are separated by commas	event_attendees

iii. Validation

Add appropriate browser validation to all fields. Review Bootstrap and browser validation

The Remote URL field must use the pattern attribute with a regular expression that checks for a plausible HTTP or HTTPS URL.

🎥Recording output

Before using GenAI, in the `genAI_usage.md` file, write down at least three examples that should pass and three that should fail. If GenAI suggests a regular expression, test it against all six examples and explain each component of the expression.

<input type="text" pattern="^[A-Z].+" />

The expression above is an example that demonstrates the pattern attribute; it is not the required URL pattern as needed in this scenario.

iv. Open the modal

Update the existing Create Event button so it launches event_modal.

<button
  class="btn btn-primary mt-3"
  type="button"
  data-bs-toggle="modal"
  data-bs-target="#event_modal"
>
  Create Event
</button>

v. Let's verify Modal Behavior

Verify that:

• The modal opens and closes.
• The form contains all required fields.
• Labels are programmatically associated with their controls.
• Required fields prevent an incomplete submission of the modal form.
• Valid and invalid remote URLs produce the expected result.

🎥Recording output

In `genAI_usage.md`, identify one line of modal code and explain how it connects user interaction to Bootstrap behavior.

3. Toggle location fields

When the user selects In Person, show the Location field and hide the Remote URL field. When the user selects Remote, do the reverse.

function updateLocationOptions() {}

i. Function Behavior

1. Read the value of event_modality using `document.getElementById()`.
2. Retrieve the Location and Remote URL containers.
3. Change their visibility based on the selected modality.
4. Ensure that a hidden field does not incorrectly prevent form submission.

Connect the function to the modality dropdown:

<select
  class="form-control"
  id="event_modality"
  required
  onchange="updateLocationOptions(this.value)"
>
  <option value="in-person">In Person</option>
  <option value="remote">Remote</option>
</select>

ii. Let's verify Location Toggle Feature

Complete this behavior table:

Selected modality	Location visible?	Remote URL visible?	Location required?	Remote URL required?
In Person
Remote

If you used Gen AI for the toggle location feature, ask it to compare its proposed code against this table. Test both rows yourself.

🎥Recording output

In the `genAI_usage.md` file, record your observations in this table.

4. Save event data

Declare an events array outside your functions. Implement:

function saveEvent() {}

i. Function Behavior

1. Read the form values.
2. Validate the form before saving.
3. Create a JavaScript object with the event details.
4. Store the object in events.
5. Use null for the location field that does not apply.
6. Log the array during development so you can verify its contents.
7. Call addEventToCalendarUI(eventDetails).
8. Reset the form.
9. Close the modal.

const eventDetails = {
  name: /* form value */,
  weekday: /* form value */,
  time: /* form value */,
  modality: /* form value */,
  location: /* value or null */,
  remote_url: /* value or null */,
  attendees: /* list or string */,
  category: /* form value */,
};

To close the modal after saving:

const modalElement = document.getElementById('event_modal');
const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
modal.hide();

ii. Let's verify the Save Events Feature

Create at least two events:

• One in-person event
• One remote event

Inspect the events array in the console. Check that every property has the expected value and that the nonapplicable location property is null rather than undefined.

🎥Recording output

If you used Gen AI to solve this task, record the nature of usage in `genAI_usage.md`

5. Display events on the calendar

Implement these functions:

function createEventCard(eventDetails) {}

function addEventToCalendarUI(eventInfo) {}

i. createEventCard(eventDetails)

Function Behavior

1. Create an event container with document.createElement().
2. Apply Bootstrap or custom CSS classes.
3. Create a nested element containing the event details.
4. Use the properties in eventDetails to build the visible content.
5. Append the nested content to the event container.
6. Return the completed DOM element.

const eventElement = document.createElement('div');
eventElement.className = 'event row border rounded m-1 py-1';

You may use template literals and `appendChild()`.

ii. addEventToCalendarUI(eventInfo)

Function Behavior

1. Call createEventCard(eventInfo).
2. Use the event's weekday to retrieve the correct calendar column.
3. Append the returned card to that column.

iii. Let's verify Display Events feature

Create and save at least three events:

• Two events on the same weekday
• One event on a different weekday
• At least one in-person event and one remote event

Verify that:

• Each event appears in the correct weekday column.
• Multiple events can appear in the same column.
• Each card displays the correct name, time, modality, location or URL, and attendees.
• The event card is created dynamically; it is not hard-coded in index.html.
• No duplicate card appears when an event is saved.
• The browser console contains no errors.

info

Events exist only in the in-memory array and DOM. They disappear when the page reloads because this lab does not include persistent storage.

Part B

1. Add a Category field

Add a Category control to the modal. Choose a reasonable set of categories, such as Academic, Work, Personal, or Social. Store the selected category in each event object.

2. Color-code event cards

Apply a different background color or Bootstrap class based on the event category. Ensure that the text remains readable.

i. Let's verify the Category feature

Create one event in every category and verify that:

• Each event appears in the correct weekday column.
• Each event displays the correct category.
• Each event uses the intended style.
• Text has sufficient contrast.

Extra credit

You need to complete both tasks to get the extra credit point for this lab.

1. Update events

Add event-update functionality:

• Clicking an event opens the modal with its current values.
• The user can modify any field.
• Saving updates the existing event object and card instead of creating a duplicate.

2. Link the calendar to your personal website

Link the calendar to your Lab 3 personal website and host the project with GitHub Pages. Add the hosted URL to personal_website_link.txt in the submission folder.

Test your final product

Test at least the following cases:

Test	Input or action	Expected result
Create in-person event	Complete all in-person fields	Event is stored and displayed on the correct day with Location shown
Create remote event	Complete all remote fields with a valid URL	Event is stored and displayed with Remote URL shown
Empty required field	Leave a required field empty	Browser prevents submission
Invalid remote URL	Enter text that does not match the URL pattern	Browser prevents submission
Change modality	Switch between In Person and Remote	Correct location control is visible and required
Category color	Create events in different categories	Cards use the correct category styles
Multiple events	Add multiple events to one day	All cards appear without replacing earlier events
Refresh page	Reload after creating events	In-memory events disappear as expected
Relative paths	Move the lab folder and reopen index.html	Styles and scripts still load

Also test the layout at mobile and desktop widths.

Submission Guidelines

Upload all files

Please remember to upload the genAI_usage.txt file as well in the submission folder.

Commit and upload your changes

1. Make sure you have all the files added in the directory structure specified.

2. Run the following commands inside the root of your lab's git directory.

git add .
git commit -m "Added files for lab 4"
git push

3. Go to your repository on GitHub and ensure that all the files listed above are present in the "submission" folder.

You will be graded on the files that were present before the deadline. If the files are missing/not updated by the deadline, you could receive a grade as low as "Not attempted". This can be replaced by raising a regrade request once you successfully upload your work to Github.

Regrade Requests

Please use this link to raise a regrade request if you think you didn't receive a correct grade.

Grading specifications

Criteria	Not Attempted	Below Expectations	Meets Expectations
Overall Attempt	• Lab not attempted OR • Student did not attend the lab without prior approval	—	—
Attendance & TA Review	—	• Did not attend full duration of lab OR • Work not reviewed by TA OR • Attendance not marked on Canvas	• Attended full duration of lab AND • Work reviewed by TA AND • Attendance marked on Canvas
Submission Presence	—	• Work not uploaded to the submission folder	• All required work uploaded to the submission folder
Interview Grading	—	• Did not attend interview with a TA OR • Could not demonstrate an understanding of the submitted work when asked to explain it.	• Attended interview with a TA AND • Clearly explained the work completed and demonstrates a solid understanding of the tools
Script Inclusion	-	• script.js is missing OR • connected with an incorrect path	• script.js is connected to index.html using the correct relative path
Modal Functionality	-	• Modal is missing required fields OR • does not open and close correctly	• Modal includes all required fields, uses Bootstrap styling, and opens and closes correctly
Form Validation	-	• Required validation is incomplete OR • the Remote URL pattern is missing or incorrect	• Required fields and the Remote URL pattern are validated correctly
Event Data Storage	-	• Events are not stored as objects in the array, the form is not reset, OR • the modal remains open	• saveEvent() stores complete event objects, updates the UI, resets the form, and closes the modal
Event Card Display	-	• Event cards are incomplete, incorrectly styled, or placed under the wrong weekday	• createEventCard() and addEventToCalendarUI() display complete events in the correct weekday columns
Location and Remote Logic	-	• Location and Remote URL controls do not toggle or validate correctly	• updateLocationOptions() correctly controls visibility and required status for both fields
Category Styling	-	• Category field or color-coding is missing or incorrect	• Categories are stored and events are styled correctly
Responsiveness	-	• Calendar or modal does not work at one or more tested viewport widths	• Calendar and modal are usable and responsive with Bootstrap
GenAI Documentation and Evaluation	• GenAI use is not disclosed	• Prompts are listed, but planning, evaluation, testing, explanation, or revision is incomplete	• All GenAI use is documented; student evaluates, tests, explains, and meaningfully revises generated code
Extra Credit – Enhanced Functionality & Hosting	—	• Clicking an event does not open the modal OR • The modal is not pre-populated with event details OR • Upon updating the details in the modal the event card is not updated OR • Calendar is not linked to personal website OR • Link to personal website is not shared	• Meets all Meets Expectations criteria AND • Clicking an event opens a pre-filled modal AND • Edits persist and update the calendar UI upon saving AND • Calendar linked to student’s personal website AND • Project hosted on GitHub Pages

GenAI documentation expectations

In genAI_usage.md, document every use of generative AI using this template:

## Interaction 1

**Tool/model:**

**My plan or attempt before prompting:**

**Prompt:**

**Relevant response:**

**What was correct:**

**What needed revision/meaningful change I made:**

**How I tested it:**

**One line I can explain:**

tip

If you did not use GenAI, state that clearly and document one debugging decision you made independently in genAI_usage.md.