Completion requirements
View
Make a submission
Receive a grade
Due: Wednesday, 20 August 2025, 5:00 PM
Instructions
- This simple exercise is to practice the use of basic the I/O statements of JS and some of its number methods/functions.
- In your portfolio, create a file inside the public folder and name it as Q12GSectionLastName.html
- Copy the code template given below.
- Use the necessary HTML tags to create the three input text boxes for Meal Price, Tip and Service Charge.
- Include a button to Accept Input and when a user clicks on it will call totalMeal();
- Inside the totalMeal() function, the JS code should be able to display the total cost of the meal using the formula:
- Given: mp = 119.00, tip = 20, %sc = 12
- Calculation: totalCost = mp + tip + (%sc / 100 * mp)
- totalCost would be 154.3888
- Display the totalCost with two decimal places as 154.39 (discover the use of toFixed() for this purpose.)
- The totalCost should be displayed Total Meal: nnnn.nn inside a paragraph tag.
- Change the content of header2 <h2></h2> to contain your name and section.
- Example:
- <h2> Q1 3rd Graded Exercise submitted by Pablo Nase of 9Carbon </h2>
- Example:
- Save your work.
- Edit the index.html of your portfolio and add a link to this exercise. As shown below:
- <li><a href="./public/Q12GSectionLastName.html"> Second Graded Exercise </a>
- </li>
- Save your changes, test by opening index.html with live server. You should be seeing a link to your second graded exercise and when you click on it, an output similar to the one shown below should be seen.
- Commit (save) your work in your Github account to update the online version of your portfolio.
- Submit the link to the live Github live website of your portfolio and also the link to your code in github.
-
Reminder: Your work should be your own, incorporate a citation to all resources used in this exercise as part of the output and place them inside a footer tag. Since this is a graded exercise, the use of AI is NOT permitted.
See Guide on how to do: APA Citation: https://libguides.csudh.edu/citation/apa-7
Sample Output
Initial State:
When User the three values and the button is clicked
Code Template
<!DOCTYPE html>
<html>
<body>
<h2> Q1 2nd Graded Exercise submitted by name of section</h2>
<!-- Enter your tags below until the script tag -->
<script>
function totalMeal() {
// place your JS code here
}
</script>
</body>
</html>
Rubrics for Grading
1. The HTML/JS Code meeting the requirements (7pts) (All Needed HTML tags 2pts / JS Code to read, process and display the output 5pts)
2. The JS Code file is inside the public folder of the 1st Qtr portfolio made in the 1st Graded Exercise with updated index.html with updated name on the header 2 tag. (3pts)