Jb Gradebook by @jowinb - Codewith.it

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

References

valueValore alfanumerico o booleano contenuto in un elemento
<aside>Definisce un contenuto separato dal testo perincipale
<em>Formatta il testo in corsivo/italico enfatizzato
methodDetermina il metodo di invio dei dati di un form al server
<ul>Usato per la creazione di liste non ordinate.
<a>Inserisce link e collegamenti ipertestuali

Users

Log in to search for users

Explore

Find inspiration

Movimento libero JS

tabella con immagine

ximena sanchez JavaScript animati

QUESTA è LA HOMEPAGE V.1

esercitazione simona

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