Klein877/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Student Grade Tracker</title>
</head>
<body>
    <h1>Update Student Grades</h1>

    <label>ID No.: </label><input type="text" id="id"><br>

    <h3>Attendance</h3>
    <input type="number" id="att1"> <input type="number" id="att2">
    <input type="number" id="att3"> <input type="number" id="att4"> <br>

    <h3>Long Quiz</h3>
    <input type="number" id="quiz1"> <input type="number" id="quiz2">
    <input type="number" id="quiz3"> <input type="number" id="quiz4"> <br>

    <h3>Performance Task</h3>
    <input type="number" id="task1"> <input type="number" id="task2">
    <input type="number" id="task3"> <input type="number" id="task4"> <br>

    <h3>Final Grades</h3>
    <input type="number" id="prelims"> <input type="number" id="midterms">
    <input type="number" id="semifinals"> <input type="number" id="finals"> <br>

    <button onclick="updateGrades()">Update</button>

    <h2>Student Data</h2>
    <table id="data-table" border="1">
    </table>

    <script>
        const sheetUrl = "https://script.google.com/macros/s/AKfycbyH0mo3EQJlGLk2ITRfGQ55lS1hN1OOiYfyoKWUHYqb5ytq5Itt-W6wXsDnQBzbYPL1rQ/exec";  // Replace with your Apps Script URL

        async function fetchData() {
            let response = await fetch(sheetUrl);
            let data = await response.json();
            let table = document.getElementById("data-table");

            table.innerHTML = "<tr><th>ID</th><th>Attendance</th><th>Quizzes</th><th>Tasks</th><th>Grades</th></tr>";

            for (let i = 1; i < data.length; i++) {
                let row = data[i];
                let tr = "<tr>";
                tr += `<td>${row[0]}</td>`; // ID
                tr += `<td>${row.slice(1, 5).join(", ")}</td>`; // Attendance
                tr += `<td>${row.slice(5, 9).join(", ")}</td>`; // Quizzes
                tr += `<td>${row.slice(9, 13).join(", ")}</td>`; // Tasks
                tr += `<td>${row.slice(13, 17).join(", ")}</td>`; // Grades
                tr += "</tr>";
                table.innerHTML += tr;
            }
        }

        async function updateGrades() {
            let id = document.getElementById("id").value;
            let data = {
                id,
                att1: document.getElementById("att1").value,
                att2: document.getElementById("att2").value,
                att3: document.getElementById("att3").value,
                att4: document.getElementById("att4").value,
                quiz1: document.getElementById("quiz1").value,
                quiz2: document.getElementById("quiz2").value,
                quiz3: document.getElementById("quiz3").value,
                quiz4: document.getElementById("quiz4").value,
                task1: document.getElementById("task1").value,
                task2: document.getElementById("task2").value,
                task3: document.getElementById("task3").value,
                task4: document.getElementById("task4").value,
                prelims: document.getElementById("prelims").value,
                midterms: document.getElementById("midterms").value,
                semifinals: document.getElementById("semifinals").value,
                finals: document.getElementById("finals").value,
            };

            await fetch(sheetUrl, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(data)
            });

            fetchData();
        }

        fetchData();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Student Grade Tracker</title>
	</head>
	<body>
	<h1>Update Student Grades</h1>

	<label>ID No.: </label><input type="text" id="id"><br>

	<h3>Attendance</h3>
	<input type="number" id="att1"> <input type="number" id="att2">
	<input type="number" id="att3"> <input type="number" id="att4"> <br>

	<h3>Long Quiz</h3>
	<input type="number" id="quiz1"> <input type="number" id="quiz2">
	<input type="number" id="quiz3"> <input type="number" id="quiz4"> <br>

	<h3>Performance Task</h3>
	<input type="number" id="task1"> <input type="number" id="task2">
	<input type="number" id="task3"> <input type="number" id="task4"> <br>

	<h3>Final Grades</h3>
	<input type="number" id="prelims"> <input type="number" id="midterms">
	<input type="number" id="semifinals"> <input type="number" id="finals"> <br>

	<button onclick="updateGrades()">Update</button>

	<h2>Student Data</h2>
	<table id="data-table" border="1">
	</table>

	<script>
	const sheetUrl = "https://script.google.com/macros/s/AKfycbyH0mo3EQJlGLk2ITRfGQ55lS1hN1OOiYfyoKWUHYqb5ytq5Itt-W6wXsDnQBzbYPL1rQ/exec"; // Replace with your Apps Script URL

	async function fetchData() {
	let response = await fetch(sheetUrl);
	let data = await response.json();
	let table = document.getElementById("data-table");

	table.innerHTML = "<tr><th>ID</th><th>Attendance</th><th>Quizzes</th><th>Tasks</th><th>Grades</th></tr>";

	for (let i = 1; i < data.length; i++) {
	let row = data[i];
	let tr = "<tr>";
	tr += `<td>${row[0]}</td>`; // ID
	tr += `<td>${row.slice(1, 5).join(", ")}</td>`; // Attendance
	tr += `<td>${row.slice(5, 9).join(", ")}</td>`; // Quizzes
	tr += `<td>${row.slice(9, 13).join(", ")}</td>`; // Tasks
	tr += `<td>${row.slice(13, 17).join(", ")}</td>`; // Grades
	tr += "</tr>";
	table.innerHTML += tr;
	}
	}

	async function updateGrades() {
	let id = document.getElementById("id").value;
	let data = {
	id,
	att1: document.getElementById("att1").value,
	att2: document.getElementById("att2").value,
	att3: document.getElementById("att3").value,
	att4: document.getElementById("att4").value,
	quiz1: document.getElementById("quiz1").value,
	quiz2: document.getElementById("quiz2").value,
	quiz3: document.getElementById("quiz3").value,
	quiz4: document.getElementById("quiz4").value,
	task1: document.getElementById("task1").value,
	task2: document.getElementById("task2").value,
	task3: document.getElementById("task3").value,
	task4: document.getElementById("task4").value,
	prelims: document.getElementById("prelims").value,
	midterms: document.getElementById("midterms").value,
	semifinals: document.getElementById("semifinals").value,
	finals: document.getElementById("finals").value,
	};

	await fetch(sheetUrl, {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify(data)
	});

	fetchData();
	}

	fetchData();
	</script>
	</body>
	</html>