cgpa-calculator/index.html at main · JoeBuildsThings/cgpa-calculator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>CGPA Calculator | 5.0 Scale for Nigerian Universities</title>
<meta name="description" content="Free CGPA calculator on the 5.0 scale used by Nigerian universities. Tap your grades, see your CGPA, and find out what you need to hit First Class.">
<meta name="theme-color" content="#f3eee3">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800&family=Karla:wght@400;500;700&family=Spline+Sans+Mono:wght@500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a class="skip" href="#sheet">Skip to courses</a>

<header class="score" id="score">
  <div class="score-inner">
    <div class="score-main">
      <p class="tag">Your CGPA</p>
      <p class="num" id="cgpa-value" aria-live="polite">0.00</p>
    </div>
    <div class="score-side">
      <p class="class" id="cgpa-class">Tap Add semester to begin</p>
      <p class="meta"><span id="stat-units">0</span> units &middot; <span id="stat-courses">0</span> courses</p>
      <div class="bar" aria-hidden="true"><span id="bar-fill"></span><i style="left:70%"></i><i style="left:90%"></i></div>
      <div class="bar-key" aria-hidden="true"><span style="left:70%">2:1</span><span style="left:90%">1st</span></div>
    </div>
  </div>
</header>

<main class="page">
  <div class="tools">
    <details class="drawer" id="prior-drawer">
      <summary>Past results <small>add an earlier CGPA</small></summary>
      <div class="drawer-body">
        <div class="pair">
          <label>Past CGPA<input type="number" id="prior-cgpa" inputmode="decimal" min="0" max="5" step="0.01" placeholder="3.85"></label>
          <label>Past units<input type="number" id="prior-units" inputmode="numeric" min="0" max="400" step="1" placeholder="90"></label>
        </div>
        <p class="error" id="prior-error" role="alert" hidden></p>
      </div>
    </details>

    <details class="drawer" id="plan-drawer">
      <summary>Target planner <small>what GPA do I need?</small></summary>
      <div class="drawer-body">
        <div class="pair">
          <label>Target
            <select id="target-select">
              <option value="4.50">First Class 4.50</option>
              <option value="3.50">2:1 Upper 3.50</option>
              <option value="2.40">2:2 Lower 2.40</option>
              <option value="1.50">Third Class 1.50</option>
              <option value="custom">Custom</option>
            </select>
          </label>
          <label>Units left<input type="number" id="next-units" inputmode="numeric" min="1" max="100" step="1" value="24"></label>
        </div>
        <label id="custom-wrap" hidden>Custom target<input type="number" id="custom-target" inputmode="decimal" min="0" max="5" step="0.01" placeholder="4.20"></label>
        <p class="plan" id="plan-result" aria-live="polite">Add some courses first.</p>
      </div>
    </details>

    <details class="drawer">
      <summary>Grade scale <small>score to points</small></summary>
      <div class="drawer-body">
        <table class="scale">
          <thead><tr><th>Score</th><th>Grade</th><th>Points</th></tr></thead>
          <tbody>
            <tr><td>70 to 100</td><td>A</td><td>5.0</td></tr>
            <tr><td>60 to 69</td><td>B</td><td>4.0</td></tr>
            <tr><td>50 to 59</td><td>C</td><td>3.0</td></tr>
            <tr><td>45 to 49</td><td>D</td><td>2.0</td></tr>
            <tr><td>40 to 44</td><td>E</td><td>1.0</td></tr>
            <tr><td>0 to 39</td><td>F</td><td>0.0</td></tr>
          </tbody>
        </table>
      </div>
    </details>
  </div>

  <section class="sheet" id="sheet" aria-label="Semesters">
    <div id="semesters-container"></div>
    <button class="add-sem" id="add-semester-btn" type="button">+ Add semester</button>
    <div class="foot-actions">
      <button class="link" id="copy-btn" type="button">Copy summary</button>
      <button class="link" id="print-btn" type="button">Print</button>
      <button class="link danger" id="reset-btn" type="button">Reset all</button>
    </div>
    <p class="fine">Saved on this device only. Nothing is sent anywhere.</p>
  </section>
</main>

<div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
<script src="script.js" defer></script>
</body>
</html>