学生十科进度记录

4.0

2025/3/29

en教育工具学生进度课程管理教育应用

提示语

An app to record progress in 10 subjects for a student.
Make the number of progressing and total lessons editable
Make the name of subjects editable with an "edit" icon

生成结果

import React, { useState } from 'react';

const App = () => {
 const [subjects, setSubjects] = useState([
 { name: 'Mathematics', progressing: 5, total: 10 },
 { name: 'Science', progressing: 3, total: 8 },
 { name: 'History', progressing: 7, total: 12 },
 { name: 'Geography', progressing: 2, total: 5 },
 { name: 'English', progressing: 4, total: 7 },
 { name: 'Art', progressing: 6, total: 9 },
 { name: 'Music', progressing: 1, total: 3 },
 { name: 'Physical Education', progressing: 8, total: 15 },
 { name: 'Computing', progressing: 9, total: 11 },
 { name: 'Foreign Language', progressing: 0, total: 4 }
 ]);

 const handleEditName = (index, newName) => {
 const updatedSubjects = [...subjects];
 updatedSubjects[index].name = newName;
 setSubjects(updatedSubjects);
 };

 const handleEditProgress = (index, newProgress) => {
 const updatedSubjects = [...subjects];
 updatedSubjects[index].progressing = newProgress;
 setSubjects(updatedSubjects);
 };

 const handleEditTotal = (index, newTotal) => {
 const updatedSubjects = [...subjects];
 updatedSubjects[index].total = newTotal;
 setSubjects(updatedSubjects);
 };

 return (
 <div className="min-h-screen bg-gradient-to-r from-blue-50 to-purple-50 p-8">
 <h1 className="text-4xl font-bold text-center text-gray-800 mb-8">Student Progress Tracker</h1>
 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 {subjects.map((subject, index) => (
 <div key={index} className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
 <div className="flex justify-between items-center mb-4">
 <h2 className="text-xl font-semibold text-gray-700">{subject.name}</h2>
 <button
 onClick={() => {
 const newName = prompt('Enter new subject name:', subject.name);
 if (newName) handleEditName(index, newName);
 }}
 className="text-gray-500 hover:text-gray-700 transition-colors duration-200"
 >
 ✏️
 </button>
 </div>
 <div className="space-y-4">
 <div className="flex justify-between items-center">
 <span className="text-gray-600">Progressing Lessons:</span>
 <input
 type="number"
 value={subject.progressing}
 onChange={(e) => handleEditProgress(index, parseInt(e.target.value))}
 className="w-20 p-2 border rounded-lg text-center"
 />
 </div>
 <div className="flex justify-between items-center">
 <span className="text-gray-600">Total Lessons:</span>
 <input
 type="number"
 value={subject.total}
 onChange={(e) => handleEditTotal(index, parseInt(e.target.value))}
 className="w-20 p-2 border rounded-lg text-center"
 />
 </div>
 </div>
 </div>
 ))}
 </div>
 <footer className="text-center text-gray-500 mt-8">
 © 2025 Progress Tracker. All rights reserved.
 </footer>
 </div>
 );
};

export default App;

Open Sandbox