JSFiddle - React, Tailwind, and code Playground

by amy_clarke5144

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Style.css">
    <script type="text/javascript" src="Script.js"></script>
    <title>CS230Assignment</title>
</head>
<body onload="makeEditable()">
    <table id="myTable" align=center class="tg" onkeyup="checkClicked(); checkValid()">
        <tr>
            <th class="tg-a2cf">Name</th>
            <th class="tg-a2cf">Student ID</th>
            <th class="tg-a2cf" id="-2" ondblclick="highlightCol(id);">Assignment 1</th>
            <th class="tg-on6g">Final Grade</th>
        </tr>
        <tr>
            <td class="tg-h31u" id="1"  ondblclick="highlightRow(id)">-</td>
            <td class="tg-h31u">-</td>
            <td id="tg-1" class="tg-804w">-</td>
            <td id="final1" class="tg-3tbr">-</td>
        </tr>
    </table>
    <div align="center">
        <br>
        <button onclick="getUnsubmitted();setClicked();">Get Final Grades</button>
        <p id="paragraph"></p>
        <button onClick="newRow();makeEditable();">Add row</button>
        <button onClick="newCol();makeEditable();">Add column</button><br><br>
        <button onClick="deleteHighlightRows();">Delete Highlighted Rows</button>
        <button onClick="deleteHighlightCols(); calculateFinal();">Delete Highlighted Columns</button><br><br>
        <button onclick="getCSV();">Save Table</button>
        <button onclick="getCookie();makeEditable();">Load Table</button><br><br>
        <button onclick="loadRow(); makeEditable()">Un-Delete Row</button>
        <button onclick="loadCol(); makeEditable()">Un-Delete Column</button>
        <!textarea title="text area" id="CSV"><!/textarea>
    </div>
</body>
</html>

CSS

h2 {font-family: Arial, sans-serif;}
.tg  {border-collapse:collapse;border-spacing:0;}
div td {font-family:Arial, Helvetica, sans-serif !important;;text-align:center;vertical-align:top}
.tg td{ font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;
    border-style:solid;border-width:1px;overflow:hidden;
    word-break:normal;border-color:black
}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-a2cf{background-color:lightblue;font-weight:bold;font-family:Arial, Helvetica, sans-serif !important;;text-align:center;vertical-align:top}
.tg .tg-3tbr{font-family:Arial, Helvetica, sans-serif !important;;text-align:right;vertical-align:top}
.tg .tg-h31u{font-family:Arial, Helvetica, sans-serif !important;;vertical-align:top}
.tg .tg-8fc1{font-weight:bold;font-family:Arial, Helvetica, sans-serif !important;;vertical-align:top}
.tg .tg-804w {font-family:Arial, Helvetica, sans-serif !important;;text-align:right;vertical-align:top}
.tg .tg-on6g{background-color:blue;font-weight:bold;font-family:Arial, Helvetica, sans-serif !important;;text-align:right;vertical-align:top}
[contendeditable= "true"]{}
p {
    width:10%;
    border-radius: 10px;
    font-family:Arial, sans-serif;
    background-color: lightblue;
}
button {font-family: Arial, sans-serif; border-radius: 10px; background-color: lightblue;}
textarea {font-family:Arial, Helvetica, sans-serif; width: 700px; height: 150px;}
tr #name:hover
{
    background-color: #ffa;
}

JavaScript

var clicked = false;
var count = 1;
var countcol = -2;
var deletedRows = false;
function makeEditable() {
    var x = document.getElementById("myTable").rows.length;
    var y = document.getElementById("myTable").rows[0].cells.length - 1;
    for (var i = 1; i < x; i++) {
        for(var j = 0; j < y; j++){
            document.getElementById("myTable").rows[i].cells[j].contentEditable = true;
            document.getElementById("myTable").rows[i].cells[y].contentEditable = false;
        }
    }
    document.getElementById("myTable").rows[0].cells[y].setAttribute("Class", "tg-on6g");
}
function checkGrade(grade, i, j){
    var temp = document.getElementById("myTable").rows[i].cells[j];
    if(j === document.getElementById("myTable").rows[0].cells.length-1 && grade < 40){
        temp.style.backgroundColor = "red";
        temp.style.color = "white";
    }
    else {
        temp.style.backgroundColor = "white";
        temp.style.color = "black";
    }
}
function calculateFinal(){
    var x = document.getElementById("myTable").rows.length;
    var y = document.getElementById("myTable").rows[0].cells.length;
    for(var i = 1; i < x; i++){
        var result = 0;
        for(var j = 2; j < y-1; j++){
            var temp = document.getElementById("myTable").rows[i].cells[j];
            if(temp.innerHTML === '-'){
                temp.style.backgroundColor = "yellow";
                temp.style.color = "black";
                result += 0;
            }
            else{
                checkGrade(Number(temp.innerHTML), i, j);
                result += Number(temp.innerHTML);
            }
            if(j === y-2){
                result = Math.round(result / (y-3));
                document.getElementById("myTable").rows[i].cells[j+1].innerHTML = (String(result)+"%");
                checkGrade(result, i, j+1);
                result = 0;
            }
        }
    }
}
function checkValid(){
    var x = document.getElementById("myTable").rows.length;
    var...