<h1>7 Wonders Scorecard</h1>
    <div id="scoreCardDiv">
        <form name="wondersCalculator">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Player 1</th>
                        <th>Player 2</th>
                        <th>Player 3</th>
                        <th>Player 4</th>

                    </tr>
                </thead>
                <tbody>
                    <tr class="militaryRow">
                        <td>Military</td>
                        <td><input name="miltaryPlayerOne" id="miltaryPlayerOne" class="scoreInput" type="number" min="0" value="5"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                    </tr>
                    <tr class="armadaRow">
                        <td>Armada</td>
                        <td><input name="armadaPlayerOne" id="armadaPlayerOne" class="scoreInput" type="number" min="0" value="0"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                    <tr class="coinRow">
                        <td>Coins & Minus Points</td>
                        <td><input name="coinPlayerOne" id="coinPlayerOne" class="scoreInput" type="number" min="0" value="0"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                    <tr class="wonderRow">
                        <td>Wonders Board</td>
                        <td><input name="wonderPlayerOne" id="wonderPlayerOne" class="scoreInput" type="number" min="0" value="0"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                    <tr class="blueRow">
                        <td>Blue Cards</td>
                        <td><input name="bluePlayerOne" id="bluePlayerOne" class="scoreInput" type="number" min="0" value="0"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                    <tr class="yellowRow">
                        <td>Yellow Cards</td>
                        <td><input name="yellowPlayerOne" id="yellowPlayerOne" class="scoreInput" type="number" min="0" value="0"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                    <tr class="greenRow">
                        <td>Green Cards</td>
                        <td><input name="greenPlayerOne" id="greenPlayerOne" class="scoreInput" type="number" min="0" value="0"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                    <tr class="purpleRow">
                        <td>Purple Cards</td>
                        <td><input name="purplePlayerOne" id="purplePlayerOne" class="scoreInput" type="number" min="0" value="0"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                    <tr class="boatRow">
                        <td>Boats & Islands</td>
                        <td><input name="boatPlayerOne" id="boatPlayerOne" class="scoreInput" type="number" min="0" value="0"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                    <tr class="leaderRow">
                        <td>Leaders</td>
                        <td><input name="leaderPlayerOne" id="leaderPlayerOne" class="scoreInput" type="number" min="0" value="0"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                    <tr class="blackRow">
                        <td>Black Cards</td>
                        <td><input name="blackPlayerOne" id="blackPlayerOne" class="scoreInput" type="number" min="0" value="10"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>TOTAL</td>
                        <td class="totalScore" id="scorePlayerOne"></td>
                        <td class="totalScore"><p id="scorePlayerTwo">0</p></td>
                        <td><input class="scoreInput" type="number"></td>
                        <td><input class="scoreInput" type="number"></td>

                    </tr>
                </tfoot>
            </table>
        </form>
    </div>

body {
    background-color: beige;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-family: sans-serif;
    font-size: 0.8rem;
}

td,
th {
    border: 1px solid rgb(190, 190, 190);
    padding: 5px 10px;
}

td {
    text-align: center;
}
tfoot {
    background-color: black;
    color: #fff;
}

thead {
    background-color: white;
}

.militaryRow {
    background-color: #e0abb1;
}

.armadaRow {
    background-color: rgb(189, 189, 240);
}

.coinRow {
    background-color: rgb(243, 243, 198);
}

.wonderRow {
    background-color: white;
}

.blueRow {
    background-color: lightblue;
}

.yellowRow {
    background-color: rgb(241, 241, 151);
}

.greenRow {
    background-color: rgb(149, 229, 149);
}

.purpleRow {
    background-color: rgb(173, 141, 204);
}

.boatRow {
    background-color: rgb(155, 224, 217);
}

.leaderRow {
    background-color: white;
}

.blackRow {
    background-color: rgb(163, 154, 154);
}

.totalScore {
    background-color: white;
    color: black;

}
.totalScore p {
    color: black;
}

#scoreCardDiv {
    display: flex;
    margin: 30px;
    max-width: 100%;
}

h1 {
    text-align: center;
}

.scoreInput {
    width: 100px;
}

/*window.onload = function(){
    x = document.querySelector('#scoreCardDiv');

    var militaryOne = document.getElementById("miltaryPlayerOne");
    var armadaOne = document.getElementById("armadaPlayerOne");
    var coinOne = document.getElementById("coinPlayerOne");
    var wonderOne = document.getElementById("wonderPlayerOne");
    var blueOne = document.getElementById("bluePlayerOne");
    var yellowOne = document.getElementById("yellowPlayerOne");
    var greenOne = document.getElementById("greenPlayerOne");
    var purpleOne = document.getElementById("purplePlayerOne");
    var boatOne = document.getElementById("boatPlayerOne");
    var leaderOne = document.getElementById("leaderPlayerOne");
    var blackOne = document.getElementById("blackPlayerOne");
    
    but = document.getElementById("b");
    ScoreOne = document.getElementById("scorePlayerOne");

    but.addEventListener('click', function(){

        ScoreOne.innerHTML = militaryOne.value - - armadaOne.value - - coinOne.value - - wonderOne.value - - blueOne.value - - yellowOne.value - - greenOne.value - - purpleOne.value - - boatOne.value - - leaderOne.value - - blackOne.value;

    });



};
*/

let form = document.forms.wondersCalculator;

form.miltaryPlayerOne.oninput = calculate;
form.armadaPlayerOne.oninput = calculate;
form.coinPlayerOne.oninput = calculate;
form.wonderPlayerOne.oninput = calculate;
form.bluePlayerOne.oninput = calculate;
form.yellowPlayerOne.oninput = calculate;
form.greenPlayerOne.oninput = calculate;
form.purplePlayerOne.oninput = calculate;
form.boatPlayerOne.oninput = calculate;
form.leaderPlayerOne.oninput = calculate;
form.blackPlayerOne.oninput = calculate;

var militaryOne = document.getElementById("miltaryPlayerOne").value;
var armadaOne = document.getElementById("armadaPlayerOne").value;
var coinOne = document.getElementById("coinPlayerOne").value;
var wonderOne = document.getElementById("wonderPlayerOne").value;
var blueOne = document.getElementById("bluePlayerOne").value;
var yellowOne = document.getElementById("yellowPlayerOne").value;
var greenOne = document.getElementById("greenPlayerOne").value;
var purpleOne = document.getElementById("purplePlayerOne").value;
var boatOne = document.getElementById("boatPlayerOne").value;
var leaderOne = document.getElementById("leaderPlayerOne").value;
var blackOne = document.getElementById("blackPlayerOne").value;
var ScorePlayerOne = document.getElementById("scorePlayerOne");



function calculate () {
    result = militaryOne + armadaOne + coinOne + wonderOne + blueOne + yellowOne + greenOne + purpleOne + boatOne+ leaderOne + blackOne;
    
    document.getElementById('scorePlayerOne').innerHTML = result;

};

calculate();

function myFunction() {
    alert(result);
  }