GPA Calculator using React

// App.js

import './App.css';
import GPACalculator from './components/GPACalculator';

function App() {
  return (
    <div className="App">
      <GPACalculator />
    </div>
  );
}

export default App;

// GPACalculator.js

import React, { useState } from 'react';
import './GPACalculator.css';
import CourseForm from './CourseForm';
import CourseList from './CourseList';

const gradePoints = {
    'A+': 4.0,
    'A': 4.0,
    'A-': 3.7,
    'B+': 3.3,
    'B': 3.0,
    'B-': 2.7,
    'C+': 2.3,
    'C': 2.0,
    'C-': 1.7,
    'D+': 1.3,
    'D': 1.0,
    'D-': 0.7
};

const GPACalculator = () => {
  const [courses, setCourses] = useState([]);

  const handleAddCourse = (newCourse) => {
    setCourses([...courses, newCourse]);
  };

  const handleDeleteCourse = (index) => {
    const updatedCourses = courses.filter((course, i) => i !== index);
    setCourses(updatedCourses);
  };

  const calculateGPA = () => {
    let totalGradePoints = 0;
    let totalCreditHours = 0;

    courses.forEach((course) => {
      totalGradePoints += gradePoints[course.grade] * course.creditHours;
      totalCreditHours += course.creditHours;
    });

    return totalCreditHours === 0 ? 0 : totalGradePoints / totalCreditHours;
  };

  return (
    <div className='container'>
      <h1>GPA Calculator</h1>
      <div className="section">
        <CourseForm onAddCourse={handleAddCourse} />
        <CourseList courses={courses} onDeleteCourse={handleDeleteCourse} calculateGPA={calculateGPA} />
      </div>
    </div>
  );
};

export default GPACalculator;

// CourseForm.js

import React, { useState } from 'react';

const CourseForm = ({ onAddCourse }) => {
    const [courseName, setCourseName] = useState('');
    const [creditHours, setCreditHours] = useState(0);
    const [grade, setGrade] = useState('A+');

    const handleAddCourse = () => {
        if (courseName && creditHours > 0 && grade) {
            const newCourse = {
                courseName,
                creditHours,
                grade,
            };

            onAddCourse(newCourse);
            setCourseName('');
            setCreditHours(0);
            setGrade('A+');
        } else {
            alert('Please enter valid course details.');
        }
    };

    return (
        <div className="section1">
            <div>
                <p>Course</p>
                <input
                    type="text"
                    value={courseName}
                    onChange={(e) => setCourseName(e.target.value)}
                />
            </div>
            <div>
                <p>Credits</p>
                <input
                    type="number"
                    value={creditHours}
                    onChange={(e) => setCreditHours(Number(e.target.value))}
                />
            </div>
            <div>
                <p>Grade</p>
                <select value={grade} onChange={(e) => setGrade(e.target.value)}>
                    <option value="A+">A+</option>
                    <option value="A">A</option>
                    <option value="A-">A-</option>
                    <option value="B+">B+</option>
                    <option value="B">B</option>
                    <option value="B-">B-</option>
                    <option value="C+">C+</option>
                    <option value="C">C</option>
                    <option value="C-">C-</option>
                    <option value="D+">D+</option>
                    <option value="D">D</option>
                    <option value="D-">D-</option>
                </select>
            </div>
            <div>
                <p style={{ opacity: 0 }}>-</p>
                <button onClick={handleAddCourse}>Add</button>
            </div>
        </div>
    );
};

export default CourseForm;

// CourseList.js

import React from 'react';

const CourseList = ({ courses, onDeleteCourse, calculateGPA }) => {
  return (
    <div className="section2">
      <div>
        <h2>Course List</h2>
        <ul style={{ borderBottom: '1px solid #ced4da', paddingBottom: '10px' }}>
          <li>Course</li>
          <li>Credits</li>
          <li>Grade</li>
          <li>Action</li>
        </ul>
        {courses.map((course, index) => (
          <ul key={index}>
            <li>{course.courseName}</li>
            <li>{course.creditHours}</li>
            <li>{course.grade}</li>
            <li><button onClick={() => onDeleteCourse(index)}>Delete</button></li>
          </ul>
        ))}
      </div>
      <div>
        <h3>GPA: {calculateGPA().toFixed(2)}</h3>
      </div>
    </div>
  );
};

export default CourseList;