Add files via upload

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Prince Solomnon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this Application and associated documentation files (the "Software-Application"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Web-Application, and to permit persons to whom the Application is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,57 +1,53 @@
-# CGP-Calculator
-* This Application help student to calculate their Result Grade   <!-- /*!  * Application Version v5.0.0 (https://github.com/princexz)  * Copyright 2024 The Application Author  * Licensed under MIT (https://github.com/princexz/  CGP_Calculator/blob/master/LICENSE)
-
-* <!-- /*!
-* Application: CGPA Calculator
-* Author: Prince Solomon
-* Year: 2024.
-
-
-* This Application help student to calculate their Result Grade
-
-
-<!-- /*!
- * Application Version v5.0.0 (https://github.com/princexz)
- * Copyright 2024 The Application Author
- * Licensed under MIT (https://github.com/princexz/  CGP_Calculator/blob/master/LICENSE)
- 
- # Chatbot Deployment with Flask and JavaScript
-
-In this tutorial we deploy the chatbot I created in [this](https://github.com/python-engineer/pytorch-chatbot) tutorial with Flask and JavaScript.
-
-This gives 2 deployment options:
-- Deploy within Flask app with jinja2 template
-- Serve only the Flask prediction API. The used html and javascript files can be included in any Frontend application (with only a slight modification) and can run completely separate from the Flask App then.
-
-## Initial Setup:
-This repo currently contains the starter files.
-
-Clone repo and create a virtual environment
-```
-$ git clone https://github.com/princexz/CGP-Calculator.git
-$ cd CGP-Calculator-deployment
-$ python3 -m venv venv
-$ . venv/bin/activate
-```
-Install dependencies
-```
-$ (venv) pip install Flask torch torchvision nltk
-```
-Install nltk package
-```
-$ (venv) python
->>> import nltk
->>> nltk.download('punkt')
-```
-
-Run
-```
-$ (Index) index.html
-```
-This will dump data.pth file. And then run
-the following command to test it in the console.
-```
-```
-## Credits:
-https://github.com/princexz/CGP-Calculator
-
+<!-- /*!
+* Application: CGPA Calculator
+* Author: Prince Solomon
+* Year: 2024.
+
+
+* This Application help student to calculate their Result Grade
+
+
+<!-- /*!
+ * Application Version v5.0.0 (https://github.com/princexz)
+ * Copyright 2024 The Application Author
+ * Licensed under MIT (https://github.com/princexz/  CGP_Calculator/blob/master/LICENSE)
+ 
+ # Chatbot Deployment with Flask and JavaScript
+
+In this tutorial we deploy the chatbot I created in [this](https://github.com/python-engineer/pytorch-chatbot) tutorial with Flask and JavaScript.
+
+This gives 2 deployment options:
+- Deploy within Flask app with jinja2 template
+- Serve only the Flask prediction API. The used html and javascript files can be included in any Frontend application (with only a slight modification) and can run completely separate from the Flask App then.
+
+## Initial Setup:
+This repo currently contains the starter files.
+
+Clone repo and create a virtual environment
+```
+$ git clone https://github.com/princexz/CGP-Calculator.git
+$ cd CGP-Calculator-deployment
+$ python3 -m venv venv
+$ . venv/bin/activate
+```
+Install dependencies
+```
+$ (venv) pip install Flask torch torchvision nltk
+```
+Install nltk package
+```
+$ (venv) python
+>>> import nltk
+>>> nltk.download('punkt')
+```
+
+Run
+```
+$ (Index) index.html
+```
+This will dump data.pth file. And then run
+the following command to test it in the console.
+```
+```
+## Credits:
+https://github.com/princexz/CGP-Calculator

index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> CGPA Calculator </title>
+
+    <!-- Link Styles Section -->
+    <link rel="stylesheet" href="bootstrap.min.css">
+    <link rel="stylesheet" href="styles.css">
+
+</head>
+<body>
+    <div class="wrapper">
+        <img class="content-img" src="images/uniuyo.png" alt="uniuyo">
+        <h1>CGPA Calculator</h1>
+        <div class="form-row">
+            <div class="col">
+                <input id="course-code" class="form-control" type="text" placeholder="Course Code">
+            </div>
+            <div class="col">
+                <input id="unit-load" class="form-control" type="number" placeholder="Unit Load" min="1" max="10">
+            </div>
+            <div class="col">
+                <select id="grade" class="form-control">
+                    <option value="">Grade</option>
+                    <option value="5">A</option>
+                    <option value="4">B</option>
+                    <option value="3">C</option>
+                    <option value="2">D</option>
+                    <option value="1">E</option>
+                    <option value="0">F</option>
+                </select>
+            </div>
+            <div class="col">
+                <input id="add" class="btn btn-primary" type="button" value="Add">
+
+            </div>
+        </div>
+        <table id="table" class="table table-bordered display-none">
+            <thead>
+                <tr>
+                    <th>Course Code</th>
+                    <th>Unit Load</th>
+                    <th>Grade</th>
+                </tr>
+            </thead>
+            <tbody id="tbody">
+
+            </tbody>
+            <tfoot id="tfoot">
+
+            </tfoot>
+        </table>
+        <div class="row">
+            <div class="col">
+                <input id="calc-gp" class="btn btn-success display-none" type="button" value="Calc CGP">
+            </div>
+            <div class="col">
+            <input id="clear" class="btn btn-warning display-none" type="button" value="Clear">
+            </div>
+        </div>
+    </div>
+    <script src="main.js"></script>
+</body>
+</html>

main.js

@@ -0,0 +1,87 @@
+const add = document.querySelector("#add");
+const courseCode = document.querySelector("#course-code");
+const unitLoad = document.querySelector("#unit-load");
+const grade = document.querySelector("#grade");
+const tbody = document.querySelector("#tbody");
+const tfoot = document.querySelector("#tfoot");
+const table = document.querySelector("#table");
+const calcGp = document.querySelector("#calc-gp");
+const clear = document.querySelector("#clear");
+
+// starting of arrays.............
+let gpArry = [];
+
+add.addEventListener("click", () => {
+  if (
+    courseCode.value === "" ||
+    unitLoad.value <= 0 ||
+    grade.selectedIndex === 0
+  ) {
+   alert ("Wrong input,check and try again ...");
+  } else {
+    const tr = document.createElement("tr");
+    const tdCourseCode = document.createElement("td");
+    tdCourseCode.innerHTML = courseCode.value;
+    const tdUnitLoad = document.createElement("td");
+    tdUnitLoad.innerHTML = unitLoad.value;
+    const tdGrade = document.createElement("td");
+    tdGrade.innerHTML = grade.options[grade.selectedIndex].text;
+    tr.appendChild(tdCourseCode);
+    tr.appendChild(tdUnitLoad);
+    tr.appendChild(tdGrade);
+    tbody.appendChild(tr);
+    table.classList.remove("display-none");
+    calcGp.classList.remove("display-none");
+    clear.classList.remove("display-none");
+    gpArry.push({
+      unitLoad: unitLoad.value,
+      grade: grade.options[grade.selectedIndex].value,
+    });
+    console.log(gpArry);
+    courseCode.value = "";
+    unitLoad.value = "";
+    grade.selectedIndex = "0";
+  }
+});
+
+calcGp.addEventListener("click", () => {
+  let unitLoads = 0,
+    productOfUnitLoadsAndGrades = 0,
+    sumOfProductOfUnitLoadsAndGrades = 0;
+
+  gpArry.forEach((result) => {
+    unitLoads += parseInt(result.unitLoad);
+    productOfUnitLoadsAndGrades =
+      parseInt(result.unitLoad) * parseInt(result.grade);
+    sumOfProductOfUnitLoadsAndGrades += productOfUnitLoadsAndGrades;
+  });
+  const tr = document.createElement("tr");
+
+  tdTotalUnitLoad = document.createElement("td");
+  tdTotalUnitLoad.innerHTML = `Your Total Unit Load is : ${unitLoads}`;
+
+  tdGpa = document.createElement("td");
+  tdGpa.setAttribute("colspan", "2");
+  tdGpa.innerHTML = `Your CGPA is : ${(
+    sumOfProductOfUnitLoadsAndGrades / unitLoads
+  ).toFixed(2)} `;
+
+  tr.appendChild(tdTotalUnitLoad);
+  tr.appendChild(tdGpa);
+    if (tfoot.querySelector("tr") !== null) {
+        tfoot.querySelector("tr").remove();
+    }
+  tfoot.appendChild(tr);
+});
+
+clear.addEventListener("click", () => {
+  gpArry = [];
+  tbody.querySelectorAll("*").forEach((child) => child.remove());
+  if (tfoot.querySelector("tr") !== null) {
+    tfoot.querySelector("tr").remove();
+  }
+
+  table.classList.add("display-none");
+  calcGp.classList.add("display-none");
+  clear.classList.add("display-none");
+});

styles.css

@@ -0,0 +1,28 @@
+body{
+    background:#000;color: #fff;
+}
+.wrapper{
+    max-width:90%; margin: 0 auto;
+}
+h1{
+    text-align: center;margin: 20px;
+}
+table{
+    margin-top:30px;
+}
+.display-none{
+    display: none;
+}
+tbody td{
+    text-transform: uppercase;
+}
+.btn-warning:hover{
+    color:#fff ;
+    transition: 0.2s ease-in-out;
+}
+.content-img{
+    display: flex !important;
+    padding-top: 25px;
+    -ms-flex-item-align: center !important;
+    margin: auto;
+}