OLA 3: HTML & CSS & JavaScript

Course: CSCI 4410/5410 Web Technologies

Instructor: Dr. Xin Yang
Due date: 11:59 pm Feb 25th, 2025 (Tuesday)

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.

Step 1: JavaScript File (70 Points)

Create a JavaScript file, and name your JavaScript file as 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 HMTL using document.getElementById.

4. Create a resetAll Function

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

5. Invoke function 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 (15 Points)

1. Create an HTML File (cash.html)

(1) Name your HTML file cash.html.
(2) 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 the cash.js to the bottom of the body section 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 calls scan().
b. "Show Total" button that calls printTotal().
c. "Reset" button that calls 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 (15 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 the cash.css to the head section of the HTML file using <link>

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
HTML	14 Points
External CSS File	14 Points
JavaScript	69 Points
AI Disclaimer	3 Points

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.

⇧