SRM GPA Calculator

/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // SRM University Grade Point Mapping const GRADE_POINTS = { "O": 10, "A+": 9, "A": 8, "B+": 7, "B": 6, "C": 5.5, "W": 0, "F": 0, "AB": 0, "I": 0, "*": 0, }; function GPACalculator() { const [courses, setCourses] = useState([ { credits: "credits", grade: "O" }, { credits: "credits", grade: "O" }, { credits: "credits", grade: "O" }, { credits: "credits", grade: "O" }, { credits: "credits", grade: "O" }, ]); const [cumulativeGPA, setCumulativeGPA] = useState(0); const addCourse = () => { setCourses([...courses, { credits: 0, grade: "O" }]); }; const updateCourse = (index, field, value) => { const newCourses = [...courses]; newCourses[index][field] = value; setCourses(newCourses); }; const calculateGPA = () => { const totalCredits = courses.reduce((sum, course) => sum + Number(course.credits), 0); const totalPoints = courses.reduce((sum, course) => sum + (GRADE_POINTS[course.grade] * Number(course.credits)), 0); const gpa = totalPoints / totalCredits || 0; setCumulativeGPA(Number(gpa.toFixed(2))); }; const removeCourse = (index) => { const newCourses = courses.filter((_, i) => i !== index); setCourses(newCourses); }; return (

{courses.map((course, index) => (

updateCourse(index, "credits", e.target.value)} />

))}

Cumulative GPA: {cumulativeGPA}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` SRM GPA Calculator

`, { headers: { "content-type": "text/html" }, }, ); } const css = ` body { font-family: 'Arial', sans-serif; background-color: #000; color: #e0e0e0; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; } .gpa-calculator { background-color: #000; border-radius: 10px; padding: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 100%; max-width: 500px; } .course-row { display: flex; gap: 10px; margin-bottom: 10px; border: 1px solid #444; padding: 5px; border-radius: 5px; } input, select { flex: 1; padding: 10px; background-color: #000; border: 1px solid #444; color: #e0e0e0; border-radius: 5px; } button { background-color: #000; color: #e0e0e0; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #222; } .remove-course-btn { background-color: #000; color: #e0e0e0; } .remove-course-btn:hover { background-color: #222; } .add-course-btn { border: 2px solid #ffff00; background-color: #000; color: #ffff00; } .add-course-btn:hover { border-color: #ffff33; color: #ffff33; } .calculate-btn { border: 2px solid #00ff00; background-color: #000; color: #00ff00; } .calculate-btn:hover { border-color: #33ff33; color: #33ff33; } .actions { display: flex; justify-content: space-between; margin-top: 20px; } .result { text-align: center; margin-top: 20px; color: #e0e0e0; } .result h2 { color: #e0e0e0; } .source-link { display: block; text-align: center; color: #666; text-decoration: none; margin-top: 20px; font-size: 0.8em; } @media (max-width: 600px) { .course-row { flex-direction: column; } } `;

CGPAcalculator