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

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

References

<th>Definisce una cella di intestazione di una tabella HTML.
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<ul>Usato per la creazione di liste non ordinate.

Users

Log in to search for users

Explore

Find inspiration

Design & Comunicazione Digitale ??

Il Mondo della Tecnologia

Costruzione tabella esame

Test Per informatica

Il mio primo file HTML

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