ESRM64103: Student Grades

import { Table, Inputs } from "@observablehq/inputs";

// Load the CSV data and ensure Student_ID is a string with leading zeros
data = FileAttachment("homework_scores.csv")
  .csv({ typed: true })
  .then(rows =>
    rows.map(row => ({
      ...row,
      Student_ID: String(row.Student_ID).padStart(9, '0')
    }))
  );

// Create a flexbox container to align input and custom button in the same row
viewof inputContainer = html`<div style="
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
"></div>`;

// Create the input box
viewof studentID = Inputs.text({
  placeholder: "Enter Student ID (e.g., 012345667)"
});

// Create a custom HTML button (not using Inputs.button)
viewof confirmButton = Inputs.button("Confirm");

// Append the input box and custom button to the flexbox row
inputContainer.append(viewof studentID, viewof confirmButton);

filteredData = {
  if (confirmButton) {
    return data.filter(d => d.Student_ID === studentID);
  }
  return [];
};

// Display the filtered data in a table with custom styling
Table(filteredData, {
  columns: ["Student_ID", "Name", "Bonus", "HW1_Grade", "HW2_Grade", "Total"]
});