Energy Engineering

“I am building a web prototype for professionals experiencing burnout
and energy overload in the workplace. I need a JavaScript function
that saves user activity tracking data, categorizes activities as
energy building or energy draining, and dynamically updates a dashboard
display. Please provide the HTML setup and the JavaScript code.
You must include detailed, step-by-step comments in the JavaScript
explaining what each line of code does so I can learn from it and
debug it if necessary.”

function saveActivity() {

  // Collect the activity name entered by the user
  const activity = document.getElementById("activity").value;

  // Collect the selected date from the form
  const date = document.getElementById("date").value;

  // Collect the selected time from the form
  const time = document.getElementById("time").value;

  // Collect the summary statement entered by the user
  const summary = document.getElementById("summary").value;

  // Collect the selected activity category
  const category = document.getElementById("category").value;

  // Add the collected activity data into the activities array
  activities.push({
    activity,
    date,
    time,
    impact: selectedImpact,
    summary,
    category
  });

  // Clear the form fields after saving the activity
  clearForm();

  // Navigate the user to the Energy Tracker dashboard screen
  showScreen("trackerDashboard");
}