OLA 3: HTML & CSS & JavaScript

Course: CSCI 4410/5410 Web Technologies

Instructor: Dr. Xin Yang

Due date: 11:59 pm Mar 8th, 2026 (Sunday)

Objective:

In this assignment, you will enhance your web development skills by creating a dynamic web-based cash register system similar to real-world checkout applications. This project will deepen your understanding of JavaScript object manipulation, event handling, user input processing, and CSS styling. You will design an interactive interface that allows users to input item costs, calculate totals, display results in a structured manner, and reset transactions.

Workflow Steps (3 Stages)

You must submit all three stages:
  1. Stage 1: Plan the Outline of Structure
  2. Stage 2: HTML & CSS & JavaScript implementation (cash.html + cash.css + cash.js)
  3. Stage 3: Reflection: what changed and why

Stage 1: Plan the Outline of Structure (10 points)

Before writing code, plan the structure of your cash register webpage.

What to submit

  1. • Option A: A clear photo of a hand-drawn outline, OR
  2. • Option B: A text file named outline3.txt

Outline requirements

Your outline must show the order/structure of your webpage and include:
  1. • A page title area (H1)
  2. • A brief description/instructions area
  3. • Input area for item count
  4. • Buttons area (Scan Items, Show Total, Reset)
  5. • Display area for scanned items (unordered list)
  6. • Display area for total cost
  7. • Bookmark/Go-to-top element (if used)

Example outline (text)

Top
- H1: Cash Register System

Section 1: Instructions
- short paragraph explaining what the user should do

Section 2: User Input
- label + input (itemCount)

Section 3: Buttons
- Scan Items button
- Show Total button
- Reset button

Section 4: Scanned Items Display
- H2 heading
- UL list where JS will add LI items

Section 5: Total Display
- H2 heading
- total output area (e.g., a div or p)

Bottom
- Bookmark / Go-to-top link
- Footer
Reflection (Stage 3) in outline3.txt

Stage 2: Implementation (85 points)

Step 1: JavaScript File (cash.js) (60 points)

Create a JavaScript file and name it cash.js. Implement the following functionalities:

1. Create a cashRegister Object

Create an object named cashRegister with:
(1) A property total, initialized to 0.
(2) A property itemCount, initialized to 0.
(3) A method add(itemCost), which adds itemCost to this.total.
(4) A method reset(), which resets total and itemCount to 0.

2. Create a scan Function

Define a function scan() with no parameters.
(1) Retrieve the item count from the input field with the ID "itemCount" using document.getElementById: 
let itemCountInput = document.getElementById("itemCount").value;
cashRegister.itemCount = parseInt(itemCountInput);
(2) Use a for loop to prompt the user to enter the cost of each item.
(3) Convert the input to a float using parseFloat() and call cashRegister.add() to add it to the total.
(4) Display the scanned item prices dynamically in an unordered list.

3. Create a printTotal Function

(1) Define a function printTotal() with no parameters.
(2) Display the total amount price in HTML using document.getElementById.

4. Create a resetAll Function

Define a function resetAll() that:
(1) Clears the input field.
(2) Removes all scanned items from the list.
(3) Clears the total display.
(4) Resets the cashRegister object.

5. Invoke Functions using addEventListener

(1) Use addEventListener to call the scan function when the Scan Items button is clicked.
(2) Use addEventListener to call the printTotal function when the Show Total button is clicked.
(3) Use addEventListener to call the resetAll function when the Reset button is clicked.

Step 2: HTML File (cash.html) (15 points)

1. Create an HTML File (cash.html)

(1) Name your HTML file cash.html.
(2) Use standard HTML structure: 
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
</body>
</html>
(3) Link cash.js at the bottom of the body using <script></script>.

2. Add User Interface Elements

(1) Provide an appropriate welcome title for your cash register system.
(2) User Input: Add an input field for entering the number of items. 
<label for="itemCount">Enter number of items:</label>
<input type="number" id="itemCount" min="1">
(3) Buttons:
a. "Scan Items" button that triggers scan().
b. "Show Total" button that triggers printTotal().
c. "Reset" button that triggers resetAll().

(4) Scanned Items Display: Create a dynamic list to show scanned items.
(5) Total Cost Display: Show the total amount dynamically.

Step 3: CSS File (cash.css) (10 points)

1. Create a CSS File (cash.css)

(1) Name your CSS file cash.css.
(2) Apply styling for: 
Input fields
Buttons
Proper button alignment
Hover effects for buttons
(3) Link cash.css in the head section of cash.html using <link>.

Stage 3: Reflection (5 points)

At the bottom of your Stage 1 outline, include a section titled Reflection. Answer each question in 2–3 sentences:
  1. What changed between your Stage 1 outline and your final implementation? Why did you change it?
  2. What was the hardest part to implement correctly, and why?
  3. Describe one mistake you made and how you fixed it.

Step 4: Submission Instructions

Please compress all your assignment files (cash.html, cash.js, cash.css, and other necessary files) into a single ZIP archive and submit it through D2L.

Grading

The assignment is worth a total of 100 points, distributed as follows:

Part Points
Stage 1 (Outline) 10
HTML 15
External CSS File 10
JavaScript 60
Stage 3 (Reflection) 5
Total 100


If you have any questions, please feel free to reach out to me at Xin.Yang@mtsu.edu or stop by my office in ROTC annex 113E.


⇧