Jb Gradebook(2) by @jowinb - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
widthImposta la larghezza di un elemento HTML
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<body>Tag primario di un documento HTML
<td>Definisce una cella di una tabella HTML.
<nav>Definisce un menu di navigazione

Users

Log in to search for users

Explore

Find inspiration

Gesù nostro signore(2)

Heads Or Tails Random Tally 2

Selezione Telefoni

Template prodotti Meguiar

Lola Harrel Project 2

Ethical hacking

meraviglieItaliaFrame

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>College Gradebook</title>
    <!-- Bootstrap for styling -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
    <h1 class="my-4 text-center">College Gradebook</h1>

    <!-- Form for entering grades -->
    <form id="gradeForm" class="mb-3">
        <div class="mb-3">
            <label for="gradeInput" class="form-label">Enter Grade (%)</label>
            <input type="number" class="form-control" id="gradeInput" placeholder="Enter grade">
        </div>
        <button type="submit" class="btn btn-primary">Add Grade</button>
    </form>

    <!-- Display grades table -->
    <h3>Grades List</h3>
    <table class="table table-striped" id="gradesTable">
        <thead>
            <tr>
                <th>#</th>
                <th>Grade</th>
                <th>Letter Grade</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="gradesTableBody"></tbody>
    </table>

    <!-- Summary Section -->
    <h3>Grade Summary</h3>
    <ul id="gradeSummary">
        <li>Average: <span id="averageGrade">N/A</span></li>
        <li>Median: <span id="medianGrade">N/A</span></li>
        <li>Passing: <span id="passingGrade">N/A</span></li>
        <li>Failing: <span id="failingGrade">N/A</span></li>
    </ul>

    <button id="resetBtn" class="btn btn-danger">Reset Gradebook</button>
</div>

<!-- Add Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="app.js"></script>
</body>
</html>

body {
    background-color: #f8f9fa;
    font-family: Arial, sans-serif;
}

h1, h3 {
    color: #2d2d2d;
}

table {
    width: 100%;
}

#gradesTable td {
    padding: 8px;
    text-align: center;
}

#gradesTable td.passing {
    background-color: green;
    color: white;
}

#gradesTable td.warning {
    background-color: darkgoldenrod;
    color: white;
}

#gradesTable td.warning-low {
    background-color: orange;
    color: white;
}

#gradesTable td.failing {
    background-color: red;
    color: white;
}

#resetBtn {
    margin-top: 20px;
    width: 100%;
}

// Gradebook structure: Array to store grades
let grades = [];

// Function to handle grade submission
document.getElementById("gradeForm").addEventListener("submit", function(event) {
    event.preventDefault();

    // Get the input grade
    const gradeInput = document.getElementById("gradeInput");
    const grade = parseInt(gradeInput.value);

    if (grade >= 0 && grade <= 100) {
        // Add the grade to the array
        grades.push(grade);
        // Save to IndexedDB
        saveToIndexedDB();
        // Update the grade table
        updateGradeTable();
        // Reset the input field
        gradeInput.value = '';
    } else {
        alert('Please enter a valid grade between 0 and 100');
    }
});

// Function to determine the letter grade based on the College 4.0 Scale
function getLetterGrade(grade) {
    if (grade >= 85) return 'A (4.0)';
    if (grade >= 80) return 'B+ (3.5)';
    if (grade >= 75) return 'B (3.0)';
    if (grade >= 70) return 'C+ (2.5)';
    if (grade >= 65) return 'C (2.0)';
    if (grade >= 60) return 'D+ (1.5)';
    if (grade >= 50) return 'D (1.0)';
    return 'F (0.0)';
}

// Function to get grade color
function getGradeColor(grade) {
    if (grade >= 85) return 'passing';
    if (grade >= 75) return 'warning';
    if (grade >= 65) return 'warning-low';
    return 'failing';
}

// Function to update the grade table
function updateGradeTable() {
    const tableBody = document.getElementById("gradesTableBody");
    tableBody.innerHTML = '';

    grades.forEach((grade, index) => {
        const row = document.createElement('tr');
        const letterGrade = getLetterGrade(grade);
        const gradeColor = getGradeColor(grade);

        row.innerHTML = `
            <td>${index + 1}</td>
            <td class="${gradeColor}">${grade}</td>
            <td>${letterGrade}</td>
            <td><button class="btn btn-danger btn-sm" onclick="removeGrade(${index})">Remove</button></td>
        `;
        tableBody.appendChild(row);
    });

    updateSummary();
}

// Function to update grade summary
function updateSummary() {
    const average = calculateAverage(grades);
    const median = calculateMedian(grades);
    const passing = grades.filter(grade => grade >= 75).length;
    const failing = grades.filter(grade => grade < 75).length;

    document.getElementById("averageGrade").innerText = average.toFixed(2);
    document.getElementById("medianGrade").innerText = median.toFixed(2);
    document.getElementById("passingGrade").innerText = passing;
    document.getElementById("failingGrade").innerText = failing;
}

// Function to calculate the average grade
function calculateAverage(grades) {
    const sum = grades.reduce((total, grade) => total + grade, 0);
    return sum / grades.length;
}

// Function to calculate the median grade
function calculateMedian(grades) {
    const sortedGrades = [...grades].sort((a, b) => a - b);
    const mid = Math.floor(sortedGrades.length / 2);
    return sortedGrades.length % 2 === 0
        ? (sortedGrades[mid - 1] + sortedGrades[mid]) / 2
        : sortedGrades[mid];
}

// Function to remove a grade
function removeGrade(index) {
    grades.splice(index, 1);
    saveToIndexedDB();
    updateGradeTable();
}

// Function to reset the gradebook
document.getElementById("resetBtn").addEventListener("click", function() {
    grades = [];
    localStorage.clear();
    updateGradeTable();
});

// Function to save data to IndexedDB
function saveToIndexedDB() {
    const dbRequest = indexedDB.open('Gradebook', 1);

    dbRequest.onupgradeneeded = function() {
        const db = dbRequest.result;
        if (!db.objectStoreNames.contains('grades')) {
            db.createObjectStore('grades', { keyPath: 'id', autoIncrement: true });
        }
    };

    dbRequest.onsuccess = function() {
        const db = dbRequest.result;
        const transaction = db.transaction('grades', 'readwrite');
        const store = transaction.objectStore('grades');
        store.clear();
        grades.forEach((grade, index) => {
            store.add({ id: index, grade });
        });
    };
}

// Function to load data from IndexedDB on page load
window.addEventListener('load', function() {
    const dbRequest = indexedDB.open('Gradebook', 1);

    dbRequest.onsuccess = function() {
        const db = dbRequest.result;
        const transaction = db.transaction('grades', 'readonly');
        const store = transaction.objectStore('grades');
        const request = store.getAll();

        request.onsuccess = function() {
            grades = request.result.map(item => item.grade);
            updateGradeTable();
        };
    };
});