Jb Gradebook by @jowinb - Codewith.it

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

References

<label>Mostrare un testo di etichetta per un elemento di input.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
<blockquote>Inserisce citazioni in un documento HTML
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
Inserisce un commento nel codice

Users

Log in to search for users

Explore

Find inspiration

Copia testo in appunti

Gesù nostro signore(2)

Quiz ristrutturazione

Dario Di Fazio - Portfolio CV & Co

spotify dashboard

Costruzione di un form

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>Gradebook</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .passing { background-color: green; color: white; }
    .warning { background-color: darkgoldenrod; color: black; }
    .failing { background-color: red; color: white; }
    .border-bottom-2 { border-bottom: 2px solid #000; }
  </style>
</head>
<body>

<div class="container mt-5">
  <h1 class="text-center">Gradebook</h1>

  <form id="grade-form" class="mb-4">
    <div class="mb-3">
      <label for="gradeInput" class="form-label">Enter Grade:</label>
      <input type="number" class="form-control" id="gradeInput" required>
    </div>
    <button type="submit" class="btn btn-primary">Add Grade</button>
    <button type="button" id="reset-btn" class="btn btn-danger ms-3">Reset Gradebook</button>
  </form>

  <h3>Grades List</h3>
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Grade</th>
        <th scope="col">Letter Grade</th>
      </tr>
    </thead>
    <tbody id="grade-list">
      <!-- Grades will be appended here -->
    </tbody>
  </table>

  <h3>Statistics</h3>
  <div id="statistics">
    <p>Average Grade: <span id="average-grade">0</span></p>
    <p>Median Grade: <span id="median-grade">0</span></p>
    <p>Passing Grades: <span id="passing-count">0</span></p>
    <p>Failing Grades: <span id="failing-count">0</span></p>
  </div>
</div>

<script src="app.js"></script>
</body>
</html>

// app.js
const gradeForm = document.getElementById('grade-form');
const gradeInput = document.getElementById('gradeInput');
const gradeList = document.getElementById('grade-list');
const averageGrade = document.getElementById('average-grade');
const medianGrade = document.getElementById('median-grade');
const passingCount = document.getElementById('passing-count');
const failingCount = document.getElementById('failing-count');
const resetBtn = document.getElementById('reset-btn');

// College 4.0 scale for letter grades
const gradeScale = {
  A: [90, 100],
  B: [80, 89],
  C: [70, 79],
  D: [60, 69],
  F: [0, 59]
};

let grades = [];

// Function to save grades to IndexedDB
function saveGrades() {
  const dbRequest = indexedDB.open("gradebookDB", 1);

  dbRequest.onupgradeneeded = function(e) {
    const db = e.target.result;
    if (!db.objectStoreNames.contains("grades")) {
      const store = db.createObjectStore("grades", { keyPath: "id", autoIncrement: true });
      store.createIndex("grade", "grade", { unique: false });
    }
  };

  dbRequest.onsuccess = function(e) {
    const db = e.target.result;
    const transaction = db.transaction(["grades"], "readwrite");
    const store = transaction.objectStore("grades");

    store.clear(); // Clear previous data
    grades.forEach(grade => store.add({ grade }));
    transaction.oncomplete = function() {
      console.log("Grades saved.");
    };
  };
}

// Function to load grades from IndexedDB
function loadGrades() {
  const dbRequest = indexedDB.open("gradebookDB", 1);

  dbRequest.onsuccess = function(e) {
    const db = e.target.result;
    const transaction = db.transaction(["grades"], "readonly");
    const store = transaction.objectStore("grades");
    const gradeRequest = store.getAll();

    gradeRequest.onsuccess = function() {
      grades = gradeRequest.result.map(item => item.grade);
      displayGrades();
      calculateStatistics();
    };
  };
}

// Function to display the grades in the table
function displayGrades() {
  gradeList.innerHTML = "";
  grades.forEach((grade, index) => {
    const row = document.createElement('tr');
    const cellGrade = document.createElement('td');
    const cellLetter = document.createElement('td');

    let gradeClass = '';
    let letterGrade = getLetterGrade(grade);

    if (grade >= 85) {
      gradeClass = 'passing';
    } else if (grade >= 75) {
      gradeClass = 'warning';
    } else if (grade >= 65) {
      gradeClass = 'failing';
    } else {
      gradeClass = 'failing';
    }

    cellGrade.textContent = grade;
    cellLetter.textContent = letterGrade;
    row.classList.add(gradeClass);
    row.appendChild(cellGrade);
    row.appendChild(cellLetter);
    gradeList.appendChild(row);
  });
}

// Function to calculate the average, median, passing, and failing grades
function calculateStatistics() {
  if (grades.length === 0) return;

  // Calculate Average
  const average = grades.reduce((sum, grade) => sum + grade, 0) / grades.length;
  averageGrade.textContent = average.toFixed(2);

  // Calculate Median
  const sortedGrades = [...grades].sort((a, b) => a - b);
  const median = sortedGrades.length % 2 === 0
    ? (sortedGrades[sortedGrades.length / 2 - 1] + sortedGrades[sortedGrades.length / 2]) / 2
    : sortedGrades[Math.floor(sortedGrades.length / 2)];
  medianGrade.textContent = median.toFixed(2);

  // Count Passing and Failing
  const passing = grades.filter(grade => grade >= 85).length;
  const failing = grades.filter(grade => grade < 65).length;
  passingCount.textContent = passing;
  failingCount.textContent = failing;
}

// Function to get the letter grade based on the grade
function getLetterGrade(grade) {
  for (const [letter, range] of Object.entries(gradeScale)) {
    if (grade >= range[0] && grade <= range[1]) {
      return letter;
    }
  }
  return 'F';
}

// Event listener for the grade form
gradeForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const grade = parseInt(gradeInput.value, 10);
  if (!isNaN(grade) && grade >= 0 && grade <= 100) {
    grades.push(grade);
    displayGrades();
    calculateStatistics();
    saveGrades();
  }
  gradeInput.value = ''; // Clear the input field
});

// Reset button to clear gradebook and storage
resetBtn.addEventListener('click', function() {
  grades = [];
  gradeList.innerHTML = '';
  averageGrade.textContent = '0';
  medianGrade.textContent = '0';
  passingCount.textContent = '0';
  failingCount.textContent = '0';

  // Clear data from IndexedDB
  const dbRequest = indexedDB.open("gradebookDB", 1);
  dbRequest.onsuccess = function(e) {
    const db = e.target.result;
    const transaction = db.transaction(["grades"], "readwrite");
    const store = transaction.objectStore("grades");
    store.clear();
  };
});

// Load grades when the page is loaded
window.addEventListener('load', loadGrades);