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

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

Referenze

_topApre collegamenti ipertestuali nell'elemento parent assoluto
_selfApre collegamenti ipertestuali nella stessa pagina del browser
requiredRende obbligatorio un campo di input
selectedPre-seleziona un elemento di input
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
disabledImpedisce la modifica di un input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Ufficio FSL [Immagine Toastmaster]

Background Property > filter() met

Generatore di Musica

pag. 2 progetto inf

Pagina Test-A D&D story

Image Comparison Slider

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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();
        };
    };
});